@ant-design/web3-wagmi 2.7.3 → 2.8.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @ant-design/web3-wagmi
 
+## 2.8.0
+
+### Minor Changes
+
+- c22eb4d: feat: @ant-design/web3-wagmi support auto generate config, and add @ant-design/web3-assets/wallets export
+
+### Patch Changes
+
+- Updated dependencies [c22eb4d]
+  - @ant-design/web3-assets@1.11.0
+
+## 2.7.4
+
+### Patch Changes
+
+- efbd948: fix(web3-wagmi): Correct spelling of "Factories"
+- Updated dependencies [9bb1ea1]
+  - @ant-design/web3-common@1.13.0
+  - @ant-design/web3-assets@1.10.2
+
 ## 2.7.3
 
 ### Patch Changes

package/dist/esm/chains.d.ts

@@ -0,0 +1,15 @@
+import type { ChainAssetWithWagmiChain } from './interface';
+export declare const Mainnet: ChainAssetWithWagmiChain;
+export declare const Goerli: ChainAssetWithWagmiChain;
+export declare const Sepolia: ChainAssetWithWagmiChain;
+export declare const Holesky: ChainAssetWithWagmiChain;
+export declare const Polygon: ChainAssetWithWagmiChain;
+export declare const BSC: ChainAssetWithWagmiChain;
+export declare const Arbitrum: ChainAssetWithWagmiChain;
+export declare const Optimism: ChainAssetWithWagmiChain;
+export declare const Avalanche: ChainAssetWithWagmiChain;
+export declare const X1Testnet: ChainAssetWithWagmiChain;
+export declare const Scroll: ChainAssetWithWagmiChain;
+export declare const ScrollSepolia: ChainAssetWithWagmiChain;
+export declare const Hardhat: ChainAssetWithWagmiChain;
+export declare const Localhost: ChainAssetWithWagmiChain;

package/dist/esm/chains.js

@@ -0,0 +1,79 @@
+import { Arbitrum as ArbitrumAsset, Avalanche as AvalancheAsset, BSC as BSCAsset, Goerli as GoerliAsset, Hardhat as HardhatAsset, Holesky as HoleskyAsset, Localhost as LocalhostAsset, Mainnet as MainnetAsset, Optimism as OptimismAsset, Polygon as PolygonAsset, Scroll as ScrollAsset, ScrollSepolia as ScrollSepoliaAsset, Sepolia as SepoliaAsset, X1Testnet as X1TestnetAsset } from '@ant-design/web3-assets';
+import { arbitrum, avalanche, bsc, goerli, hardhat, holesky, localhost, mainnet, optimism, polygon, scroll, scrollSepolia, sepolia } from 'wagmi/chains';
+export const Mainnet = {
+  ...MainnetAsset,
+  wagmiChain: mainnet
+};
+export const Goerli = {
+  ...GoerliAsset,
+  wagmiChain: goerli
+};
+export const Sepolia = {
+  ...SepoliaAsset,
+  wagmiChain: sepolia
+};
+export const Holesky = {
+  ...HoleskyAsset,
+  wagmiChain: holesky
+};
+export const Polygon = {
+  ...PolygonAsset,
+  wagmiChain: polygon
+};
+export const BSC = {
+  ...BSCAsset,
+  wagmiChain: bsc
+};
+export const Arbitrum = {
+  ...ArbitrumAsset,
+  wagmiChain: arbitrum
+};
+export const Optimism = {
+  ...OptimismAsset,
+  wagmiChain: optimism
+};
+export const Avalanche = {
+  ...AvalancheAsset,
+  wagmiChain: avalanche
+};
+
+// OKX X1: https://www.okx.com/cn/x1/docs/developer/build-on-x1/quickstart
+export const X1Testnet = {
+  ...X1TestnetAsset,
+  wagmiChain: {
+    id: X1TestnetAsset.id,
+    name: X1TestnetAsset.name,
+    nativeCurrency: {
+      name: 'OKB',
+      symbol: 'OKB',
+      decimals: 18
+    },
+    rpcUrls: {
+      default: {
+        http: ['https://testrpc.x1.tech']
+      }
+    },
+    blockExplorers: {
+      default: {
+        name: 'X1TestnetScan',
+        url: 'https://www.okx.com/explorer/x1-test'
+      }
+    }
+  }
+};
+export const Scroll = {
+  ...ScrollAsset,
+  wagmiChain: scroll
+};
+export const ScrollSepolia = {
+  ...ScrollSepoliaAsset,
+  wagmiChain: scrollSepolia
+};
+export const Hardhat = {
+  ...HardhatAsset,
+  wagmiChain: hardhat
+};
+export const Localhost = {
+  ...LocalhostAsset,
+  wagmiChain: localhost
+};

package/dist/esm/index.d.ts

@@ -1,4 +1,6 @@
 export * from './wagmi-provider';
 export * from './wallets';
 export * from './interface';
