feat(wallet-connect): support deeplinks

android/app/src/main/AndroidManifest.xml

@@ -40,7 +40,7 @@
                 <action android:name="android.intent.action.VIEW" />
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
-                <data android:scheme="example" android:host="app" />
+                <data android:scheme="wc" />
             </intent-filter>
         </activity>
 

src/composables/walletConnect.ts

@@ -3,7 +3,13 @@ import type { SessionTypes } from '@walletconnect/types';
 import type { Web3Wallet as IWeb3Wallet } from '@walletconnect/web3wallet';
 import { buildApprovedNamespaces, getSdkError } from '@walletconnect/utils';
 import { fromWei, toChecksumAddress } from 'web3-utils';
-import { computed, reactive, watch } from 'vue';
+import {
+  computed,
+  reactive,
+  ref,
+  watch,
+} from 'vue';
+import { App } from '@capacitor/app';
 import { METHODS, Tag } from '@aeternity/aepp-sdk';
 
 import type { IModalProps } from '@/types';
@@ -42,6 +48,7 @@ interface SendTransactionParams {
   value: string;
 }
 
+const isOpenUsingDeeplink = ref(false);
 let composableInitialized = false;
 let web3wallet: Awaited<ReturnType<typeof IWeb3Wallet.init>> | null;
 
@@ -74,6 +81,13 @@ export function useWalletConnect({ offscreen } = { offscreen: false }) {
 
   const ethAccounts = computed(() => accountsGroupedByProtocol.value[PROTOCOLS.ethereum] || []);
 
+  function closeAppIfOpenUsingDeeplink() {
+    if (isOpenUsingDeeplink.value) {
+      isOpenUsingDeeplink.value = false;
+      setTimeout(() => App.exitApp(), 3000);
+    }
+  }
+
   const sessionRequestMethodHandlers: Partial<{
     [key in SupportedRequestMethod]: (p: any) => Promise<string | false>
   }> = {
@@ -110,6 +124,7 @@ export function useWalletConnect({ offscreen } = { offscreen: false }) {
       if (permitted) {
         if (adapter?.transferPreparedTransaction) {
           const actionResult = await adapter.transferPreparedTransaction(params);
+          closeAppIfOpenUsingDeeplink();
           return actionResult?.hash ?? false;
         }
       }
@@ -309,6 +324,7 @@ export function useWalletConnect({ offscreen } = { offscreen: false }) {
           });
 
           monitorActiveAccountAndNetwork();
+          closeAppIfOpenUsingDeeplink();
         } catch (error: any) {
           web3wallet!.rejectSession({ id, reason: getSdkError('USER_REJECTED') });
           handleConnectionError(error);
@@ -321,6 +337,10 @@ export function useWalletConnect({ offscreen } = { offscreen: false }) {
     }
   }
 
+  function setIsOpenUsingDeeplink(value: boolean) {
+    isOpenUsingDeeplink.value = value;
+  }
+
   if (!composableInitialized) {
     composableInitialized = true;
 
@@ -356,6 +376,7 @@ export function useWalletConnect({ offscreen } = { offscreen: false }) {
   return {
     connect,
     disconnect,
+    setIsOpenUsingDeeplink,
     wcSession,
     wcState,
     ethAccounts,

src/popup/components/Modals/WalletConnectModal.vue

@@ -220,6 +220,7 @@ export default defineComponent({
   props: {
     resolve: { type: Function as PropType<ResolveCallback>, required: true },
     reject: { type: Function as PropType<RejectCallback>, required: true },
+    deeplinkUri: { type: String as PropType<WalletConnectUri>, default: '' },
   },
   setup(props) {
     const adapter = ProtocolAdapterFactory.getAdapter(PROTOCOLS.ethereum);
@@ -243,7 +244,7 @@ export default defineComponent({
     } = toRefs(wcState);
 
     /** eg.: wc:1b3eda3f4... */
-    const connectionUri = ref<WalletConnectUri>();
+    const connectionUri = ref<WalletConnectUri | undefined>(props.deeplinkUri);
 
     const activeAccount = computed(() => getLastActiveProtocolAccount(PROTOCOLS.ethereum));
     const peerMetadata = computed(() => wcSession.value?.peer?.metadata);

src/popup/router/index.ts

@@ -6,6 +6,7 @@ import {
   APP_LINK_WEB,
   IS_MOBILE_APP,
   IS_WEB,
+  MODAL_WALLET_CONNECT,
   POPUP_TYPE,
   POPUP_TYPE_CONNECT,
   POPUP_TYPE_SIGN,
@@ -24,8 +25,10 @@ import { RouteLastUsedRoutes } from '@/lib/RouteLastUsedRoutes';
 import {
   useAccounts,
   useAuth,
+  useModals,
   usePopupProps,
   useUi,
+  useWalletConnect,
 } from '@/composables';
 import { routes } from './routes';
 import {
@@ -140,7 +143,19 @@ if (IS_MOBILE_APP) {
     await Promise.all([deviceReadyPromise, routerReadyPromise]);
 
     App.addListener('appUrlOpen', (event: URLOpenListenerEvent) => {
+      const { setIsOpenUsingDeeplink, wcSession } = useWalletConnect();
+      const { openModal } = useModals();
+
       const deepllinkUrl = new URL(event.url);
+      if (deepllinkUrl.origin === 'wc://') {
+        setIsOpenUsingDeeplink(true);
+        router.push({ name: ROUTE_ACCOUNT });
+
+        if (!wcSession.value) {
+          openModal(MODAL_WALLET_CONNECT, { deeplinkUri: event.url });
+        }
+        return;
+      }
       const prefix = ['superhero:', APP_LINK_WEB].find((p) => deepllinkUrl.origin === p);
       if (!prefix) throw new Error(`Unknown url: ${deepllinkUrl.origin}`);