feat: add useAccounts hook

packages/web3/src/connect-button/connect-button.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import { Button } from 'antd';
-import useCurrentAccount from '../hooks/useCurrentAccount';
+import useAccounts from '../hooks/useAccounts';
 import useProvider from '../hooks/useProvider';
 import { Address } from '../address';
 import type { ConnectButtonProps } from './interface';
 import { UnconnectedButton } from './unconnected-button';
 
 export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
-  const { account } = useCurrentAccount();
+  const { currentAccount } = useAccounts();
   const { provider } = useProvider();
 
-  if (!account) {
+  if (!currentAccount) {
     return <UnconnectedButton {...props} />;
   }
 
@@ -26,7 +26,7 @@ export const ConnectButton: React.FC<ConnectButtonProps> = (props) => {
         await provider?.disconnect();
       }}
     >
-      <Address ellipsis address={account.address} />
+      <Address ellipsis address={currentAccount.address} />
     </Button>
   );
 };

packages/web3/src/hooks/demos/useAccounts.tsx

@@ -0,0 +1,10 @@
+import { useAccounts, Account } from '@ant-design/web3';
+import { Space } from 'antd';
+
+export default () => {
+  const { accounts } = useAccounts();
+  if (accounts.length === 0) {
+    return <div>Not Connected</div>;
+  }
+  return <Space direction="vertical">{accounts.map((account: Account) => account.address)}</Space>;
+};

packages/web3/src/hooks/index.md

@@ -6,8 +6,12 @@ order: 2
 
 # Hooks
 
-Components used to display NFT images more conveniently and simply.
+Expose some commonly used Hooks that you can use independently or in conjunction with components.
 
 ## useNFT
 
 <code src="./demos/useNFT.tsx"></code>
+
+## useAccounts
+
+<code src="./demos/useAccounts.tsx"></code>

packages/web3/src/hooks/index.tsx

@@ -1 +1,2 @@
 export { default as useNFT } from './useNFT';
+export { default as useAccounts } from './useAccounts';

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

@@ -6,6 +6,12 @@ order: 2
 
 # Hooks
 
+暴露一些常用的 Hooks，你可以单独使用或者配合组件使用。
+
 ## useNFT
 
 <code src="./demos/useNFT.tsx"></code>
+
+## useAccounts
+
+<code src="./demos/useAccounts.tsx"></code>

packages/web3/src/hooks/useCurrentAccount.ts → packages/web3/src/hooks/useAccounts.ts

@@ -1,10 +1,10 @@
 import useProvider from './useProvider';
 
-export default function useCurrentAccount() {
+export default function useAccounts() {
   const { accounts } = useProvider();
 
   return {
     accounts,
-    account: accounts?.[0],
+    currentAccount: accounts?.[0],
   };
 }

packages/web3/src/index.tsx

@@ -6,3 +6,5 @@ export * from './browser-link';
 export * from './nft-image';
 export * from './constants';
 export * from './hooks';
+
+export type { Account } from '@ant-design/web3-common';