feat: support auto generate wagmi config (#1122)

* feat: support auto generate wagmi config * chore: add changelog * fix: tsconfig for @ant-design/web3-assets/wallets * fix: test case * fix: tslint * Update packages/wagmi/src/wallets/coinbase-wallet.tsx Co-authored-by: thinkasany <[email protected]> * test: add test case * fix: wallet name match bug * chore: update demo * test: update test case * chore: update doc * chore: update test config --------- Co-authored-by: tingzhao.ytz <[email protected]> Co-authored-by: thinkasany <[email protected]>
ant-design · Sep 6, 2024 · c22eb4d · c22eb4d
1 parent 5fdd4ee
commit c22eb4d
Show file tree

Hide file tree

Showing 35 changed files with 961 additions and 410 deletions.
diff --git a/.changeset/fuzzy-singers-search.md b/.changeset/fuzzy-singers-search.md
@@ -0,0 +1,6 @@
+---
+'@ant-design/web3-assets': minor
+'@ant-design/web3-wagmi': minor
+---
+
+feat: @ant-design/web3-wagmi support auto generate config, and add @ant-design/web3-assets/wallets export
diff --git a/docs/guide/demos/guide.tsx b/docs/guide/demos/guide.tsx
@@ -11,9 +11,6 @@ import {
 import { TinyColor } from '@ctrl/tinycolor';
 import { Col, ConfigProvider, Radio, Row, Select, Slider, Space, Switch } from 'antd';
 import type { ConfigProviderProps } from 'antd';
-import { createConfig, http } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
-import { walletConnect } from 'wagmi/connectors';
 
 import styles from './guide.module.less';
 import { themeList, type ThemeSetting, type ThemeValue } from './tokens';
@@ -22,19 +19,6 @@ type SizeType = ConfigProviderProps['componentSize'];
 
 const defaultRadius = 8;
 
-const config = createConfig({
-  chains: [mainnet],
-  transports: {
-    [mainnet.id]: http(),
-  },
-  connectors: [
-    walletConnect({
-      showQrModal: false,
-      projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
-    }),
-  ],
-});
-
 const ThemeLabel: React.FC<{ theme: ThemeSetting }> = ({ theme }) => {
   return (
     <Space
@@ -72,6 +56,9 @@ const App: React.FC = () => {
       eip6963={{
         autoAddInjectedWallets: true,
       }}
+      walletConnect={{
+        projectId: YOUR_WALLET_CONNECT_PROJECT_ID,
+      }}
       ens
       wallets={[
         MetaMask(),
@@ -81,7 +68,6 @@ const App: React.FC = () => {
         }),
         OkxWallet(),
       ]}
-      config={config}
     >
       <ConfigProvider
         theme={{

diff --git a/docs/guide/demos/quick-start.tsx b/docs/guide/demos/quick-start.tsx
@@ -1,18 +1,9 @@
 import { NFTImage } from '@ant-design/web3';
 import { WagmiWeb3ConfigProvider } from '@ant-design/web3-wagmi';
-import { createConfig, http } from 'wagmi';
-import { mainnet } from 'wagmi/chains';
-
-const config = createConfig({
-  chains: [mainnet],
-  transports: {
-    [mainnet.id]: http(),
-  },
-});
 
 const App: React.FC = () => {
   return (
-    <WagmiWeb3ConfigProvider config={config}>
+    <WagmiWeb3ConfigProvider>
       <NFTImage width={300} address="0x79fcdef22feed20eddacbb2587640e45491b757f" tokenId={8540} />
     </WagmiWeb3ConfigProvider>
   );

diff --git a/packages/assets/package.json b/packages/assets/package.json
@@ -21,6 +21,11 @@
       "require": "./dist/lib/solana/index.js",
       "types": "./dist/esm/solana/index.d.ts"
     },
+    "./wallets": {
+      "import": "./dist/esm/wallets/index.js",
+      "require": "./dist/lib/wallets/index.js",
+      "types": "./dist/esm/wallets/index.d.ts"
+    },
     "./tokens": {
       "import": "./dist/esm/tokens/index.js",
       "require": "./dist/lib/tokens/index.js",

diff --git a/packages/eth-web3js/src/web3js-provider/web3js-provider.tsx b/packages/eth-web3js/src/web3js-provider/web3js-provider.tsx
@@ -9,24 +9,8 @@ import type { Chain } from 'viem';
 import { createConfig, http, type CreateConfigParameters, type Storage } from 'wagmi';
 import * as wagmiChains from 'wagmi/chains';
 import * as wagmiConnectors from 'wagmi/connectors';
-import type { WalletConnectParameters } from 'wagmi/connectors';
-
-export interface WalletConnectOptions
-  extends Pick<
-    WalletConnectParameters,
-    | 'disableProviderPing'
-    | 'isNewChainsStale'
-    | 'projectId'
-    | 'metadata'
-    | 'relayUrl'
-    | 'storageOptions'
-    | 'qrModalOptions'
-  > {
-  useWalletConnectOfficialModal?: boolean;
-}
 
 export interface EthWeb3jsConfigProviderProps extends Omit<WagmiWeb3ConfigProviderProps, 'config'> {
-  walletConnect?: false | WalletConnectOptions;
   storage?: Storage | false;
 }
 

diff --git a/packages/ethers/src/ethers-provider/ethers-provider.tsx b/packages/ethers/src/ethers-provider/ethers-provider.tsx
@@ -9,25 +9,9 @@ import type { Chain } from 'viem';
 import { createConfig, http, type CreateConfigParameters, type Storage } from 'wagmi';
 import * as wagmiChains from 'wagmi/chains';
 import * as wagmiConnectors from 'wagmi/connectors';
-import type { WalletConnectParameters } from 'wagmi/connectors';
-
-export interface WalletConnectOptions
-  extends Pick<
-    WalletConnectParameters,
-    | 'disableProviderPing'
-    | 'isNewChainsStale'
-    | 'projectId'
-    | 'metadata'
-    | 'relayUrl'
-    | 'storageOptions'
-    | 'qrModalOptions'
-  > {
-  useWalletConnectOfficialModal?: boolean;
-}
 
 export interface EthersWeb3ConfigProviderProps
   extends Omit<WagmiWeb3ConfigProviderProps, 'config'> {
-  walletConnect?: false | WalletConnectOptions;
   storage?: Storage | false;
 }
 

diff --git a/packages/wagmi/src/chains.ts b/packages/wagmi/src/chains.ts
@@ -0,0 +1,119 @@
+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';
+
+import type { ChainAssetWithWagmiChain } from './interface';
+
+export const Mainnet: ChainAssetWithWagmiChain = {
+  ...MainnetAsset,
+  wagmiChain: mainnet,
+};
+
+export const Goerli: ChainAssetWithWagmiChain = {
+  ...GoerliAsset,
+  wagmiChain: goerli,
+};
+
+export const Sepolia: ChainAssetWithWagmiChain = {
+  ...SepoliaAsset,
+  wagmiChain: sepolia,
+};
+
+export const Holesky: ChainAssetWithWagmiChain = {
+  ...HoleskyAsset,
+  wagmiChain: holesky,
+};
+
+export const Polygon: ChainAssetWithWagmiChain = {
+  ...PolygonAsset,
+  wagmiChain: polygon,
+};
+
+export const BSC: ChainAssetWithWagmiChain = {
+  ...BSCAsset,
+  wagmiChain: bsc,
+};
+
+export const Arbitrum: ChainAssetWithWagmiChain = {
+  ...ArbitrumAsset,
+  wagmiChain: arbitrum,
+};
+
+export const Optimism: ChainAssetWithWagmiChain = {
+  ...OptimismAsset,
+  wagmiChain: optimism,
+};
+
+export const Avalanche: ChainAssetWithWagmiChain = {
+  ...AvalancheAsset,
+  wagmiChain: avalanche,
+};
+
+// OKX X1: https://www.okx.com/cn/x1/docs/developer/build-on-x1/quickstart
+export const X1Testnet: ChainAssetWithWagmiChain = {
+  ...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: ChainAssetWithWagmiChain = {
+  ...ScrollAsset,
+  wagmiChain: scroll,
+};
+
+export const ScrollSepolia: ChainAssetWithWagmiChain = {
+  ...ScrollSepoliaAsset,
+  wagmiChain: scrollSepolia,
+};
+
+export const Hardhat: ChainAssetWithWagmiChain = {
+  ...HardhatAsset,
+  wagmiChain: hardhat,
+};
+
+export const Localhost: ChainAssetWithWagmiChain = {
+  ...LocalhostAsset,
+  wagmiChain: localhost,
+};
diff --git a/packages/wagmi/src/index.ts b/packages/wagmi/src/index.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';
diff --git a/packages/wagmi/src/interface.ts b/packages/wagmi/src/interface.ts
@@ -1,10 +1,12 @@
 import type {
+  Chain,
   ConnectOptions,
   UniversalEIP6963Config,
   Wallet,
   WalletMetadata,
 } from '@ant-design/web3-common';
-import type { Connector } from 'wagmi';
+import type { Chain as WagmiChain } from 'viem';
+import type { Connector, CreateConnectorFn } from 'wagmi';
 
 export interface WalletUseInWagmiAdapter extends Wallet {
   getWagmiConnector?: (options?: ConnectOptions) => Promise<Connector | undefined>;
@@ -16,6 +18,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 };