feat: add connect and disconnect status

Author: gin-lsl

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

@@ -17,6 +17,7 @@ export interface ConnectButtonInnerProps extends ButtonProps {
   onConnectClick?: (wallet?: Wallet) => void;
   onDisconnectClick?: () => void;
   onOpenProfileClick?: () => void;
+  onSignInClick?: () => void;
   intl: IntlType;
 }
 
@@ -31,6 +32,7 @@ export const ConnectButtonInner: React.FC<ConnectButtonInnerProps> = (props) =>
     onConnectClick,
     onDisconnectClick,
     onOpenProfileClick,
+    onSignInClick,
     intl,
     __hashId__,
     className,
@@ -114,6 +116,10 @@ export const ConnectButtonInner: React.FC<ConnectButtonInnerProps> = (props) =>
     if (needSign) {
       return (
         <Dropdown.Button
+          onClick={(e) => {
+            onClick?.(e);
+            onSignInClick?.();
+          }}
           menu={{
             items: [
               { key: 'profile', label: '我的资料', onClick: onOpenProfileClick },

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

@@ -7,7 +7,7 @@ import classNames from 'classnames';
 
 import { Address } from '../address';
 import { CryptoPrice } from '../crypto-price';
-import { useProvider } from '../hooks';
+import { useConnection, useProvider } from '../hooks';
 import useIntl from '../hooks/useIntl';
 import { fillWithPrefix, writeCopyText } from '../utils';
 import { ChainSelect } from './chain-select';
@@ -57,6 +57,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
   const { wrapSSR, hashId } = useStyle(prefixCls);
   const [messageApi, contextHolder] = message.useMessage();
   const [showMenu, setShowMenu] = useState(false);
+  const [signed, setSigned] = useState(false);
 
   const { coverAddress = true } = typeof balance !== 'object' ? { coverAddress: true } : balance;
   const needSign = !!sign?.signIn && account?.status === ConnectStatus.Connected;
@@ -99,6 +100,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
       try {
         if (needSign) {
           await sign?.signIn?.(account?.address);
+          setSigned(true);
         }
       } catch (error: any) {
         messageApi.error(error.message);
@@ -162,6 +164,10 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     );
   }
 
+  const unsigned = needSign && !signed;
+
+  console.log('unsigned:', unsigned, account?.status);
+
   const buttonInnerText = (
     <div className={`${prefixCls}-content`}>
       <div className={`${prefixCls}-content-inner`}>
@@ -196,6 +202,42 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
       }}
       onDisconnectClick={onDisconnectClick}
       onOpenProfileClick={() => setProfileOpen(true)}
+      onSignInClick={() => {
+        if (!sign?.signIn) {
+          return;
+        }
+
+        console.log('onSignInClick:', account, needSign, signed);
+        if (signed) {
+          return;
+        }
+
+        if (account?.status === ConnectStatus.Signed) {
+          setSigned(true);
+          return;
+        }
+
+        // If account is not connected, we need to sign in
+        // If account is connected but not signed, we also need to sign in
+        console.log('signIn:', account?.address, needSign);
+        if (account?.status === ConnectStatus.Connected && signed) {
+          return;
+        }
+
+        // If account is not connected, we need to sign in
+        // If account is connected but not signed, we also need to sign in
+        console.log('signIn:', account?.address, needSign);
+        if (account && needSign) {
+          sign
+            .signIn?.(account.address!)
+            .then(() => {
+              setSigned(true);
+            })
+            .catch((error) => {
+              messageApi.error(error.message);
+            });
+        }
+      }}
       __hashId__={hashId}
     >
       {buttonInnerText}