feat: wagmi-provider suport chains & init @ant-design/assets for wall…

…et and chains data (#95)

* feat: wagmi-provider suport chains & init @ant-design/assets for wallets and chains data

* chore: update lockfile

---------

Co-authored-by: yutingzhao1991 <[email protected]>

packages/assets/.fatherrc.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from 'father';
+
+export default defineConfig({
+  extends: '../../.fatherrc.base.ts',
+});

packages/assets/README.md

@@ -0,0 +1,3 @@
+# @ant-design/web3-assets
+
+[https://web3.ant.design](https://web3.ant.design)

packages/assets/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@ant-design/web3-assets",
+  "version": "0.1.0-alpha.1",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/lib/index.js",
+    "types": "./dist/esm/index.d.ts"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "father dev",
+    "build": "father build"
+  },
+  "dependencies": {
+    "@ant-design/web3-common": "workspace:*",
+    "@ant-design/web3-icons": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "father": "^4.1.9",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ]
+}

packages/assets/src/chains.tsx

@@ -0,0 +1,51 @@
+import { type Chain, ChainIds } from '@ant-design/web3-common';
+
+import {
+  EthereumFilled,
+  OptimismFilled,
+  BSCFilled,
+  ArbitrumFilled,
+  PolygonFilled,
+} from '@ant-design/web3-icons';
+
+export const Mainnet: Chain = {
+  id: ChainIds.Mainnet,
+  name: 'Ethereum',
+  icon: <EthereumFilled />,
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};
+
+export const Goerli: Chain = {
+  id: ChainIds.Goerli,
+  name: 'Goerli',
+  icon: <EthereumFilled />,
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};
+
+export const Polygon: Chain = {
+  id: ChainIds.Polygon,
+  name: 'Polygon',
+  icon: <PolygonFilled />,
+  nativeCurrency: { name: 'MATIC', symbol: 'MATIC', decimals: 18 },
+};
+
+export const BSC: Chain = {
+  id: ChainIds.BSC,
+  name: 'BNB Smart Chain',
+  icon: <BSCFilled />,
+  nativeCurrency: { decimals: 18, name: 'BNB', symbol: 'BNB' },
+};
+
+export const Arbitrum: Chain = {
+  id: ChainIds.Arbitrum,
+  name: 'Arbitrum One',
+  icon: <ArbitrumFilled />,
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};
+
+export const Optimism: Chain = {
+  id: ChainIds.Optimism,
+  name: 'OP Mainnet',
+  icon: <OptimismFilled />,
+  nativeCurrency: { name: 'Ether', symbol: 'ETH', decimals: 18 },
+};

packages/assets/src/index.ts

@@ -0,0 +1,2 @@
+export * from './wallets';
+export * from './chains';

packages/common/src/wallets/meta-mask.ts → packages/assets/src/wallets/meta-mask.ts

