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}
+ />
+ )}
>