@sign-global/tokentable-wallets 1.6.3 → 2.0.0

package/src/providers/sui/index.tsx

@@ -1,31 +1,40 @@
-import '@mysten/dapp-kit/dist/index.css';
 import EventEmitter from 'events';
-import { ReactNode, useEffect, useState } from 'react';
+import { CSSProperties, ReactNode, useEffect, useState } from 'react';
 import { WalletBase } from '../../WalletBase';
 import { ISignResult } from '../../types';
 import { get4361Message, prepareSignMessage } from '../../utils';
-import {
-  createNetworkConfig,
-  SuiClientProvider,
-  WalletProvider,
-  ConnectModal,
-  useCurrentAccount,
-  useCurrentWallet
-} from '@mysten/dapp-kit';
-import { getFullnodeUrl } from '@mysten/sui/client';
+import { createDAppKit, DAppKitProvider, useWalletConnection, UiWalletAccount } from '@mysten/dapp-kit-react';
+import { ConnectModal } from '@mysten/dapp-kit-react/ui';
+import { SuiGrpcClient } from '@mysten/sui/grpc';
+import { getWallets, Wallet } from '@mysten/wallet-standard';
+
+type SuiNetwork = 'testnet' | 'mainnet';
+
+const createSuiDAppKit = () =>
+  createDAppKit({
+    networks: ['mainnet', 'testnet'] as SuiNetwork[],
+    createClient: (network) => new SuiGrpcClient({ network, baseUrl: `https://fullnode.${network}.sui.io:443` })
+  });
+
+let dAppKitInstance: ReturnType<typeof createSuiDAppKit> | undefined;
+
+// 延迟创建：createDAppKit 会触发钱包发现与自动连接，只能在浏览器端执行
+const getDAppKit = () => {
+  if (!dAppKitInstance) {
+    dAppKitInstance = createSuiDAppKit();
+  }
+  return dAppKitInstance;
+};
 
 interface SuiStoreType {
-  connectModal: {
-    open: boolean;
-    setOpen: (open: boolean) => void;
-  } | null;
-  account: ReturnType<typeof useCurrentAccount> | null;
-  wallet: ReturnType<typeof useCurrentWallet> | null;
+  openConnectModal: (() => void) | null;
+  account: UiWalletAccount | null;
+  wallet: Wallet | null;
   counter: number;
 }
 
 const suiStore: SuiStoreType = {
-  connectModal: null,
+  openConnectModal: null,
   account: null,
   wallet: null,
   counter: 0
@@ -44,34 +53,32 @@ export class SuiWallet extends WalletBase<SuiStoreType> {
     return suiStore;
   }
   get isConnected(): boolean {
-    return !!this.getStore().wallet?.isConnected;
+    return getDAppKit().stores.$connection.get().isConnected;
   }
 
   connect() {
-    suiStore.connectModal?.setOpen(true);
+    suiStore.openConnectModal?.();
   }
 
   disconnect() {
-    suiStore.wallet?.currentWallet?.features['standard:disconnect']?.disconnect();
+    getDAppKit().disconnectWallet();
   }
   async sign(message: string): Promise<ISignResult> {
-    const signPersonalFeature = suiStore.wallet?.currentWallet?.features['sui:signPersonalMessage'];
-    const res = await signPersonalFeature?.signPersonalMessage({
-      message: new Uint8Array(Buffer.from(message)),
-      account: suiStore.account!
+    const res = await getDAppKit().signPersonalMessage({
+      message: new Uint8Array(Buffer.from(message))
     });
 
     return {
       message: message,
-      signature: res!.signature
+      signature: res.signature
     };
   }
 
   signin(statement: string, prepare = true): Promise<ISignResult> {
     return new Promise((resolve) => {
-      const signCallback = (data: ReturnType<typeof useCurrentAccount>) => {
-        this.publicKey = Buffer.from(data!.publicKey).toString('hex');
-        this.address = data?.address;
+      const signCallback = (data: UiWalletAccount) => {
+        this.publicKey = Buffer.from(data.publicKey).toString('hex');
+        this.address = data.address;
         this.chainId = 1;
         let fullMessage = statement;
         if (prepare) {
@@ -99,41 +106,68 @@ export class SuiWallet extends WalletBase<SuiStoreType> {
   }
 }
 
+// dapp-kit 组件把宿主的 --background 等同名变量当完整颜色读取，shadcn 主题存的是 HSL 通道值会让弹窗变透明，这里重置为组件默认主题
+const dappKitThemeReset = Object.fromEntries(
+  [
+    'background',
+    'foreground',
+    'primary',
+    'primary-foreground',
+    'secondary',
+    'secondary-foreground',
+    'border',
+    'accent',
+    'accent-foreground',
+    'muted',
+    'muted-foreground',
+    'popover',
+    'popover-foreground',
+    'destructive',
+    'positive',
+    'ring',
+    'input'
+  ].map((name) => [`--${name}`, 'initial'])
+) as CSSProperties;
+
 export const SuiConnector = () => {
-  const [showModal, setShowModal] = useState(false);
-  const account = useCurrentAccount();
-  const wallet = useCurrentWallet();
+  // ConnectModal 的 React 封装不转发 ref，用 key 重挂载来重新打开被用户关闭的弹窗
+  const [modalKey, setModalKey] = useState(0);
+  const { wallet, account, isConnected } = useWalletConnection({ dAppKit: getDAppKit() });
 
   useEffect(() => {
-    if (wallet) {
-      if (wallet.isConnected && account) {
-        const eventKey = getEventKey();
-        eventBus.emit(eventKey, account);
-      }
+    if (isConnected && account) {
+      const eventKey = getEventKey();
+      eventBus.emit(eventKey, account);
     }
-  }, [wallet, account]);
+  }, [isConnected, account]);
 
-  suiStore.connectModal = {
-    open: showModal,
-    setOpen: setShowModal
-  };
+  suiStore.openConnectModal = () => setModalKey((key) => key + 1);
   suiStore.account = account;
-  suiStore.wallet = wallet;
-
-  return <ConnectModal open={showModal} onOpenChange={(open) => setShowModal(open)} trigger={<div></div>} />;
+  // 还原 wallet-standard 的 Wallet 对象，供 core 的 walletClient 使用
+  suiStore.wallet = wallet
+    ? (getWallets()
+        .get()
+        .find((w) => w.name === wallet.name) ?? null)
+    : null;
+
+  return modalKey > 0 ? (
+    <div style={dappKitThemeReset}>
+      <ConnectModal key={modalKey} open />
+    </div>
+  ) : null;
 };
 
-export const SuiProvider = ({ children, network }: { children: ReactNode; network: 'testnet' | 'mainnet' }) => {
-  const { networkConfig } = createNetworkConfig({
-    testnet: { url: getFullnodeUrl('testnet') },
-    mainnet: { url: getFullnodeUrl('mainnet') }
-  });
+export const SuiProvider = ({ children, network }: { children: ReactNode; network: SuiNetwork }) => {
+  const dAppKit = getDAppKit();
+
+  useEffect(() => {
+    dAppKit.switchNetwork(network);
+  }, [dAppKit, network]);
+
   return (
-    <SuiClientProvider networks={networkConfig} network={network}>
-      <WalletProvider autoConnect>
-        <SuiConnector />
-        {children}
-      </WalletProvider>
-    </SuiClientProvider>
+    <DAppKitProvider dAppKit={dAppKit}>
+      <SuiConnector />
+      {children}
+    </DAppKitProvider>
   );
 };