From d153da0e0ebe485d3e8a65e348f446faf661da2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Sun, 19 Nov 2023 19:29:18 +0800
Subject: [PATCH 1/7] feat: Support tooltip
---
.../connect-button/__tests__/index.test.tsx | 37 ++++++++++++++++
.../src/connect-button/connect-button.tsx | 42 +++++++++++++++++--
.../web3/src/connect-button/demos/tooltip.tsx | 14 +++++++
packages/web3/src/connect-button/index.md | 21 ++++++++++
.../web3/src/connect-button/index.zh-CN.md | 21 ++++++++++
packages/web3/src/connect-button/interface.ts | 2 +-
packages/web3/src/connect-button/tooltip.tsx | 24 ++++++++++-
7 files changed, 154 insertions(+), 7 deletions(-)
create mode 100644 packages/web3/src/connect-button/demos/tooltip.tsx
diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx
index e8c4dad96..f02a864d8 100644
--- a/packages/web3/src/connect-button/__tests__/index.test.tsx
+++ b/packages/web3/src/connect-button/__tests__/index.test.tsx
@@ -6,4 +6,41 @@ describe('ConnectButton', () => {
it('mount correctly', () => {
expect(() => render()).not.toThrow();
});
+ it('display tooltip', () => {
+ const { baseElement } = render(
+ ,
+ );
+ 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('disabled copyable in tooltip', () => {
+ const { baseElement } = render(
+ ,
+ );
+ expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent?.trim()).toBe(
+ '0x3ea2cf...097c18',
+ );
+ expect(baseElement.querySelector('.anticon-copy')).toBeNull();
+ });
+ it('custom title in tooltip', () => {
+ const { baseElement } = render(
+ ,
+ );
+ expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent?.trim()).toBe(
+ 'aaaaaabbbbbbcccccc',
+ );
+ });
+ it('should not display tooltip when not custom title and without address in tooltip', () => {
+ const { baseElement } = render();
+ expect(baseElement.querySelector('.ant-tooltip')).toBeNull();
+ });
});
diff --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx
index 96500996e..d344c4d3d 100644
--- a/packages/web3/src/connect-button/connect-button.tsx
+++ b/packages/web3/src/connect-button/connect-button.tsx
@@ -1,7 +1,8 @@
import React from 'react';
import { Button, Dropdown } from 'antd';
import { Address } from '../address';
-import type { ConnectButtonProps } from './interface';
+import type { ConnectButtonProps, ConnectButtonTooltipProps } from './interface';
+import { ConnectButtonTooltip } from './tooltip';
export const ConnectButton: React.FC = (props) => {
const {
@@ -12,6 +13,8 @@ export const ConnectButton: React.FC = (props) => {
chains,
currentChain,
onSwitchChain,
+ tooltip,
+ ...restProps
} = props;
const buttonProps = {
@@ -28,11 +31,13 @@ export const ConnectButton: React.FC = (props) => {
}
},
children: connected ? : 'Connect Wallet',
- ...props,
+ ...restProps,
};
+ let content = ;
+
if (chains && chains.length > 1) {
- return (
+ content = (
= (props) => {
);
}
- return ;
+ const mergedTooltipCopyable: ConnectButtonTooltipProps['copyable'] =
+ typeof tooltip === 'object' ? tooltip.copyable !== false : !!tooltip;
+
+ const customTooltipTitle = typeof tooltip === 'object' && tooltip.title !== undefined;
+
+ const tooltipTitle = customTooltipTitle ? (
+ tooltip.title
+ ) : (
+
+ );
+
+ return tooltip || (!customTooltipTitle && !!address) ? (
+
+ {content}
+
+ ) : (
+ content
+ );
};
ConnectButton.displayName = 'ConnectButton';
diff --git a/packages/web3/src/connect-button/demos/tooltip.tsx b/packages/web3/src/connect-button/demos/tooltip.tsx
new file mode 100644
index 000000000..45ddc8fdf
--- /dev/null
+++ b/packages/web3/src/connect-button/demos/tooltip.tsx
@@ -0,0 +1,14 @@
+import { ConnectButton } from '@ant-design/web3';
+
+const App: React.FC = () => {
+ return (
+
+ );
+};
+
+export default App;
diff --git a/packages/web3/src/connect-button/index.md b/packages/web3/src/connect-button/index.md
index 56e7cb1ed..47a9c3177 100644
--- a/packages/web3/src/connect-button/index.md
+++ b/packages/web3/src/connect-button/index.md
@@ -12,3 +12,24 @@ A Button for connect chain quickly.
## Simple Usage
TODO
;
+export const ConnectButtonTooltip: React.FC> = ({
+ title,
+ copyable,
+ children,
+ ...restProps
+}) => {
+ if (!title) return null;
+ const content = copyable ? (
+
+ {title}
+
+ ) : (
+ title
+ );
+ return (
+
+ {children}
+
+ );
};
From babff09618816231329caaf645ce89bab83e1b7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Sun, 19 Nov 2023 19:45:09 +0800
Subject: [PATCH 2/7] feat: Support tooltip
---
packages/web3/src/connect-button/index.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/web3/src/connect-button/index.md b/packages/web3/src/connect-button/index.md
index 47a9c3177..3b8b76d30 100644
--- a/packages/web3/src/connect-button/index.md
+++ b/packages/web3/src/connect-button/index.md
@@ -22,7 +22,7 @@ A Button for connect chain quickly.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| address | Address | `string` | - | - |
-| tooltip | Show tooltip when mouse enter address | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true` | - |
+| tooltip | Show tooltip when mouse enter address | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true`, will display address by default | - |
### ConnectButtonTooltipProps
From b848af94c678e5caed0196c17e920161af57c2e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Sun, 19 Nov 2023 19:54:21 +0800
Subject: [PATCH 3/7] feat: Support tooltip
---
.../web3/src/connect-button/demos/tooltip.tsx | 23 ++++++++++++++-----
packages/web3/src/connect-button/tooltip.tsx | 10 ++++----
2 files changed, 22 insertions(+), 11 deletions(-)
diff --git a/packages/web3/src/connect-button/demos/tooltip.tsx b/packages/web3/src/connect-button/demos/tooltip.tsx
index 45ddc8fdf..26c82857b 100644
--- a/packages/web3/src/connect-button/demos/tooltip.tsx
+++ b/packages/web3/src/connect-button/demos/tooltip.tsx
@@ -1,13 +1,24 @@
import { ConnectButton } from '@ant-design/web3';
+import { Space } from 'antd';
const App: React.FC = () => {
return (
-
+
+
+
+
+
);
};
diff --git a/packages/web3/src/connect-button/tooltip.tsx b/packages/web3/src/connect-button/tooltip.tsx
index 534d35ebd..686952030 100644
--- a/packages/web3/src/connect-button/tooltip.tsx
+++ b/packages/web3/src/connect-button/tooltip.tsx
@@ -1,5 +1,5 @@
-import { Space, Tooltip } from 'antd';
-import { CopyFilled } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { CopyOutlined } from '@ant-design/icons';
import type { ConnectButtonTooltipProps } from './interface';
import type { PropsWithChildren } from 'react';
@@ -11,9 +11,9 @@ export const ConnectButtonTooltip: React.FC {
if (!title) return null;
const content = copyable ? (
-
- {title}
-
+ <>
+ {title}
+
) : (
title
);
From 97814b55248782847d107c818b6225836a694e10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 20 Nov 2023 10:01:46 +0800
Subject: [PATCH 4/7] feat: optimize code
---
packages/web3/src/connect-button/tooltip.tsx | 12 ++++++++++--
1 file changed, 10 insertions(+), 2 deletions(-)
diff --git a/packages/web3/src/connect-button/tooltip.tsx b/packages/web3/src/connect-button/tooltip.tsx
index 686952030..94a9e7453 100644
--- a/packages/web3/src/connect-button/tooltip.tsx
+++ b/packages/web3/src/connect-button/tooltip.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from 'antd';
+import { Tooltip, message } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
import type { ConnectButtonTooltipProps } from './interface';
import type { PropsWithChildren } from 'react';
@@ -12,7 +12,15 @@ export const ConnectButtonTooltip: React.FC
- {title}
+ {title}{' '}
+ {
+ navigator.clipboard.writeText(String(title)).then(() => {
+ message.success('Address Copied!');
+ });
+ }}
+ />
) : (
title
From d3b2d02a2945acbf0ab372635b32a4dcd29bb997 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 20 Nov 2023 10:27:27 +0800
Subject: [PATCH 5/7] feat: optimize code
---
.../connect-button/__tests__/index.test.tsx | 43 ++++++++++++++++++-
packages/web3/src/connect-button/tooltip.tsx | 12 ++++--
2 files changed, 49 insertions(+), 6 deletions(-)
diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx
index f02a864d8..d3628dd9c 100644
--- a/packages/web3/src/connect-button/__tests__/index.test.tsx
+++ b/packages/web3/src/connect-button/__tests__/index.test.tsx
@@ -1,6 +1,27 @@
import { ConnectButton } from '..';
-import { render } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { fireEvent, render } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+
+// 代理 navigator.clipboard 方法用于测试复制文本到粘贴板的功能
+const mockClipboard = () => {
+ const clipboard = {
+ text: '',
+ writeText: (text: string) => {
+ clipboard.text = text;
+ return Promise.resolve();
+ },
+ readText: () => {
+ return Promise.resolve(clipboard.text);
+ },
+ };
+ Object.defineProperty(window, 'navigator', {
+ value: {
+ clipboard,
+ },
+ });
+};
+
+mockClipboard();
describe('ConnectButton', () => {
it('mount correctly', () => {
@@ -43,4 +64,22 @@ describe('ConnectButton', () => {
const { baseElement } = render();
expect(baseElement.querySelector('.ant-tooltip')).toBeNull();
});
+ it('should copy text after click copy icon', async () => {
+ const { baseElement } = render(
+ ,
+ );
+ expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent).toBe('0x3ea2cf...097c18');
+ expect(baseElement.querySelector('.anticon-copy')).not.toBeNull();
+ fireEvent.click(baseElement.querySelector('.anticon-copy')!);
+ await vi.waitFor(() => {
+ expect(baseElement.querySelector('.ant-message')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-message-notice-content')?.textContent).toBe(
+ 'Address Copied!',
+ );
+ expect(navigator.clipboard.readText()).resolves.toBe(
+ '0x3ea2cfd153b8d8505097b81c87c11f5d05097c18',
+ );
+ });
+ });
});
diff --git a/packages/web3/src/connect-button/tooltip.tsx b/packages/web3/src/connect-button/tooltip.tsx
index 94a9e7453..926bbfa0a 100644
--- a/packages/web3/src/connect-button/tooltip.tsx
+++ b/packages/web3/src/connect-button/tooltip.tsx
@@ -9,6 +9,7 @@ export const ConnectButtonTooltip: React.FC {
+ const [messageApi, contextHolder] = message.useMessage();
if (!title) return null;
const content = copyable ? (
<>
@@ -17,7 +18,7 @@ export const ConnectButtonTooltip: React.FC {
navigator.clipboard.writeText(String(title)).then(() => {
- message.success('Address Copied!');
+ messageApi.success('Address Copied!');
});
}}
/>
@@ -26,8 +27,11 @@ export const ConnectButtonTooltip: React.FC
- {children}
-
+ <>
+ {contextHolder}
+
+ {children}
+
+
);
};
From b23073a990e03c55ee48344c9460abf5c948a888 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 20 Nov 2023 10:31:17 +0800
Subject: [PATCH 6/7] feat: optimize code
---
.../connect-button/__tests__/index.test.tsx | 18 ++++++++++++++++++
1 file changed, 18 insertions(+)
diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx
index d3628dd9c..86ac06eba 100644
--- a/packages/web3/src/connect-button/__tests__/index.test.tsx
+++ b/packages/web3/src/connect-button/__tests__/index.test.tsx
@@ -82,4 +82,22 @@ describe('ConnectButton', () => {
);
});
});
+ it('should copy text after click copy icon in custom title mode', async () => {
+ const { baseElement } = render(
+ ,
+ );
+ expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent?.trim()).toBe(
+ 'aaaaaabbbbbbcccccc',
+ );
+ expect(baseElement.querySelector('.anticon-copy')).not.toBeNull();
+ fireEvent.click(baseElement.querySelector('.anticon-copy')!);
+ await vi.waitFor(() => {
+ expect(baseElement.querySelector('.ant-message')).not.toBeNull();
+ expect(baseElement.querySelector('.ant-message-notice-content')?.textContent).toBe(
+ 'Address Copied!',
+ );
+ expect(navigator.clipboard.readText()).resolves.toBe('aaaaaabbbbbbcccccc');
+ });
+ });
});
From 6680419aeb1af439562404144ce7cdd6639ae9f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 20 Nov 2023 10:50:07 +0800
Subject: [PATCH 7/7] feat: optimize code
---
.../connect-button/__tests__/index.test.tsx | 31 ++++++-------------
packages/web3/src/utils/test-utils.ts | 27 ++++++++++++++++
2 files changed, 36 insertions(+), 22 deletions(-)
create mode 100644 packages/web3/src/utils/test-utils.ts
diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx
index 86ac06eba..51565565a 100644
--- a/packages/web3/src/connect-button/__tests__/index.test.tsx
+++ b/packages/web3/src/connect-button/__tests__/index.test.tsx
@@ -1,29 +1,16 @@
import { ConnectButton } from '..';
import { fireEvent, render } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-
-// 代理 navigator.clipboard 方法用于测试复制文本到粘贴板的功能
-const mockClipboard = () => {
- const clipboard = {
- text: '',
- writeText: (text: string) => {
- clipboard.text = text;
- return Promise.resolve();
- },
- readText: () => {
- return Promise.resolve(clipboard.text);
- },
- };
- Object.defineProperty(window, 'navigator', {
- value: {
- clipboard,
- },
- });
-};
-
-mockClipboard();
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { mockClipboard } from '../../utils/test-utils';
describe('ConnectButton', () => {
+ let resetMockClipboard: () => void;
+ beforeEach(() => {
+ resetMockClipboard = mockClipboard();
+ });
+ afterEach(() => {
+ resetMockClipboard();
+ });
it('mount correctly', () => {
expect(() => render()).not.toThrow();
});
diff --git a/packages/web3/src/utils/test-utils.ts b/packages/web3/src/utils/test-utils.ts
new file mode 100644
index 000000000..9e5d876bb
--- /dev/null
+++ b/packages/web3/src/utils/test-utils.ts
@@ -0,0 +1,27 @@
+const oriClipboard = window.navigator.clipboard;
+// 代理 navigator.clipboard 方法用于测试复制文本到粘贴板的功能
+export const mockClipboard = () => {
+ const clipboard = {
+ text: '',
+ writeText: (text: string) => {
+ clipboard.text = text;
+ return Promise.resolve();
+ },
+ readText: () => {
+ return Promise.resolve(clipboard.text);
+ },
+ };
+ Object.defineProperty(window, 'navigator', {
+ value: {
+ clipboard,
+ },
+ });
+
+ return () => {
+ Object.defineProperty(window, 'navigator', {
+ value: {
+ clipboard: oriClipboard,
+ },
+ });
+ };
+};