feat: add Signing status for ConnectModal and update siwe docs (#1305)

* fix: ts error after upgrade wagmi * feat: support signing text when signing * test: add signing text test case * docs: update siwe and sign docs * chore: add changelog * fix: lint issue --------- Co-authored-by: tingzhao.ytz <[email protected]>
ant-design · Dec 26, 2024 · 4c57fe4 · 4c57fe4
1 parent be3ca13
commit 4c57fe4
Show file tree

Hide file tree

Showing 17 changed files with 118 additions and 40 deletions.
diff --git a/.changeset/five-yaks-provide.md b/.changeset/five-yaks-provide.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+fix: Show signing status when signing
diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts
@@ -49,6 +49,7 @@ const localeValues: RequiredLocale = {
       'Select a wallet on the left to get started with a different wallet provider.',
     linkWallet: 'Link',
     walletConnecting: 'Connecting...',
+    walletSigning: 'Signing...',
   },
   NFTCard: {
     actionText: 'Buy Now',

diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts
@@ -46,6 +46,7 @@ const localeValues: RequiredLocale = {
     getWalletTipsDesc: '在左侧选择一个新的钱包开始吧',
     linkWallet: '连接',
     walletConnecting: '连接中...',
+    walletSigning: '签名中...',
   },
   NFTCard: {
     actionText: '立即购买',

diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
@@ -295,6 +295,7 @@ export interface RequiredLocale {
     getWalletTipsDesc: string;
     linkWallet: string;
     walletConnecting: string;
+    walletSigning: string;
   };
   NFTCard: {
     actionText: string;
@@ -349,3 +350,11 @@ export interface SignConfig {
   // signOutOnAccountChange?: boolean; // defaults true
   // signOutOnNetworkChange?: boolean; // defaults true
 }
+
+export type ConnectingStatus = 'signing' | 'connecting';
+
+export type ConnectingStatusConfig =
+  | boolean
+  | {
+      status: ConnectingStatus;
+    };
diff --git a/packages/web3/src/connect-modal/__tests__/connector.test.tsx b/packages/web3/src/connect-modal/__tests__/connector.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ConnectorTriggerProps } from '@ant-design/web3';
-import { Connector } from '@ant-design/web3';
+import { Connector, ConnectStatus, Web3ConfigProvider } from '@ant-design/web3';
 import { metadata_MetaMask } from '@ant-design/web3-assets';
 import { fireEvent, render } from '@testing-library/react';
 import { Button } from 'antd';
@@ -21,39 +21,47 @@ describe('Connect spin', async () => {
       );
     };
 
+    let connectPromiveResolve: (account: Account) => void = () => {};
+
+    const connectPromise = new Promise<Account>((resolve) => {
+      connectPromiveResolve = resolve;
+    });
+
     const App = () => {
       const [account, setAccount] = React.useState<Account>();
       return (
-        <Connector
-          availableWallets={[
-            {
-              ...metadata_MetaMask,
-              hasWalletReady: async () => {
-                return true;
-              },
-              hasExtensionInstalled: async () => {
-                return true;
-              },
+        <Web3ConfigProvider
+          sign={{
+            signIn: () => {
+              return new Promise<void>(() => {});
             },
-          ]}
-          connect={async () =>
-            new Promise((resolve) => {
-              setTimeout(() => {
-                const newAccount = {
-                  address: '0x1234567890123456789012345678901234567890',
-                };
-                setAccount(newAccount);
-                resolve();
-              }, 2000);
-            })
-          }
-          account={account}
-          modalProps={{
-            open: true,
           }}
         >
-          <CustomTrigger />
-        </Connector>
+          <Connector
+            availableWallets={[
+              {
+                ...metadata_MetaMask,
+                hasWalletReady: async () => {
+                  return true;
+                },
+                hasExtensionInstalled: async () => {
+                  return true;
+                },
+              },
+            ]}
+            connect={async () => {
+              const a = await connectPromise;
+              setAccount(a);
+              return a;
+            }}
+            account={account}
+            modalProps={{
+              open: true,
+            }}
+          >
+            <CustomTrigger />
+          </Connector>
+        </Web3ConfigProvider>
       );
     };
 
@@ -65,5 +73,15 @@ describe('Connect spin', async () => {
         baseElement.querySelector('.ant-web3-connect-modal-wallet-connecting')?.textContent,
       ).toBe('Connecting...');
     });
+
+    connectPromiveResolve({
+      address: '0x1234567890123456789012345678901234567890',
+    });
+
+    await vi.waitFor(() => {
+      expect(
+        baseElement.querySelector('.ant-web3-connect-modal-wallet-connecting')?.textContent,
+      ).toBe('Signing...');
+    });
   });
 });
diff --git a/packages/web3/src/connect-modal/components/LinkPanel.tsx b/packages/web3/src/connect-modal/components/LinkPanel.tsx
@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import { Avatar } from 'antd';
 
 import { connectModalContext } from '../context';
+import { ConnectingStatus } from '../interface';
 import MainPanelHeader from './MainPanelHeader';
 import WalletIcon from './WalletIcon';
 
@@ -15,6 +16,9 @@ const LinkPanel: React.FC = () => {
     }
   }, [connecting]);
 
