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 <[email protected]>
ant-design · Nov 29, 2023 · a81b4c9 · a81b4c9
1 parent 2b6936d
commit a81b4c9
Show file tree

Hide file tree

Showing 43 changed files with 612 additions and 279 deletions.
diff --git a/docs/guide/demos/guide.tsx b/docs/guide/demos/guide.tsx
@@ -27,7 +27,7 @@ const config = createConfig({
 
 const App: React.FC = () => {
   return (
-    <WagmiWeb3ConfigProvider chains={chains} config={config}>
+    <WagmiWeb3ConfigProvider availableChains={chains} config={config}>
       <Connector>
         <ConnectButton />
       </Connector>

diff --git 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<Account[]>;
+  availableWallets?: Wallet[];
+  availableChains?: Chain[];
+
+  connect?: (wallet?: Wallet) => Promise<void>;
   disconnect?: () => Promise<void>;
   switchChain?: (chain: Chain) => Promise<void>;
 
@@ -141,14 +143,12 @@ export type Banlance = {
 };
 
 export interface ConnectorTriggerProps {
-  address?: string;
+  account?: Account;
   loading?: boolean;
   onConnectClick?: () => void;
   onDisconnectClick?: () => Promise<void>;
   onSwitchChain?: (chain: Chain) => Promise<void>;
-  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
@@ -37,7 +37,7 @@ export const EthereumProvider: React.FC<Web3ProviderProps> = (props) => {
   }, [provider]);
 
   return (
-    <Web3ConfigProvider accounts={accounts} wallets={wallets} {...provider}>
+    <Web3ConfigProvider account={accounts[0]} availableWallets={wallets} {...provider}>
       {children}
     </Web3ConfigProvider>
   );

diff --git 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<AntDesignWeb3ConfigProviderProps> = (props) => {
-  const { children, assets, chains, ens } = props;
+  const { children, assets, availableChains, ens } = props;
   const { address, isDisconnected } = useAccount();
-  const [accounts, setAccounts] = React.useState<Account[]>([]);
+  const [account, setAccount] = React.useState<Account | undefined>();
   const { connectors, connectAsync } = useConnect();
   const { switchNetwork } = useSwitchNetwork();
   const { chain } = useNetwork();
@@ -30,16 +30,14 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
 
   React.useEffect(() => {
     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<AntDesignWeb3ConfigProviderPr
   }, [connectors, assets]);
 
   const chainList: Chain[] = React.useMemo(() => {
-    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<AntDesignWeb3ConfigProviderPr
       }
       return c;
     });
-  }, [chains, assets]);
+  }, [availableChains, assets]);
 
   React.useEffect(() => {
     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<AntDesignWeb3ConfigProviderPr
     }
     setCurrentChain(c);
     return;
-  }, [chain, assets, chains, currentChain]);
+  }, [chain, assets, availableChains, currentChain]);
 
   return (
     <Web3ConfigProvider
-      chains={chainList}
-      currentChain={currentChain}
-      accounts={accounts}
-      wallets={wallets}
-      requestAccounts={async (wallet) => {
-        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
@@ -35,23 +35,23 @@ describe('WagmiWeb3ConfigProvider', () => {
     });
 
     const CustomButton: React.FC<React.PropsWithChildren<ConnectorTriggerProps>> = (props) => {
-      const { currentChain, onSwitchChain } = props;
+      const { chain, onSwitchChain } = props;
       return (
         <div
           onClick={() => {
             onSwitchChain?.(Mainnet);
           }}
           className="content"
         >
-          {currentChain?.name}
+          {chain?.name}
         </div>
       );
     };
 
     const switchChain = vi.fn();
 
     const App = () => (
-      <WagmiWeb3ConfigProvider chains={chains} config={config}>
+      <WagmiWeb3ConfigProvider availableChains={chains} config={config}>
         <Connector switchChain={switchChain}>
           <CustomButton />
         </Connector>
@@ -81,15 +81,15 @@ describe('WagmiWeb3ConfigProvider', () => {
     });
 
     const CustomButton: React.FC<React.PropsWithChildren<ConnectorTriggerProps>> = (props) => {
-      const { currentChain, onSwitchChain } = props;
+      const { chain, onSwitchChain } = props;
       return (
         <div
           onClick={() => {
             onSwitchChain?.(chains[0]);
           }}
           className="content"
         >
-          {currentChain?.name}
+          {chain?.name}
         </div>
       );
     };
@@ -109,7 +109,7 @@ describe('WagmiWeb3ConfigProvider', () => {
     ];
 
     const App = () => (
-      <WagmiWeb3ConfigProvider assets={assets} chains={chains} config={config}>
+      <WagmiWeb3ConfigProvider assets={assets} availableChains={chains} config={config}>
         <Connector switchChain={switchChain}>
           <CustomButton />
         </Connector>

diff --git 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<TPublicClient, TWebSocketPublicClient>;
-  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<
     <WagmiConfig {...restProps}>
       <AntDesignWeb3ConfigProvider
         assets={[...assets, MetaMask, WallectConnect, Mainnet, Polygon, BSC, Goerli]}
-        chains={chains}
+        availableChains={availableChains}
         ens={ens}
       >
         {children}

diff --git a/packages/wagmi/src/wagmi-provider/methods/addNameToAccount.ts 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<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/addNameToAccounts.ts b/packages/wagmi/src/wagmi-provider/methods/addNameToAccounts.ts
diff --git 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
@@ -1,2 +1,2 @@
-export * from './addNameToAccounts';
+export * from './addNameToAccount';
 export * from './getNFTMetadata';