feat: support sign status

Author: gin-lsl

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

@@ -238,6 +238,10 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
     [siwe, currentChain, signMessageAsync],
   );
 
+  const signOut = async () => {
+    console.log('call_signOut');
+  };
+
   return (
     <Web3ConfigProvider
       locale={locale}
@@ -247,6 +251,7 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
       sign={
         siwe && {
           signIn,
+          signOut,
         }
       }
       balance={

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

@@ -1,6 +1,6 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { MoreOutlined } from '@ant-design/icons';
-import type { Wallet } from '@ant-design/web3-common';
+import { ConnectStatus, type Account, type Wallet } from '@ant-design/web3-common';
 import type { ButtonProps, MenuProps } from 'antd';
 import { Button, ConfigProvider, Dropdown, Space } from 'antd';
 import classNames from 'classnames';
@@ -13,7 +13,10 @@ export interface ConnectButtonInnerProps extends ButtonProps {
   preContent: React.ReactNode;
   showQuickConnect?: boolean;
   availableWallets?: Wallet[];
+  needSign?: boolean;
   onConnectClick?: (wallet?: Wallet) => void;
+  onDisconnectClick?: () => void;
+  onOpenProfileClick?: () => void;
   intl: IntlType;
 }
 
@@ -26,25 +29,31 @@ export const ConnectButtonInner: React.FC<ConnectButtonInnerProps> = (props) =>
     children,
     onClick,
     onConnectClick,
+    onDisconnectClick,
+    onOpenProfileClick,
     intl,
     __hashId__,
     className,
+    needSign,
     ...restProps
   } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('web3-connect-button');
   const [firstInstallWallet, setFirstInstallWallet] = useState<Wallet | undefined>(undefined);
   const [items, setItems] = useState<MenuProps['items']>([]);
 
-  const getWalletIcon = (wallet: Wallet) => {
-    const icon = wallet.icon;
+  const getWalletIcon = useCallback(
+    (wallet: Wallet) => {
+      const icon = wallet.icon;
 
-    return (
-      <span className={classNames(__hashId__, `${prefixCls}-quick-connect-icon`)}>
-        {typeof icon === 'string' ? <img src={icon} alt={`${wallet.name} Icon`} /> : icon}
-      </span>
-    );
-  };
+      return (
+        <span className={classNames(__hashId__, `${prefixCls}-quick-connect-icon`)}>
+          {typeof icon === 'string' ? <img src={icon} alt={`${wallet.name} Icon`} /> : icon}
+        </span>
+      );
+    },
+    [__hashId__, prefixCls],
+  );
 
   const generateQuickConnectItems = async (wallets: Wallet[] = []) => {
     if (!showQuickConnect) {
@@ -100,23 +109,45 @@ export const ConnectButtonInner: React.FC<ConnectButtonInnerProps> = (props) =>
     generateQuickConnectItems(availableWallets);
   }, [availableWallets, showQuickConnect]);
 
-  const buttonContent =
-    showQuickConnect && firstInstallWallet ? (
-      <Dropdown.Button
-        {...restProps}
-        menu={{
-          items,
-        }}
-        className={classNames(className, `${prefixCls}-quick-connect`)}
-        onClick={(e) => {
-          onClick?.(e);
-          onConnectClick?.(firstInstallWallet);
-        }}
-      >
-        {children}
-        {getWalletIcon(firstInstallWallet)}
-      </Dropdown.Button>
-    ) : (
+  const buttonContent = useMemo(() => {
+    // if ( account?.status === ConnectStatus.Connected) {
+    if (needSign) {
+      return (
+        <Dropdown.Button
+          menu={{
+            items: [
+              { key: 'profile', label: '我的资料', onClick: onOpenProfileClick },
+              { key: 'disconnect', label: '断开', onClick: onDisconnectClick },
+            ],
+          }}
+          {...restProps}
+          className={className}
+        >
+          {children}
+        </Dropdown.Button>
+      );
+    }
+
+    if (showQuickConnect && firstInstallWallet) {
+      return (
+        <Dropdown.Button
+          {...restProps}
+          menu={{
+            items,
+          }}
+          className={classNames(className, `${prefixCls}-quick-connect`)}
+          onClick={(e) => {
+            onClick?.(e);
+            onConnectClick?.(firstInstallWallet);
+          }}
+        >
+          {children}
+          {getWalletIcon(firstInstallWallet)}
+        </Dropdown.Button>
+      );
+    }
+
+    return (
       <Button
         {...restProps}
         className={className}
@@ -128,6 +159,16 @@ export const ConnectButtonInner: React.FC<ConnectButtonInnerProps> = (props) =>
         {children}
       </Button>
     );
+  }, [
+    firstInstallWallet,
+    items,
+    needSign,
+    onClick,
+    onConnectClick,
+    onOpenProfileClick,
+    onDisconnectClick,
+    showQuickConnect,
+  ]);
 
   return preContent ? (
     <Space.Compact>

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

@@ -2,7 +2,7 @@ import React, { useContext, useMemo, useState } from 'react';
 import { CopyOutlined, LoginOutlined, UserOutlined } from '@ant-design/icons';
 import { ConnectStatus, type Chain, type Wallet } from '@ant-design/web3-common';
 import type { ButtonProps } from 'antd';
-import { Avatar, ConfigProvider, Divider, Dropdown, message } from 'antd';
+import { Avatar, Badge, ConfigProvider, Divider, Dropdown, message } from 'antd';
 import classNames from 'classnames';
 
 import { Address } from '../address';
@@ -59,7 +59,8 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
   const [showMenu, setShowMenu] = useState(false);
 
   const { coverAddress = true } = typeof balance !== 'object' ? { coverAddress: true } : balance;
-  const needSign = !!(sign?.signIn && account?.status === ConnectStatus.Connected && account);
+  const needSign = !!sign?.signIn && account?.status === ConnectStatus.Connected;
+
   let buttonText: React.ReactNode = intl.getMessage(intl.messages.connect);
   if (account) {
     buttonText = (
@@ -164,6 +165,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
   const buttonInnerText = (
     <div className={`${prefixCls}-content`}>
       <div className={`${prefixCls}-content-inner`}>
+        {needSign && account.status !== ConnectStatus.Signed && <Badge status="error" />}
         <div className={`${prefixCls}-text`}>{buttonText}</div>
         {(account?.avatar || avatar) && (
           <>
@@ -177,18 +179,23 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     </div>
   );
 
+  console.log('signIn:', typeof sign?.signIn, account?.status);
+
   const buttonContent = (
     <ConnectButtonInner
       intl={intl}
       {...buttonProps}
       preContent={chainSelectRender}
       showQuickConnect={quickConnect && !account}
       availableWallets={availableWallets}
+      needSign={needSign}
       onConnectClick={(wallet?: Wallet) => {
         if (!account) {
           onConnectClick?.(wallet);
         }
       }}
+      onDisconnectClick={onDisconnectClick}
+      onOpenProfileClick={() => setProfileOpen(true)}
       __hashId__={hashId}
     >
       {buttonInnerText}