feat: ConnectButton support name (#100)

Co-authored-by: yutingzhao1991 <[email protected]>
ant-design · Nov 21, 2023 · 89c6077 · 89c6077
1 parent 3446e60
commit 89c6077
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 2 deletions.
diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx
@@ -11,9 +11,49 @@ describe('ConnectButton', () => {
   afterEach(() => {
     resetMockClipboard();
   });
+
   it('mount correctly', () => {
     expect(() => render(<ConnectButton />)).not.toThrow();
   });
+
+  it('display name', () => {
+    const { baseElement } = render(
+      <ConnectButton
+        name="wanderingearth.eth"
+        address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
+        connected
+      />,
+    );
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth');
+  });
+
+  it('display addresss when not has name', () => {
+    const { baseElement } = render(
+      <ConnectButton address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" connected />,
+    );
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('0x21CD...Fd3B');
+  });
+
+  it('display name when not has address', () => {
+    const { baseElement } = render(<ConnectButton name="wanderingearth.eth" connected />);
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth');
+  });
+
+  it('tooltip show address when has name', () => {
+    const { baseElement } = render(
+      <ConnectButton
+        name="wanderingearth.eth"
+        address="3ea2cfd153b8d8505097b81c87c11f5d05097c18"
+        connected
+        tooltip={{ open: true }}
+      />,
+    );
+    expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth');
+    expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+    expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe('0x3ea2cf...097c18');
+    expect(baseElement.querySelector('.anticon-copy')).not.toBeNull();
+  });
+
   it('display tooltip', () => {
     const { baseElement } = render(
       <ConnectButton address="3ea2cfd153b8d8505097b81c87c11f5d05097c18" tooltip={{ open: true }} />,

diff --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx
@@ -14,9 +14,14 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
     currentChain,
     onSwitchChain,
     tooltip,
+    name,
     ...restProps
   } = props;
 
+  let buttonText: React.ReactNode = 'Connect Wallet';
+  if (connected) {
+    buttonText = name ?? <Address ellipsis address={address} />;
+  }
   const buttonProps = {
     style: props.style,
     className: props.className,
@@ -30,7 +35,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
         onConnectClick?.();
       }
     },
-    children: connected ? <Address ellipsis address={address} /> : 'Connect Wallet',
+    children: buttonText,
     ...restProps,
   };
 

diff --git a/packages/web3/src/connect-button/demos/name.tsx b/packages/web3/src/connect-button/demos/name.tsx
@@ -0,0 +1,14 @@
+import { ConnectButton } from '@ant-design/web3';
+
+const App: React.FC = () => {
+  return (
+    <ConnectButton
+      address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B"
+      name="wanderingearth.eth"
+      tooltip
+      connected
+    />
+  );
+};
+
+export default App;
diff --git a/packages/web3/src/connect-button/demos/tooltip.tsx b/packages/web3/src/connect-button/demos/tooltip.tsx
@@ -4,19 +4,21 @@ import { Space } from 'antd';
 const App: React.FC = () => {
   return (
     <Space>
-      <ConnectButton address="3ea2cfd153b8d8505097b81c87c11f5d05097c18" tooltip />
+      <ConnectButton address="3ea2cfd153b8d8505097b81c87c11f5d05097c18" tooltip connected />
       <ConnectButton
         address="3ea2cfd153b8d8505097b81c87c11f5d05097c18"
         tooltip={{
           title: 'aaaaaabbbbbbcccccc',
         }}
+        connected
       />
       <ConnectButton
         address="3ea2cfd153b8d8505097b81c87c11f5d05097c18"
         tooltip={{
           title: 'aaaaaabbbbbbcccccc',
           copyable: false,
         }}
+        connected
       />
     </Space>
   );

diff --git a/packages/web3/src/connect-button/index.md b/packages/web3/src/connect-button/index.md
@@ -17,11 +17,16 @@ A Button for connect chain quickly.
 
 <code src="./demos/tooltip.tsx"></code>
 
+## Show Name
+
+<code src="./demos/name.tsx"></code>
+
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | address | Address | `string` | - | - |
+| name | Name, like ENS | `string` | - | - |
 | tooltip | Show tooltip when mouse enter address | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true`, will display address by default | - |
 
 ### ConnectButtonTooltipProps

diff --git a/packages/web3/src/connect-button/index.zh-CN.md b/packages/web3/src/connect-button/index.zh-CN.md
@@ -15,11 +15,16 @@ group: 组件
 
 <code src="./demos/tooltip.tsx"></code>
 
+## 显示名称
+
+<code src="./demos/name.tsx"></code>
+
 ## API
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | address | 地址 | `string` | - | - |
+| name | 名称，比如以太坊的 ENS | `string` | - | - |
 | tooltip | 鼠标移入地址时展示提示 | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true`，默认显示 address 信息 | - |
 
 ### ConnectButtonTooltipProps