feat: refactor sign siwe

Author: LCJove

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',

packages/common/src/locale/zh_CN.ts

@@ -8,6 +8,7 @@ const localeValues: RequiredLocale = {
     copied: '复制成功！',
     walletAddress: '钱包地址',
     moreWallets: '更多钱包',
+    sign: '签名',
   },
   ConnectModal: {
     title: '连接钱包',

packages/common/src/types.ts

@@ -1,5 +1,3 @@
-import { type CreateSiweMessageParameters } from 'viem/siwe';
-
 export interface Account {
   address: string;
   name?: string;
@@ -121,7 +119,9 @@ export interface UniversalWeb3ProviderInterface {
 
   // For Bitcoin, tokenId is undefined.
   getNFTMetadata?: (params: { address: string; tokenId?: bigint }) => Promise<NFTMetadata>;
-  swie?: SWIEConfig;
+
+  // For Sign
+  sign?: SignConfig;
 }
 
 export interface Wallet extends WalletMetadata {
@@ -250,6 +250,7 @@ export interface RequiredLocale {
     copied: string;
     walletAddress: string;
     moreWallets: string;
+    sign: string;
   };
   ConnectModal: {
     title: string;
@@ -333,21 +334,11 @@ export type Token = {
 
 export interface SignConfig {
   // required
-  signIn: (options: { address: string; chainId: number }) => Promise<void>;
-  signOut: () => Promise<void>;
+  signIn: (address: string, chain?: number) => Promise<void>;
+  signOut?: () => Promise<void>;
 
   // WIP: optional
   // signOutOnDisconnect?: boolean; // defaults true
   // signOutOnAccountChange?: boolean; // defaults true
   // signOutOnNetworkChange?: boolean; // defaults true
 }
-
-export interface SWIEConfig {
-  getNonce: (address: string, chainId?: number) => Promise<string>;
-  createMessage: (args: CreateSiweMessageParameters) => string;
-  verifyMessage: (message: string, signature: string) => Promise<boolean>;
-
-  // WIP: optional
-  // getSession?: () => Promise<SIWESession | null>;
-  // signOut?: () => Promise<boolean>;
-}

packages/common/src/web3-config-provider/context.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import defaultLocale from '../locale/default';
-import type { Locale, RequiredLocale, UniversalWeb3ProviderInterface } from '../types';
+import type { Locale, RequiredLocale, SignConfig, UniversalWeb3ProviderInterface } from '../types';
 
 export interface Web3ConfigProviderProps extends UniversalWeb3ProviderInterface {
   children?: React.ReactNode;

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,13 @@ 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>;
+
+  // WIP: optional
+  // getSession?: () => Promise<SIWESession | null>;
+  // signOut?: () => Promise<boolean>;
+}

packages/wagmi/src/wagmi-provider/config-provider.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 import {
-  SWIEConfig,
   Web3ConfigProvider,
   type Account,
   type Chain,
   type Locale,
   type Wallet,
 } from '@ant-design/web3-common';
+import { message } from 'antd';
 import type { Config as WagmiConfig } from 'wagmi';
 import {
   useAccount,
@@ -15,15 +15,22 @@ import {
   useConnect,
   useEnsAvatar,
   useEnsName,
+  useSignMessage,
   useSwitchChain,
   type Connector as WagmiConnector,
 } from 'wagmi';
 import { disconnect, getAccount } from 'wagmi/actions';
 
-import type { EIP6963Config, WalletFactory, WalletUseInWagmiAdapter } from '../interface';
+import type {
+  EIP6963Config,
+  SIWEConfig,
+  WalletFactory,
+  WalletUseInWagmiAdapter,
+} from '../interface';
 import { isEIP6963Connector } from '../utils';
 import { EIP6963Wallet } from '../wallets/eip6963';
 import { getNFTMetadata } from './methods';
+import { Mainnet } from '/packages/assets/src';
 
 export interface AntDesignWeb3ConfigProviderProps {
   chainAssets: Chain[];
@@ -35,7 +42,7 @@ export interface AntDesignWeb3ConfigProviderProps {
   eip6963?: EIP6963Config;
   wagimConfig: WagmiConfig;
   useWalletConnectOfficialModal?: boolean;
-  swie?: SWIEConfig;
+  siwe?: SIWEConfig;
 }
 
 export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderProps> = (props) => {
@@ -49,7 +56,7 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
     eip6963,
     wagimConfig,
     useWalletConnectOfficialModal,
-    swie,
+    siwe,
   } = props;
   const { address, isDisconnected, chain } = useAccount();
   const config = useConfig();
@@ -58,6 +65,8 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
   const { data: balanceData } = useBalance({ address });
   const { data: ensName } = useEnsName({ address });
   const { data: ensAvatar } = useEnsAvatar({ name: ensName ?? undefined });
+  const { signMessageAsync } = useSignMessage();
+
   const account: Account | undefined =
     address && !isDisconnected
       ? {
@@ -189,13 +198,52 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
     [chain?.id],
   );
 
+  const signIn = React.useCallback(
+    async (signAddress: string, currentChainId?: number) => {
+      if (!siwe) return;
+      const { getNonce, createMessage, verifyMessage } = siwe;
+      if (!signAddress) {
+        throw new Error('Please connect wallet first.');
+      }
+
+      // get nonce
+      const nonce = await getNonce?.(signAddress);
+      if (!nonce) {
+        throw new Error('Failed to get nonce.');
+      }
+
+      let msg: string;
+      let signature: `0x${string}`;
+
+      try {
+        msg = createMessage({
+          domain: window.location.hostname,
+          address: signAddress as `0x${string}`,
+          uri: window.location.origin,
+          nonce,
+          // Default config
+          version: '1',
+          chainId: currentChainId ?? Mainnet.id,
+        });
+        signature = await signMessageAsync({ message: msg });
+        console.log('get signature', signature);
+        await verifyMessage(msg!, signature!);
+      } catch (error: any) {
+        throw new Error(error.message);
+      }
+    },
+    [siwe, signMessageAsync],
+  );
+
   return (
     <Web3ConfigProvider
       locale={locale}
       availableChains={chainList}
       chain={currentChain}
       account={account}
-      swie={swie}
+      sign={{
+        signIn,
+      }}
       balance={
         balance
           ? {

packages/wagmi/src/wagmi-provider/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { Locale, SWIEConfig } from '@ant-design/web3-common';
+import type { Locale } from '@ant-design/web3-common';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { Transport, Chain as WagmiChain } from 'viem';
 import { createConfig, http, WagmiProvider } from 'wagmi';
@@ -10,7 +10,12 @@ import type { WalletConnectParameters } from 'wagmi/connectors';
 
 // Built in popular chains
 import { Mainnet } from '../chains';
-import type { ChainAssetWithWagmiChain, EIP6963Config, WalletFactory } from '../interface';
+import type {
+  ChainAssetWithWagmiChain,
+  EIP6963Config,
+  SIWEConfig,
+  WalletFactory,
+} from '../interface';
 import { AntDesignWeb3ConfigProvider } from './config-provider';
 
 export interface WalletConnectOptions
@@ -40,7 +45,7 @@ export interface WagmiWeb3ConfigProviderProps {
   reconnectOnMount?: boolean;
   walletConnect?: false | WalletConnectOptions;
   transports?: Record<number, Transport>;
-  swie?: SWIEConfig;
+  siwe?: SIWEConfig;
 }
 
 export function WagmiWeb3ConfigProvider({
@@ -55,7 +60,7 @@ export function WagmiWeb3ConfigProvider({
   eip6963,
   walletConnect,
   transports,
-  swie,
+  siwe,
   ...restProps
 }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement {
   // When user custom config, add Mainnet by default
@@ -139,7 +144,7 @@ export function WagmiWeb3ConfigProvider({
           balance={balance}
           eip6963={eip6963}
           wagimConfig={wagmiConfig}
-          swie={swie}
+          siwe={siwe}
           useWalletConnectOfficialModal={
             typeof walletConnect === 'object' && walletConnect?.useWalletConnectOfficialModal
           }

packages/web3/src/connect-button/connect-button.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { CopyOutlined, LoginOutlined, UserOutlined } from '@ant-design/icons';
-import type { Chain, Wallet } from '@ant-design/web3-common';
+import { ConfigContext, type Chain, type Wallet } from '@ant-design/web3-common';
 import type { ButtonProps } from 'antd';
 import { Avatar, ConfigProvider, Divider, Dropdown, message } from 'antd';
 import classNames from 'classnames';
@@ -13,7 +13,12 @@ import { fillWithPrefix, writeCopyText } from '../utils';
 import { ChainSelect } from './chain-select';
 import type { ChainSelectProps } from './chain-select';
 import { ConnectButtonInner } from './connect-button-inner';
-import type { ConnectButtonProps, ConnectButtonTooltipProps, MenuItemType } from './interface';
+import {
+  ConnectButtonStatus,
+  type ConnectButtonProps,
+  type ConnectButtonTooltipProps,
+  type MenuItemType,
+} from './interface';
 import type { ProfileModalProps } from './profile-modal';
 import { ProfileModal } from './profile-modal';
 import { useStyle } from './style';
@@ -40,6 +45,8 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     locale,
     quickConnect,
     addressPrefix: addressPrefixProp,
+    connectStatus,
+    onConnectStatusChange,
     ...restProps
   } = props;
   const intl = useIntl('ConnectButton', locale);
@@ -50,8 +57,11 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
   const { wrapSSR, hashId } = useStyle(prefixCls);
   const [messageApi, contextHolder] = message.useMessage();
   const [showMenu, setShowMenu] = useState(false);
+  const { sign } = React.useContext(ConfigContext);
 
+  const needSign = sign?.signIn && connectStatus === 'connected' && account;
   let buttonText: React.ReactNode = intl.getMessage(intl.messages.connect);
+
   if (account) {
     buttonText =
       account?.name && !balance ? (
@@ -68,19 +78,36 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
       );
   }
 
+  if (needSign) {
+    buttonText = (
+      <>
+        {`${intl.getMessage(intl.messages.sign)}: `}:{buttonText}
+      </>
+    );
+  }
+
   const buttonProps: ButtonProps = {
     style: props.style,
     size: props.size,
     type: props.type,
     ghost: props.ghost,
     loading,
     className: classNames(className, prefixCls, hashId),
-    onClick: (e) => {
+    onClick: async (e) => {
       setShowMenu(false);
-      if (account && !profileOpen && profileModal) {
+      if (account && !profileOpen && profileModal && !needSign) {
         setProfileOpen(true);
       }
       onClick?.(e);
+
+      try {
+        if (needSign) {
+          await sign?.signIn?.(account?.address, chain?.id);
+          onConnectStatusChange?.(ConnectButtonStatus.Signed);
+        }
+      } catch (error: any) {
+        messageApi.error(error.message);
+      }
     },
     ...restProps,
   };

packages/web3/src/connect-button/interface.ts

@@ -4,6 +4,12 @@ import type { AvatarProps, ButtonProps, GetProp, MenuProps, TooltipProps } from
 import type { AddressProps } from '../address';
 import type { ProfileModalProps } from './profile-modal';
 
+export const enum ConnectButtonStatus {
+  Connected = 'connected',
+  Disconnected = 'disconnected',
+  Signed = 'signed',
+}
+
 export type MenuItemType = Extract<GetProp<MenuProps, 'items'>[number], { type?: 'item' }>;
 
 export type ConnectButtonTooltipProps = TooltipProps & {
@@ -18,6 +24,8 @@ export type ConnectButtonProps = ButtonProps &
     prefixCls?: string;
     locale?: Locale['ConnectButton'];
     avatar?: AvatarProps;
+    connectStatus?: ConnectButtonStatus;
+    onConnectStatusChange?: (status: ConnectButtonStatus) => void;
     onMenuItemClick?: (e: NonNullable<MenuProps['items']>[number]) => void;
     tooltip?: boolean | ConnectButtonTooltipProps;
     profileModal?: boolean | ProfileModalProps['modalProps'];