feat: optimized connect-button code (#481)

* feat: optimized connect-button code * feat: 优化代码规范 * feat: revert interface code * feat: Optimization ConnectButton code * feat: revert code * feat: revert code * Update connect-button.tsx * feat: increase ConnectButton test * feat: revert connect-button code --------- Co-authored-by: thinkasany <[email protected]>
ant-design · Jan 12, 2024 · 79a91ff · 79a91ff
1 parent 31e802c
commit 79a91ff
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 65 deletions.
diff --git a/.changeset/thick-singers-deny.md b/.changeset/thick-singers-deny.md
@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+refactor: Optimization ConnectButton code
diff --git a/packages/web3/src/connect-button/__tests__/tooltip.test.tsx b/packages/web3/src/connect-button/__tests__/tooltip.test.tsx
@@ -44,6 +44,20 @@ describe('ConnectButton', () => {
     expect(baseElement.querySelector('.anticon-copy')).toBeNull();
   });
 
+  it('Enable copyable in tooltip', () => {
+    const { baseElement } = render(
+      <ConnectButton
+        account={{ address: '3ea2cfd153b8d8505097b81c87c11f5d05097c18' }}
+        tooltip={{ open: true, copyable: true }}
+      />,
+    );
+    expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+    expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent?.trim()).toBe(
+      '0x3ea2cfd153b8d8505097b81c87c11f5d05097c18',
+    );
+    expect(baseElement.querySelector('.anticon-copy')).toBeTruthy();
+  });
+
   it('custom title in tooltip', () => {
     const { baseElement } = render(
       <ConnectButton
@@ -62,6 +76,11 @@ describe('ConnectButton', () => {
     expect(baseElement.querySelector('.ant-tooltip')).toBeNull();
   });
 
+  it('should not display tooltip when without tooltip in tooltip', () => {
+    const { baseElement } = render(<ConnectButton />);
+    expect(baseElement.querySelector('.ant-tooltip')).toBeNull();
+  });
+
   it('should copy text after click copy icon', async () => {
     const { baseElement } = render(
       <ConnectButton

diff --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx
@@ -1,5 +1,6 @@
 import React, { useContext, useMemo, useState } from 'react';
 import { CopyOutlined, LoginOutlined, UserOutlined } from '@ant-design/icons';
+import type { Chain } from '@ant-design/web3-common';
 import type { ButtonProps } from 'antd';
 import { Avatar, Button, ConfigProvider, Divider, Dropdown, message, Space } from 'antd';
 import type { MenuItemType } from 'antd/es/menu/hooks/useItems';
@@ -8,9 +9,12 @@ import classNames from 'classnames';
 import { Address } from '../address';
 import { CryptoPrice } from '../crypto-price';
 import useIntl from '../hooks/useIntl';
+import type { IntlType } from '../hooks/useIntl';
 import { fillWith0x, writeCopyText } from '../utils';
 import { ChainSelect } from './chain-select';
+import type { ChainSelectProps } from './chain-select';
 import type { ConnectButtonProps, ConnectButtonTooltipProps } from './interface';
+import type { ProfileModalProps } from './profile-modal';
 import { ProfileModal } from './profile-modal';
 import { useStyle } from './style';
 import { ConnectButtonTooltip } from './tooltip';
@@ -73,21 +77,39 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     ...restProps,
   };
 
-  const renderChainSelect = () => {
-    if (availableChains && availableChains.length > 1) {
-      return (
-        <ChainSelect
-          hashId={hashId}
-          onSwitchChain={onSwitchChain}
-          currentChain={chain}
-          chains={availableChains}
-        />
-      );
-    }
-    return null;
+  const chainProps: ChainSelectProps = {
+    hashId,
+    onSwitchChain,
+    currentChain: chain,
+    chains: availableChains as Chain[],
   };
 
-  const chainSelect = renderChainSelect();
+  const profileModalProps: ProfileModalProps = {
+    intl,
+    open: profileOpen,
+    __hashId__: hashId,
+    onDisconnect: () => {
+      setProfileOpen(false);
+      onDisconnectClick?.();
+    },
+    onClose: () => {
+      setProfileOpen(false);
+    },
+    address: account?.address,
+    name: account?.name,
+    avatar: avatar ?? {
+      icon: chain?.icon ? (
+        <div className={`${prefixCls}-chain-icon`}>{chain?.icon}</div>
+      ) : (
+        <UserOutlined className={`${prefixCls}-default-icon`} />
+      ),
+    },
+    balance,
+    modalProps: typeof profileModal === 'object' ? profileModal : undefined,
+  };
+
+  const chainSelect =
+    availableChains && availableChains.length > 1 ? <ChainSelect {...chainProps} /> : null;
 
   const buttonInnerText = (
     <div className={`${prefixCls}-content`}>
@@ -114,36 +136,6 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     <Button {...buttonProps}>{buttonInnerText}</Button>
   );
 
-  const profileModalContent = (
-    <ProfileModal
-      intl={intl}
-      open={profileOpen}
-      __hashId__={hashId}
-      onDisconnect={() => {
-        setProfileOpen(false);
-        onDisconnectClick?.();
-      }}
-      onClose={() => {
-        setProfileOpen(false);
-      }}
-      address={account?.address}
-      name={account?.name}
-      avatar={
-        avatar ?? {
-          icon: chain?.icon ? (
-            <div className={`${prefixCls}-chain-icon`}>{chain?.icon}</div>
-          ) : (
-            <UserOutlined className={`${prefixCls}-default-icon`} />
-          ),
-        }
-      }
-      balance={balance}
-      modalProps={typeof profileModal === 'object' ? profileModal : undefined}
-    />
-  );
-
-  let content = buttonContent;
-
   const defaultMenuItems: MenuItemType[] = useMemo(
     () => [
       {
@@ -194,8 +186,8 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     return combinedItems;
   }, [actionsMenu, defaultMenuItems, account]);
 
-  if (mergedMenuItems.length > 0) {
-    content = (
+  const content =
+    mergedMenuItems.length > 0 ? (
       <Dropdown
         open={showMenu}
         onOpenChange={setShowMenu}
@@ -206,8 +198,9 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
       >
         {buttonContent}
       </Dropdown>
+    ) : (
+      buttonContent
     );
-  }
 
   const mergedTooltipCopyable: ConnectButtonTooltipProps['copyable'] =
     typeof tooltip === 'object' ? tooltip.copyable !== false : !!tooltip;
@@ -234,7 +227,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
       ) : (
         content
       )}
-      {profileModalContent}
+      <ProfileModal {...profileModalProps} />
     </>
   );
 

diff --git a/packages/web3/src/connect-button/profile-modal.tsx b/packages/web3/src/connect-button/profile-modal.tsx
@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { Address } from '@ant-design/web3';
 import type { Balance } from '@ant-design/web3-common';
-import { Avatar, Button, ConfigProvider, message, Modal, Space, type AvatarProps } from 'antd';
-import type { ModalProps } from 'antd';
+import { Avatar, Button, ConfigProvider, message, Modal, Space } from 'antd';
+import type { AvatarProps, ModalProps } from 'antd';
 import classNames from 'classnames';
 
 import { CryptoPrice } from '../crypto-price';
@@ -41,26 +41,28 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({
   const prefixCls = getPrefixCls('web3-connect-button-profile-modal');
   const [messageApi, contextHolder] = message.useMessage();
 
+  const footer = (
+    <div className={classNames(`${prefixCls}-footer`, __hashId__)}>
+      {address ? (
+        <Button
+          onClick={() => {
+            writeCopyText(address).then(() => {
+              messageApi.success(intl.getMessage(intl.messages.addressCopied));
+            });
+          }}
+        >
+          {intl.getMessage(intl.messages.copyAddress)}
+        </Button>
+      ) : null}
+      <Button onClick={onDisconnect}>{intl.getMessage(intl.messages.disconnect)}</Button>
+    </div>
+  );
+
   return (
     <>
       {contextHolder}
       <Modal
-        footer={
-          <div className={classNames(`${prefixCls}-footer`, __hashId__)}>
-            {address ? (
-              <Button
-                onClick={() => {
-                  writeCopyText(address).then(() => {
-                    messageApi.success(intl.getMessage(intl.messages.addressCopied));
-                  });
-                }}
-              >
-                {intl.getMessage(intl.messages.copyAddress)}
-              </Button>
-            ) : null}
-            <Button onClick={onDisconnect}>{intl.getMessage(intl.messages.disconnect)}</Button>
-          </div>
-        }
+        footer={footer}
         width={280}
         {...modalProps}
         onCancel={onClose}