feat: 新增icp链-plug钱包链接

.changeset/tidy-flies-accept.md

@@ -0,0 +1,5 @@
+---
+'@ant-design/web3-icp': major
+---
+
+功能：集成 ICP 链的钱包连接能力

packages/assets/src/icp/chains.tsx

@@ -0,0 +1,17 @@
+import { createGetBrowserLink, IcpChainIds, type Chain } from '@ant-design/web3-common';
+import { IcpColorful } from '@ant-design/web3-icons';
+
+export interface IcpChain extends Chain {
+  id: IcpChainIds;
+}
+
+export const Icp: IcpChain = {
+  id: IcpChainIds.Mainnet,
+  name: 'Internet Computer',
+  icon: <IcpColorful />,
+  browser: {
+    icon: <IcpColorful />,
+    getBrowserLink: createGetBrowserLink('https://dashboard.internetcomputer.org'),
+  },
+  nativeCurrency: { name: 'ICP', symbol: 'ICP', decimals: 8 },
+};

packages/assets/src/icp/index.ts

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

packages/assets/src/index.ts

@@ -1,3 +1,4 @@
 export * from './wallets';
 export * from './chains/ethereum';
 export * from './tokens';
+export * from './icp';

packages/assets/src/wallets/index.ts

@@ -15,3 +15,4 @@ export * from './mobile-wallet';
 export * from './slush';
 export * from './suiet';
 export * from './solflare';
+export * from './plug';

packages/assets/src/wallets/plug.tsx

@@ -0,0 +1,20 @@
+import type { WalletMetadata } from '@ant-design/web3-common';
+import { ChromeCircleColorful } from '@ant-design/web3-icons';
+
+export const metadata_Plug: WalletMetadata = {
+  icon: null,
+  name: 'Plug',
+  remark: 'Plug Wallet',
+  app: {
+    link: 'https://plugwallet.ooo/',
+  },
+  extensions: [
+    {
+      key: 'Chrome',
+      browserIcon: <ChromeCircleColorful />,
+      browserName: 'Chrome',
+      link: 'https://chromewebstore.google.com/detail/plug/cfbfdhimifdmdehjmkdobpcjfefblkjm',
+      description: 'Access your wallet right from your favorite web browser.',
+    },
+  ],
+};

packages/common/src/types.ts

@@ -44,6 +44,10 @@ export enum SuiChainIds {
   Localnet = 4,
 }
 
