From a81b4c971d6add170a57a6e30f9c0836a2705ea9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=84=9A=E6=8C=87=E5=AF=BC?= Date: Wed, 29 Nov 2023 21:19:18 +0800 Subject: [PATCH] refactor: remove accounts, use account & rename chains and wallets (#137) * refactor: rename accounts and chains * chore: update docs * fix: doc build failed --------- Co-authored-by: yutingzhao1991 --- docs/guide/demos/guide.tsx | 2 +- packages/common/src/types.ts | 22 +- packages/ethereum/src/ethereum-provider.tsx | 2 +- .../src/wagmi-provider/config-provider.tsx | 48 ++- .../wagmi/src/wagmi-provider/index.test.tsx | 12 +- packages/wagmi/src/wagmi-provider/index.tsx | 6 +- .../methods/addNameToAccount.ts | 13 + .../methods/addNameToAccounts.ts | 17 - .../src/wagmi-provider/methods/index.test.ts | 35 +- .../wagmi/src/wagmi-provider/methods/index.ts | 2 +- .../__snapshots__/menu.test.tsx.snap | 313 ++++++++++++++++++ .../connect-button/__tests__/index.test.tsx | 22 +- .../connect-button/__tests__/menu.test.tsx | 24 +- .../__tests__/profile-modal.test.tsx | 16 +- .../connect-button/__tests__/tooltip.test.tsx | 16 +- .../src/connect-button/connect-button.tsx | 34 +- .../web3/src/connect-button/demos/menu.tsx | 28 +- .../web3/src/connect-button/demos/name.tsx | 7 +- .../src/connect-button/demos/profileModal.tsx | 9 +- .../web3/src/connect-button/demos/simple.tsx | 2 +- .../web3/src/connect-button/demos/tooltip.tsx | 8 +- .../web3/src/connect-button/demos/type.tsx | 15 +- packages/web3/src/connect-button/index.md | 4 +- .../web3/src/connect-button/index.zh-CN.md | 4 +- .../src/connector/__tests__/basic.test.tsx | 27 +- .../src/connector/__tests__/chains.test.tsx | 20 +- .../src/connector/__tests__/name.test.tsx | 18 +- packages/web3/src/connector/conector.tsx | 27 +- packages/web3/src/connector/demos/chains.tsx | 2 +- packages/web3/src/connector/index.md | 13 +- packages/web3/src/connector/index.zh-CN.md | 27 +- packages/web3/src/connector/interface.ts | 14 +- packages/web3/src/hooks/demos/useAccount.tsx | 13 + packages/web3/src/hooks/demos/useAccounts.tsx | 10 - packages/web3/src/hooks/demos/useNFT.tsx | 5 +- packages/web3/src/hooks/index.md | 4 +- packages/web3/src/hooks/index.tsx | 2 +- packages/web3/src/hooks/index.zh-CN.md | 4 +- packages/web3/src/hooks/useAccount.ts | 9 + packages/web3/src/hooks/useAccounts.ts | 10 - packages/web3/src/hooks/useNFT.ts | 2 +- packages/web3/src/hooks/useWallets.ts | 4 +- .../src/web3-config-provider/demos/simple.tsx | 19 +- 43 files changed, 612 insertions(+), 279 deletions(-) create mode 100644 packages/wagmi/src/wagmi-provider/methods/addNameToAccount.ts delete mode 100644 packages/wagmi/src/wagmi-provider/methods/addNameToAccounts.ts create mode 100644 packages/web3/src/hooks/demos/useAccount.tsx delete mode 100644 packages/web3/src/hooks/demos/useAccounts.tsx create mode 100644 packages/web3/src/hooks/useAccount.ts delete mode 100644 packages/web3/src/hooks/useAccounts.ts diff --git a/docs/guide/demos/guide.tsx b/docs/guide/demos/guide.tsx index fd93e9f2a..330603392 100644 --- a/docs/guide/demos/guide.tsx +++ b/docs/guide/demos/guide.tsx @@ -27,7 +27,7 @@ const config = createConfig({ const App: React.FC = () => { return ( - + diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index a2d3d5a72..049b91667 100644 --- a/packages/common/src/types.ts +++ b/packages/common/src/types.ts @@ -38,13 +38,15 @@ export interface NFTMetadata { } export interface UniversalWeb3ProviderInterface { - accounts?: Account[]; - wallets?: Wallet[]; - chains?: Chain[]; - currentChain?: Chain; + // current connected account + account?: Account; + // current connected chain + chain?: Chain; - // connect and return conneted accounts - requestAccounts?: (wallet?: string) => Promise; + availableWallets?: Wallet[]; + availableChains?: Chain[]; + + connect?: (wallet?: Wallet) => Promise; disconnect?: () => Promise; switchChain?: (chain: Chain) => Promise; @@ -141,14 +143,12 @@ export type Banlance = { }; export interface ConnectorTriggerProps { - address?: string; + account?: Account; loading?: boolean; onConnectClick?: () => void; onDisconnectClick?: () => Promise; onSwitchChain?: (chain: Chain) => Promise; - name?: string; - connected?: boolean; - chains?: Chain[]; - currentChain?: Chain; + availableChains?: Chain[]; + chain?: Chain; banlance?: Banlance[] | Banlance; } diff --git a/packages/ethereum/src/ethereum-provider.tsx b/packages/ethereum/src/ethereum-provider.tsx index f0bb17827..252fb31cd 100644 --- a/packages/ethereum/src/ethereum-provider.tsx +++ b/packages/ethereum/src/ethereum-provider.tsx @@ -37,7 +37,7 @@ export const EthereumProvider: React.FC = (props) => { }, [provider]); return ( - + {children} ); diff --git a/packages/wagmi/src/wagmi-provider/config-provider.tsx b/packages/wagmi/src/wagmi-provider/config-provider.tsx index ed150ccc9..a1b652144 100644 --- a/packages/wagmi/src/wagmi-provider/config-provider.tsx +++ b/packages/wagmi/src/wagmi-provider/config-provider.tsx @@ -8,20 +8,20 @@ import { useSwitchNetwork, type Chain as WagmiChain, } from 'wagmi'; -import { addNameToAccounts, getNFTMetadata } from './methods'; +import { addNameToAccount, getNFTMetadata } from './methods'; import type { WalletFactory } from '../interface'; export interface AntDesignWeb3ConfigProviderProps { assets?: (WalletFactory | Chain)[]; children?: React.ReactNode; ens?: boolean; - chains: WagmiChain[]; + availableChains: WagmiChain[]; } export const AntDesignWeb3ConfigProvider: React.FC = (props) => { - const { children, assets, chains, ens } = props; + const { children, assets, availableChains, ens } = props; const { address, isDisconnected } = useAccount(); - const [accounts, setAccounts] = React.useState([]); + const [account, setAccount] = React.useState(); const { connectors, connectAsync } = useConnect(); const { switchNetwork } = useSwitchNetwork(); const { chain } = useNetwork(); @@ -30,16 +30,14 @@ export const AntDesignWeb3ConfigProvider: React.FC { if (!address || isDisconnected) { - setAccounts([]); + setAccount(undefined); return; } const updateAccounts = async () => { - const as: Account[] = [ - { - address, - }, - ]; - setAccounts(ens ? await addNameToAccounts(as) : as); + const a = { + address, + }; + setAccount(ens ? await addNameToAccount(a) : a); }; updateAccounts(); }, [address, isDisconnected, chain, ens]); @@ -57,7 +55,7 @@ export const AntDesignWeb3ConfigProvider: React.FC { - return chains.map((item) => { + return availableChains.map((item) => { const c = assets?.find((asset) => { return (asset as Chain).id === item.id; }) as Chain; @@ -69,14 +67,14 @@ export const AntDesignWeb3ConfigProvider: React.FC { if (!chain && currentChain) { // not connected any chain, keep current chain return; } - const currentWagmiChain = chain ?? chains[0]; + const currentWagmiChain = chain ?? availableChains[0]; if (!currentWagmiChain) { return; } @@ -89,26 +87,20 @@ export const AntDesignWeb3ConfigProvider: React.FC { - const connector = connectors.find((item) => item.name === wallet); - const { account } = await connectAsync({ + availableChains={chainList} + chain={currentChain} + account={account} + availableWallets={wallets} + connect={async (wallet) => { + const connector = connectors.find((item) => item.name === wallet?.name); + await connectAsync({ connector, chainId: currentChain?.id, }); - const as = [ - { - address: account, - }, - ]; - return ens ? addNameToAccounts(as, chain?.id) : as; }} disconnect={async () => { await disconnectAsync(); diff --git a/packages/wagmi/src/wagmi-provider/index.test.tsx b/packages/wagmi/src/wagmi-provider/index.test.tsx index 5b3105fdf..3b8c42378 100644 --- a/packages/wagmi/src/wagmi-provider/index.test.tsx +++ b/packages/wagmi/src/wagmi-provider/index.test.tsx @@ -35,7 +35,7 @@ describe('WagmiWeb3ConfigProvider', () => { }); const CustomButton: React.FC> = (props) => { - const { currentChain, onSwitchChain } = props; + const { chain, onSwitchChain } = props; return (
{ @@ -43,7 +43,7 @@ describe('WagmiWeb3ConfigProvider', () => { }} className="content" > - {currentChain?.name} + {chain?.name}
); }; @@ -51,7 +51,7 @@ describe('WagmiWeb3ConfigProvider', () => { const switchChain = vi.fn(); const App = () => ( - + @@ -81,7 +81,7 @@ describe('WagmiWeb3ConfigProvider', () => { }); const CustomButton: React.FC> = (props) => { - const { currentChain, onSwitchChain } = props; + const { chain, onSwitchChain } = props; return (
{ @@ -89,7 +89,7 @@ describe('WagmiWeb3ConfigProvider', () => { }} className="content" > - {currentChain?.name} + {chain?.name}
); }; @@ -109,7 +109,7 @@ describe('WagmiWeb3ConfigProvider', () => { ]; const App = () => ( - + diff --git a/packages/wagmi/src/wagmi-provider/index.tsx b/packages/wagmi/src/wagmi-provider/index.tsx index 3e5e68468..f2ec8408b 100644 --- a/packages/wagmi/src/wagmi-provider/index.tsx +++ b/packages/wagmi/src/wagmi-provider/index.tsx @@ -14,7 +14,7 @@ export type WagmiWeb3ConfigProviderProps< TWebSocketPublicClient extends WebSocketPublicClient = WebSocketPublicClient, > = { config: Config; - chains?: WagmiChain[]; + availableChains?: WagmiChain[]; assets?: (Chain | WalletFactory)[]; ens?: boolean; }; @@ -25,7 +25,7 @@ export function WagmiWeb3ConfigProvider< >({ children, assets = [], - chains = [mainnet], + availableChains = [mainnet], ens, ...restProps }: React.PropsWithChildren< @@ -35,7 +35,7 @@ export function WagmiWeb3ConfigProvider< {children} diff --git a/packages/wagmi/src/wagmi-provider/methods/addNameToAccount.ts b/packages/wagmi/src/wagmi-provider/methods/addNameToAccount.ts new file mode 100644 index 000000000..28a1ed040 --- /dev/null +++ b/packages/wagmi/src/wagmi-provider/methods/addNameToAccount.ts @@ -0,0 +1,13 @@ +import type { Account } from '@ant-design/web3-common'; +import { fetchEnsName } from '@wagmi/core'; + +export async function addNameToAccount(account: Account, chainId?: number): Promise { + const name = await fetchEnsName({ + address: account.address as `0x${string}`, + chainId, + }); + return { + ...account, + name: name ?? undefined, + }; +} diff --git a/packages/wagmi/src/wagmi-provider/methods/addNameToAccounts.ts b/packages/wagmi/src/wagmi-provider/methods/addNameToAccounts.ts deleted file mode 100644 index e21a92570..000000000 --- a/packages/wagmi/src/wagmi-provider/methods/addNameToAccounts.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type { Account } from '@ant-design/web3-common'; -import { fetchEnsName } from '@wagmi/core'; - -export async function addNameToAccounts(accounts: Account[], chainId?: number): Promise { - return Promise.all( - accounts.map(async (account) => { - const name = await fetchEnsName({ - address: account.address as `0x${string}`, - chainId, - }); - return { - ...account, - name: name ?? undefined, - }; - }), - ); -} diff --git a/packages/wagmi/src/wagmi-provider/methods/index.test.ts b/packages/wagmi/src/wagmi-provider/methods/index.test.ts index 62108cd15..ed9602907 100644 --- a/packages/wagmi/src/wagmi-provider/methods/index.test.ts +++ b/packages/wagmi/src/wagmi-provider/methods/index.test.ts @@ -1,4 +1,4 @@ -import { addNameToAccounts } from './index'; +import { addNameToAccount } from './index'; import { vi, describe, it, expect } from 'vitest'; vi.mock('@wagmi/core', () => { @@ -13,23 +13,20 @@ vi.mock('@wagmi/core', () => { }); describe('wagmi-provider/methods/index.ts', () => { - it('addNameToAccounts', async () => { - const accounts = await addNameToAccounts([ - { - address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B', - }, - { - address: '0x21CDf0974d53a6e96eF05d7B324a9803735f0000', - }, - ]); - expect(accounts).toEqual([ - { - address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B', - name: 'wanderingearth,eth', - }, - { - address: '0x21CDf0974d53a6e96eF05d7B324a9803735f0000', - }, - ]); + it('addNameToAccount', async () => { + const accountA = await addNameToAccount({ + address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B', + }); + expect(accountA).toEqual({ + address: '0x21CDf0974d53a6e96eF05d7B324a9803735fFd3B', + name: 'wanderingearth,eth', + }); + + const accountB = await addNameToAccount({ + address: '0x21CDf0974d53a6e96eF05d7B324a9803735f0000', + }); + expect(accountB).toEqual({ + address: '0x21CDf0974d53a6e96eF05d7B324a9803735f0000', + }); }); }); diff --git a/packages/wagmi/src/wagmi-provider/methods/index.ts b/packages/wagmi/src/wagmi-provider/methods/index.ts index 40c936c51..d8badb356 100644 --- a/packages/wagmi/src/wagmi-provider/methods/index.ts +++ b/packages/wagmi/src/wagmi-provider/methods/index.ts @@ -1,2 +1,2 @@ -export * from './addNameToAccounts'; +export * from './addNameToAccount'; export * from './getNFTMetadata'; diff --git a/packages/web3/src/connect-button/__tests__/__snapshots__/menu.test.tsx.snap b/packages/web3/src/connect-button/__tests__/__snapshots__/menu.test.tsx.snap index 7cae3e8e8..27e151c5a 100644 --- a/packages/web3/src/connect-button/__tests__/__snapshots__/menu.test.tsx.snap +++ b/packages/web3/src/connect-button/__tests__/__snapshots__/menu.test.tsx.snap @@ -124,6 +124,140 @@ exports[`ConnectButton > Should insert menu items before default menu items when `; +exports[`ConnectButton > Should insert menu items before default menu items when pass extraItems into actionsMenu 2`] = ` + +
+ +
+
+
+ + +
+ +`; + exports[`ConnectButton > Should override menu items when pass items into actionsMenu 1`] = `
@@ -183,6 +317,75 @@ exports[`ConnectButton > Should override menu items when pass items into actions `; +exports[`ConnectButton > Should override menu items when pass items into actionsMenu 2`] = ` + +
+ +
+
+
+ + +
+ +`; + exports[`ConnectButton > Should show menu when hover button 1`] = `
@@ -282,3 +485,113 @@ exports[`ConnectButton > Should show menu when hover button 1`] = `
`; + +exports[`ConnectButton > Should show menu when hover button 2`] = ` + +
+ +
+
+
+ + +
+ +`; diff --git a/packages/web3/src/connect-button/__tests__/index.test.tsx b/packages/web3/src/connect-button/__tests__/index.test.tsx index 8c6a05970..f5fc34314 100644 --- a/packages/web3/src/connect-button/__tests__/index.test.tsx +++ b/packages/web3/src/connect-button/__tests__/index.test.tsx @@ -10,9 +10,10 @@ describe('ConnectButton', () => { it('display name', () => { const { baseElement } = render( , ); expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth'); @@ -20,13 +21,24 @@ describe('ConnectButton', () => { it('display addresss when not has name', () => { const { baseElement } = render( - , + , ); expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('0x21CD...Fd3B'); }); it('display name when not has address', () => { - const { baseElement } = render(); + const { baseElement } = render( + , + ); expect(baseElement.querySelector('.ant-btn')?.textContent).toBe('wanderingearth.eth'); }); }); diff --git a/packages/web3/src/connect-button/__tests__/menu.test.tsx b/packages/web3/src/connect-button/__tests__/menu.test.tsx index 7d5817711..fbfd08601 100644 --- a/packages/web3/src/connect-button/__tests__/menu.test.tsx +++ b/packages/web3/src/connect-button/__tests__/menu.test.tsx @@ -1,7 +1,7 @@ import { ConnectButton } from '..'; import { fireEvent, render } from '@testing-library/react'; import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'; -import { mockClipboard, waitFakeTimer } from '../../utils/test-utils'; +import { mockClipboard } from '../../utils/test-utils'; import { readCopyText } from '../../utils'; import type { MenuItemType } from 'antd/es/menu/hooks/useItems'; @@ -34,7 +34,12 @@ describe('ConnectButton', () => { }); it('Should show menu when hover button', async () => { const App = () => ( - + ); const { baseElement } = render(); @@ -62,7 +67,12 @@ describe('ConnectButton', () => { }); it('Should show menu when hover button', async () => { const App = () => ( - + ); const { baseElement } = render(); @@ -91,7 +101,9 @@ describe('ConnectButton', () => { const menuClickFn = vi.fn(); const App = () => ( { const menuClickFn = vi.fn(); const App = () => ( { it('open profile modal in ConnectButton', async () => { const App = () => ( - + ); const { baseElement } = render(); expect(baseElement.querySelector('.ant-web3-connect-button-text')).not.toBeNull(); @@ -68,8 +72,9 @@ describe('ProfileModal', () => { it('should not display modal when pass false into profileModal', async () => { const App = () => ( ); @@ -82,8 +87,9 @@ describe('ProfileModal', () => { it('profile modal should customize by profileModal', async () => { const App = () => ( { it('display tooltip', () => { const { baseElement } = render( - , + , ); expect(baseElement.querySelector('.ant-tooltip')).not.toBeNull(); expect(baseElement.querySelector('.ant-tooltip-inner')?.textContent?.trim()).toBe( @@ -27,7 +32,7 @@ describe('ConnectButton', () => { it('disabled copyable in tooltip', () => { const { baseElement } = render( , ); @@ -41,7 +46,7 @@ describe('ConnectButton', () => { it('custom title in tooltip', () => { const { baseElement } = render( , ); @@ -58,7 +63,10 @@ describe('ConnectButton', () => { 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?.trim()).toBe( diff --git a/packages/web3/src/connect-button/connect-button.tsx b/packages/web3/src/connect-button/connect-button.tsx index c751f1e78..94ab47f75 100644 --- a/packages/web3/src/connect-button/connect-button.tsx +++ b/packages/web3/src/connect-button/connect-button.tsx @@ -14,15 +14,13 @@ import { CopyOutlined, LoginOutlined } from '@ant-design/icons'; export const ConnectButton: React.FC = (props) => { const { - address, - connected, onConnectClick, onDisconnectClick, - chains, + availableChains, onSwitchChain, tooltip, - currentChain, - name, + chain, + account, avatar, profileModal = true, onMenuClick, @@ -36,8 +34,8 @@ export const ConnectButton: React.FC = (props) => { const [messageApi, contextHolder] = message.useMessage(); const [showMenu, setShowMenu] = useState(false); let buttonText: React.ReactNode = 'Connect Wallet'; - if (connected) { - buttonText = name ??
; + if (account) { + buttonText = account?.name ??
; } const buttonProps: ButtonProps = { @@ -50,13 +48,13 @@ export const ConnectButton: React.FC = (props) => { }; const renderChainSelect = () => { - if (chains && chains.length > 1) { + if (availableChains && availableChains.length > 1) { return ( ); } @@ -76,11 +74,11 @@ export const ConnectButton: React.FC = (props) => { onClose={() => { setProfileOpen(false); }} - address={address} - name={name} + address={account?.address} + name={account?.name} avatar={ avatar ?? { - src: currentChain?.icon, + src: chain?.icon, } } modalProps={typeof profileModal === 'object' ? profileModal : undefined} @@ -89,7 +87,7 @@ export const ConnectButton: React.FC = (props) => { className={classNames(`${prefixCls}-text`, hashId)} onClick={() => { setShowMenu(false); - if (connected && !profileOpen && profileModal) { + if (account && !profileOpen && profileModal) { setProfileOpen(true); } else { onConnectClick?.(); @@ -108,8 +106,8 @@ export const ConnectButton: React.FC = (props) => { key: 'copyAddress', onClick: () => { setProfileOpen(false); - if (address) { - writeCopyText(address).then(() => { + if (account?.address) { + writeCopyText(account?.address).then(() => { messageApi.success('Address Copied!'); }); } @@ -126,7 +124,7 @@ export const ConnectButton: React.FC = (props) => { icon: , }, ], - [address, messageApi, onDisconnectClick], + [account?.address, messageApi, onDisconnectClick], ); const mergedMenuItems = useMemo(() => { @@ -160,7 +158,7 @@ export const ConnectButton: React.FC = (props) => { const mergedTooltipCopyable: ConnectButtonTooltipProps['copyable'] = typeof tooltip === 'object' ? tooltip.copyable !== false : !!tooltip; - let tooltipTitle: string = tooltip && address ? fillWith0x(address) : ''; + let tooltipTitle: string = tooltip && account?.address ? fillWith0x(account?.address) : ''; if (typeof tooltip === 'object' && typeof tooltip.title === 'string') { tooltipTitle = tooltip.title; } diff --git a/packages/web3/src/connect-button/demos/menu.tsx b/packages/web3/src/connect-button/demos/menu.tsx index 52bcee11a..106483a49 100644 --- a/packages/web3/src/connect-button/demos/menu.tsx +++ b/packages/web3/src/connect-button/demos/menu.tsx @@ -22,26 +22,30 @@ const App: React.FC = () => { return ( console.log('onMenuClick', item)} - connected /> { actionsMenu={{ extraItems: menuItems, }} - connected /> { actionsMenu={{ items: menuItems, }} - connected /> ); diff --git a/packages/web3/src/connect-button/demos/name.tsx b/packages/web3/src/connect-button/demos/name.tsx index a497d7bf5..2032f0eda 100644 --- a/packages/web3/src/connect-button/demos/name.tsx +++ b/packages/web3/src/connect-button/demos/name.tsx @@ -3,10 +3,11 @@ import { ConnectButton } from '@ant-design/web3'; const App: React.FC = () => { return ( ); }; diff --git a/packages/web3/src/connect-button/demos/profileModal.tsx b/packages/web3/src/connect-button/demos/profileModal.tsx index 3df44f568..0835a340f 100644 --- a/packages/web3/src/connect-button/demos/profileModal.tsx +++ b/packages/web3/src/connect-button/demos/profileModal.tsx @@ -6,21 +6,18 @@ const App: React.FC = () => { { - return ; + return ; }; export default App; diff --git a/packages/web3/src/connect-button/demos/tooltip.tsx b/packages/web3/src/connect-button/demos/tooltip.tsx index 1ca55ae99..6be96b9d3 100644 --- a/packages/web3/src/connect-button/demos/tooltip.tsx +++ b/packages/web3/src/connect-button/demos/tooltip.tsx @@ -4,21 +4,19 @@ import { Space } from 'antd'; const App: React.FC = () => { return ( - + ); diff --git a/packages/web3/src/connect-button/demos/type.tsx b/packages/web3/src/connect-button/demos/type.tsx index 83b370616..6e3d7cd7c 100644 --- a/packages/web3/src/connect-button/demos/type.tsx +++ b/packages/web3/src/connect-button/demos/type.tsx @@ -6,12 +6,19 @@ const App: React.FC = () => { - - + + ); }; diff --git a/packages/web3/src/connect-button/index.md b/packages/web3/src/connect-button/index.md index 20726c550..6f96390d2 100644 --- a/packages/web3/src/connect-button/index.md +++ b/packages/web3/src/connect-button/index.md @@ -36,9 +36,7 @@ A Button for connect chain quickly. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| connected | Whether connected | `boolean` | - | - | -| address | Address | `string` | - | - | -| name | Name, like ENS | `string` | - | - | +| account | Current connected account | `Account` | - | - | | tooltip | Show tooltip when mouse enter address | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true`, will display address by default | - | | actionsMenu | Config menu items | `boolean \|` [ActionsMenu](#actionsmenu) | - | - | | profileModal | Config profile modal | `boolean \|` [ProfileModal](#profilemodal) | - | - | diff --git a/packages/web3/src/connect-button/index.zh-CN.md b/packages/web3/src/connect-button/index.zh-CN.md index 1a419a47f..b90826a57 100644 --- a/packages/web3/src/connect-button/index.zh-CN.md +++ b/packages/web3/src/connect-button/index.zh-CN.md @@ -36,9 +36,7 @@ order: 1 | 属性 | 描述 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| connected | 是否已连接 | `boolean` | - | - | -| address | 地址 | `string` | - | - | -| name | 名称，比如以太坊的 ENS | `string` | - | - | +| account | 当前连接账号 | `Account` | - | - | | tooltip | 鼠标移入地址时展示提示 | `boolean \|` [ConnectButtonTooltipProps](#connectbuttontooltipprops) | `true`，默认显示 address 信息 | - | | actionsMenu | 配置菜单项 | `boolean \|` [ActionsMenu](#actionsmenu) | - | - | | profileModal | 配置信息弹框 | `boolean \|` [ProfileModal](#profilemodal) | - | - | diff --git a/packages/web3/src/connector/__tests__/basic.test.tsx b/packages/web3/src/connector/__tests__/basic.test.tsx index e87305507..c5a95f34c 100644 --- a/packages/web3/src/connector/__tests__/basic.test.tsx +++ b/packages/web3/src/connector/__tests__/basic.test.tsx @@ -34,29 +34,29 @@ describe('Connector', () => { const onConnectCallTest = vi.fn(); const onDisconnected = vi.fn(); const CustomButton: React.FC> = (props) => { - const { address, connected, onConnectClick, onDisconnectClick, children } = props; + const { account, onConnectClick, onDisconnectClick, children } = props; return ( ); }; const onConnected = vi.fn(); const App = () => { - const [accounts, setAccounts] = React.useState(); + const [account, setAccount] = React.useState(); return ( { @@ -65,19 +65,16 @@ describe('Connector', () => { }, ]} onConnect={onConnectCallTest} - requestAccounts={async () => { - return [ - { - address: '0x1234567890', - }, - ]; + connect={async () => { + setAccount({ + address: '0x1234567890', + }); }} disconnect={async () => { - setAccounts([]); + setAccount(undefined); }} onDisconnected={onDisconnected} - onConnected={(as) => { - setAccounts(as); + onConnected={() => { onConnected(); }} > diff --git a/packages/web3/src/connector/__tests__/chains.test.tsx b/packages/web3/src/connector/__tests__/chains.test.tsx index 061289077..2a60f767e 100644 --- a/packages/web3/src/connector/__tests__/chains.test.tsx +++ b/packages/web3/src/connector/__tests__/chains.test.tsx @@ -9,12 +9,12 @@ import type { Chain } from '@ant-design/web3-common'; describe('Connector with chains', () => { it('currentChain', () => { const CustomButton: React.FC> = (props) => { - const { currentChain } = props; - return ; + const { chain } = props; + return ; }; const App = () => ( - + ); @@ -24,12 +24,12 @@ describe('Connector with chains', () => { it('chains', () => { const CustomButton: React.FC> = (props) => { - const { chains } = props; - return ; + const { availableChains } = props; + return ; }; const App = () => ( - + ); @@ -39,14 +39,14 @@ describe('Connector with chains', () => { it('onSwitchChain', async () => { const CustomButton: React.FC> = (props) => { - const { currentChain, onSwitchChain } = props; + const { chain, onSwitchChain } = props; return ( ); }; @@ -58,8 +58,8 @@ describe('Connector with chains', () => { const chains = [Mainnet, Polygon]; return ( { setCurrentChain(chain); diff --git a/packages/web3/src/connector/__tests__/name.test.tsx b/packages/web3/src/connector/__tests__/name.test.tsx index 6daae3ef7..81c49b221 100644 --- a/packages/web3/src/connector/__tests__/name.test.tsx +++ b/packages/web3/src/connector/__tests__/name.test.tsx @@ -7,31 +7,29 @@ import { it, describe, expect } from 'vitest'; describe('Connector', () => { it('name', async () => { const CustomButton: React.FC> = (props) => { - const { name, address, connected, onConnectClick, onDisconnectClick, children } = props; + const { account, onConnectClick, onDisconnectClick, children } = props; return ( ); }; const App = () => { - const [accounts] = React.useState([ - { - address: '0x1234567890', - name: 'wanderingearth.eth', - }, - ]); + const [account] = React.useState({ + address: '0x1234567890', + name: 'wanderingearth.eth', + }); return ( - + children ); diff --git a/packages/web3/src/connector/conector.tsx b/packages/web3/src/connector/conector.tsx index a0e9b5048..30deab975 100644 --- a/packages/web3/src/connector/conector.tsx +++ b/packages/web3/src/connector/conector.tsx @@ -15,20 +15,19 @@ export const Connector: React.FC = (props) => { onDisconnected, onChainSwitched, } = props; - const { wallets, requestAccounts, disconnect, accounts, chains, currentChain, switchChain } = + const { availableWallets, connect, disconnect, account, availableChains, chain, switchChain } = useProvider(props); - const currentAccount = accounts?.[0]; const [open, setOpen] = React.useState(false); const [loading, setLoading] = React.useState(false); const [messageApi, contextHolder] = message.useMessage(); - const connect = async (wallet?: Wallet) => { + const connectWallet = async (wallet?: Wallet) => { onConnect?.(); try { setLoading(true); - const as = await requestAccounts?.(wallet?.name); + await connect?.(wallet); + onConnected?.(); setOpen(false); - onConnected?.(as); } catch (e: any) { messageApi.error(e.message); console.error(e); @@ -41,9 +40,7 @@ export const Connector: React.FC = (props) => { <> {contextHolder} {React.cloneElement(children as React.ReactElement, { - address: currentAccount?.address, - name: currentAccount?.name, - connected: !!currentAccount, + account, loading, onConnectClick: () => { setOpen(true); @@ -55,24 +52,24 @@ export const Connector: React.FC = (props) => { onDisconnected?.(); setLoading(false); }, - chains, - currentChain, - onSwitchChain: async (chain: Chain) => { - await switchChain?.(chain); - onChainSwitched?.(chain); + availableChains, + chain, + onSwitchChain: async (c: Chain) => { + await switchChain?.(c); + onChainSwitched?.(c); }, })} { if (!wallet.getQrCode) { // not need show qr code, hide immediately setOpen(false); } - await connect(wallet); + await connectWallet(wallet); }} {...modalProps} /> diff --git a/packages/web3/src/connector/demos/chains.tsx b/packages/web3/src/connector/demos/chains.tsx index fd93e9f2a..330603392 100644 --- a/packages/web3/src/connector/demos/chains.tsx +++ b/packages/web3/src/connector/demos/chains.tsx @@ -27,7 +27,7 @@ const config = createConfig({ const App: React.FC = () => { return ( - + diff --git a/packages/web3/src/connector/index.md b/packages/web3/src/connector/index.md index 9a6351038..59863928d 100644 --- a/packages/web3/src/connector/index.md +++ b/packages/web3/src/connector/index.md @@ -38,13 +38,13 @@ order: 0 | modalProps | Properties passed through to `ConnectModal`. | `ModalProps` | - | - | | onConnect | Callback when triggering the connection. | `() => Promise` | - | - | | onDisconnect | Callback when triggering the disconnection. | `() => Promise` | - | - | -| onConnected | Callback when the connection is successful. | `(account: Account) => Promise` | - | - | +| onConnected | Callback when the connection is successful. | `() => Promise` | - | - | | onDisconnected | Callback when the connection is disconnected. | `() => Promise` | - | - | | onChainSwitched | Callback when switching networks. | `(chain: Chain) => Promise` | - | - | -| wallets | Wallet list | `Wallet[]` | - | - | -| accounts | Account list | `Account[]` | - | - | -| chains | Network list | `Chain[]` | - | - | -| requestAccounts | Method to request the account list | `() => Promise` | - | - | +| availableWallets | Available aallet list | `Wallet[]` | - | - | +| account | Current connected account | `Account` | - | - | +| availableChains | Available select chains list | `Chain[]` | - | - | +| connect | Method to request the account list | `() => Promise` | - | - | | disconnect | Method to disconnect | `() => Promise` | - | - | | switchChain | Method to switch networks | `(chain: Chain) => Promise` | - | - | @@ -54,11 +54,10 @@ The properties of the `children` component of `Connector` are inherited and util | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| address | The address of the currently connected account | `string` | - | - | +| account | The currently connected account | `string` | - | - | | onConnectClick | Connection event | `React.MouseEventHandler` | - | - | | onDisconnectClick | Disconnection event | `React.MouseEventHandler` | - | - | | onSwitchChain | Network switch event | `(chain: Chain) => Promise` | - | - | -| name | The name corresponding to the address, usually referring to ENS. | `string` | - | - | | connected | Is Connected | `boolean` | - | - | | chains | List of networks currently connected | `ChainSelectItem[]` | - | - | | banlance | Balance of the currently connected account | `Banlance[]` \| `Banlance` | - | - | diff --git a/packages/web3/src/connector/index.zh-CN.md b/packages/web3/src/connector/index.zh-CN.md index 81a27dfe6..b0cf6ff13 100644 --- a/packages/web3/src/connector/index.zh-CN.md +++ b/packages/web3/src/connector/index.zh-CN.md @@ -38,12 +38,12 @@ order: 0 | modalProps | 透传给 `ConnectModal` 的属性 | `ModalProps` | - | - | | onConnect | 触发连接时的回调 | `() => Promise` | - | - | | onDisconnect | 触发断开连接时的回调 | `() => Promise` | - | - | -| onConnected | 连接成功时的回调 | `(account: Account) => Promise` | - | - | +| onConnected | 连接成功时的回调 | `() => Promise` | - | - | | onDisconnected | 断开连接时的回调 | `() => Promise` | - | - | | onChainSwitched | 切换网络时的回调 | `(chain: Chain) => Promise` | - | - | -| wallets | 钱包列表 | `Wallet[]` | - | - | -| accounts | 账户列表 | `Account[]` | - | - | -| chains | 网络列表 | `Chain[]` | - | - | +| wavailableWallets | 钱包列表 | `Wallet[]` | - | - | +| account | 当前连接账号 | `Account[]` | - | - | +| availableChains | 可以连接的链列表 | `Chain[]` | - | - | | requestAccounts | 请求账户列表的方法 | `() => Promise` | - | - | | disconnect | 断开连接的方法 | `() => Promise` | - | - | | switchChain | 切换网络的方法 | `(chain: Chain) => Promise` | - | - | @@ -52,13 +52,12 @@ order: 0 `Connector` 的 `children` 组件的属性，`ConnectButton` 继承并使用了这些属性。如果你不使用 `ConnectButton`，可以通过在自己的组件中来使用这些属性来自定义 `Connector` 的 `chidlren`。 -| 属性 | 描述 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| address | 当前连接的账户地址 | `string` | - | - | -| onConnectClick | 连接事件 | `React.MouseEventHandler` | - | - | -| onDisconnectClick | 断开连接事件 | `React.MouseEventHandler` | - | - | -| onSwitchChain | 切换网络事件 | `(chain: Chain) => Promise` | - | - | -| name | address 对应的名称，通常就是指 ENS | `string` | - | - | -| connected | 是否已连接 | `boolean` | - | - | -| chains | 当前连接的网络列表 | `ChainSelectItem[]` | - | - | -| banlance | 当前连接的账户余额 | `Banlance[]` \| `Banlance` | - | - | +| 属性 | 描述 | 类型 | 默认值 | 版本 | +| ----------------- | ------------------ | --------------------------------- | ------ | ---- | +| account | 当前连接的账户地址 | `string` | - | - | +| onConnectClick | 连接事件 | `React.MouseEventHandler` | - | - | +| onDisconnectClick | 断开连接事件 | `React.MouseEventHandler` | - | - | +| onSwitchChain | 切换网络事件 | `(chain: Chain) => Promise` | - | - | +| connected | 是否已连接 | `boolean` | - | - | +| chains | 当前连接的网络列表 | `ChainSelectItem[]` | - | - | +| banlance | 当前连接的账户余额 | `Banlance[]` \| `Banlance` | - | - | diff --git a/packages/web3/src/connector/interface.ts b/packages/web3/src/connector/interface.ts index d183970d0..dd9bd094c 100644 --- a/packages/web3/src/connector/interface.ts +++ b/packages/web3/src/connector/interface.ts @@ -7,15 +7,17 @@ export interface ConnectorProps { onConnect?: () => void; onDisconnect?: () => Promise; - onConnected?: (accounts?: Account[]) => void; + onConnected?: () => void; onDisconnected?: () => void; onChainSwitched?: (chain?: Chain) => void; - wallets?: Wallet[]; - accounts?: Account[]; - chains?: Chain[]; - currentChain?: Chain; - requestAccounts?: (wallet?: string) => Promise; + account?: Account; + chain?: Chain; + + availableChains?: Chain[]; + availableWallets?: Wallet[]; + + connect?: (wallet?: Wallet) => Promise; disconnect?: () => Promise; switchChain?: (chain: Chain) => Promise; } diff --git a/packages/web3/src/hooks/demos/useAccount.tsx b/packages/web3/src/hooks/demos/useAccount.tsx new file mode 100644 index 000000000..9abad4f0d --- /dev/null +++ b/packages/web3/src/hooks/demos/useAccount.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { useAccount } from '@ant-design/web3'; +import { Space } from 'antd'; + +const App: React.FC = () => { + const { account } = useAccount(); + if (!account) { + return
Not Connected
; + } + return {account.address}; +}; + +export default App; diff --git a/packages/web3/src/hooks/demos/useAccounts.tsx b/packages/web3/src/hooks/demos/useAccounts.tsx deleted file mode 100644 index e89299923..000000000 --- a/packages/web3/src/hooks/demos/useAccounts.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { useAccounts, Account } from '@ant-design/web3'; -import { Space } from 'antd'; - -export default () => { - const { accounts } = useAccounts(); - if (accounts.length === 0) { - return
Not Connected
; - } - return {accounts.map((account: Account) => account.address)}; -}; diff --git a/packages/web3/src/hooks/demos/useNFT.tsx b/packages/web3/src/hooks/demos/useNFT.tsx index 8ce2b67f5..aa5ca7d7a 100644 --- a/packages/web3/src/hooks/demos/useNFT.tsx +++ b/packages/web3/src/hooks/demos/useNFT.tsx @@ -1,10 +1,13 @@ +import React from 'react'; import { useNFT } from '@ant-design/web3'; import { Spin } from 'antd'; -export default () => { +const App: React.FC = () => { const { metadata, error, loading } = useNFT('0x79fcdef22feed20eddacbb2587640e45491b757f', 42n); if (error) { return
{error.message}
; } return {metadata.name}; }; + +export default App; diff --git a/packages/web3/src/hooks/index.md b/packages/web3/src/hooks/index.md index 6c86b061b..e4f2db163 100644 --- a/packages/web3/src/hooks/index.md +++ b/packages/web3/src/hooks/index.md @@ -12,6 +12,6 @@ Expose some commonly used Hooks that you can use independently or in conjunction -## useAccounts +## useAccount - + diff --git a/packages/web3/src/hooks/index.tsx b/packages/web3/src/hooks/index.tsx index 4638f0709..fbab8c31b 100644 --- a/packages/web3/src/hooks/index.tsx +++ b/packages/web3/src/hooks/index.tsx @@ -1,2 +1,2 @@ export { default as useNFT } from './useNFT'; -export { default as useAccounts } from './useAccounts'; +export { default as useAccount } from './useAccount'; diff --git a/packages/web3/src/hooks/index.zh-CN.md b/packages/web3/src/hooks/index.zh-CN.md index 160c66c7e..c8eabb40d 100644 --- a/packages/web3/src/hooks/index.zh-CN.md +++ b/packages/web3/src/hooks/index.zh-CN.md @@ -12,6 +12,6 @@ order: 2 -## useAccounts +## useAccount - + diff --git a/packages/web3/src/hooks/useAccount.ts b/packages/web3/src/hooks/useAccount.ts new file mode 100644 index 000000000..206a6aa6c --- /dev/null +++ b/packages/web3/src/hooks/useAccount.ts @@ -0,0 +1,9 @@ +import useProvider from './useProvider'; + +export default function useAccount() { + const { account } = useProvider(); + + return { + account, + }; +} diff --git a/packages/web3/src/hooks/useAccounts.ts b/packages/web3/src/hooks/useAccounts.ts deleted file mode 100644 index 9363a2e2d..000000000 --- a/packages/web3/src/hooks/useAccounts.ts +++ /dev/null @@ -1,10 +0,0 @@ -import useProvider from './useProvider'; - -export default function useAccounts() { - const { accounts = [] } = useProvider(); - - return { - accounts, - currentAccount: accounts?.[0], - }; -} diff --git a/packages/web3/src/hooks/useNFT.ts b/packages/web3/src/hooks/useNFT.ts index 53a403063..915d4de9a 100644 --- a/packages/web3/src/hooks/useNFT.ts +++ b/packages/web3/src/hooks/useNFT.ts @@ -1,5 +1,5 @@ import { useEffect, useState } from 'react'; -import { NFTMetadata } from '@ant-design/web3-common'; +import type { NFTMetadata } from '@ant-design/web3-common'; import useProvider from './useProvider'; export default function useNFT(address: string, tokenId: bigint) { diff --git a/packages/web3/src/hooks/useWallets.ts b/packages/web3/src/hooks/useWallets.ts index 49cfce8d1..82292808d 100644 --- a/packages/web3/src/hooks/useWallets.ts +++ b/packages/web3/src/hooks/useWallets.ts @@ -1,9 +1,9 @@ import useProvider from './useProvider'; export default function useWallets() { - const { wallets = [] } = useProvider(); + const { availableWallets = [] } = useProvider(); return { - wallets, + wallets: availableWallets, }; } diff --git a/packages/web3/src/web3-config-provider/demos/simple.tsx b/packages/web3/src/web3-config-provider/demos/simple.tsx index 252d717c4..5f2e0ae9a 100644 --- a/packages/web3/src/web3-config-provider/demos/simple.tsx +++ b/packages/web3/src/web3-config-provider/demos/simple.tsx @@ -2,10 +2,10 @@ import React from 'react'; import { Web3ConfigProvider, ConnectButton, type Account } from '@ant-design/web3'; const App: React.FC = () => { - const [accounts, setAccounts] = React.useState([]); + const [account, setAccount] = React.useState(); return ( { ], }, ]} - requestAccounts={async () => { - const newAccounts = [ - { - address: '0x1234567890123456789012345678901234567890', - }, - ]; - setAccounts(newAccounts); - return newAccounts; + connect={async () => { + const newAccount = { + address: '0x1234567890123456789012345678901234567890', + }; + setAccount(newAccount); }} - accounts={accounts} + account={account} >