diff --git a/.changeset/hot-parrots-laugh.md b/.changeset/hot-parrots-laugh.md new file mode 100644 index 000000000..78c6e6381 --- /dev/null +++ b/.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 --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 5a622ded7..9fcf2eccb 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -249,6 +249,7 @@ export type WalletMetadata = { export type Balance = BalanceMetadata & { value?: bigint; + coverAddress?: boolean; }; export interface ConnectorTriggerProps { diff --git a/packages/web3/src/connect-button/__tests__/balance.test.tsx b/packages/web3/src/connect-button/__tests__/balance.test.tsx index dfbed7f30..ac93fe1b2 100644 --- a/packages/web3/src/connect-button/__tests__/balance.test.tsx +++ b/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( + , + ); + expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('0x21CD...Fd3B 1.23 ETH'); + }); + + it('show name when balance-coveraddress is false', () => { + const { baseElement } = render( + , + ); + expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth 1.23 ETH'); + }); }); diff --git a/packages/web3/src/connect-button/__tests__/profile-modal.test.tsx b/packages/web3/src/connect-button/__tests__/profile-modal.test.tsx index afc3fb629..db3d72533 100644 --- a/packages/web3/src/connect-button/__tests__/profile-modal.test.tsx +++ b/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 --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx index a60e5fcda..b21dbc99b 100644 --- a/packages/web3/src/connect-button/connect-button.tsx +++ b/packages/web3/src/connect-button/connect-button.tsx @@ -58,22 +58,27 @@ export const ConnectButton: React.FC = (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 - ) : ( -
- {balance ? : undefined} -
- ); + buttonText = ( + <> + {(!balance || !coverAddress) && + (account?.name ? ( + account.name + ) : ( +
+ ))} + {balance && !coverAddress && } + {balance && } + + ); } const buttonProps: ButtonProps = { diff --git a/packages/web3/src/connect-button/index.md b/packages/web3/src/connect-button/index.md index 852cd99a1..1ed5f6acc 100644 --- a/packages/web3/src/connect-button/index.md +++ b/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 --git a/packages/web3/src/connect-button/index.zh-CN.md b/packages/web3/src/connect-button/index.zh-CN.md index 2245ccf13..5591903b4 100644 --- a/packages/web3/src/connect-button/index.zh-CN.md +++ b/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 --git a/packages/web3/src/connect-button/profile-modal.tsx b/packages/web3/src/connect-button/profile-modal.tsx index 396e1e766..4ec59f310 100644 --- a/packages/web3/src/connect-button/profile-modal.tsx +++ b/packages/web3/src/connect-button/profile-modal.tsx @@ -87,17 +87,16 @@ export const ProfileModal: React.FC = ({ {avatar ? : null} {name ?
{name}
: null} - {address ? ( + {balance && } + {address && (
- {balance && } -
- ) : null} + /> + )}