-export * from '@ant-design/web3-assets';
+export * from './chains';
+export * from '@ant-design/web3-assets/tokens';
+export * from '@ant-design/web3-assets/wallets';

package/dist/esm/index.js

@@ -1,4 +1,6 @@
 export * from "./wagmi-provider";
 export * from "./wallets";
 export * from "./interface";
-export * from '@ant-design/web3-assets';
+export * from "./chains";
+export * from '@ant-design/web3-assets/tokens';
+export * from '@ant-design/web3-assets/wallets';

package/dist/esm/interface.d.ts

@@ -1,5 +1,6 @@
-import type { ConnectOptions, UniversalEIP6963Config, Wallet, WalletMetadata } from '@ant-design/web3-common';
-import type { Connector } from 'wagmi';
+import type { Chain, ConnectOptions, UniversalEIP6963Config, Wallet, WalletMetadata } from '@ant-design/web3-common';
+import type { Chain as WagmiChain } from 'viem';
+import type { Connector, CreateConnectorFn } from 'wagmi';
 export interface WalletUseInWagmiAdapter extends Wallet {
     getWagmiConnector?: (options?: ConnectOptions) => Promise<Connector | undefined>;
 }
@@ -8,5 +9,9 @@ export interface WalletFactory {
     name?: string;
     connectors: Connector['name'][];
     create: (connector?: readonly Connector[]) => WalletUseInWagmiAdapter;
+    createWagmiConnector?: () => CreateConnectorFn;
 }
 export type EIP6963Config = boolean | UniversalEIP6963Config;
+export type ChainAssetWithWagmiChain = Chain & {
+    wagmiChain?: WagmiChain;
+};

package/dist/esm/wagmi-provider/config-provider.d.ts