+export enum IcpChainIds {
+  Mainnet = 1,
+}
+
 export type BrowserLinkType = 'address' | 'transaction';
 
 export type BalanceMetadata = {

packages/icp/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@ant-design/web3-icp",
+  "version": "0.0.1",
+  "main": "dist/lib/index.js",
+  "module": "dist/esm/index.js",
+  "typings": "dist/esm/index.d.ts",
+  "exports": {
+    "import": "./dist/esm/index.js",
+    "require": "./dist/lib/index.js",
+    "types": "./dist/esm/index.d.ts"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "keywords": [
+    "ant",
+    "design",
+    "web3",
+    "antd",
+    "component",
+    "components",
+    "framework",
+    "frontend",
+    "react",
+    "react-component",
+    "ui",
+    "icp",
+    "internet-computer",
+    "plug"
+  ],
+  "homepage": "https://web3.ant.design",
+  "bugs": {
+    "url": "https://github.com/ant-design/ant-design-web3/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ant-design/ant-design-web3"
+  },
+  "scripts": {
+    "dev": "father dev",
+    "build": "father build"
+  },
+  "dependencies": {
+    "@ant-design/web3-common": "workspace:*"
+  },
+  "devDependencies": {
+    "father": "^4.6.2",
+    "typescript": "^5.6.2"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "browserslist": [
+    "last 2 versions",
+    "Firefox ESR",
+    "> 1%",
+    "ie >= 11"
+  ]
+}

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

@@ -0,0 +1,156 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import type { IcpChain } from '@ant-design/web3-assets/icp';
+import type { Account, Chain, Locale, Wallet } from '@ant-design/web3-common';
+import { Web3ConfigProvider } from '@ant-design/web3-common';
+
+import type { IcpWallet } from '../wallets/types';
+
+interface ConnectAsync {
+  promise: Promise<Account>;
+  resolve: (account?: Account) => void;
+  reject: (reason: any) => void;
+}
+
+export interface AntDesignWeb3ConfigProviderProps {
+  locale?: Locale;
+  chainAssets?: Chain[];
+  availableChains: IcpChain[];
+  balance?: boolean;
+  currentChain?: IcpChain;
+  availableWallets: Wallet[];
+  onCurrentChainChange?: (chain?: IcpChain) => void;
+  wallet: IcpWallet;
+  principal: string | null;
+  connecting: boolean;
+  onConnect: () => Promise<void>;
+  onDisconnect: () => Promise<void>;
+}
+
+export const AntDesignWeb3ConfigProvider: React.FC<
+  React.PropsWithChildren<AntDesignWeb3ConfigProviderProps>
+> = (props) => {
+  const {
+    wallet,
+    principal,
+    connecting,
+    onConnect,
+    onDisconnect,
+    availableChains,
+    chainAssets,
+    currentChain,
+    availableWallets,
+    balance,
+    locale,
+    onCurrentChainChange,
+  } = props;
+
+  const connectAsyncRef = useRef<ConnectAsync>();
+  const [account, setAccount] = useState<Account>();
+  const [balanceData, setBalanceData] = useState<bigint>();
+
+  // get account address
+  useEffect(() => {
+    if (!principal) {
+      setAccount(undefined);
+      return;
+    }
+
+    setAccount({
+      address: principal,
+    });
+  }, [principal]);
+
+  // connect/disconnect wallet
+  useEffect(() => {
+    if (connecting && connectAsyncRef.current) {
+      // connecting in progress
+      return;
+    }
+
+    if (principal && connectAsyncRef.current) {
+      connectAsyncRef.current.resolve({ address: principal });
+      connectAsyncRef.current = undefined;
+    }
+  }, [principal, connecting]);
+
+  const chainList = useMemo(() => {
+    return availableChains
+      .map((item) => {
+        const c = chainAssets?.find((asset) => {
+          return asset.id === item.id;
+        }) as Chain;
+
+        if (c?.id) {
+          return {
+            ...item,
+            ...c,
+            id: c.id,
+            name: c.name,
+            icon: c.icon,
+          };
+        }
+        return item;
+      })
+      .filter((item) => item !== null) as (Chain & IcpChain)[];
+  }, [availableChains, chainAssets]);
+
+  const currentChainData = useMemo(() => {
+    return chainList.find((c) => c.id === currentChain?.id);
+  }, [currentChain, chainList]);
+
+  const currency = currentChainData?.nativeCurrency;
+
+  return (
+    <Web3ConfigProvider
+      locale={locale}
+      account={account}
+      chain={currentChainData}
+      balance={
+        balance
+          ? {
+              symbol: currency?.symbol,
+              decimals: currency?.decimals,
+              value: balanceData,
+              icon: currency?.icon,
+            }
+          : undefined
+      }
+      addressPrefix={false}
+      availableChains={chainList}
+      availableWallets={availableWallets}
+      switchChain={async (_chain) => {
+        const foundChain = chainList.find((c) => c.id === _chain.id);
+        const targetChain = foundChain ?? chainList[0];
+        if (targetChain) {
+          onCurrentChainChange?.(targetChain);
+        }
+      }}
+      connect={async (_wallet, options) => {
+        let resolve: any;
+        let reject: any;
+
+        const promise = new Promise<Account>((res, rej) => {
+          resolve = res;
+          reject = rej;
+        });
+
+        connectAsyncRef.current = { promise, resolve, reject };
+
+        try {
+          await onConnect();
+        } catch (error) {
+          connectAsyncRef.current.reject(error);
+          connectAsyncRef.current = undefined;
+          throw error;
+        }
+
+        return promise;
+      }}
+      disconnect={async () => {
+        await onDisconnect();
+      }}
+    >
+      {props.children}
+    </Web3ConfigProvider>
+  );
+};

packages/icp/src/icp-provider/index.tsx

@@ -0,0 +1,85 @@
+import React, { useMemo, useState, type FC, type PropsWithChildren } from 'react';
+import { Icp, type IcpChain } from '@ant-design/web3-assets/icp';
+import type { Locale } from '@ant-design/web3-common';
+
+import { PlugWallet } from '../wallets/built-in';
+import type { IcpWalletFactory } from '../wallets/factory';
+import { AntDesignWeb3ConfigProvider } from './config-provider';
+
+export interface IcpWeb3ConfigProviderProps {
+  locale?: Locale;
+  chains?: IcpChain[];
+  wallets?: IcpWalletFactory[];
+  balance?: boolean;
+}
+
+export const IcpWeb3ConfigProvider: FC<PropsWithChildren<IcpWeb3ConfigProviderProps>> = ({
+  locale,
+  chains = [Icp],
+  wallets: walletFactories = [PlugWallet()],
+  balance,
+  children,
+}) => {
+  const [currentChain, setCurrentChain] = useState<IcpChain | undefined>(chains[0]);
+  const [principal, setPrincipal] = useState<string | null>(null);
+  const [connecting, setConnecting] = useState(false);
+
+  const availableWallets = useMemo(() => {
+    return walletFactories.map((factory) => {
+      const wallet = factory.create();
+      return {
+        name: wallet.name,
+        remark: wallet.name,
+        icon: wallet.icon,
+        hasExtensionInstalled: async () => wallet.installed,
+        hasWalletReady: async () => wallet.installed,
+      };
+    });
+  }, [walletFactories]);
+
+  const wallet = useMemo(() => {
+    // 优先选择已安装的钱包，如果没有已安装的，则选择第一个
+    const walletInstances = walletFactories.map((factory) => factory.create());
+    const installedWallet = walletInstances.find((w) => w.installed);
+    return installedWallet ?? walletInstances[0];
+  }, [walletFactories]);
+
+  const connect = async () => {
+    if (!wallet) {
+      return;
+    }
+
+    setConnecting(true);
+    try {
+      await wallet.connect();
+      const p = await wallet.getPrincipal();
+      setPrincipal(p);
+    } finally {
+      setConnecting(false);
+    }
+  };
+
+  const disconnect = async () => {
+    await wallet.disconnect();
+    setPrincipal(null);
+  };
+
+  return (
+    <AntDesignWeb3ConfigProvider
+      locale={locale}
+      chainAssets={[Icp]}
+      availableWallets={availableWallets}
+      balance={balance}
+      currentChain={currentChain}
+      onCurrentChainChange={(chain) => setCurrentChain(chain)}
+      availableChains={chains}
+      wallet={wallet}
+      principal={principal}
+      connecting={connecting}
+      onConnect={connect}
+      onDisconnect={disconnect}
+    >
+      {children}
+    </AntDesignWeb3ConfigProvider>
+  );
+};

packages/icp/src/index.ts

@@ -0,0 +1,4 @@
+export * from './icp-provider';
+export * from './wallets/types';
+export * from './wallets/factory';
+export * from './wallets/built-in';

packages/icp/src/wallets/built-in.ts

@@ -0,0 +1,10 @@
+/* v8 ignore start */
+import { metadata_Plug } from '@ant-design/web3-assets';
+import type { WalletMetadata } from '@ant-design/web3-common';
+
+import { WalletFactory } from './factory';
+import type { IcpWalletFactory } from './factory';
+import { createPlugWallet } from './plug';
+
+export const PlugWallet = (metadata?: Partial<WalletMetadata>): IcpWalletFactory =>
+  WalletFactory(createPlugWallet, { ...metadata_Plug, ...metadata });