+  const status: ConnectingStatus =
+    typeof connecting === 'object' ? connecting.status : 'connecting';
+
   return (
     <>
       <MainPanelHeader title={`${localeMessage.linkWallet} ${selectedWallet!.name}`} />
@@ -25,7 +29,9 @@ const LinkPanel: React.FC = () => {
           <div className={`${prefixCls}-ripple`} />
           <Avatar size={56} icon={<WalletIcon wallet={selectedWallet!} />} />
         </div>
-        <div className={`${prefixCls}-wallet-connecting`}>{localeMessage.walletConnecting}</div>
+        <div className={`${prefixCls}-wallet-connecting`}>
+          {status === 'connecting' ? localeMessage.walletConnecting : localeMessage.walletSigning}
+        </div>
       </div>
     </>
   );

diff --git a/packages/web3/src/connect-modal/context/index.ts b/packages/web3/src/connect-modal/context/index.ts
@@ -4,7 +4,7 @@ import type { ConnectOptions } from '@ant-design/web3-common';
 import { defaultLocale } from '@ant-design/web3-common';
 
 import type { IntlType } from '../../hooks/useIntl';
-import type { PanelRoute, Wallet } from '../interface';
+import type { ConnectingStatusConfig, PanelRoute, Wallet } from '../interface';
 
 export type ConnectModalContext = {
   prefixCls: string;
@@ -17,7 +17,7 @@ export type ConnectModalContext = {
   canBack: boolean;
   localeMessage: IntlType<'ConnectModal'>['messages'];
   getMessage: IntlType<'ConnectModal'>['getMessage'];
-  connecting?: boolean;
+  connecting?: ConnectingStatusConfig;
 };
 
 export const connectModalContext = React.createContext<ConnectModalContext>({

diff --git a/packages/web3/src/connect-modal/index.md b/packages/web3/src/connect-modal/index.md
@@ -64,7 +64,7 @@ The connection wallet popup, used with [ConnectButton](../connect-button/index.m
 | actionRef | Used to control the component | `MutableRefObject<ConnectModalActionType>` | - | - |
 | defaultSelectedWallet | Default selected wallet | `Wallet` | - | - |
 | locale | Multilingual settings | `Locale["ConnectModal"]` | - | - |
-| connecting | Whether it is connecting | `boolean` | - | - |
+| connecting | Whether it is connecting | `boolean` \| `{ status: 'connecting \| 'signing'}` | - | - |
 | emptyProps | Empty state props | [EmptyProps](https://ant.design/components/empty#api) | `{image: Empty.PRESENTED_IMAGE_SIMPLE, description: "No wallet available"}` | `1.18.0` |
 
 Other modal properties see: [ModalProps](https://ant.design/components/modal#API)

diff --git a/packages/web3/src/connect-modal/index.zh-CN.md b/packages/web3/src/connect-modal/index.zh-CN.md
@@ -65,7 +65,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*dmHOSI_kdd0AAA
 | actionRef | 用于控制组件 | `MutableRefObject<ConnectModalActionType>` | - | - |
 | defaultSelectedWallet | 默认选中的钱包 | `Wallet` | - | - |
 | locale | 多语言设置 | `Locale["ConnectModal"]` | - | - |
-| connecting | 是否正在连接 | `boolean` | - | - |
+| connecting | 是否正在连接 | `boolean` \| `{ status: 'connecting \| 'signing'}` | - | - |
 | emptyProps | 空状态属性 | `EmptyProps` | `{image: Empty.PRESENTED_IMAGE_SIMPLE, description: "未发现任何钱包"}` | `1.18.0` |
 
 其他弹框属性详见： [ModalProps](https://ant.design/components/modal-cn#api)

diff --git a/packages/web3/src/connect-modal/interface.ts b/packages/web3/src/connect-modal/interface.ts
@@ -1,13 +1,20 @@
 import type React from 'react';
 import type {
+  ConnectingStatus,
+  ConnectingStatusConfig,
   ConnectOptions,
   ConnectorTriggerProps,
   Locale,
   Wallet,
 } from '@ant-design/web3-common';
 import type { EmptyProps, ModalProps } from 'antd';
 
-export type { Wallet, WalletExtensionItem } from '@ant-design/web3-common';
+export type {
+  Wallet,
+  WalletExtensionItem,
+  ConnectingStatusConfig,
+  ConnectingStatus,
+} from '@ant-design/web3-common';
 
 /**
  * @desc 新手指引面板的信息项
@@ -141,7 +148,7 @@ export type ConnectModalProps = ModalProps &
      * @desc 连接状态
      * @descEn connect status
      */
-    connecting?: boolean;
+    connecting?: ConnectingStatusConfig;
 
     /**
      * @desc 空状态 Empty props

diff --git a/packages/web3/src/connector/connector.tsx b/packages/web3/src/connector/connector.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 import { ConnectModal, type ConnectModalActionType } from '@ant-design/web3';
-import type { Chain, ConnectOptions, ConnectorTriggerProps, Wallet } from '@ant-design/web3-common';
+import type {
+  Chain,
+  ConnectingStatusConfig,
+  ConnectOptions,
+  ConnectorTriggerProps,
+  Wallet,
+} from '@ant-design/web3-common';
 import { message } from 'antd';
 
 import useProvider from '../hooks/useProvider';
@@ -30,7 +36,7 @@ export const Connector: React.FC<ConnectorProps> = (props) => {
     sign,
   } = useProvider(props);
   const [open, setOpen] = React.useState(false);
-  const [connecting, setConnecting] = React.useState(false);
+  const [connecting, setConnecting] = React.useState<ConnectingStatusConfig>(false);
   const [defaultSelectedWallet, setDefaultSelectedWallet] = React.useState<Wallet>();
   const actionRef = React.useRef<ConnectModalActionType>();
   const [messageApi, contextHolder] = message.useMessage();
@@ -45,6 +51,9 @@ export const Connector: React.FC<ConnectorProps> = (props) => {
       const connectedAccount = await connect?.(wallet, options);
       onConnected?.(connectedAccount ? connectedAccount : undefined);
       if (sign?.signIn && connectedAccount?.address) {
+        setConnecting({
+          status: 'signing',
+        });
         await sign.signIn(connectedAccount?.address);
       }
       setOpen(false);

diff --git a/packages/web3/src/ethereum/index.md b/packages/web3/src/ethereum/index.md
@@ -104,7 +104,7 @@ When the `showQrModal` configuration is not `false`, the built-in [web3modal](ht
 | reconnectOnMount | Whether or not to reconnect previously connected [connectors](https://wagmi.sh/react/api/createConfig#connectors) on mount. | `boolean` \| `undefined` | `true` | - |
 | walletConnect | WalletConnect configuration | `false` \| [WalletConnectOptions](#walletconnectoptions) | - | `2.8.0` |
 | transports | [Transport](https://wagmi.sh/core/api/createConfig#transports) configuration | `Transport` | - | `2.8.0` |
-| siwe | [SIWEConfig](#siweconfig) | CreateSiweMessageParameters | - | - |
+| siwe | [SIWEConfig](#siweconfig) | CreateSiweMessageParameters | - | `2.10.0` |
 
 ### WalletFactory
 

diff --git a/packages/web3/src/ethereum/index.zh-CN.md b/packages/web3/src/ethereum/index.zh-CN.md
@@ -103,7 +103,7 @@ SIWE 是指 Sign-In with Ethereum，你的网站可以通过签名来验证用
 | reconnectOnMount | 是否在组件挂载时重新连接之前已连接的[连接器](https://wagmi.sh/react/api/createConfig#connectors) | `boolean` \| `undefined` | `true` | - |
 | walletConnect | walletConnect 的配置 | `false` \| [WalletConnectOptions](#walletconnectoptions) | - | `2.8.0` |
 | transports | [Transport](https://wagmi.sh/core/api/createConfig#transports) 网关配置 | `Record<number, Transport>;` | - | `2.8.0` |
-| siwe | [SIWEConfig](#siweconfig) | CreateSiweMessageParameters | - | - |
+| siwe | [SIWEConfig](#siweconfig) | CreateSiweMessageParameters | - | `2.10.0` |
 
 ### EIP6963Config
 

diff --git a/packages/web3/src/types/index.md b/packages/web3/src/types/index.md
@@ -86,12 +86,19 @@ This is an enum type that contains the IDs of some commonly used chains. Its val
 | trait_type | The type of the attribute representing the characteristic type of the NFT. | `string` | - | - |
 | value | The value of the attribute representing the characteristic of the NFT. | `string` | - | - |
 
-## ConnectOptions
+### ConnectOptions
 
 | Property    | Description     | Type                      | Default | Version |
 | ----------- | --------------- | ------------------------- | ------- | ------- |
 | connectType | Connection type | `'extension' \| 'qrCode'` | -       | -       |
 
+## SignConfig
+
+| Property | Description | Type                                  | Default | Version |
+| -------- | ----------- | ------------------------------------- | ------- | ------- |
+| signIn   | Sign In     | `(address: string) => Promise<void>;` | -       | -       |
+| signOut  | Sign Out    | `() => Promise<void>;`                | -       | -       |
+
 ## UniversalWeb3ProviderInterface
 
 | Property | Description | Type | Default | Version |
@@ -104,6 +111,7 @@ This is an enum type that contains the IDs of some commonly used chains. Its val
 | disconnect | Disconnect from the chain | `() => Promise<void>` | - | - |
 | switchChain | Switch to another chain | `(chainId: ChainIds) => Promise<void>` | - | - |
 | getNFTMetadata | Get the metadata of the NFT | `(contractAddress: string, tokenId?: string) => Promise<NFTMetadata>` | - | - |
+| sign | Sign-in configuration | [SignConfig](#signconfig) | - | `1.20.0` |
 
 ## Token
 

diff --git a/packages/web3/src/types/index.zh-CN.md b/packages/web3/src/types/index.zh-CN.md
@@ -93,6 +93,13 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*n4F2RK3AVTsAAA
 | ----------- | -------- | ------------------------- | ------ | ---- |
 | connectType | 连接类型 | `'extension' \| 'qrCode'` | -      | -    |
 
+## SignConfig
+
+| 属性    | 描述     | 类型                                  | 默认值 | 版本 |
+| ------- | -------- | ------------------------------------- | ------ | ---- |
+| signIn  | 签名登录 | `(address: string) => Promise<void>;` | -      | -    |
+| signOut | 签名登出 | `() => Promise<void>;`                | -      | -    |
+
 ## UniversalWeb3ProviderInterface
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |
@@ -105,6 +112,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*n4F2RK3AVTsAAA
 | disconnect | 断开钱包连接 | `() => Promise<void>` | - | - |
 | switchChain | 切换链 | `(chain: Chain) => Promise<void>` | - | - |
 | getNFTMetadata | 获取 NFT 的元数据 | `(params: { address: string; tokenId?: bigint \| number }) => Promise<NFTMetadata>` | - | - |
+| sign | 签名登录相关配置 | `SignConfig` | - | `1.20.0` |
 
 ## Token
 

diff --git a/packages/web3/src/web3-config-provider/index.md b/packages/web3/src/web3-config-provider/index.md
@@ -34,3 +34,6 @@ Provide global configuration and states for components.
 | disconnect | Disconnect from the chain | `() => Promise<void>` | - |  |
 | switchChain | Switch to another chain | `(chain: Chain) => Promise<void>` | - |  |
 | getNFTMetadata | Get the metadata of the NFT | `(params: { address: string; tokenId: bigint }) => Promise<NFTMetadata>;` | - |  |
+| sign | Sign-in configuration | [SignConfig](/components/types#signconfig) | - | `1.20.0` |
+
+`Web3ConfigProvider` API inherits from [UniversalWeb3ProviderInterface](/components/types#universalweb3providerinterface), providing chain-related interaction interfaces for UI components.
diff --git a/packages/web3/src/web3-config-provider/index.zh-CN.md b/packages/web3/src/web3-config-provider/index.zh-CN.md
@@ -35,3 +35,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*DuEdT5NT9nwAAA
 | disconnect | 断开连接 | `() => Promise<void>` | - |  |
 | switchChain | 切换链 | `(chain: Chain) => Promise<void>` | - |  |
 | getNFTMetadata | 获取 NFT 元数据 | `(params: { address: string; tokenId: bigint }) => Promise<NFTMetadata>;` | - |  |
+| sign | 签名登录配置 | [SignConfig](/components/types-cn#signconfig) | - | `1.20.0` |
+
+`Web3ConfigProvider` 的 API 继承了 [UniversalWeb3ProviderInterface](/components/types-cn#universalweb3providerinterface)，为 UI 组件提供链相关交互接口。