@ant-design/web3-wagmi 1.2.0 → 2.1.0

package/dist/lib/wagmi-provider/config-provider.js

@@ -13,7 +13,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const AntDesignWeb3ConfigProvider = props => {
   const {
     children,
-    assets,
+    chainAssets,
+    walletFactorys,
     availableChains,
     availableConnectors,
     ens,
@@ -22,18 +23,17 @@ const AntDesignWeb3ConfigProvider = props => {
   } = props;
   const {
     address,
-    isDisconnected
+    isDisconnected,
+    chain
   } = (0, _wagmi.useAccount)();
+  const config = (0, _wagmi.useConfig)();
   const [account, setAccount] = _react.default.useState();
   const {
     connectAsync
   } = (0, _wagmi.useConnect)();
   const {
-    switchNetwork
-  } = (0, _wagmi.useSwitchNetwork)();
-  const {
-    chain
-  } = (0, _wagmi.useNetwork)();
+    switchChain
+  } = (0, _wagmi.useSwitchChain)();
   const {
     disconnectAsync
   } = (0, _wagmi.useDisconnect)();
@@ -52,41 +52,33 @@ const AntDesignWeb3ConfigProvider = props => {
       const a = {
         address
       };
-      setAccount(ens ? await (0, _methods.addNameToAccount)(a) : a);
+      setAccount(ens ? await (0, _methods.addNameToAccount)(config, a) : a);
     };
     updateAccounts();
   }, [address, isDisconnected, chain, ens]);
   const wallets = _react.default.useMemo(() => {
-    const walletFactorys = assets?.filter(item => item.create);
     availableConnectors.forEach(connector => {
       // check use assets config and console.error for alert
-      const walletFactory = walletFactorys?.find(item => item.name === connector.name || item.name?.includes(connector.name));
+      const walletFactory = walletFactorys?.find(item => item.connectors?.includes(connector.name));
       if (!walletFactory?.create) {
-        console.error(`Can not find wallet factory for ${connector.name}, you should config it in WagmiWeb3ConfigProvider 'assets'.`);
+        console.error(`Can not find wallet factory for ${connector.name}, you should config it in WagmiWeb3ConfigProvider 'wallets'.`);
       }
     });
 
     // Generate Wallet for @ant-design/web3
     const allWallet = walletFactorys?.map(factory => {
-      let connector;
-      if (typeof factory.name === 'string') {
-        // this wallet factory only for one connector
-        connector = availableConnectors.find(item => item.name === factory.name);
-      } else {
-        // for multiple connectors
-        connector = factory.name.map(name => availableConnectors.find(item => item.name === name)).filter(item => item !== undefined);
-      }
-      if (!connector || Array.isArray(connector) && connector.length === 0) {
+      const connectors = factory.connectors.map(name => availableConnectors.find(item => item.name === name)).filter(item => !!item);
+      if (connectors.length === 0) {
         // Not config connector for this wallet factory, ignore it.
         return null;
       }
-      return factory.create(connector);
+      return factory.create(connectors);
     }).filter(item => item !== null);
     return allWallet;
-  }, [availableConnectors, assets]);
+  }, [availableConnectors, walletFactorys]);
   const chainList = _react.default.useMemo(() => {
     return availableChains.map(item => {
-      const c = assets?.find(asset => {
+      const c = chainAssets?.find(asset => {
         return asset.id === item.id;
       });
       if (c?.id) {
@@ -100,7 +92,7 @@ const AntDesignWeb3ConfigProvider = props => {
         return null;
       }
     }).filter(item => item !== null);
-  }, [availableChains, assets]);
+  }, [availableChains, chainAssets]);
   _react.default.useEffect(() => {
     if (!chain && currentChain) {
       // not connected any chain, keep current chain
@@ -110,7 +102,7 @@ const AntDesignWeb3ConfigProvider = props => {
     if (!currentWagmiChain) {
       return;
     }
-    let c = assets?.find(item => item.id === currentWagmiChain?.id);
+    let c = chainAssets?.find(item => item.id === currentWagmiChain?.id);
     if (!c?.id) {
       c = {
         id: currentWagmiChain.id,
@@ -119,7 +111,7 @@ const AntDesignWeb3ConfigProvider = props => {
     }
     setCurrentChain(c);
     return;
-  }, [chain, assets, availableChains, currentChain]);
+  }, [chain, chainAssets, availableChains, currentChain]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_web3Common.Web3ConfigProvider, {
     locale: locale,
     availableChains: chainList,
@@ -133,10 +125,13 @@ const AntDesignWeb3ConfigProvider = props => {
     } : undefined,
     availableWallets: wallets,
     connect: async wallet => {
-      let connector = wallet?.getWagmiConnector?.();
+      let connector = await wallet?.getWagmiConnector?.();
       if (!connector) {
         connector = availableConnectors.find(item => item.name === wallet?.name);
       }
+      if (!connector) {
+        throw new Error(`Can not find connector for ${wallet?.name}`);
+      }
       await connectAsync({
         connector,
         chainId: currentChain?.id
@@ -150,13 +145,15 @@ const AntDesignWeb3ConfigProvider = props => {
         // hava not connected any chain
         setCurrentChain(c);
       } else {
-        switchNetwork?.(c.id);
+        switchChain?.({
+          chainId: c.id
+        });
       }
     },
     getNFTMetadata: async ({
       address: contractAddress,
       tokenId
-    }) => (0, _methods.getNFTMetadata)(contractAddress, tokenId, chain?.id),
+    }) => (0, _methods.getNFTMetadata)(config, contractAddress, tokenId, chain?.id),
     children: children
   });
 };

package/dist/lib/wagmi-provider/index.d.ts

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { Chain, Locale } from '@ant-design/web3-common';
-import type { Config, PublicClient, WebSocketPublicClient } from 'wagmi';
+import { QueryClient } from '@tanstack/react-query';
+import type { Config } from 'wagmi';
 import type { WalletFactory } from '../interface';
-export type WagmiWeb3ConfigProviderProps<TPublicClient extends PublicClient = PublicClient, TWebSocketPublicClient extends WebSocketPublicClient = WebSocketPublicClient> = {
-    config: Config<TPublicClient, TWebSocketPublicClient>;
+export type WagmiWeb3ConfigProviderProps = {
+    config: Config;
     locale?: Locale;
-    assets?: (Chain | WalletFactory)[];
+    wallets?: WalletFactory[];
+    chains?: Chain[];
     ens?: boolean;
+    queryClient?: QueryClient;
     balance?: boolean;
 };
-export declare function WagmiWeb3ConfigProvider<TPublicClient extends PublicClient, TWebSocketPublicClient extends WebSocketPublicClient>({ children, assets, ens, locale, balance, config, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps<TPublicClient, TWebSocketPublicClient>>): React.ReactElement;
+export declare function WagmiWeb3ConfigProvider({ children, wallets, chains, ens, locale, balance, config, queryClient, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement;

package/dist/lib/wagmi-provider/index.js

@@ -6,57 +6,43 @@ Object.defineProperty(exports, "__esModule", {
 exports.WagmiWeb3ConfigProvider = WagmiWeb3ConfigProvider;
 var _react = _interopRequireDefault(require("react"));
 var _web3Assets = require("@ant-design/web3-assets");
+var _reactQuery = require("@tanstack/react-query");
 var _wagmi = require("wagmi");
-var _wallets = require("../wallets");
 var _configProvider = require("./config-provider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // Built in popular chains
 
-// MetaMask built-in
-
 function WagmiWeb3ConfigProvider({
   children,
-  assets = [],
+  wallets = [],
+  chains = [],
   ens,
   locale,
   balance,
   config,
+  queryClient,
   ...restProps
 }) {
-  const availableChains = _react.default.useMemo(() => {
-    // merge all available chains fro user select
-    const chains = [];
-    for (const connector of config.connectors) {
-      connector.chains.forEach(chain => {
-        if (chains.find(c => c.id === chain.id)) return;
-        chains.push(chain);
-      });
-    }
-    config.publicClient.chains?.forEach(chain => {
-      if (chains.find(c => c.id === chain.id)) return;
-      chains.push(chain);
-    });
-    return chains;
-  }, [config]);
-  const assetsWithDefault = [...assets, _web3Assets.Mainnet, _web3Assets.Goerli];
-  if (!assets.find(item => {
-    return item.name === 'MetaMask' || Array.isArray(item.name) && item.name.includes('MetaMask');
-  })) {
-    // If user not set MetaMask, we will add it to the first
-    assetsWithDefault.unshift(_wallets.MetaMask);
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_wagmi.WagmiConfig, {
+  const chainAssets = [...chains, _web3Assets.Mainnet];
+  const mergedQueryClient = _react.default.useMemo(() => {
+    return queryClient ?? new _reactQuery.QueryClient();
+  }, [queryClient]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_wagmi.WagmiProvider, {
     config: config,
     ...restProps,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_configProvider.AntDesignWeb3ConfigProvider, {
-      locale: locale,
-      assets: assetsWithDefault,
-      availableChains: availableChains,
-      availableConnectors: config.connectors || [],
-      ens: ens,
-      balance: balance,
-      children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
+      client: mergedQueryClient,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_configProvider.AntDesignWeb3ConfigProvider, {
+        locale: locale,
+        chainAssets: chainAssets,
+        walletFactorys: wallets,
+        availableChains: config.chains,
+        availableConnectors: config.connectors,
+        ens: ens,
+        balance: balance,
+        children: children
+      })
     })
   });
 }

package/dist/lib/wagmi-provider/methods/addNameToAccount.d.ts

@@ -1,2 +1,3 @@
 import type { Account } from '@ant-design/web3-common';
-export declare function addNameToAccount(account: Account, chainId?: number): Promise<Account>;
+import { type Config } from '@wagmi/core';
+export declare function addNameToAccount(config: Config, account: Account, chainId?: number): Promise<Account>;

package/dist/lib/wagmi-provider/methods/addNameToAccount.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.addNameToAccount = addNameToAccount;
 var _core = require("@wagmi/core");
-async function addNameToAccount(account, chainId) {
-  const name = await (0, _core.fetchEnsName)({
+async function addNameToAccount(config, account, chainId) {
+  const name = await (0, _core.getEnsName)(config, {
     address: account.address,
     chainId
   });

package/dist/lib/wagmi-provider/methods/getNFTMetadata.d.ts

@@ -1,2 +1,3 @@
 import { type NFTMetadata } from '@ant-design/web3-common';
-export declare function getNFTMetadata(address: string, tokenId: bigint, chainId?: number): Promise<NFTMetadata>;
+import { type Config } from '@wagmi/core';
+export declare function getNFTMetadata(config: Config, address: string, tokenId: bigint, chainId?: number): Promise<NFTMetadata>;

package/dist/lib/wagmi-provider/methods/getNFTMetadata.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.getNFTMetadata = getNFTMetadata;
 var _web3Common = require("@ant-design/web3-common");
 var _core = require("@wagmi/core");
-async function getNFTMetadata(address, tokenId, chainId) {
-  const tokenURI = await (0, _core.readContract)({
+async function getNFTMetadata(config, address, tokenId, chainId) {
+  const tokenURI = await (0, _core.readContract)(config, {
     address: (0, _web3Common.fillAddressWith0x)(address),
     args: [tokenId],
     chainId,

package/dist/lib/wallets/coinbase-wallet.d.ts

@@ -1,2 +1,2 @@
-import type { WalletFactory } from '../interface';
-export declare const CoinbaseWallet: WalletFactory;
+import type { EthereumWallet } from '../interface';
+export declare const CoinbaseWallet: EthereumWallet;

package/dist/lib/wallets/coinbase-wallet.js

@@ -5,14 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CoinbaseWallet = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
-const CoinbaseWallet = exports.CoinbaseWallet = {
-  name: 'Coinbase Wallet',
-  create: () => {
-    return {
-      ..._web3Assets.metadata_CoinbaseWallet,
-      hasWalletReady: async () => {
-        return true;
-      }
-    };
-  }
-};
+const CoinbaseWallet = metadata => {
+  return {
+    connectors: ['Coinbase Wallet'],
+    create: () => {
+      return {
+        ..._web3Assets.metadata_CoinbaseWallet,
+        hasWalletReady: async () => {
+          return true;
+        },
+        ...metadata
+      };
+    }
+  };
+};
+exports.CoinbaseWallet = CoinbaseWallet;

package/dist/lib/wallets/index.d.ts

@@ -4,3 +4,4 @@ export * from './coinbase-wallet';
 export * from './token-pocket';
 export * from './safeheron';
 export * from './universal-wallet';
+export * from './okx-wallet';

package/dist/lib/wallets/index.js

@@ -68,4 +68,15 @@ Object.keys(_universalWallet).forEach(function (key) {
       return _universalWallet[key];
     }
   });
+});
+var _okxWallet = require("./okx-wallet");
+Object.keys(_okxWallet).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _okxWallet[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _okxWallet[key];
+    }
+  });
 });

package/dist/lib/wallets/meta-mask.d.ts

@@ -1,2 +1,2 @@
-import type { WalletFactory } from '../interface';
-export declare const MetaMask: WalletFactory;
+import type { EthereumWallet } from '../interface';
+export declare const MetaMask: EthereumWallet;

package/dist/lib/wallets/meta-mask.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MetaMask = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
-const MetaMask = exports.MetaMask = {
-  name: 'MetaMask',
-  create: () => {
-    return {
-      ..._web3Assets.metadata_MetaMask,
-      hasWalletReady: async () => {
-        return !!window.ethereum?.isMetaMask;
-      },
-      hasExtensionInstalled: async () => {
-        return !!window.ethereum?.isMetaMask;
-      }
-    };
-  }
-};
+const MetaMask = metadata => {
+  return {
+    connectors: ['MetaMask'],
+    create: () => {
+      return {
+        ..._web3Assets.metadata_MetaMask,
+        hasWalletReady: async () => {
+          return !!window.ethereum?.isMetaMask;
+        },
+        hasExtensionInstalled: async () => {
+          return !!window.ethereum?.isMetaMask;
+        },
+        ...metadata
+      };
+    }
+  };
+};
+exports.MetaMask = MetaMask;

package/dist/lib/wallets/okx-wallet.d.ts

@@ -0,0 +1,2 @@
+import { EthereumWallet } from '../interface';
+export declare const OkxWallet: EthereumWallet;

package/dist/lib/wallets/okx-wallet.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OkxWallet = void 0;
+var _web3Assets = require("@ant-design/web3-assets");
+var _universalWallet = require("./universal-wallet");
+const OkxWallet = metadata => {
+  return new _universalWallet.UniversalWallet({
+    ..._web3Assets.metadata_OkxWallet,
+    ...metadata
+  });
+};
+exports.OkxWallet = OkxWallet;

package/dist/lib/wallets/safeheron.d.ts

@@ -1,2 +1,2 @@
-import type { WalletFactory } from '../interface';
-export declare const SafeheronWallet: WalletFactory;
+import type { EthereumWallet } from '../interface';
+export declare const SafeheronWallet: EthereumWallet;

package/dist/lib/wallets/safeheron.js

@@ -5,17 +5,21 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SafeheronWallet = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
-const SafeheronWallet = exports.SafeheronWallet = {
-  name: 'Safeheron',
-  create: connector => {
-    return {
-      ..._web3Assets.metadata_Safeheron,
-      hasWalletReady: async () => {
-        return !!connector?.ready;
-      },
-      hasExtensionInstalled: async () => {
-        return !!connector?.ready;
-      }
-    };
-  }
-};
+const SafeheronWallet = metadata => {
+  return {
+    connectors: ['Safeheron'],
+    create: connectors => {
+      return {
+        ..._web3Assets.metadata_Safeheron,
+        hasWalletReady: async () => {
+          return !!(await connectors?.[0]?.getProvider());
+        },
+        hasExtensionInstalled: async () => {
+          return !!(await connectors?.[0]?.getProvider());
+        },
+        ...metadata
+      };
+    }
+  };
+};
+exports.SafeheronWallet = SafeheronWallet;

package/dist/lib/wallets/token-pocket.d.ts

@@ -1,2 +1,2 @@
-import { UniversalWallet } from './universal-wallet';
-export declare const TokenPocket: UniversalWallet;
+import { EthereumWallet } from '../interface';
+export declare const TokenPocket: EthereumWallet;

package/dist/lib/wallets/token-pocket.js

@@ -6,4 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.TokenPocket = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
 var _universalWallet = require("./universal-wallet");
-const TokenPocket = exports.TokenPocket = new _universalWallet.UniversalWallet(_web3Assets.metadata_TokenPocket);
+const TokenPocket = metadata => {
+  return new _universalWallet.UniversalWallet({
+    ..._web3Assets.metadata_TokenPocket,
+    ...metadata
+  });
+};
+exports.TokenPocket = TokenPocket;

package/dist/lib/wallets/universal-wallet.d.ts

@@ -3,7 +3,7 @@ import type { Connector } from 'wagmi';
 import type { WalletFactory, WalletUseInWagmiAdapter } from '../interface';
 export declare class UniversalWallet implements WalletFactory {
     private wallet;
-    name: string[];
+    connectors: string[];
     constructor(wallet: WalletMetadata);
-    create: (connector?: Connector | Connector[]) => WalletUseInWagmiAdapter;
+    create: (connectors?: readonly Connector[]) => WalletUseInWagmiAdapter;
 }

package/dist/lib/wallets/universal-wallet.js

@@ -5,41 +5,40 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.UniversalWallet = void 0;
 class UniversalWallet {
-  name = [];
+  connectors = [];
   constructor(wallet) {
     this.wallet = wallet;
     if (wallet.extensions) {
       // support injected connector
       // https://wagmi.sh/react/connectors/injected
-      this.name.push(wallet.name);
+      this.connectors.push(wallet.name);
     }
     if (wallet.app) {
       // support WalletConnect https://wagmi.sh/react/connectors/walletConnect
-      this.name.push('WalletConnect');
+      this.connectors.push('WalletConnect');
     }
   }
-  create = connector => {
-    const connectors = connector;
-    const walletConnector = connectors.find(item => item.name === 'WalletConnect');
-    const injectedConnector = connectors.find(item => item.name === this.wallet.name);
+  create = connectors => {
+    const walletConnector = connectors?.find(item => item.name === 'WalletConnect');
+    const injectedConnector = connectors?.find(item => item.name === this.wallet.name);
     const getQrCode = async () => {
       const provider = await walletConnector?.getProvider();
       return new Promise(resolve => {
-        provider.on('display_uri', uri => {
+        provider?.on('display_uri', uri => {
           resolve({
             uri
           });
         });
       });
     };
-    const hasExtensionInstalled = () => {
-      const provider = injectedConnector?.options?.getProvider();
+    const hasExtensionInstalled = async () => {
+      const provider = await injectedConnector?.getProvider();
       return !!provider;
     };
     return {
       ...this.wallet,
-      getWagmiConnector: () => {
-        if (hasExtensionInstalled()) {
+      getWagmiConnector: async () => {
+        if (await hasExtensionInstalled()) {
           return injectedConnector;
         }
         return walletConnector;
@@ -48,9 +47,10 @@ class UniversalWallet {
         return hasExtensionInstalled();
       },
       hasWalletReady: async () => {
-        return !!(hasExtensionInstalled() || walletConnector);
+        const installed = await hasExtensionInstalled();
+        return !!(installed || walletConnector);
       },
-      getQrCode: walletConnector?.options?.showQrModal === false ? getQrCode : undefined
+      getQrCode: walletConnector ? getQrCode : undefined
     };
   };
 }

package/dist/lib/wallets/wallet-connect.d.ts

@@ -1,2 +1,7 @@
+import { WalletMetadata } from '@ant-design/web3-common';
 import type { WalletFactory } from '../interface';
-export declare const WalletConnect: WalletFactory;
+type EthereumWalletConnect = (metadata?: Partial<WalletMetadata> & {
+    useWalletConnectOfficialModal?: boolean;
+}) => WalletFactory;
+export declare const WalletConnect: EthereumWalletConnect;
+export {};

package/dist/lib/wallets/wallet-connect.js

@@ -5,25 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.WalletConnect = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
-const WalletConnect = exports.WalletConnect = {
-  name: 'WalletConnect',
-  create: connector => {
-    const getQrCode = async () => {
-      const provider = await connector?.getProvider();
-      return new Promise(resolve => {
-        provider.on('display_uri', uri => {
-          resolve({
-            uri
+const WalletConnect = metadata => {
+  const {
+    useWalletConnectOfficialModal = false,
+    ...rest
+  } = metadata || {};
+  return {
+    connectors: ['WalletConnect'],
+    create: connectors => {
+      const getQrCode = async () => {
+        const provider = await connectors?.[0]?.getProvider();
+        return new Promise(resolve => {
+          provider?.on('display_uri', uri => {
+            resolve({
+              uri
+            });
           });
         });
-      });
-    };
-    return {
-      ..._web3Assets.metadata_WalletConnect,
-      hasWalletReady: async () => {
-        return true;
-      },
-      getQrCode: connector?.options.showQrModal === false ? getQrCode : undefined
-    };
-  }
-};
+      };
+      return {
+        ..._web3Assets.metadata_WalletConnect,
+        hasWalletReady: async () => {
+          return true;
+        },
+        getQrCode: useWalletConnectOfficialModal ? undefined : getQrCode,
+        ...rest
+      };
+    }
+  };
+};
+exports.WalletConnect = WalletConnect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/web3-wagmi",
-  "version": "1.2.0",
+  "version": "2.1.0",
   "main": "dist/lib/index.js",
   "module": "dist/esm/index.js",
   "typings": "dist/esm/index.d.ts",
@@ -31,17 +31,19 @@
   },
   "dependencies": {
     "debug": "^4.3.4",
-    "@ant-design/web3-common": "1.2.0",
-    "@ant-design/web3-assets": "1.1.3"
+    "@wagmi/core": "^2.0.0",
+    "viem": "2.0.0",
+    "@tanstack/react-query": "^5.17.0",
+    "@ant-design/web3-assets": "1.2.0",
+    "@ant-design/web3-common": "1.3.1"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
-    "@wagmi/core": "^1.4.12",
     "father": "^4.3.8",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "wagmi": "^1.4.12"
+    "wagmi": "^2.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",