feat: add siwe (#1214)

* feat: add swie * feat: refactor sign siwe * feat: add sign btn text render * fix: add account status & signIn from provider * fix: console * feat: 添加 siwe provider * chore: update test * chore: add changeset * docs: update wagmi docs * fix: test * fix: remove siwe provider * chore: use wagmi base mock config * feat: opt * chore: update test * chore: merge main * fix: update test * chore: delete comment * chore: update render text
ant-design · Dec 24, 2024 · ad278cd · ad278cd
1 parent cd6f866
commit ad278cd
Show file tree

Hide file tree

Showing 26 changed files with 702 additions and 241 deletions.
diff --git a/.changeset/friendly-pandas-burn.md b/.changeset/friendly-pandas-burn.md
@@ -0,0 +1,7 @@
+---
+'@ant-design/web3-common': minor
+'@ant-design/web3-wagmi': minor
+'@ant-design/web3': minor
+---
+
+feat: wagmi add siwe config
diff --git a/packages/common/src/locale/en_US.ts b/packages/common/src/locale/en_US.ts
@@ -8,6 +8,7 @@ const localeValues: RequiredLocale = {
     copied: 'Copied!',
     walletAddress: 'Wallet address',
     moreWallets: 'More Wallets',
+    sign: 'Sign',
   },
   ConnectModal: {
     title: 'Connect Wallet',

diff --git a/packages/common/src/locale/zh_CN.ts b/packages/common/src/locale/zh_CN.ts
@@ -8,6 +8,7 @@ const localeValues: RequiredLocale = {
     copied: '复制成功！',
     walletAddress: '钱包地址',
     moreWallets: '更多钱包',
+    sign: '签名',
   },
   ConnectModal: {
     title: '连接钱包',

diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts
@@ -1,8 +1,15 @@
+export const enum ConnectStatus {
+  Connected = 'connected',
+  Disconnected = 'disconnected',
+  Signed = 'signed',
+}
+
 export interface Account {
   address: string;
   name?: string;
   avatar?: string;
-  addresses?: readonly [`0x${string}`, ...`0x${string}`[]];
+  addresses?: [`0x${string}`, ...`0x${string}`[]] | readonly `0x${string}`[];
+  status?: ConnectStatus;
 }
 
 export enum ChainIds {
@@ -119,6 +126,9 @@ export interface UniversalWeb3ProviderInterface {
 
   // For Bitcoin, tokenId is undefined.
   getNFTMetadata?: (params: { address: string; tokenId?: bigint }) => Promise<NFTMetadata>;
+
+  // For Sign
+  sign?: SignConfig;
 }
 
 export interface Wallet extends WalletMetadata {
@@ -247,6 +257,7 @@ export interface RequiredLocale {
     copied: string;
     walletAddress: string;
     moreWallets: string;
+    sign: string;
   };
   ConnectModal: {
     title: string;
@@ -328,3 +339,13 @@ export type Token = {
     contract?: string;
   }[];
 };
+
+export interface SignConfig {
+  // required
+  signIn: (address: string) => Promise<void>;
+  signOut?: () => Promise<void>;
+
+  // signOutOnDisconnect?: boolean; // defaults true
+  // signOutOnAccountChange?: boolean; // defaults true
+  // signOutOnNetworkChange?: boolean; // defaults true
+}
diff --git a/packages/common/src/web3-config-provider/index.tsx b/packages/common/src/web3-config-provider/index.tsx
@@ -8,7 +8,6 @@ const ProviderChildren: React.FC<
   ConfigConsumerProps & { children?: React.ReactNode; parentContext?: ConfigConsumerProps }
 > = (props) => {
   const { children, parentContext, ...rest } = props;
-
   const config = { ...parentContext };
 
   Object.keys(rest).forEach((key) => {

diff --git a/packages/wagmi/src/interface.ts b/packages/wagmi/src/interface.ts
@@ -6,6 +6,7 @@ import type {
   WalletMetadata,
 } from '@ant-design/web3-common';
 import type { Chain as WagmiChain } from 'viem';
+import type { CreateSiweMessageParameters } from 'viem/siwe';
 import type { Connector, CreateConnectorFn } from 'wagmi';
 
 export interface WalletUseInWagmiAdapter extends Wallet {
@@ -31,3 +32,9 @@ export interface WalletFactory {
 export type EIP6963Config = boolean | UniversalEIP6963Config;
 
 export type ChainAssetWithWagmiChain = Chain & { wagmiChain?: WagmiChain };
+
+export interface SIWEConfig {
+  getNonce: (address: string, chainId?: number) => Promise<string>;
+  createMessage: (args: CreateSiweMessageParameters) => string;
+  verifyMessage: (message: string, signature: string) => Promise<boolean>;
+}
diff --git a/packages/wagmi/src/wagmi-provider/__mocks__/wagmiBaseMock.ts b/packages/wagmi/src/wagmi-provider/__mocks__/wagmiBaseMock.ts
@@ -0,0 +1,28 @@
+import { mainnet } from 'wagmi/chains';
+
+const mockConnector = {
+  name: 'MetaMask',
+};
+
+export const wagmiBaseMock = {
+  useAccount: () => {
+    return {
+      chain: mainnet,
+      address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
+      connector: mockConnector,
+    };
+  },
+  useConfig: () => ({}),
+  useBalance: () => ({ data: {} }),
+  useSwitchChain: () => ({ switchChain: () => {} }),
+  useConnect: () => ({
+    connectors: [mockConnector],
+    connectAsync: async () => ({}),
+  }),
+  useDisconnect: () => ({
+    disconnectAsync: () => {},
+  }),
+  useEnsName: () => ({ data: null }),
+  useEnsAvatar: () => ({ data: null }),
+  useSignMessage: () => ({ signMessageAsync: async () => 'signMessage' }),
+};
diff --git a/packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type * as Wagmi from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { wagmiBaseMock } from '../__mocks__/wagmiBaseMock';
 import { MetaMask } from '../../wallets';
 import { AntDesignWeb3ConfigProvider } from '../config-provider';
 
@@ -21,32 +22,8 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof Wagmi>();
   return {
     ...actual,
-    useConfig: () => {
-      return {};
-    },
+    ...wagmiBaseMock,
     // https://wagmi.sh/react/hooks/useAccount
-    useAccount: () => {
-      return {
-        chain: mainnet,
-        address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
-        connector: mockConnector,
-      };
-    },
-    useConnect: () => {
-      return {
-        connectors: [mockConnector],
-      };
-    },
-    useDisconnect: () => {
-      return {
-        disconnectAsync: () => {},
-      };
-    },
-    useSwitchChain: () => {
-      return {
-        switchChain: () => {},
-      };
-    },
     useBalance: () => {
       return {
         data: {
@@ -56,8 +33,6 @@ vi.mock('wagmi', async (importOriginal) => {
         },
       };
     },
-    useEnsName: () => ({}),
-    useEnsAvatar: () => ({}),
   };
 });
 

diff --git a/packages/wagmi/src/wagmi-provider/__tests__/connect-with-universal-wallet.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/connect-with-universal-wallet.test.tsx
@@ -8,6 +8,7 @@ import type { Connector, Config as WagmiConfig } from 'wagmi';
 import type * as Wagmi from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { wagmiBaseMock } from '../__mocks__/wagmiBaseMock';
 import { TokenPocket } from '../../wallets';
 import { AntDesignWeb3ConfigProvider } from '../config-provider';
 
@@ -37,9 +38,7 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof Wagmi>();
   return {
     ...actual,
-    useConfig: () => {
-      return {};
-    },
+    ...wagmiBaseMock,
     useAccount: () => {
       const [connected, setConnected] = React.useState(false);
       useEffect(() => {
@@ -72,16 +71,6 @@ vi.mock('wagmi', async (importOriginal) => {
         },
       };
     },
-    useSwitchChain: () => {
-      return {
-        switchChain: () => {},
-      };
-    },
-    useBalance: () => {
-      return { data: {} };
-    },
-    useEnsName: () => ({ data: null }),
-    useEnsAvatar: () => ({ data: null }),
   };
 });
 

diff --git a/packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx
@@ -8,6 +8,7 @@ import type { Connector, Config as WagmiConfig } from 'wagmi';
 import type * as Wagmi from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { wagmiBaseMock } from '../__mocks__/wagmiBaseMock';
 import { MetaMask } from '../../wallets';
 import { AntDesignWeb3ConfigProvider } from '../config-provider';
 
@@ -32,9 +33,7 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof Wagmi>();
   return {
     ...actual,
-    useConfig: () => {
-      return {};
-    },
+    ...wagmiBaseMock,
     // https://wagmi.sh/react/hooks/useAccount
     useAccount: () => {
       const [connected, setConnected] = React.useState(false);
@@ -73,16 +72,6 @@ vi.mock('wagmi', async (importOriginal) => {
         },
       };
     },
-    useSwitchChain: () => {
-      return {
-        switchChain: () => {},
-      };
-    },
-    useBalance: () => {
-      return {};
-    },
-    useEnsName: () => ({}),
-    useEnsAvatar: () => ({}),
   };
 });
 

diff --git a/packages/wagmi/src/wagmi-provider/__tests__/ens.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/ens.test.tsx
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type * as Wagmi from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { wagmiBaseMock } from '../__mocks__/wagmiBaseMock';
 import { MetaMask } from '../../wallets';
 import { AntDesignWeb3ConfigProvider } from '../config-provider';
 
@@ -19,9 +20,7 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof Wagmi>();
   return {
     ...actual,
-    useConfig: () => {
-      return {};
-    },
+    ...wagmiBaseMock,
     // https://wagmi.sh/react/hooks/useAccount
     useAccount: () => {
       return {
@@ -30,27 +29,6 @@ vi.mock('wagmi', async (importOriginal) => {
         address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
       };
     },
-    useConnect: () => {
-      return {
-        connectors: [],
-        connectAsync: async () => {
-          return {};
-        },
-      };
-    },
-    useDisconnect: () => {
-      return {
-        disconnectAsync: () => {},
-      };
-    },
-    useSwitchChain: () => {
-      return {
-        switchChain: () => {},
-      };
-    },
-    useBalance: () => {
-      return {};
-    },
     useEnsName: ({ address }: { address: string }) => {
       if (address === '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B') {
         return { data: 'wanderingearth.eth' };

diff --git a/packages/wagmi/src/wagmi-provider/__tests__/nft.test.tsx b/packages/wagmi/src/wagmi-provider/__tests__/nft.test.tsx
@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from 'vitest';
 import type * as Wagmi from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 
+import { wagmiBaseMock } from '../__mocks__/wagmiBaseMock';
 import { MetaMask } from '../../wallets';
 import { AntDesignWeb3ConfigProvider } from '../config-provider';
 
@@ -20,9 +21,7 @@ vi.mock('wagmi', async (importOriginal) => {
   const actual = await importOriginal<typeof Wagmi>();
   return {
     ...actual,
-    useConfig: () => {
-      return {};
-    },
+    ...wagmiBaseMock,
     // https://wagmi.sh/react/hooks/useAccount
     useAccount: () => {
       return {
@@ -31,29 +30,6 @@ vi.mock('wagmi', async (importOriginal) => {
         address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
       };
     },
-    useConnect: () => {
-      return {
-        connectors: [],
-        connectAsync: async () => {
-          return {};
-        },
-      };
-    },
-    useDisconnect: () => {
-      return {
-        disconnectAsync: () => {},
-      };
-    },
-    useSwitchChain: () => {
-      return {
-        switchChain: () => {},
-      };
-    },
-    useBalance: () => {
-      return {};
-    },
-    useEnsName: () => ({}),
-    useEnsAvatar: () => ({}),
   };
 });