fix: Show wallet which not config connector when eip6963 is true

.changeset/khaki-tips-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3-wagmi': patch
+---
+
+fix: Show wallet which not config connector when eip6963 is true

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

@@ -87,13 +87,150 @@ describe('more-wallets-connect', () => {
     expect(walletItems.length).toBe(5);
     fireEvent.click(walletItems[0]!);
     await vi.waitFor(() => {
-      expect(baseElement.querySelector('.ant-web3-connect-modal-card-list')).toBeTruthy();
+      expect(baseElement.querySelector('.ant-web3-connect-modal-qr-code-box')).toBeTruthy();
     });
     fireEvent.click(walletItems[1]!);
     await vi.waitFor(() => {
       expect(baseElement.querySelector('.ant-web3-connect-modal-qr-code-box')).toBeTruthy();
     });
     fireEvent.click(walletItems[0]!);
+    await vi.waitFor(() => {
+      expect(baseElement.querySelector('.ant-web3-connect-modal-qr-code-box')).toBeTruthy();
+      expect(baseElement.querySelector('.ant-web3-connect-modal-card-list')).toBe(null);
+    });
+  });
+
+  it('config wallets without injected connector', async () => {
+    vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
+      md: true, // ≥ 768px, mock PC
+    });
+    const config = createConfig({
+      chains: [mainnet],
+      transports: {
+        [mainnet.id]: http(),
+      },
+      connectors: [
+        walletConnect({
+          showQrModal: false,
+          projectId: 'YOUR_WALLET_CONNET_PROJECT_ID',
+        }),
+      ],
+    });
+
+    const App = () => {
+      return (
+        <WagmiWeb3ConfigProvider wallets={[MetaMask(), SafeheronWallet()]} config={config}>
+          <Connector>
+            <ConnectButton />
+          </Connector>
+        </WagmiWeb3ConfigProvider>
+      );
+    };
+    const { baseElement } = render(<App />);
+    const btn = baseElement.querySelector('.ant-web3-connect-button');
+    fireEvent.click(btn!);
+    const walletItems = baseElement.querySelectorAll('.ant-web3-connect-modal-wallet-item');
+    expect(walletItems.length).toBe(1);
+  });
+
+  it('config wallets without injected connector and config eip6963', async () => {
+    vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
+      md: true, // ≥ 768px, mock PC
+    });
+    const config = createConfig({
+      chains: [mainnet],
+      transports: {
+        [mainnet.id]: http(),
+      },
+      connectors: [
+        walletConnect({
+          showQrModal: false,
+          projectId: 'YOUR_WALLET_CONNET_PROJECT_ID',
+        }),
+        coinbaseWallet({
+          appName: 'ant.design.web3',
+          jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${'YOUR_ZAN_API_KEY'}`,
+        }),
+      ],
+    });
+
+    const App = () => {
+      return (
+        <WagmiWeb3ConfigProvider
+          eip6963
+          wallets={[
+            MetaMask(),
+            WalletConnect(),
+            TokenPocket(),
+            CoinbaseWallet(),
+            SafeheronWallet(),
+          ]}
+          config={config}
+        >
+          <Connector>
+            <ConnectButton />
+          </Connector>
+        </WagmiWeb3ConfigProvider>
+      );
+    };
+    const { baseElement } = render(<App />);
+    const btn = baseElement.querySelector('.ant-web3-connect-button');
+    fireEvent.click(btn!);
+    const walletItems = baseElement.querySelectorAll('.ant-web3-connect-modal-wallet-item');
+    expect(walletItems.length).toBe(5);
+    fireEvent.click(walletItems[0]!);
+    await vi.waitFor(() => {
+      expect(baseElement.querySelector('.ant-web3-connect-modal-qr-code-box')).toBeTruthy();
+      expect(baseElement.querySelector('.ant-web3-connect-modal-card-list')).toBe(null);
+    });
+  });
+
+  it('show get wallet panel when only injected wallet not installed', async () => {
+    vi.spyOn(Grid, 'useBreakpoint').mockReturnValue({
+      md: true, // ≥ 768px, mock PC
+    });
+    const config = createConfig({
+      chains: [mainnet],
+      transports: {
+        [mainnet.id]: http(),
+      },
+      connectors: [
+        walletConnect({
+          showQrModal: false,
+          projectId: 'YOUR_WALLET_CONNET_PROJECT_ID',
+        }),
+        coinbaseWallet({
+          appName: 'ant.design.web3',
+          jsonRpcUrl: `https://api.zan.top/node/v1/eth/mainnet/${'YOUR_ZAN_API_KEY'}`,
+        }),
+      ],
+    });
+
+    const App = () => {
+      return (
+        <WagmiWeb3ConfigProvider
+          eip6963
+          wallets={[
+            MetaMask(),
+            WalletConnect(),
+            TokenPocket(),
+            CoinbaseWallet(),
+            SafeheronWallet(),
+          ]}
+          config={config}
+        >
+          <Connector>
+            <ConnectButton />
+          </Connector>
+        </WagmiWeb3ConfigProvider>
+      );
+    };
+    const { baseElement } = render(<App />);
+    const btn = baseElement.querySelector('.ant-web3-connect-button');
+    fireEvent.click(btn!);
+    const walletItems = baseElement.querySelectorAll('.ant-web3-connect-modal-wallet-item');
+    expect(walletItems.length).toBe(5);
+    fireEvent.click(walletItems[4]!);
     await vi.waitFor(() => {
       expect(baseElement.querySelector('.ant-web3-connect-modal-qr-code-box')).toBe(null);
       expect(baseElement.querySelector('.ant-web3-connect-modal-card-list')).toBeTruthy();

packages/wagmi/src/wagmi-provider/config-provider.tsx

@@ -122,8 +122,13 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
           .map(findConnectorByName)
           .filter((item) => !!item) as WagmiConnector[];
 
-        if (connectors.length === 0) {
-          // Not config connector for this wallet factory, ignore it.
+        if (connectors.length === 0 && !eip6963) {
+          // Not config connector for this wallet factory and not use eip6963, ignore it.
+          console.error(
+            `Can not find connector for ${factory.connectors.join(
+              ',',
+            )}, ignore the wallet. Please config connectors or add eip6963 config in WagmiWeb3ConfigProvider.`,
+          );
           return null;
         }
         return factory.create(connectors);

packages/wagmi/src/wallets/meta-mask.ts

@@ -1,22 +1,11 @@
 import { metadata_MetaMask } from '@ant-design/web3-assets';
-import { type Wallet } from '@ant-design/web3-common';
 
 import type { EthereumWallet } from '../interface';
+import { UniversalWallet } from './universal-wallet';
 
 export const MetaMask: EthereumWallet = (metadata) => {
-  return {
-    connectors: ['MetaMask'],
-    create: (): Wallet => {
-      return {
-        ...metadata_MetaMask,
-        hasWalletReady: async () => {
-          return !!window.ethereum?.isMetaMask;
-        },
-        hasExtensionInstalled: async () => {
-          return !!window.ethereum?.isMetaMask;
-        },
-        ...metadata,
-      };
-    },
-  };
+  return new UniversalWallet({
+    ...metadata_MetaMask,
+    ...metadata,
+  });
 };

packages/wagmi/src/wallets/universal-wallet.tsx

@@ -32,7 +32,7 @@ export class UniversalWallet implements WalletFactory {
     };
 
     const hasExtensionInstalled = async () => {
-      const provider = await injectedConnector?.getProvider();
+      const provider = await injectedConnector?.getProvider?.();
       return !!provider;
     };