@@ -4,7 +4,7 @@ import type { Config as WagmiConfig } from 'wagmi';
 import type { EIP6963Config, WalletFactory } from '../interface';
 export interface AntDesignWeb3ConfigProviderProps {
     chainAssets: Chain[];
-    walletFactorys: WalletFactory[];
+    walletFactories: WalletFactory[];
     locale?: Locale;
     children?: React.ReactNode;
     ens?: boolean;

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

@@ -10,7 +10,7 @@ export const AntDesignWeb3ConfigProvider = props => {
   const {
     children,
     chainAssets,
-    walletFactorys,
+    walletFactories,
     ens = true,
     balance,
     locale,
@@ -49,8 +49,12 @@ export const AntDesignWeb3ConfigProvider = props => {
     name: ensName && ens ? ensName : undefined,
     avatar: ensAvatar ?? undefined
   } : undefined;
+  const isConnectorNameMatch = (aName, bName) => {
+    // match connector name like okxWallet, Okx Wallet, OKX Wallet
+    return aName.replace(/ /g, '').toLowerCase() === bName.replace(/ /g, '').toLowerCase();
+  };
   const findConnectorByName = name => {
-    const commonConnector = wagimConfig.connectors.find(item => item.name === name && !isEIP6963Connector(item));
+    const commonConnector = wagimConfig.connectors.find(item => isConnectorNameMatch(item.name, name) && !isEIP6963Connector(item));
     if (!eip6963) {
       return commonConnector;
     }
@@ -62,14 +66,14 @@ export const AntDesignWeb3ConfigProvider = props => {
     wagimConfig.connectors.forEach(connector => {
       if (isEIP6963Connector(connector)) {
         // check is need auto add eip6963 wallet
-        if (typeof eip6963 === 'object' && eip6963?.autoAddInjectedWallets && !walletFactorys.find(item => item.connectors.includes(connector.name))) {
+        if (typeof eip6963 === 'object' && eip6963?.autoAddInjectedWallets && !walletFactories.find(item => item.connectors.some(aName => isConnectorNameMatch(aName, connector.name)))) {
           // not config wallet and find the wallet in connectors, auto add it
           autoAddEIP6963Wallets.push(EIP6963Wallet().create([connector]));
         }
         // Do not need check eip6963 wallet
         return;
       }
-      const walletFactory = walletFactorys.find(factory => factory.connectors.includes(connector.name));
+      const walletFactory = walletFactories.find(factory => factory.connectors.some(aName => isConnectorNameMatch(aName, connector.name)));
       if (!walletFactory?.create) {
         // check user wallets config and console.error for alert
         console.error(`Can not find wallet factory for ${connector.name}, you should config it in WagmiWeb3ConfigProvider 'wallets'.`);
@@ -77,7 +81,7 @@ export const AntDesignWeb3ConfigProvider = props => {
     });
 
     // Generate Wallet for @ant-design/web3
-    const supportWallets = walletFactorys.map(factory => {
+    const supportWallets = walletFactories.map(factory => {
       const connectors = factory.connectors.map(findConnectorByName).filter(item => !!item);
       if (connectors.length === 0 && !eip6963) {
         // Not config connector for this wallet factory and not use eip6963, ignore it.
@@ -87,7 +91,7 @@ export const AntDesignWeb3ConfigProvider = props => {
       return factory.create(connectors);
     }).filter(item => item !== null);
     return [...supportWallets, ...autoAddEIP6963Wallets];
-  }, [wagimConfig.connectors, walletFactorys, eip6963]);
+  }, [wagimConfig.connectors, walletFactories, eip6963]);
   const chainList = React.useMemo(() => {
     return wagimConfig.chains.map(item => {
       const c = chainAssets?.find(asset => {

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

@@ -1,18 +1,25 @@
 import React from 'react';
-import type { Chain, Locale } from '@ant-design/web3-common';
+import type { Locale } from '@ant-design/web3-common';
 import { QueryClient } from '@tanstack/react-query';
+import type { Transport } from 'viem';
 import type { Config, State } from 'wagmi';
-import type { EIP6963Config, WalletFactory } from '../interface';
+import type { WalletConnectParameters } from 'wagmi/connectors';
+import type { ChainAssetWithWagmiChain, EIP6963Config, WalletFactory } from '../interface';
+export interface WalletConnectOptions extends Pick<WalletConnectParameters, 'disableProviderPing' | 'isNewChainsStale' | 'projectId' | 'metadata' | 'relayUrl' | 'storageOptions' | 'qrModalOptions'> {
+    useWalletConnectOfficialModal?: boolean;
+}
 export type WagmiWeb3ConfigProviderProps = {
-    config: Config;
+    config?: Config;
     locale?: Locale;
     wallets?: WalletFactory[];
-    chains?: Chain[];
+    chains?: ChainAssetWithWagmiChain[];
     ens?: boolean;
     queryClient?: QueryClient;
     balance?: boolean;
     eip6963?: EIP6963Config;
     initialState?: State;
     reconnectOnMount?: boolean;
+    walletConnect?: false | WalletConnectOptions;
+    transports?: Record<number, Transport>;
 };
-export declare function WagmiWeb3ConfigProvider({ children, config, locale, wallets, chains, ens, queryClient, balance, eip6963, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement;
+export declare function WagmiWeb3ConfigProvider({ children, config, locale, wallets, chains, ens, queryClient, balance, eip6963, walletConnect, transports, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement;

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

@@ -1,8 +1,10 @@
 import React from 'react';
-// Built in popular chains
-import { Mainnet } from '@ant-design/web3-assets';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { WagmiProvider } from 'wagmi';
+import { createConfig, http, WagmiProvider } from 'wagmi';
+import { mainnet } from 'wagmi/chains';
+import { walletConnect as wagmiWalletConnect } from 'wagmi/connectors';
+// Built in popular chains
+import { Mainnet } from "../chains";
 import { AntDesignWeb3ConfigProvider } from "./config-provider";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function WagmiWeb3ConfigProvider({
@@ -15,25 +17,78 @@ export function WagmiWeb3ConfigProvider({
   queryClient,
   balance,
   eip6963,
+  walletConnect,
+  transports,
   ...restProps
 }) {
-  const chainAssets = [...chains, Mainnet];
+  // When user custom config, add Mainnet by default
+  // When user not provide config, auto generate config, chains use user provided chains
+  const chainAssets = config ? [Mainnet, ...chains] : chains?.length ? chains : [Mainnet];
+  const generateConfigFlag = () => {
+    return `${JSON.stringify(walletConnect)}-${chains.map(item => item.id).join(',')}-${wallets.map(item => item.name).join(',')}`;
+  };
+  const generateConfig = () => {
+    // Auto generate config
+    const connectors = [];
+    if (walletConnect && walletConnect.projectId) {
+      connectors.push(wagmiWalletConnect({
+        ...walletConnect,
+        showQrModal: walletConnect.useWalletConnectOfficialModal ?? false
+      }));
+    }
+    wallets.forEach(wallet => {
+      const connector = wallet.createWagmiConnector?.();
+      if (connector) {
+        connectors.push(connector);
+      }
+    });
+    const autoGenerateConfig = createConfig({
+      chains: chainAssets.map(chain => chain.wagmiChain),
+      transports: transports ?? {
+        [mainnet.id]: http()
+      },
+      connectors
+    });
+    return {
+      flag: generateConfigFlag(),
+      config: autoGenerateConfig
+    };
+  };
+  const [autoConfig, setAutoConfig] = React.useState(() => {
+    if (config) {
+      return {
+        config
+      };
+    }
+    return generateConfig();
+  });
   const mergedQueryClient = React.useMemo(() => {
     return queryClient ?? new QueryClient();
   }, [queryClient]);
+  React.useEffect(() => {
+    if (config) {
+      return;
+    }
+    const flag = generateConfigFlag();
+    if (flag !== autoConfig.flag) {
+      // Need recreate wagmi config
+      setAutoConfig(generateConfig());
+    }
+  }, [config, wallets, chains, walletConnect]);
+  const wagmiConfig = config || autoConfig.config;
   return /*#__PURE__*/_jsx(WagmiProvider, {
-    config: config,
+    config: wagmiConfig,
     ...restProps,
     children: /*#__PURE__*/_jsx(QueryClientProvider, {
       client: mergedQueryClient,
       children: /*#__PURE__*/_jsx(AntDesignWeb3ConfigProvider, {
         locale: locale,
         chainAssets: chainAssets,
-        walletFactorys: wallets,
+        walletFactories: wallets,
         ens: ens,
         balance: balance,
         eip6963: eip6963,
-        wagimConfig: config,
+        wagimConfig: wagmiConfig,
         children: children
       })
     })

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

@@ -1,2 +1,4 @@
-import type { EthereumWallet } from '../interface';
-export declare const CoinbaseWallet: EthereumWallet;
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { type CoinbaseWalletParameters } from 'wagmi/connectors';
+import { WalletFactory } from '../interface';
+export declare const CoinbaseWallet: (metadata?: Partial<WalletMetadata>, coinbaseConfig?: CoinbaseWalletParameters) => WalletFactory;

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

@@ -1,5 +1,6 @@
 import { metadata_CoinbaseWallet } from '@ant-design/web3-assets';
-export const CoinbaseWallet = metadata => {
+import { coinbaseWallet } from 'wagmi/connectors';
+export const CoinbaseWallet = (metadata, coinbaseConfig) => {
   return {
     connectors: ['Coinbase Wallet'],
     create: () => {
@@ -10,6 +11,9 @@ export const CoinbaseWallet = metadata => {
         },
         ...metadata
       };
+    },
+    createWagmiConnector: () => {
+      return coinbaseWallet(coinbaseConfig);
     }
   };
 };

package/dist/esm/wallets/im-token.js

@@ -1,8 +1,11 @@
 import { metadata_imToken } from '@ant-design/web3-assets';
+import { injected } from 'wagmi/connectors';
 import { UniversalWallet } from "./universal-wallet";
 export const ImToken = metadata => {
   return new UniversalWallet({
     ...metadata_imToken,
     ...metadata
-  });
+  }, () => injected({
+    target: 'imToken'
+  }));
 };

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

@@ -1,8 +1,11 @@
 import { metadata_MetaMask } from '@ant-design/web3-assets';
+import { injected } from 'wagmi/connectors';
 import { UniversalWallet } from "./universal-wallet";
 export const MetaMask = metadata => {
   return new UniversalWallet({
     ...metadata_MetaMask,
     ...metadata
-  });
+  }, () => injected({
+    target: 'metaMask'
+  }));
 };

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

@@ -1,8 +1,11 @@
 import { metadata_OkxWallet } from '@ant-design/web3-assets';
+import { injected } from 'wagmi/connectors';
 import { UniversalWallet } from "./universal-wallet";
 export const OkxWallet = metadata => {
   return new UniversalWallet({
     ...metadata_OkxWallet,
     ...metadata
-  });
+  }, () => injected({
+    target: 'okxWallet'
+  }));
 };

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

@@ -1,8 +1,13 @@
 import { metadata_TokenPocket } from '@ant-design/web3-assets';
+import { injected } from 'wagmi/connectors';
 import { UniversalWallet } from "./universal-wallet";
 export const TokenPocket = metadata => {
   return new UniversalWallet({
     ...metadata_TokenPocket,
     ...metadata
+  }, () => {
+    return injected({
+      target: 'tokenPocket'
+    });
   });
 };

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

@@ -1,10 +1,11 @@
 import type { WalletMetadata } from '@ant-design/web3-common';
-import type { Connector } from 'wagmi';
+import type { Connector, CreateConnectorFn } from 'wagmi';
 import type { WalletFactory, WalletUseInWagmiAdapter } from '../interface';
 export declare class UniversalWallet implements WalletFactory {
     private wallet;
     name?: string;
+    createWagmiConnector?: () => CreateConnectorFn;
     connectors: string[];
-    constructor(wallet: WalletMetadata);
+    constructor(wallet: WalletMetadata, createWagmiConnector?: () => CreateConnectorFn);
     create: (connectors?: readonly Connector[]) => WalletUseInWagmiAdapter;
 }

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

@@ -1,9 +1,11 @@
 export class UniversalWallet {
   name;
+  createWagmiConnector;
   connectors = [];
-  constructor(wallet) {
+  constructor(wallet, createWagmiConnector) {
     this.wallet = wallet;
     this.name = wallet.name;
+    this.createWagmiConnector = createWagmiConnector;
     if (wallet.extensions) {
       // support injected connector
       // https://wagmi.sh/react/connectors/injected

package/dist/lib/chains.d.ts

@@ -0,0 +1,15 @@
+import type { ChainAssetWithWagmiChain } from './interface';
+export declare const Mainnet: ChainAssetWithWagmiChain;
+export declare const Goerli: ChainAssetWithWagmiChain;
+export declare const Sepolia: ChainAssetWithWagmiChain;
+export declare const Holesky: ChainAssetWithWagmiChain;
+export declare const Polygon: ChainAssetWithWagmiChain;
+export declare const BSC: ChainAssetWithWagmiChain;
+export declare const Arbitrum: ChainAssetWithWagmiChain;
+export declare const Optimism: ChainAssetWithWagmiChain;
+export declare const Avalanche: ChainAssetWithWagmiChain;
+export declare const X1Testnet: ChainAssetWithWagmiChain;
+export declare const Scroll: ChainAssetWithWagmiChain;
+export declare const ScrollSepolia: ChainAssetWithWagmiChain;
+export declare const Hardhat: ChainAssetWithWagmiChain;
+export declare const Localhost: ChainAssetWithWagmiChain;

package/dist/lib/chains.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.X1Testnet = exports.Sepolia = exports.ScrollSepolia = exports.Scroll = exports.Polygon = exports.Optimism = exports.Mainnet = exports.Localhost = exports.Holesky = exports.Hardhat = exports.Goerli = exports.BSC = exports.Avalanche = exports.Arbitrum = void 0;
+var _web3Assets = require("@ant-design/web3-assets");
+var _chains = require("wagmi/chains");
+const Mainnet = exports.Mainnet = {
+  ..._web3Assets.Mainnet,
+  wagmiChain: _chains.mainnet
+};
+const Goerli = exports.Goerli = {
+  ..._web3Assets.Goerli,
+  wagmiChain: _chains.goerli
+};
+const Sepolia = exports.Sepolia = {
+  ..._web3Assets.Sepolia,
+  wagmiChain: _chains.sepolia
+};
+const Holesky = exports.Holesky = {
+  ..._web3Assets.Holesky,
+  wagmiChain: _chains.holesky
+};
+const Polygon = exports.Polygon = {
+  ..._web3Assets.Polygon,
+  wagmiChain: _chains.polygon
+};
+const BSC = exports.BSC = {
+  ..._web3Assets.BSC,
+  wagmiChain: _chains.bsc
+};
+const Arbitrum = exports.Arbitrum = {
+  ..._web3Assets.Arbitrum,
+  wagmiChain: _chains.arbitrum
+};
+const Optimism = exports.Optimism = {
+  ..._web3Assets.Optimism,
+  wagmiChain: _chains.optimism
+};
+const Avalanche = exports.Avalanche = {
+  ..._web3Assets.Avalanche,
+  wagmiChain: _chains.avalanche
+};
+
+// OKX X1: https://www.okx.com/cn/x1/docs/developer/build-on-x1/quickstart
+const X1Testnet = exports.X1Testnet = {
+  ..._web3Assets.X1Testnet,
+  wagmiChain: {
+    id: _web3Assets.X1Testnet.id,
+    name: _web3Assets.X1Testnet.name,
+    nativeCurrency: {
+      name: 'OKB',
+      symbol: 'OKB',
+      decimals: 18
+    },
+    rpcUrls: {
+      default: {
+        http: ['https://testrpc.x1.tech']
+      }
+    },
+    blockExplorers: {
+      default: {
+        name: 'X1TestnetScan',
+        url: 'https://www.okx.com/explorer/x1-test'
+      }
+    }
+  }
+};
+const Scroll = exports.Scroll = {
+  ..._web3Assets.Scroll,
+  wagmiChain: _chains.scroll
+};
+const ScrollSepolia = exports.ScrollSepolia = {
+  ..._web3Assets.ScrollSepolia,
+  wagmiChain: _chains.scrollSepolia
+};
+const Hardhat = exports.Hardhat = {
+  ..._web3Assets.Hardhat,
+  wagmiChain: _chains.hardhat
+};
+const Localhost = exports.Localhost = {
+  ..._web3Assets.Localhost,
+  wagmiChain: _chains.localhost
+};

package/dist/lib/index.d.ts

@@ -1,4 +1,6 @@
 export * from './wagmi-provider';
 export * from './wallets';
 export * from './interface';
-export * from '@ant-design/web3-assets';
+export * from './chains';
+export * from '@ant-design/web3-assets/tokens';
+export * from '@ant-design/web3-assets/wallets';

package/dist/lib/index.js

@@ -36,14 +36,36 @@ Object.keys(_interface).forEach(function (key) {
     }
   });
 });
-var _web3Assets = require("@ant-design/web3-assets");
-Object.keys(_web3Assets).forEach(function (key) {
+var _chains = require("./chains");
+Object.keys(_chains).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _web3Assets[key]) return;
+  if (key in exports && exports[key] === _chains[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _web3Assets[key];
+      return _chains[key];
+    }
+  });
+});
+var _tokens = require("@ant-design/web3-assets/tokens");
+Object.keys(_tokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokens[key];
+    }
+  });
+});
+var _wallets2 = require("@ant-design/web3-assets/wallets");
+Object.keys(_wallets2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _wallets2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _wallets2[key];
     }
   });
 });

package/dist/lib/interface.d.ts

@@ -1,5 +1,6 @@
-import type { ConnectOptions, UniversalEIP6963Config, Wallet, WalletMetadata } from '@ant-design/web3-common';
-import type { Connector } from 'wagmi';
+import type { Chain, ConnectOptions, UniversalEIP6963Config, Wallet, WalletMetadata } from '@ant-design/web3-common';
+import type { Chain as WagmiChain } from 'viem';
+import type { Connector, CreateConnectorFn } from 'wagmi';
 export interface WalletUseInWagmiAdapter extends Wallet {
     getWagmiConnector?: (options?: ConnectOptions) => Promise<Connector | undefined>;
 }
@@ -8,5 +9,9 @@ export interface WalletFactory {
     name?: string;
     connectors: Connector['name'][];
     create: (connector?: readonly Connector[]) => WalletUseInWagmiAdapter;
+    createWagmiConnector?: () => CreateConnectorFn;
 }
 export type EIP6963Config = boolean | UniversalEIP6963Config;
+export type ChainAssetWithWagmiChain = Chain & {
+    wagmiChain?: WagmiChain;
+};

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

@@ -4,7 +4,7 @@ import type { Config as WagmiConfig } from 'wagmi';
 import type { EIP6963Config, WalletFactory } from '../interface';
 export interface AntDesignWeb3ConfigProviderProps {
     chainAssets: Chain[];
-    walletFactorys: WalletFactory[];
+    walletFactories: WalletFactory[];
     locale?: Locale;
     children?: React.ReactNode;
     ens?: boolean;

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

@@ -17,7 +17,7 @@ const AntDesignWeb3ConfigProvider = props => {
   const {
     children,
     chainAssets,
-    walletFactorys,
+    walletFactories,
     ens = true,
     balance,
     locale,
@@ -56,8 +56,12 @@ const AntDesignWeb3ConfigProvider = props => {
     name: ensName && ens ? ensName : undefined,
     avatar: ensAvatar ?? undefined
   } : undefined;
+  const isConnectorNameMatch = (aName, bName) => {
+    // match connector name like okxWallet, Okx Wallet, OKX Wallet
+    return aName.replace(/ /g, '').toLowerCase() === bName.replace(/ /g, '').toLowerCase();
+  };
   const findConnectorByName = name => {
-    const commonConnector = wagimConfig.connectors.find(item => item.name === name && !(0, _utils.isEIP6963Connector)(item));
+    const commonConnector = wagimConfig.connectors.find(item => isConnectorNameMatch(item.name, name) && !(0, _utils.isEIP6963Connector)(item));
     if (!eip6963) {
       return commonConnector;
     }
@@ -69,14 +73,14 @@ const AntDesignWeb3ConfigProvider = props => {
     wagimConfig.connectors.forEach(connector => {
       if ((0, _utils.isEIP6963Connector)(connector)) {
         // check is need auto add eip6963 wallet
-        if (typeof eip6963 === 'object' && eip6963?.autoAddInjectedWallets && !walletFactorys.find(item => item.connectors.includes(connector.name))) {
+        if (typeof eip6963 === 'object' && eip6963?.autoAddInjectedWallets && !walletFactories.find(item => item.connectors.some(aName => isConnectorNameMatch(aName, connector.name)))) {
           // not config wallet and find the wallet in connectors, auto add it
           autoAddEIP6963Wallets.push((0, _eip.EIP6963Wallet)().create([connector]));
         }
         // Do not need check eip6963 wallet
         return;
       }
-      const walletFactory = walletFactorys.find(factory => factory.connectors.includes(connector.name));
+      const walletFactory = walletFactories.find(factory => factory.connectors.some(aName => isConnectorNameMatch(aName, connector.name)));
       if (!walletFactory?.create) {
         // check user wallets config and console.error for alert
         console.error(`Can not find wallet factory for ${connector.name}, you should config it in WagmiWeb3ConfigProvider 'wallets'.`);
@@ -84,7 +88,7 @@ const AntDesignWeb3ConfigProvider = props => {
     });
 
     // Generate Wallet for @ant-design/web3
-    const supportWallets = walletFactorys.map(factory => {
+    const supportWallets = walletFactories.map(factory => {
       const connectors = factory.connectors.map(findConnectorByName).filter(item => !!item);
       if (connectors.length === 0 && !eip6963) {
         // Not config connector for this wallet factory and not use eip6963, ignore it.
@@ -94,7 +98,7 @@ const AntDesignWeb3ConfigProvider = props => {
       return factory.create(connectors);
     }).filter(item => item !== null);
     return [...supportWallets, ...autoAddEIP6963Wallets];
-  }, [wagimConfig.connectors, walletFactorys, eip6963]);
+  }, [wagimConfig.connectors, walletFactories, eip6963]);
   const chainList = _react.default.useMemo(() => {
     return wagimConfig.chains.map(item => {
       const c = chainAssets?.find(asset => {

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

@@ -1,18 +1,25 @@
 import React from 'react';
-import type { Chain, Locale } from '@ant-design/web3-common';
+import type { Locale } from '@ant-design/web3-common';
 import { QueryClient } from '@tanstack/react-query';
+import type { Transport } from 'viem';
 import type { Config, State } from 'wagmi';
-import type { EIP6963Config, WalletFactory } from '../interface';
+import type { WalletConnectParameters } from 'wagmi/connectors';
+import type { ChainAssetWithWagmiChain, EIP6963Config, WalletFactory } from '../interface';
+export interface WalletConnectOptions extends Pick<WalletConnectParameters, 'disableProviderPing' | 'isNewChainsStale' | 'projectId' | 'metadata' | 'relayUrl' | 'storageOptions' | 'qrModalOptions'> {
+    useWalletConnectOfficialModal?: boolean;
+}
 export type WagmiWeb3ConfigProviderProps = {
-    config: Config;
+    config?: Config;
     locale?: Locale;
     wallets?: WalletFactory[];
-    chains?: Chain[];
+    chains?: ChainAssetWithWagmiChain[];
     ens?: boolean;
     queryClient?: QueryClient;
     balance?: boolean;
     eip6963?: EIP6963Config;
     initialState?: State;
     reconnectOnMount?: boolean;
+    walletConnect?: false | WalletConnectOptions;
+    transports?: Record<number, Transport>;
 };
-export declare function WagmiWeb3ConfigProvider({ children, config, locale, wallets, chains, ens, queryClient, balance, eip6963, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement;
+export declare function WagmiWeb3ConfigProvider({ children, config, locale, wallets, chains, ens, queryClient, balance, eip6963, walletConnect, transports, ...restProps }: React.PropsWithChildren<WagmiWeb3ConfigProviderProps>): React.ReactElement;

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

@@ -5,9 +5,11 @@ 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 _chains = require("wagmi/chains");
+var _connectors = require("wagmi/connectors");
+var _chains2 = require("../chains");
 var _configProvider = require("./config-provider");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,25 +25,78 @@ function WagmiWeb3ConfigProvider({
   queryClient,
   balance,
   eip6963,
+  walletConnect,
+  transports,
   ...restProps
 }) {
-  const chainAssets = [...chains, _web3Assets.Mainnet];
+  // When user custom config, add Mainnet by default
+  // When user not provide config, auto generate config, chains use user provided chains
+  const chainAssets = config ? [_chains2.Mainnet, ...chains] : chains?.length ? chains : [_chains2.Mainnet];
+  const generateConfigFlag = () => {
+    return `${JSON.stringify(walletConnect)}-${chains.map(item => item.id).join(',')}-${wallets.map(item => item.name).join(',')}`;
+  };
+  const generateConfig = () => {
+    // Auto generate config
+    const connectors = [];
+    if (walletConnect && walletConnect.projectId) {
+      connectors.push((0, _connectors.walletConnect)({
+        ...walletConnect,
+        showQrModal: walletConnect.useWalletConnectOfficialModal ?? false
+      }));
+    }
+    wallets.forEach(wallet => {
+      const connector = wallet.createWagmiConnector?.();
+      if (connector) {
+        connectors.push(connector);
+      }
+    });
+    const autoGenerateConfig = (0, _wagmi.createConfig)({
+      chains: chainAssets.map(chain => chain.wagmiChain),
+      transports: transports ?? {
+        [_chains.mainnet.id]: (0, _wagmi.http)()
+      },
+      connectors
+    });
+    return {
+      flag: generateConfigFlag(),
+      config: autoGenerateConfig
+    };
+  };
+  const [autoConfig, setAutoConfig] = _react.default.useState(() => {
+    if (config) {
+      return {
+        config
+      };
+    }
+    return generateConfig();
+  });
   const mergedQueryClient = _react.default.useMemo(() => {
     return queryClient ?? new _reactQuery.QueryClient();
   }, [queryClient]);
+  _react.default.useEffect(() => {
+    if (config) {
+      return;
+    }
+    const flag = generateConfigFlag();
+    if (flag !== autoConfig.flag) {
+      // Need recreate wagmi config
+      setAutoConfig(generateConfig());
+    }
+  }, [config, wallets, chains, walletConnect]);
+  const wagmiConfig = config || autoConfig.config;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_wagmi.WagmiProvider, {
-    config: config,
+    config: wagmiConfig,
     ...restProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
       client: mergedQueryClient,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_configProvider.AntDesignWeb3ConfigProvider, {
         locale: locale,
         chainAssets: chainAssets,
-        walletFactorys: wallets,
+        walletFactories: wallets,
         ens: ens,
         balance: balance,
         eip6963: eip6963,
-        wagimConfig: config,
+        wagimConfig: wagmiConfig,
         children: children
       })
     })

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

@@ -1,2 +1,4 @@
-import type { EthereumWallet } from '../interface';
-export declare const CoinbaseWallet: EthereumWallet;
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { type CoinbaseWalletParameters } from 'wagmi/connectors';
+import { WalletFactory } from '../interface';
+export declare const CoinbaseWallet: (metadata?: Partial<WalletMetadata>, coinbaseConfig?: CoinbaseWalletParameters) => WalletFactory;

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

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.CoinbaseWallet = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
-const CoinbaseWallet = metadata => {
+var _connectors = require("wagmi/connectors");
+const CoinbaseWallet = (metadata, coinbaseConfig) => {
   return {
     connectors: ['Coinbase Wallet'],
     create: () => {
@@ -16,6 +17,9 @@ const CoinbaseWallet = metadata => {
         },
         ...metadata
       };
+    },
+    createWagmiConnector: () => {
+      return (0, _connectors.coinbaseWallet)(coinbaseConfig);
     }
   };
 };

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ImToken = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
+var _connectors = require("wagmi/connectors");
 var _universalWallet = require("./universal-wallet");
 const ImToken = metadata => {
   return new _universalWallet.UniversalWallet({
     ..._web3Assets.metadata_imToken,
     ...metadata
-  });
+  }, () => (0, _connectors.injected)({
+    target: 'imToken'
+  }));
 };
 exports.ImToken = ImToken;

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MetaMask = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
+var _connectors = require("wagmi/connectors");
 var _universalWallet = require("./universal-wallet");
 const MetaMask = metadata => {
   return new _universalWallet.UniversalWallet({
     ..._web3Assets.metadata_MetaMask,
     ...metadata
-  });
+  }, () => (0, _connectors.injected)({
+    target: 'metaMask'
+  }));
 };
 exports.MetaMask = MetaMask;

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

@@ -5,11 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.OkxWallet = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
+var _connectors = require("wagmi/connectors");
 var _universalWallet = require("./universal-wallet");
 const OkxWallet = metadata => {
   return new _universalWallet.UniversalWallet({
     ..._web3Assets.metadata_OkxWallet,
     ...metadata
-  });
+  }, () => (0, _connectors.injected)({
+    target: 'okxWallet'
+  }));
 };
 exports.OkxWallet = OkxWallet;

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

@@ -5,11 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TokenPocket = void 0;
 var _web3Assets = require("@ant-design/web3-assets");
+var _connectors = require("wagmi/connectors");
 var _universalWallet = require("./universal-wallet");
 const TokenPocket = metadata => {
   return new _universalWallet.UniversalWallet({
     ..._web3Assets.metadata_TokenPocket,
     ...metadata
+  }, () => {
+    return (0, _connectors.injected)({
+      target: 'tokenPocket'
+    });
   });
 };
 exports.TokenPocket = TokenPocket;

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

@@ -1,10 +1,11 @@
 import type { WalletMetadata } from '@ant-design/web3-common';
-import type { Connector } from 'wagmi';
+import type { Connector, CreateConnectorFn } from 'wagmi';
 import type { WalletFactory, WalletUseInWagmiAdapter } from '../interface';
 export declare class UniversalWallet implements WalletFactory {
     private wallet;
     name?: string;
+    createWagmiConnector?: () => CreateConnectorFn;
     connectors: string[];
-    constructor(wallet: WalletMetadata);
+    constructor(wallet: WalletMetadata, createWagmiConnector?: () => CreateConnectorFn);
     create: (connectors?: readonly Connector[]) => WalletUseInWagmiAdapter;
 }

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

@@ -6,10 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.UniversalWallet = void 0;
 class UniversalWallet {
   name;
+  createWagmiConnector;
   connectors = [];
-  constructor(wallet) {
+  constructor(wallet, createWagmiConnector) {
     this.wallet = wallet;
     this.name = wallet.name;
+    this.createWagmiConnector = createWagmiConnector;
     if (wallet.extensions) {
       // support injected connector
       // https://wagmi.sh/react/connectors/injected

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ant-design/web3-wagmi",
-  "version": "2.7.3",
+  "version": "2.8.0",
   "type": "module",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
@@ -38,8 +38,8 @@
   },
   "dependencies": {
     "debug": "^4.3.5",
-    "@ant-design/web3-assets": "1.10.1",
-    "@ant-design/web3-common": "1.12.1"
+    "@ant-design/web3-assets": "1.11.0",
+    "@ant-design/web3-common": "1.13.0"
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",