feat(walletkit): Support TronLink on mobile

node-real · Oct 12, 2024 · 261c919 · 261c919
1 parent ed0b099
commit 261c919
Show file tree

Hide file tree

Showing 6 changed files with 85 additions and 116 deletions.
diff --git a/.changeset/popular-forks-warn.md b/.changeset/popular-forks-warn.md
@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': patch
+---
+
+Support tronLink on mobile
diff --git a/packages/walletkit/package.json b/packages/walletkit/package.json
@@ -57,11 +57,11 @@
     "@solana/wallet-adapter-react": "^0",
     "@solana/wallet-adapter-wallets": "^0",
     "@solana/web3.js": "^1",
-    "@tronweb3/tronwallet-abstract-adapter": "^1.1.7",
-    "@tronweb3/tronwallet-adapter-react-hooks": "^1.1.8",
-    "@tronweb3/tronwallet-adapters": "^1.2.4",
+    "@tronweb3/tronwallet-abstract-adapter": "^1",
+    "@tronweb3/tronwallet-adapter-react-hooks": "^1",
+    "@tronweb3/tronwallet-adapters": "^1",
     "@walletconnect/solana-adapter": "^0.0.5",
-    "qrcode": "^1.5.3"
+    "qrcode": "^1"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.51.1",

diff --git a/packages/walletkit/src/core/configs/tronLink/icon.tsx b/packages/walletkit/src/core/configs/tronLink/icon.tsx
@@ -1,113 +1,46 @@
 export const TronLinkTransparentIcon = (props: SVGIconProps) => {
   return (
-    <svg width="52" height="52" viewBox="0 0 52 52" fill="none" {...props}>
-      <mask id="mask0_1_2" maskUnits="userSpaceOnUse" x="8" y="14" width="36" height="24">
-        <path d="M44 14H8V37.2274H44V14Z" fill="white" />
-      </mask>
-      <g mask="url(#mask0_1_2)">
+    <svg width="65" height="65" viewBox="0 0 65 65" fill="none" {...props}>
+      <g clipPath="url(#clip0_18_3)">
         <path
-          d="M19.8012 21.9884H19.8078C19.8012 21.9495 19.8012 21.9042 19.8012 21.8653V21.9884Z"
-          fill="#29AEFF"
-        />
-        <path
-          d="M32.6906 23.2184H25.5567V36.0945C25.5567 36.7031 26.0487 37.1951 26.6572 37.1951H31.5902C32.1986 37.1951 32.6906 36.7031 32.6906 36.0945V23.2184Z"
-          fill="#2980FE"
-        />
-        <path
-          d="M22.1125 14H21.873H9.10044C8.49198 14 8 14.492 8 15.1006V19.5673C8 20.176 8.49198 20.668 9.10044 20.668H12.0978H13.289V21.9886V36.127C13.289 36.7355 13.7809 37.2274 14.3896 37.2274H19.0765C19.6849 37.2274 20.1769 36.7355 20.1769 36.127V21.9886V21.8655V20.668H21.3681H21.8537H22.0932C23.9317 20.668 25.427 19.1725 25.427 17.334C25.4465 15.4955 23.951 14 22.1125 14Z"
-          fill="#2980FE"
-        />
-        <path
-          d="M32.6967 23.2184V32.2039C32.9427 32.2621 33.1952 32.3074 33.4542 32.3463C33.8166 32.3981 34.1921 32.4305 34.5676 32.437C34.587 32.437 34.6065 32.437 34.6324 32.437V25.29C33.5512 25.2189 32.6967 24.319 32.6967 23.2184Z"
-          fill="url(#paint0_linear_1_2)"
-        />
-        <path
-          d="M34.7752 14C29.6869 14 25.5567 18.1303 25.5567 23.2186C25.5567 27.5948 28.6058 31.2588 32.6972 32.2039V23.2186C32.6972 22.0727 33.6293 21.1404 34.7752 21.1404C35.9211 21.1404 36.8532 22.0727 36.8532 23.2186C36.8532 24.183 36.1993 24.9923 35.306 25.2254C35.1377 25.2707 34.9564 25.2966 34.7752 25.2966V32.437C34.9564 32.437 35.1312 32.4305 35.306 32.4241C40.1483 32.1457 43.9936 28.132 43.9936 23.2186C44.0002 18.1303 39.8699 14 34.7752 14Z"
-          fill="#2980FE"
-        />
-        <path
-          d="M34.775 32.4369V25.2964C34.7232 25.2964 34.6779 25.2964 34.626 25.2899V32.4369C34.6779 32.4369 34.7297 32.4369 34.775 32.4369Z"
-          fill="#2980FE"
+          d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
+          fill="url(#paint0_linear_18_3)"
         />
+        <mask id="mask0_18_3" maskUnits="userSpaceOnUse" x="0" y="0" width="65" height="65">
+          <path
+            d="M7.30721 0C3.27132 0 0 3.59886 0 8.03839V56.9616C0 61.4011 3.27132 65 7.30721 65H57.6928C61.7283 65 65 61.4011 65 56.9616V8.03839C65 3.59886 61.7283 0 57.6928 0H7.30721Z"
+            fill="white"
+          />
+        </mask>
+        <g mask="url(#mask0_18_3)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M55.146 50.8465L85.3058 45.3974L50.7112 87.4441L55.146 50.8465ZM50.8147 48.7967L46.1368 87.4028L20.893 24.0406L50.8147 48.7967ZM52.8592 44.5958L24.1489 20.8417L71.0713 29.4557L52.8592 44.5958ZM76.0546 31.217L86.012 40.661L58.775 45.5816L76.0546 31.217ZM77.101 25.9507L12 14L46.263 100L94 41.9787L77.101 25.9507Z"
+            fill="white"
+          />
+        </g>
       </g>
       <defs>
         <linearGradient
-          id="paint0_linear_1_2"
-          x1="34.7777"
-          y1="27.8291"
-          x2="32.6977"
-          y2="27.8291"
+          id="paint0_linear_18_3"
+          x1="537.383"
+          y1="266.088"
+          x2="6244.77"
+          y2="6544.28"
           gradientUnits="userSpaceOnUse"
         >
-          <stop stopColor="#2980FE" />
-          <stop offset="0.9667" stopColor="#6CA8FF" />
-          <stop offset="1" stopColor="#2980FE" />
+          <stop stopColor="#145ECC" />
+          <stop offset="1" stopColor="#1260CC" />
         </linearGradient>
+        <clipPath id="clip0_18_3">
+          <rect width="65" height="65" fill="white" />
+        </clipPath>
       </defs>
     </svg>
   );
 };
 
 export const TronLinkIcon = (props: SVGIconProps) => {
-  return (
-    <svg
-      width="28px"
-      height="28px"
-      viewBox="0 0 28 28"
-      version="1.1"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      {...props}
-    >
-      <defs>
-        <linearGradient
-          x1="107.511425%"
-          y1="50.0147427%"
-          x2="0.0459570557%"
-          y2="50.0147427%"
-          id="linearGradient-1"
-        >
-          <stop stopColor="#FFFFFF" offset="0%"></stop>
-          <stop stopColor="#FFFFFF" stopOpacity="0.3233" offset="96.67%"></stop>
-          <stop stopColor="#FFFFFF" stopOpacity="0.3" offset="100%"></stop>
-        </linearGradient>
-      </defs>
-      <g id="p1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
-        <g fillRule="nonzero">
-          <polygon id="path" fill="#2980FE" points="27.9874275 0 0 0 0 28 27.9874275 28"></polygon>
-          <g id="group" transform="translate(5.107577, 7.574219)">
-            <path
-              d="M6.28678209,4.45186719 L6.29988209,4.45186719 C6.28678209,4.42028824 6.28678209,4.38344613 6.28678209,4.35186719 L6.28678209,4.45186719 Z"
-              id="path"
-              fill="#29AEFF"
-            ></path>
-            <path
-              d="M13.085927,5.10051172 L9.30493171,5.10051172 L9.30493171,12.2247344 C9.30493171,12.561418 9.56568007,12.8336523 9.88819083,12.8336523 L12.5026417,12.8336523 C12.8251787,12.8336523 13.085927,12.561418 13.085927,12.2247344 L13.085927,5.10051172 Z"
-              id="path"
-              fill="#FFFFFF"
-            ></path>
-            <path
-              d="M7.47966698,0 L7.35271094,0 L0.583285313,0 C0.260748363,0 0,0.272207031 0,0.608917969 L0,3.08035547 C0,3.41706641 0.260748363,3.68927344 0.583285313,3.68927344 L2.17184659,3.68927344 L2.80316932,3.68927344 L2.80316932,4.41995313 L2.80316932,12.2426445 C2.80316932,12.5793555 3.06391768,12.8515625 3.38642844,12.8515625 L5.87051824,12.8515625 C6.193029,12.8515625 6.45377736,12.5793555 6.45377736,12.2426445 L6.45377736,4.41995313 L6.45377736,4.35192188 L6.45377736,3.68927344 L7.08510009,3.68927344 L7.34241721,3.68927344 L7.46937325,3.68927344 C8.4437942,3.68927344 9.23635921,2.86187891 9.23635921,1.84463672 C9.24665295,0.827394531 8.45408793,0 7.47966698,0 Z"
-              id="path"
-              fill="#FFFFFF"
-            ></path>
-            <path
-              d="M13.0894107,5.10051172 L13.0894107,10.0720703 C13.2197979,10.1043086 13.3535903,10.1293828 13.49084,10.150875 C13.6829897,10.1795313 13.8819757,10.1974414 14.0809878,10.2010234 C14.0912816,10.2010234 14.1015753,10.2010234 14.1153003,10.2010234 L14.1153003,6.24667969 C13.5423087,6.20727734 13.0894107,5.70940234 13.0894107,5.10051172 Z"
-              id="path"
-              fill="url(#linearGradient-1)"
-            ></path>
-            <path
-              d="M14.1907091,0 C11.4939345,0 9.30493171,2.28519922 9.30493171,5.10051172 C9.30493171,7.52182812 10.9209429,9.54912109 13.0893583,10.0720703 L13.0893583,5.10051172 C13.0893583,4.46651953 13.5834312,3.95073438 14.1907091,3.95073438 C14.7980131,3.95073438 15.2920861,4.46651953 15.2920861,5.10051172 C15.2920861,5.63420703 14.9455566,6.08193359 14.4720711,6.21085938 C14.3828587,6.23593359 14.2867839,6.25026172 14.1907091,6.25026172 L14.1907091,10.2010234 C14.2867839,10.2010234 14.3794275,10.1974414 14.4720711,10.1938594 C17.0384846,10.039832 19.0765167,7.81910938 19.0765167,5.10051172 C19.0799439,2.28519922 16.8909411,0 14.1907091,0 Z"
-              id="path"
-              fill="#FFFFFF"
-            ></path>
-            <path
-              d="M14.2117905,10.2010234 L14.2117905,6.25026172 C14.1770295,6.25026172 14.1465846,6.25026172 14.1117905,6.24667969 L14.1117905,10.2010234 C14.1465846,10.2010234 14.1813788,10.2010234 14.2117905,10.2010234 Z"
-              id="path"
-              fill="#FFFFFF"
-            ></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  );
+  return <TronLinkTransparentIcon {...props} />;
 };
