feat: Added wallet address and balance co-display mode (#1392)

* feat(connect-button): Added wallet address and balance co-display mode

* chore: Add changelog

* fix: Retain the previous logic when no new properties are provided

* Update .changeset/hot-parrots-laugh.md

---------

Co-authored-by: 愚指导 <[email protected]>

Author: maskboys

Diff for: .changeset/hot-parrots-laugh.md

@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-common': minor
+'@ant-design/web3': minor
+---
+
+feat(connect-button): Added wallet address and balance co-display mode

Diff for: packages/common/src/types.ts

@@ -249,6 +249,7 @@ export type WalletMetadata = {
 
 export type Balance = BalanceMetadata & {
   value?: bigint;
+  coverAddress?: boolean;
 };
 
 export interface ConnectorTriggerProps {

Diff for: packages/web3/src/connect-button/__tests__/balance.test.tsx

@@ -49,4 +49,39 @@ describe('ConnectButton', () => {
     );
     expect(baseElement.querySelector('.ant-btn')?.textContent).toBe(' 1.23 ETH');
   });
+
+  it('show address when balance-coveraddress is false', () => {
+    const { baseElement } = render(
+      <ConnectButton
+        account={{
+          address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
+        }}
+        balance={{
+          symbol: 'ETH',
+          decimals: 18,
+          value: 1230000000000000000n,
+          coverAddress: false,
+        }}
+      />,
+    );
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('0x21CD...Fd3B 1.23 ETH');
+  });
+
+  it('show name when balance-coveraddress is false', () => {
+    const { baseElement } = render(
+      <ConnectButton
+        account={{
+          address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B',
+          name: 'wanderingearth.eth',
+        }}
+        balance={{
+          symbol: 'ETH',
+          decimals: 18,
+          value: 1230000000000000000n,
+          coverAddress: false,
+        }}
+      />,
+    );
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth 1.23 ETH');
+  });
 });

Diff for: packages/web3/src/connect-button/__tests__/profile-modal.test.tsx

@@ -91,6 +91,12 @@ describe('ProfileModal', () => {
       expect(
         baseElement.querySelector('.ant-web3-connect-button-profile-modal .ant-web3-address')
           ?.textContent,
+      ).toBe('0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B');
+
+      expect(
+        baseElement.querySelector(
+          '.ant-web3-connect-button-profile-modal .ant-web3-crypto-price-balance',
+        )?.textContent,
       ).toBe('1.23 ETH');
     });
   });

Diff for: packages/web3/src/connect-button/connect-button.tsx

@@ -58,22 +58,27 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
   const [messageApi, contextHolder] = message.useMessage();
   const [showMenu, setShowMenu] = useState(false);
 
+  const { coverAddress = true } = typeof balance !== 'object' ? { coverAddress: true } : balance;
   const needSign = !!(sign?.signIn && account?.status === ConnectStatus.Connected && account);
   let buttonText: React.ReactNode = intl.getMessage(intl.messages.connect);
   if (account) {
-    buttonText =
-      account?.name && !balance ? (
-        account?.name
-      ) : (
-        <Address
-          tooltip={false}
-          ellipsis
-          address={account.address}
-          addressPrefix={addressPrefixProp}
-        >
-          {balance ? <CryptoPrice icon {...balance} /> : undefined}
-        </Address>
-      );
+    buttonText = (
+      <>
+        {(!balance || !coverAddress) &&
+          (account?.name ? (
+            account.name
+          ) : (
+            <Address
+              tooltip={false}
+              ellipsis
+              address={account.address}
+              addressPrefix={addressPrefixProp}
+            />
+          ))}
+        {balance && !coverAddress && <Divider type="vertical" />}
+        {balance && <CryptoPrice icon {...balance} />}
+      </>
+    );
   }
 
   const buttonProps: ButtonProps = {

Diff for: packages/web3/src/connect-button/index.md

@@ -76,11 +76,12 @@ After configuring the `quickConnect` property, the installed wallets and univers
 
 ### Balance
 
-| Property | Description    | Type               | Default | Version |
-| -------- | -------------- | ------------------ | ------- | ------- |
-| value    | Balance        | `bigint \| number` | -       | -       |
-| symbol   | Token symbol   | `string`           | -       | -       |
-| decimals | Token decimals | `number`           | -       | -       |
+| Property     | Description     | Type               | Default | Version |
+| ------------ | --------------- | ------------------ | ------- | ------- |
+| value        | Balance         | `bigint \| number` | -       | -       |
+| symbol       | Token symbol    | `string`           | -       | -       |
+| decimals     | Token decimals  | `number`           | -       | -       |
+| coverAddress | Covered address | `boolean`          | `true`  | -       |
 
 ### ConnectButtonTooltipProps
 

Diff for: packages/web3/src/connect-button/index.zh-CN.md

@@ -77,11 +77,12 @@ coverDark: https://mdn.alipayobjects.com/huamei_mutawc/afts/img/A*S4cyQ7OCxDUAAA
 
 ### Balance
 
-| 属性     | 描述     | 类型               | 默认值 | 版本 |
-| -------- | -------- | ------------------ | ------ | ---- |
-| value    | 余额     | `bigint \| number` | -      | -    |
-| symbol   | 代币符号 | `string`           | -      | -    |
-| decimals | 代币精度 | `number`           | -      | -    |
+| 属性         | 描述     | 类型               | 默认值 | 版本 |
+| ------------ | -------- | ------------------ | ------ | ---- |
+| value        | 余额     | `bigint \| number` | -      | -    |
+| symbol       | 代币符号 | `string`           | -      | -    |
+| decimals     | 代币精度 | `number`           | -      | -    |
+| coverAddress | 覆盖地址 | `boolean`          | `true` | -    |
 
 ### ConnectButtonTooltipProps
 

Diff for: packages/web3/src/connect-button/profile-modal.tsx

@@ -87,17 +87,16 @@ export const ProfileModal: React.FC<ProfileModalProps> = ({
         <Space align="center" direction="vertical">
           {avatar ? <Avatar {...avatar} /> : null}
           {name ? <div className={classNames(`${prefixCls}-name`, __hashId__)}>{name}</div> : null}
-          {address ? (
+          {balance && <CryptoPrice {...balance} />}
+          {address && (
             <Address
               ellipsis={false}
               address={address}
               type={name ? 'secondary' : undefined}
               tooltip={false}
               addressPrefix={addressPrefix}
-            >
-              {balance && <CryptoPrice {...balance} />}
-            </Address>
-          ) : null}
+            />
+          )}
         </Space>
       </Modal>
     </>