feat(connector): auto display ens avatar (#977)

* feat(wagmi): support display ens avatar

* test(wagmi): add mock for ens hook

* chore: add changeset

* fix(connector): review comments

Author: jeasonstudio

.changeset/honest-pumpkins-act.md

@@ -0,0 +1,7 @@
+---
+'@ant-design/web3-common': minor
+'@ant-design/web3-wagmi': minor
+'@ant-design/web3': minor
+---
+
+feat: auto display ens avatar

packages/common/src/types.ts

@@ -1,6 +1,7 @@
 export interface Account {
   address: string;
   name?: string;
+  avatar?: string;
 }
 
 export enum ChainIds {

packages/wagmi/src/wagmi-provider/__tests__/balance.test.tsx

@@ -54,6 +54,7 @@ vi.mock('wagmi', () => {
       };
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/config-with-eip6963-and-wallets.test.tsx

@@ -22,6 +22,7 @@ vi.mock('wagmi', async () => {
       };
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/connect-with-universal-wallet.test.tsx

@@ -79,6 +79,7 @@ vi.mock('wagmi', () => {
       return {};
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/connect.test.tsx

@@ -79,6 +79,7 @@ vi.mock('wagmi', () => {
       return {};
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/ens.test.tsx

@@ -54,6 +54,9 @@ vi.mock('wagmi', () => {
       }
       return {};
     },
+    useEnsAvatar: () => ({
+      data: 'test-avatar',
+    }),
   };
 });
 
@@ -87,4 +90,32 @@ describe('WagmiWeb3ConfigProvider ens', () => {
       expect(baseElement.querySelector('.custom-text')?.textContent).toBe('wanderingearth.eth');
     });
   });
+
+  it('should display avatar', async () => {
+    const CustomConnector = () => {
+      const { account } = useProvider();
+      return (
+        <div>
+          <div className="custom-text">{account ? account?.avatar : 'Connect'}</div>
+        </div>
+      );
+    };
+
+    const App = () => (
+      <AntDesignWeb3ConfigProvider
+        ens
+        availableChains={[mainnet]}
+        availableConnectors={[]}
+        walletFactorys={[MetaMask()]}
+        chainAssets={[Mainnet]}
+      >
+        <CustomConnector />
+      </AntDesignWeb3ConfigProvider>
+    );
+    const { baseElement } = render(<App />);
+
+    await waitFor(() => {
+      expect(baseElement.querySelector('.custom-text')?.textContent).toBe('test-avatar');
+    });
+  });
 });

packages/wagmi/src/wagmi-provider/__tests__/nft.test.tsx

@@ -50,6 +50,7 @@ vi.mock('wagmi', () => {
       return {};
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/switch-chain-unconnected.test.tsx

@@ -54,6 +54,7 @@ vi.mock('wagmi', () => {
       };
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });
 

packages/wagmi/src/wagmi-provider/__tests__/switch-chain.test.tsx

@@ -70,6 +70,7 @@ vi.mock('wagmi', () => {
       };
     },
     useEnsName: () => ({}),
+    useEnsAvatar: () => ({}),
   };
 });