refactor: modify address code & add APIS from docs & add test (#507)

* refactor: modify address code & add APIS from docs & add test

* modify address test

* modify code

* feat: revert code

Author: shanchuan1

.changeset/thin-jars-divide.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3': patch
+---
+
+refactor: modify address code & add APIS from docs & add test

packages/web3/src/address/__tests__/index.test.tsx

@@ -126,6 +126,20 @@ describe('Address', () => {
     );
   });
 
+  it('should display custom tooltip if tooltip is set custom', async () => {
+    const { baseElement } = render(
+      <Address
+        ellipsis
+        address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'}
+        tooltip={<span>hello</span>}
+      />,
+    );
+    fireEvent.mouseEnter(baseElement.querySelector('.ant-web3-address-text')!);
+    await vi.waitFor(() => {
+      expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe('hello');
+    });
+  });
+
   it('should show copy icon after 2s', async () => {
     const { baseElement } = render(
       <Address address="0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B" copyable />,

packages/web3/src/address/demos/customTooltip.tsx

@@ -0,0 +1,19 @@
+import { Address } from '@ant-design/web3';
+import { Space } from 'antd';
+
+const App: React.FC = () => {
+  return (
+    <Space>
+      <Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip />
+      <Address
+        ellipsis
+        address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'}
+        tooltip={<span>hello</span>}
+      />
+      <Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip={'hi'} />
+      <Address ellipsis address={'3ea2cfd153b8d8505097b81c87c11f5d05097c18'} tooltip={false} />
+    </Space>
+  );
+};
+
+export default App;

packages/web3/src/address/index.md

@@ -19,12 +19,17 @@ group:
 
 <code src="./demos/format.tsx"></code>
 
+## Custom Tooltip
+
+<code src="./demos/customTooltip.tsx"></code>
+
 ## API
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | ellipsis | Address clipping strategy | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
 | copyable | Address copyable | `boolean` | `false` | - |
 | address | Address | `string` | - | - |
-| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | Displays the current full address | - |
+| tooltip | Show tooltip when hover address | `boolean \|`[Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
 | format | Address format | `boolean \| (input: string) => ReactNode` | `false` | - |
+| locale | Multilingual settings | `Locale["address"]` | - | - |

packages/web3/src/address/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { isValidElement, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
 import type { Locale } from '@ant-design/web3-common';
 import type { TooltipProps } from 'antd';
@@ -25,7 +25,7 @@ export interface AddressProps {
 }
 
 export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props) => {
-  const { ellipsis, address, copyable, tooltip, format = false, children, locale } = props;
+  const { ellipsis, address, copyable, tooltip = true, format = false, children, locale } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('web3-address');
   const { wrapSSR, hashId } = useStyle(prefixCls);
@@ -63,15 +63,32 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
   if (!address) {
     return null;
   }
-
   const filledAddress = fillWith0x(address);
 
+  const mergedTooltip = () => {
+    if (isValidElement(tooltip) || typeof tooltip === 'string') {
+      return tooltip;
+    }
+    if (tooltip) {
+      return filledAddress;
+    }
+    return tooltip;
+  };
+
   const formattedAddress = mergedFormat(filledAddress);
-  const displayTooltip = tooltip === undefined || tooltip === true ? filledAddress : tooltip;
+
+  const handleOutlinedChange = () => {
+    writeCopyText(filledAddress).then(() => {
+      setCopied(true);
+      timerRef.current = setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    });
+  };
 
   return wrapSSR(
     <Space className={classNames(prefixCls, hashId)}>
-      <Tooltip title={displayTooltip}>
+      <Tooltip title={mergedTooltip()}>
         <span className={`${prefixCls}-text`}>
           {children ??
             (isEllipsis
@@ -84,17 +101,7 @@ export const Address: React.FC<React.PropsWithChildren<AddressProps>> = (props)
           {copied ? (
             <CheckOutlined title={messages.copiedTips} />
           ) : (
-            <CopyOutlined
-              title={messages.copyTips}
-              onClick={() => {
-                writeCopyText(filledAddress).then(() => {
-                  setCopied(true);
-                  timerRef.current = setTimeout(() => {
-                    setCopied(false);
-                  }, 2000);
-                });
-              }}
-            />
+            <CopyOutlined title={messages.copyTips} onClick={handleOutlinedChange} />
           )}
         </>
       )}

packages/web3/src/address/index.zh-CN.md

@@ -19,12 +19,17 @@ group:
 
 <code src="./demos/format.tsx"></code>
 
+## 自定义Tooltip
+
+<code src="./demos/customTooltip.tsx"></code>
+
 ## API
 
 | 属性 | 描述 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | ellipsis | 地址裁剪策略 | `boolean \| { headClip?: number, tailClip?: number }` | `{ headClip: 6, tailClip: 4 }` | - |
 | copyable | 是否可复制 | `boolean` | `false` | - |
 | address | 地址 | `string` | - | - |
-| tooltip | 鼠标移入地址时展示提示 | `boolean \|` [Tooltip.title](https://ant.design/components/tooltip-cn#api) | 展示当前完整地址 | - |
+| tooltip | 鼠标移入地址时展示提示 | `boolean \|` [Tooltip.title](https://ant.design/components/tooltip-cn#api) | `true ` | - |
 | format | 地址格式化 | `boolean \| (input: string) => ReactNode` | `false` | - |
+| locale | 多语言文案设置 | `Locale["address"]` | - | - |