diff --git a/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx b/packages/walletkit/src/tron/components/SetTronWalletClickRef/index.tsx
@@ -1,7 +1,9 @@
+import { isMobile } from '@/core/index';
 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 { useTronConnect } from '@/tron/hooks/useTronConnect';
 import { TronWallet } from '@/tron/wallets';
 import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { useRef } from 'react';
@@ -15,6 +17,7 @@ export function SetTronWalletClickRef(props: SetTronWalletClickRefProps) {
 
   const { log, options, setSelectedWallet, tronConfig } = useWalletKit();
   const { disconnect } = useWallet();
+  const { connect } = useTronConnect();
 
   const connectModal = useConnectModal();
   const router = useRouter();
@@ -50,7 +53,17 @@ export function SetTronWalletClickRef(props: SetTronWalletClickRefProps) {
 
     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/tron/components/TronConnectingView/index.tsx b/packages/walletkit/src/tron/components/TronConnectingView/index.tsx
@@ -2,22 +2,23 @@ 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 { useTronConnect } from '@/tron/hooks/useTronConnect';
 import { tronCommonErrorHandler } from '@/tron/utils/tronCommonErrorHandler';
 import { TronWallet } from '@/tron/wallets';
-import { AdapterName } from '@tronweb3/tronwallet-abstract-adapter';
 import { useWallet, WalletProviderProps } from '@tronweb3/tronwallet-adapter-react-hooks';
 import { useCallback, useEffect, useState } from 'react';
 
 type WalletError = Parameters<Required<WalletProviderProps>['onError']>[0];
 
 export function TronConnectingView() {
-  const { log, selectedWallet, options, tronConfig } = 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 { connected } = useWallet();
+  const { connect } = useTronConnect();
 
   useEffect(() => {
     const onError = (error: WalletError) => {
@@ -49,18 +50,10 @@ export function TronConnectingView() {
     if (!selectedWallet.isInstalled()) return;
     setStatus(CONNECT_STATUS.CONNECTING);
 
-    select((selectedWallet as TronWallet).adapterName as AdapterName);
-
-    if (!tronConfig?.autoConnect) {
-      const adapter = adapters.find(
-        (item) => item.adapter.name === (selectedWallet as TronWallet).adapterName,
-      )?.adapter;
-
-      if (adapter) {
-        await adapter.connect();
-      }
-    }
-  }, [adapters, select, selectedWallet, tronConfig]);
+    connect({
+      adapterName: (selectedWallet as TronWallet).adapterName,
+    });
+  }, [connect, selectedWallet]);
 
   return (
     <TemplateConnectingView

diff --git a/packages/walletkit/src/tron/hooks/useTronConnect.ts b/packages/walletkit/src/tron/hooks/useTronConnect.ts
@@ -0,0 +1,25 @@
+import { useWalletKit } from '@/core/index';
+import { useWallet } from '@tronweb3/tronwallet-adapter-react-hooks';
+import { useCallback } from 'react';
+
+export function useTronConnect() {
+  const { tronConfig } = useWalletKit();
+  const { select, wallets: adapters } = useWallet();
+
+  const connect = useCallback(
+    async ({ adapterName }: { adapterName: string }) => {
+      select(adapterName as any);
+      if (!tronConfig?.autoConnect) {
+        const adapter = adapters.find((item) => item.adapter.name === adapterName)?.adapter;
+        if (adapter) {
+          await adapter.connect();
+        }
+      }
+    },
+    [adapters, select, tronConfig?.autoConnect],
+  );
+
+  return {
+    connect,
+  };
+}