feat: Support solana on mobile

node-real · Oct 29, 2024 · cf27048 · cf27048
1 parent 5f23f0f
commit cf27048
Show file tree

Hide file tree

Showing 7 changed files with 312 additions and 669 deletions.
diff --git a/.changeset/big-donuts-push.md b/.changeset/big-donuts-push.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support solana on mobile
diff --git a/packages/walletkit/__dev__/App.tsx b/packages/walletkit/__dev__/App.tsx
@@ -87,7 +87,7 @@ function ConnectButton() {
   const { publicKey } = useSolanaWallet();
   const { address: b } = useTronWallet();
 
-  console.log(publicKey, b);
+  console.log(publicKey?.toBase58(), b);
 
   if (address) {
     return (

diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -60,7 +60,6 @@
     "@tronweb3/tronwallet-abstract-adapter": "^1",
     "@tronweb3/tronwallet-adapter-react-hooks": "^1",
     "@tronweb3/tronwallet-adapters": "^1",
-    "@walletconnect/solana-adapter": "^0.0.5",
     "qrcode": "^1"
   },
   "devDependencies": {

diff --git a/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx b/packages/walletkit/src/solana/components/SetSolanaWalletClickRef/index.tsx
@@ -1,7 +1,9 @@
+import { isMobile } from '@/core/base/utils/mobile';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
 import { useRouter } from '@/core/modals/ConnectModal/RouteProvider/context';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
+import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';
 import { SolanaWallet } from '@/solana/wallets';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useRef } from 'react';
@@ -15,6 +17,7 @@ export function SetSolanaWalletClickRef(props: SetSolanaWalletClickRefProps) {
 
   const { log, options, setSelectedWallet, solanaConfig } = useWalletKit();
   const { disconnect } = useWallet();
+  const { connect } = useSolanaConnect();
 
   const connectModal = useConnectModal();
   const router = useRouter();
@@ -50,7 +53,17 @@ export function SetSolanaWalletClickRef(props: SetSolanaWalletClickRefProps) {
 
     clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => {
-      jumpToConnectingView();
+      if (isMobile()) {
+        if (wallet.isInstalled()) {
+          jumpToConnectingView();
+        } else {
+          connect({
+            adapterName: wallet.adapterName,
+          });
+        }
+      } else {
+        jumpToConnectingView();
+      }
     }, 300);
   };
 

diff --git a/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx b/packages/walletkit/src/solana/components/SolanaConnectingView/index.tsx
@@ -2,21 +2,22 @@ import { CONNECT_STATUS } from '@/core/constants';
 import { TemplateConnectingView } from '@/core/modals/ConnectModal/TemplateConnectingView';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { EventEmitter } from '@/core/utils/eventEmitter';
+import { useSolanaConnect } from '@/solana/hooks/useSolanaConnect';
 import { solanaCommonErrorHandler } from '@/solana/utils/solanaCommonErrorHandler';
 import { SolanaWallet } from '@/solana/wallets';
-import { useWallet, WalletProviderProps } from '@solana/wallet-adapter-react';
+import { WalletProviderProps } from '@solana/wallet-adapter-react';
 import { useCallback, useEffect, useState } from 'react';
 
 type WalletError = Parameters<Required<WalletProviderProps>['onError']>[0];
 
 export function SolanaConnectingView() {
-  const { log, selectedWallet, options, solanaConfig } = useWalletKit();
+  const { log, selectedWallet, options } = useWalletKit();
 
   const [status, setStatus] = useState(
     selectedWallet.isInstalled() ? CONNECT_STATUS.CONNECTING : CONNECT_STATUS.UNAVAILABLE,
   );
 
-  const { select, wallets: adapters, connected } = useWallet();
+  const { isConnected, connect } = useSolanaConnect();
 
   useEffect(() => {
     const onError = (error: WalletError) => {
@@ -51,25 +52,18 @@ export function SolanaConnectingView() {
     if (!selectedWallet.isInstalled()) return;
     setStatus(CONNECT_STATUS.CONNECTING);
 
-    select((selectedWallet as SolanaWallet).adapterName as any);
-
-    if (!solanaConfig?.autoConnect) {
-      const adapter = adapters.find(
-        (item) => item.adapter.name === (selectedWallet as SolanaWallet).adapterName,
-      )?.adapter;
-      if (adapter) {
-        await adapter.connect();
-      }
-    }
-  }, [adapters, select, selectedWallet, solanaConfig]);
+    connect({
+      adapterName: (selectedWallet as SolanaWallet).adapterName,
+    });
+  }, [connect, selectedWallet]);
 
   return (
     <TemplateConnectingView
       status={status}
       runConnect={runConnect}
       onTryAgain={runConnect}
       wallet={selectedWallet}
-      isConnected={connected}
+      isConnected={isConnected}
     />
   );
 }
diff --git a/packages/walletkit/src/solana/hooks/useSolanaConnect.ts b/packages/walletkit/src/solana/hooks/useSolanaConnect.ts
@@ -0,0 +1,27 @@
+import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
+import { useWallet } from '@solana/wallet-adapter-react';
+import { useCallback } from 'react';
+
+export function useSolanaConnect() {
+  const { solanaConfig } = useWalletKit();
+  const { select, wallets: adapters, connected } = useWallet();
+
+  const connect = useCallback(
+    async ({ adapterName }: { adapterName: string; chainId?: string | number }) => {
+      select(adapterName as any);
+
+      if (!solanaConfig?.autoConnect) {
+        const adapter = adapters.find((item) => item.adapter.name === adapterName)?.adapter;
+        if (adapter) {
+          await adapter.connect();
+        }
+      }
+    },
+    [adapters, select, solanaConfig?.autoConnect],
+  );
+
+  return {
+    connect,
+    isConnected: connected,
+  };
+}