feat: Support tg wallet

.changeset/wise-days-juggle.md

@@ -0,0 +1,5 @@
+---
+'@node-real/walletkit': minor
+---
+
+Support tg

packages/walletkit/__dev__/App.tsx

@@ -61,16 +61,16 @@ const config: WalletKitConfig = {
       // mathWallet(),
     ],
   }),
-  solanaConfig: defaultSolanaConfig({
-    autoConnect: true,
-    rpcUrl: 'https://solana-rpc.debridge.finance',
-    wallets: [solanaTrustWallet(), solanaPhantomWallet()],
-  }),
-  tronConfig: defaultTronConfig({
-    autoConnect: true,
-    initialChainId: '0xcd8690dc',
-    wallets: [tronLink()],
-  }),
+  // solanaConfig: defaultSolanaConfig({
+  //   autoConnect: true,
+  //   rpcUrl: 'https://solana-rpc.debridge.finance',
+  //   wallets: [solanaTrustWallet(), solanaPhantomWallet()],
+  // }),
+  // tronConfig: defaultTronConfig({
+  //   autoConnect: true,
+  //   initialChainId: '0xcd8690dc',
+  //   wallets: [tronLink()],
+  // }),
 };
 
 export default function App() {

packages/walletkit/package.json

@@ -53,7 +53,7 @@
     "wagmi": "^2"
   },
   "dependencies": {
-    "@binance/w3w-wagmi-connector-v2": "1.2.4-alpha.0",
+    "@binance/w3w-wagmi-connector-v2": "^1.2.3",
     "@metamask/jazzicon": "^2",
     "@solana/wallet-adapter-react": "^0",
     "@solana/wallet-adapter-wallets": "^0",

packages/walletkit/src/core/modals/ConnectModal/HomeView/GridLayout/index.tsx

@@ -7,6 +7,8 @@ import { WalletOption } from './WalletOption';
 import { BaseWallet } from '@/core/configs/types';
 import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { clsWallets, clsNoWalletButton } from './styles.css';
+import { isTMA } from '@/core/base/utils/mobile';
+import { Reload } from '../Reload';
 
 export function GridLayout(props: { visibleWallets: BaseWallet[] }) {
   const { visibleWallets } = props;
@@ -18,18 +20,24 @@ export function GridLayout(props: { visibleWallets: BaseWallet[] }) {
         {visibleWallets?.map((w, index) => <WalletOption key={index} wallet={w} />)}
       </ModalBody>
 
-      {!options.hideNoWalletCTA && (
+      {isTMA() ? (
         <ModalFooter>
-          <Button
-            as="a"
-            className={cx('wk-nowallet-button', clsNoWalletButton)}
-            href={options.walletDownloadUrl}
-            target="_blank"
-            rel="noopener"
-          >
-            <WalletIcon />I don’t have a wallet
-          </Button>
+          <Reload />
         </ModalFooter>
+      ) : (
+        !options.hideNoWalletCTA && (
+          <ModalFooter>
+            <Button
+              as="a"
+              className={cx('wk-nowallet-button', clsNoWalletButton)}
+              href={options.walletDownloadUrl}
+              target="_blank"
+              rel="noopener"
+            >
+              <WalletIcon />I don’t have a wallet
+            </Button>
+          </ModalFooter>
+        )
       )}
     </>
   );

packages/walletkit/src/core/modals/ConnectModal/HomeView/ListLayout/index.tsx

@@ -7,6 +7,8 @@ import { useWalletKit } from '@/core/providers/WalletKitProvider/context';
 import { clsWallets, clsNoWalletLink } from './styles.css';
 import { WalletOption } from './WalletOption';
 import { BaseWallet } from '@/core/configs/types';
+import { isTMA } from '@/core/base/utils/mobile';
+import { Reload } from '../Reload';
 
 export function ListLayout(props: { visibleWallets: BaseWallet[] }) {
   const { visibleWallets } = props;
@@ -18,15 +20,21 @@ export function ListLayout(props: { visibleWallets: BaseWallet[] }) {
         {visibleWallets?.map((w, index) => <WalletOption key={index} wallet={w} />)}
       </ModalBody>
 
-      {!options.hideNoWalletCTA && (
+      {isTMA() ? (
         <ModalFooter>
-          <Link
-            className={cx('wk-nowallet-link', clsNoWalletLink)}
-            href={options.walletDownloadUrl}
-          >
-            <WalletIcon />I don’t have a wallet
-          </Link>
+          <Reload />
         </ModalFooter>
+      ) : (
+        !options.hideNoWalletCTA && (
+          <ModalFooter>
+            <Link
+              className={cx('wk-nowallet-link', clsNoWalletLink)}
+              href={options.walletDownloadUrl}
+            >
+              <WalletIcon />I don’t have a wallet
+            </Link>
+          </ModalFooter>
+        )
       )}
     </>
   );

packages/walletkit/src/core/modals/ConnectModal/HomeView/Reload/index.tsx

@@ -0,0 +1,23 @@
+import { Box } from '@/core/base/components/Box';
+
+import { cx } from '@/core/base/utils/css';
+import { clsContent, clsReloadBtn } from './style.css';
+import { Link } from '@/core/base/components/Link';
+
+export function Reload() {
+  return (
+    <Box className={cx('wk-reload-wrapper', clsContent)}>
+      No response on wallet?
+      <Box>
+        <Link
+          className={cx('wk-reload', clsReloadBtn)}
+          onClick={() => {
+            window.location.reload();
+          }}
+        >
+          Reload
+        </Link>
+      </Box>
+    </Box>
+  );
+}

packages/walletkit/src/core/modals/ConnectModal/HomeView/Reload/style.css.ts

@@ -0,0 +1,17 @@
+import { style } from '@vanilla-extract/css';
+
+export const clsContent = style({
+  fontSize: '16px',
+  lineHeight: '24px',
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  justifyContent: 'center',
+});
+
+export const clsReloadBtn = style({
+  width: '100%',
+  marginLeft: '4px',
+  textDecoration: 'underline',
+  cursor: 'pointer',
+});

packages/walletkit/src/evm/components/SetEvmWalletClickRef/index.tsx

@@ -1,4 +1,4 @@
-import { isMobile, isTMA } from '@/core/base/utils/mobile';
+import { isMobile, isPC, isTMA } from '@/core/base/utils/mobile';
 import { UseWalletRenderProps } from '@/core/hooks/useWalletRender';
 import { useConnectModal } from '@/core/modals/ConnectModal/context';
 import { ViewRoutes } from '@/core/modals/ConnectModal/RouteProvider';
@@ -84,7 +84,7 @@ export function SetEvmWalletClickRef(props: SetEvmWalletClickRefProps) {
     disconnect();
     clearTimeout(timerRef.current);
 
-    const useSDK = [binanceWeb3Wallet().id].includes(walletId);
+    const useSDK = [binanceWeb3Wallet().id].includes(walletId) && isPC();
     const delay = useSDK ? 0 : 300;
 
     const handleJumping = () => {

packages/walletkit/src/evm/wallets/binanceWeb3Wallet/index.tsx

@@ -1,6 +1,7 @@
 import { binanceWeb3WalletConfig } from '@/core/configs/binanceWeb3Wallet';
 import { EvmWallet } from '../types';
 import { BinanceW3WParameters, getWagmiConnectorV2 } from '@binance/w3w-wagmi-connector-v2';
+import { isAndroid, isTMA } from '@/core/base/utils/mobile';
 
 export interface BinanceWeb3WalletOptions extends Partial<EvmWallet> {
   connectorOptions?: BinanceW3WParameters;
@@ -21,8 +22,12 @@ export function binanceWeb3Wallet(props: BinanceWeb3WalletOptions = {}): EvmWall
     getDeepLink() {
       return undefined;
     },
-    getUri() {
-      return undefined;
+    getUri(uri) {
+      let encodedUri = encodeURIComponent(uri);
+      if (isTMA() && isAndroid()) {
+        encodedUri = encodeURIComponent(encodedUri);
+      }
+      return `https://app.binance.com/cedefi/wc?uri=${encodedUri}`;
     },
     getCreateConnectorFn() {
       const connector = getWagmiConnectorV2();