@@ -1,4 +1,4 @@
-import { WalletMetadata } from '../types';
+import type { WalletMetadata } from '@ant-design/web3-common';
 
 export const metadata_MetaMask: WalletMetadata = {
   icon: 'https://metamask.io/images/metamask-logo.png',

packages/common/src/wallets/wallet-connect.ts → packages/assets/src/wallets/wallet-connect.ts

@@ -1,4 +1,4 @@
-import { WalletMetadata } from '../types';
+import type { WalletMetadata } from '@ant-design/web3-common';
 
 export const metadata_WalletConnect: WalletMetadata = {
   icon: 'https://docs.walletconnect.com/img/walletconnect-logo-black.svg#light-mode-only',

packages/assets/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src", "global.d.ts", "../ethereum/src/wallets"]
+}

packages/common/src/index.ts

@@ -1,6 +1,3 @@
 export * from './types';
 export * from './utils';
 export * from './web3-config-provider';
-export * from './wallets';
-
-export * as chains from './chains';

packages/common/src/types.ts

@@ -8,13 +8,13 @@ export enum ChainIds {
   BSC = 56,
   Arbitrum = 42_161,
   Optimism = 10,
+  Goerli = 5,
 }
 
 export interface Chain {
   id: ChainIds;
   name: string;
-  rpcHttpUrl?: string;
-  blockExplorerUrl?: string;
+  icon?: React.ReactNode;
   nativeCurrency?: {
     decimals: number;
     name: string;
@@ -39,6 +39,8 @@ export interface NFTMetadata {
 export interface UniversalWeb3ProviderInterface {
   accounts?: Account[];
   wallets?: Wallet[];
+  chains?: Chain[];
+  currentChain?: Chain;
 
   requestAccounts?: (wallet?: string) => Promise<Account[]>;
   disconnect?: () => Promise<void>;
@@ -131,23 +133,19 @@ export type WalletMetadata = {
   group?: string;
 };
 
-export type ChainSelectItem = {
-  id: number;
-  name: string;
-  icon?: React.ReactNode;
-};
-
 export type Banlance = {
   amount: number | bigint;
   type: string;
 };
 
 export interface ConnectorTriggerProps {
   address?: string;
+  loading?: boolean;
   onConnectClicked?: () => void;
   onDisconnectClicked?: () => Promise<void>;
   domain?: string;
   connected?: boolean;
-  chains?: ChainSelectItem[];
+  chains?: Chain[];
+  currentChain?: Chain;
   banlance?: Banlance[] | Banlance;
 }

packages/ethereum/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@ant-design/web3-common": "workspace:*",
+    "@ant-design/web3-assets": "workspace:*",
     "debug": "^4.3.4",
     "eventemitter3": "^5.0.1",
     "@walletconnect/ethereum-provider": "^2.10.2",

packages/ethereum/src/eip1193-provider.ts

@@ -1,5 +1,5 @@
-import { Chain } from '@ant-design/web3-common';
-import {
+import type { Chain } from '@ant-design/web3-common';
+import type {
   EIP1193LikeProvider,
   EIP1193IncludeProvider,
   JsonRpcProvider,

packages/ethereum/src/ethereum-provider.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Web3ConfigProvider, Account, Wallet } from '@ant-design/web3-common';
-import { EthereumEIP1193LikeProvider, CreateProviderOptions } from './eip1193-provider';
+import { Web3ConfigProvider } from '@ant-design/web3-common';
+import type { Account, Wallet } from '@ant-design/web3-common';
+import { EthereumEIP1193LikeProvider, type CreateProviderOptions } from './eip1193-provider';
 import { UniversalProvider, UniversalWeb3ProviderEventType } from './universal-provider';
 
 export interface Web3ProviderProps {

packages/ethereum/src/index.ts

@@ -1,7 +1,6 @@
-export { chains } from '@ant-design/web3-common';
-
 export * from './wallets';
 export * from './rpc-providers';
 export * from './ethereum-provider';
 export * from './universal-provider';
 export * from './types';
+export * from '@ant-design/web3-assets';

packages/ethereum/src/rpc-providers/zan.ts

@@ -1,4 +1,5 @@
-import { Chain, ChainIds, chains } from '@ant-design/web3-common';
+import { Chain, ChainIds } from '@ant-design/web3-common';
+import { Mainnet } from '@ant-design/web3-assets';
 import { EIP1193IncludeProvider, JsonRpcProvider } from '../types';
 
 export interface ZANJsonRpcProviderProps {
@@ -20,7 +21,7 @@ export class ZANJsonRpcProvider implements JsonRpcProvider {
     const provider = {
       request: async (request: { method: string; params?: any }) => {
         const { method, params } = request;
-        const response = await fetch(this.getRpcUrl(chains.mainnet), {
+        const response = await fetch(this.getRpcUrl(Mainnet), {
           method: 'POST',
           headers: {
             'content-type': 'application/json',

packages/ethereum/src/types.ts

@@ -1,4 +1,4 @@
-import { Chain, Wallet, WalletMetadata } from '@ant-design/web3-common';
+import type { Chain, Wallet, WalletMetadata } from '@ant-design/web3-common';
 /**
  * This interface is a subset of the EIP-1193 provider interface.
  * See: https://eips.ethereum.org/EIPS/eip-1193

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

@@ -1,5 +1,6 @@
-import { WalletMetadata, metadata_MetaMask } from '@ant-design/web3-common';
-import { EthereumWallet, WalletProvider } from '../types';
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { metadata_MetaMask } from '@ant-design/web3-assets';
+import type { EthereumWallet, WalletProvider } from '../types';
 
 export class MetaMaskProvider implements WalletProvider {
   metadata: WalletMetadata = metadata_MetaMask;

packages/ethereum/src/wallets/wallet-connect.ts

@@ -1,7 +1,8 @@
 // Only for WallectConnect v2, v1 is not supported
-import { WalletMetadata, metadata_WalletConnect } from '@ant-design/web3-common';
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { metadata_WalletConnect } from '@ant-design/web3-assets';
 import { EthereumProvider } from '@walletconnect/ethereum-provider';
-import { WalletProvider, WalletProviderOptions, EthereumWallet } from '../types';
+import type { WalletProvider, WalletProviderOptions, EthereumWallet } from '../types';
 
 export interface WalletConnectConfig {
   projectId: string;

packages/wagmi/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@ant-design/web3-common": "workspace:*",
+    "@ant-design/web3-assets": "workspace:*",
     "debug": "^4.3.4"
   },
   "devDependencies": {

packages/wagmi/src/index.ts

@@ -1 +1,2 @@
 export * from './wagmi-provider';
+export * from './wallets';

packages/wagmi/src/interface.ts

@@ -0,0 +1,7 @@
+import type { Wallet } from '@ant-design/web3-common';
+import type { Connector } from 'wagmi';
+
+export interface WalletFactory {
+  name: Connector['name'];
+  create: (connector?: Connector) => Wallet;
+}

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

@@ -2,23 +2,25 @@ import React from 'react';
 import {
   type Account,
   type Wallet,
+  type Chain,
   Web3ConfigProvider,
   requestWeb3Asset,
   fillAddressWith0x,
 } from '@ant-design/web3-common';
 import { useAccount, useConnect, useDisconnect, useNetwork } from 'wagmi';
 import { readContract } from '@wagmi/core';
-import { getWalletsByConnectors } from '../wallets';
+import type { WalletFactory } from '../interface';
 
 export interface AntDesignWeb3ConfigProviderProps {
+  assets?: (WalletFactory | Chain)[];
   children?: React.ReactNode;
 }
 
 export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderProps> = (props) => {
-  const { children } = props;
+  const { children, assets } = props;
   const { address, isDisconnected } = useAccount();
   const { connectors, connectAsync } = useConnect();
-  const { chain } = useNetwork();
+  const { chain, chains } = useNetwork();
   const { disconnectAsync } = useDisconnect();
 
   const accounts: Account[] = React.useMemo(() => {
@@ -33,11 +35,42 @@ export const AntDesignWeb3ConfigProvider: React.FC<AntDesignWeb3ConfigProviderPr
   }, [address, isDisconnected]);
 
   const wallets: Wallet[] = React.useMemo(() => {
-    return getWalletsByConnectors(connectors);
-  }, [connectors]);
+    return connectors.map((connector) => {
+      const walletFactory = assets?.find((item) => item.name === connector.name) as WalletFactory;
+      if (!walletFactory?.create) {
+        throw new Error(`Can not find wallet factory for ${connector.name}`);
+      }
+      return walletFactory.create(connector);
+    });
+  }, [connectors, assets]);
+
+  const chainList: Chain[] = React.useMemo(() => {
+    return chains.map((item) => {
+      const c = assets?.find((asset) => asset.name === item.name) as Chain;
+      if (!c?.id) {
+        throw new Error(`Can not find chain id for ${item.name}`);
+      }
+      return c;
+    });
+  }, [chains, assets]);
+
+  console.log('chains', chains);
+
+  const currentChain = React.useMemo(() => {
+    if (!chain) {
+      return undefined;
+    }
+    const c = assets?.find((item) => item.name === chain?.name) as Chain;
+    if (!c?.id) {
+      throw new Error(`Can not find chain id for ${chain.name}`);
+    }
+    return c;
+  }, [chain, assets]);
 
   return (
     <Web3ConfigProvider
+      chains={chainList}
+      currentChain={currentChain}
       accounts={accounts}
       wallets={wallets}
       requestAccounts={async (wallet) => {