feat: add "deeplink" field to Wallet Adapter

lidofinance · Apr 16, 2024 · 95c2525 · 95c2525
1 parent f68288c
commit 95c2525
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 12 deletions.
diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectBrowser.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectBrowser.tsx
@@ -1,11 +1,10 @@
 import React, { ElementType, FC, useCallback } from 'react';
 import { useConnect } from 'wagmi';
-import { useDisconnect } from '@reef-knot/web3-react';
+import { useDisconnect, useReefKnotModal } from '@reef-knot/core-react';
 import { WalletAdapterIcons } from '@reef-knot/types';
 import { ConnectButton } from '../components/ConnectButton';
 import { capitalize } from '../helpers';
 import { ConnectInjectedProps } from './types';
-import { useReefKnotModal } from '@reef-knot/core-react';
 
 export const ConnectBrowser: FC<ConnectInjectedProps> = (
   props: ConnectInjectedProps,
@@ -77,7 +76,9 @@ export const ConnectBrowser: FC<ConnectInjectedProps> = (
       {...rest}
       icon={WalletIcon}
       shouldInvertWalletIcon={shouldInvertWalletIcon}
-      onClick={handleConnect}
+      onClick={() => {
+        void handleConnect();
+      }}
     >
       {walletName}
     </ConnectButton>

diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectCoinbase.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectCoinbase.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useCallback } from 'react';
 import { useConnect } from 'wagmi';
-import { useDisconnect } from '@reef-knot/web3-react';
+import { useDisconnect } from '@reef-knot/core-react';
 import { ConnectButton } from '../components/ConnectButton';
 import { ConnectInjectedProps } from './types';
 

diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectInjected.tsx
@@ -1,8 +1,8 @@
 import React, { FC, useCallback } from 'react';
 import { useConnect } from 'wagmi';
-import { useDisconnect } from '@reef-knot/core-react';
+import { useDisconnect, isMobileOrTablet } from '@reef-knot/core-react';
 import { ConnectButton } from '../components/ConnectButton';
-import { capitalize, suggestApp } from '../helpers';
+import { capitalize, suggestApp, openWindow } from '../helpers';
 import { ConnectInjectedProps } from './types';
 
 export const ConnectInjected: FC<ConnectInjectedProps> = (
@@ -19,6 +19,7 @@ export const ConnectInjected: FC<ConnectInjectedProps> = (
     downloadURLs,
     detector,
     connector,
+    deeplink,
     ...rest
   } = props;
   const walletIdCapitalized = capitalize(walletId);
@@ -42,12 +43,15 @@ export const ConnectInjected: FC<ConnectInjectedProps> = (
     if (await detector?.()) {
       disconnect?.();
       await connectAsync({ connector });
+    } else if (isMobileOrTablet && deeplink) {
+      openWindow(deeplink);
     } else if (downloadURLs) {
       suggestApp(downloadURLs);
     }
   }, [
     connectAsync,
     connector,
+    deeplink,
     detector,
     disconnect,
     downloadURLs,
@@ -60,7 +64,9 @@ export const ConnectInjected: FC<ConnectInjectedProps> = (
       {...rest}
       icon={WalletIcon}
       shouldInvertWalletIcon={shouldInvertWalletIcon}
-      onClick={handleConnect}
+      onClick={() => {
+        void handleConnect();
+      }}
     >
       {walletName}
     </ConnectButton>

diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectLedger.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectLedger.tsx
@@ -28,7 +28,9 @@ export const ConnectLedger: FC<ConnectLedgerProps> = (props) => {
       {...rest}
       icon={WalletIcon}
       shouldInvertWalletIcon={shouldInvertWalletIcon}
-      onClick={handleConnect}
+      onClick={() => {
+        void handleConnect();
+      }}
     >
       Ledger
     </ConnectButton>

diff --git a/packages/connect-wallet-modal/src/connectButtons/ConnectWC.tsx b/packages/connect-wallet-modal/src/connectButtons/ConnectWC.tsx
@@ -1,10 +1,10 @@
 import React, { FC, useCallback, useState } from 'react';
 import { useConnect } from 'wagmi';
-import { useDisconnect } from '@reef-knot/web3-react';
+import { useDisconnect, isMobileOrTablet } from '@reef-knot/core-react';
 import { WCWarnBannerRequest } from '@reef-knot/ui-react';
 import { getWalletConnectUri } from '@reef-knot/wallets-helpers';
 import { ConnectButton } from '../components/ConnectButton';
-import { capitalize } from '../helpers';
+import { capitalize, openWindow } from '../helpers';
 import { ConnectWCProps } from './types';
 
 let redirectionWindow: Window | null = null;
@@ -32,6 +32,7 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
     downloadURLs,
     connector,
     walletconnectExtras,
+    deeplink,
     ...rest
   } = props;
 
@@ -52,6 +53,12 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
   const [isConnecting, setIsConnecting] = useState(false);
 
   const handleConnect = useCallback(async () => {
+    // Handle deeplink on mobiles before connecting to WC
+    if (isMobileOrTablet && deeplink) {
+      openWindow(deeplink);
+      return; // A user was redirected to a wallet mobile app, no need to continue
+    }
+
     // WCURI – WalletConnect Pairing URI: https://docs.walletconnect.com/2.0/specs/clients/core/pairing/pairing-uri
     // Used for connection without WalletConnect QR modal via redirect
     const WCURIConnector = walletconnectExtras?.connectionViaURI?.connector;
@@ -113,7 +120,9 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
         {...rest}
         icon={WalletIcon}
         shouldInvertWalletIcon={shouldInvertWalletIcon}
-        onClick={handleConnect}
+        onClick={() => {
+          void handleConnect();
+        }}
       >
         {walletName}
       </ConnectButton>

diff --git a/packages/connect-wallet-modal/src/helpers/suggestApp.ts b/packages/connect-wallet-modal/src/helpers/suggestApp.ts
@@ -1,5 +1,5 @@
-import { openWindow } from './openWindow';
 import { isAndroid, isIOS } from '@reef-knot/wallets-helpers';
+import { openWindow } from './openWindow';
 
 export const suggestApp = (urls: {
   default: string;

diff --git a/packages/types/src/walletAdapter.ts b/packages/types/src/walletAdapter.ts
@@ -31,6 +31,8 @@ export type WalletAdapterData = {
     ios?: string;
   };
 
+  deeplink?: string;
+
   connector: Connector;
 
   // Additional options for wallets based on WalletConnect