refactor: handle failed mobile request, fix app not opening on request

Author: Aleksandar Cakalic

src/connectors/argent/argentMobile/modal/argentModal.ts

@@ -3,6 +3,7 @@ import Modal from "../../../../modal/Modal.svelte"
 import { Layout, type ModalWallet } from "../../../../types/modal"
 import { getModalTarget } from "../../../../helpers/modal"
 import type { StarknetkitConnector } from "../../../connector"
+import { isInArgentMobileAppBrowser } from "../../helpers"
 
 const device = getDevice()
 
@@ -74,21 +75,24 @@ class ArgentModal {
     })
   }
 
-  private getQR(urls: Urls) {
-    const overlay = document.createElement("div")
-    const shadow = document.querySelector("#starknetkit-modal-container")
+  private openMobileApp(urls: Urls) {
+    const toMobileApp = document.createElement("button")
+    toMobileApp.style.display = "none"
+    toMobileApp.addEventListener("click", () => {
+      window.location.href = urls[device]
+    })
+    toMobileApp.click()
+  }
 
+  private getQR(urls: Urls) {
     if (["android", "ios"].includes(device)) {
-      const toMobileApp = document.createElement("button")
-      toMobileApp.style.display = "none"
-      toMobileApp.addEventListener("click", () => {
-        window.location.href = urls[device]
-      })
-      toMobileApp.click()
-
+      this.openMobileApp(urls)
       return
     }
 
+    const overlay = document.createElement("div")
+    const shadow = document.querySelector("#starknetkit-modal-container")
+
     if (shadow?.shadowRoot) {
       const slot = shadow.shadowRoot.querySelector(".qr-code-slot")
 
@@ -112,33 +116,51 @@ class ArgentModal {
   }
 
   public showApprovalModal(_: RequestArguments): void {
-    if (device === "desktop") {
+    const href = encodeURIComponent(window.location.href)
+
+    const urls = {
+      desktop: `${this.bridgeUrl}?action=sign&device=desktop&href=${href}`,
+      ios: `${this.mobileUrl}app/wc/request?href=${href}&device=mobile`,
+      android: `${this.mobileUrl}app/wc/request?href=${href}&device=mobile`,
+    }
+
+    if (!isInArgentMobileAppBrowser()) {
       this.getModal(undefined, Layout.approval)
+
+      if (["android", "ios"].includes(device)) {
+        this.openMobileApp(urls)
+        return
+      }
       return
     }
-    const href = encodeURIComponent(window.location.href)
     /*
     //https://docs.walletconnect.com/2.0/web3wallet/mobileLinking?platform=ios#ios-wallet-support
     Additionally when there is a signing request triggered by the dapp it will hit the deep link with an incomplete URI,
     this should be ignored and not considered valid as it's only used for automatically redirecting the users to approve or reject a signing request.
     */
-    this.showModal(
-      {
-        desktop: `${this.bridgeUrl}?action=sign&device=desktop&href=${href}`,
-        ios: `${this.mobileUrl}app/wc/request?href=${href}&device=mobile`,
-        android: `${this.mobileUrl}app/wc/request?href=${href}&device=mobile`,
-      },
-      undefined,
-    )
+    this.showModal(urls, undefined)
   }
 
-  public closeModal(success?: boolean) {
+  public closeModal(
+    {
+      success,
+      isRequest,
+    }: Partial<{ success: boolean; isRequest: boolean }> = {
+      success: false,
+      isRequest: false,
+    },
+  ) {
     const modal = this.standaloneConnectorModal
     if (success) {
       modal?.$set({ layout: Layout.success })
       setTimeout(() => modal?.$destroy(), 500)
     } else {
-      modal?.$set({ layout: Layout.failure })
+      if (!isRequest) {
+        modal?.$set({ layout: Layout.loginFailure })
+      } else {
+        modal?.$set({ layout: Layout.requestFailure })
+        setTimeout(() => modal?.$destroy(), 500)
+      }
     }
   }
 
@@ -160,7 +182,7 @@ class ArgentModal {
             this.standaloneConnectorModal?.$destroy()
             await connector?.connect()
           } catch (err) {
-            this.standaloneConnectorModal?.$set({ layout: Layout.failure })
+            this.standaloneConnectorModal?.$set({ layout: Layout.loginFailure })
           }
         },
       },

src/connectors/argent/argentMobile/modal/login.ts

@@ -117,7 +117,7 @@ export const login = async <TAdapter extends NamespaceAdapter>(
       // Await session approval from the wallet.
       const session = await approval()
       adapter.updateSession(session)
-      argentModal.closeModal(true)
+      argentModal.closeModal({ success: true })
     }
 
     return adapter

src/connectors/argent/argentMobile/modal/starknet/adapter.ts

@@ -186,10 +186,10 @@ export class StarknetAdapter
       const chainId = this.formatChainId(this.chainId)
       argentModal.showApprovalModal(request)
       const response = await this.client.request({ topic, chainId, request })
-      argentModal.closeModal(true)
+      argentModal.closeModal({ success: true })
       return response
     } catch (error: any) {
-      argentModal.closeModal()
+      argentModal.closeModal({ isRequest: true })
       if (error instanceof Error || (error && error.message !== undefined)) {
         throw new Error(error.message)
       }

src/main.ts

@@ -212,7 +212,7 @@ export const connect = async ({
             if (
               [Layout.connecting, Layout.qrCode].includes(modal.getLayout())
             ) {
-              modal.$set({ layout: Layout.failure })
+              modal.$set({ layout: Layout.loginFailure })
             } else {
               reject(error)
             }

src/modal/Modal.svelte

@@ -20,6 +20,7 @@
   import { Braavos } from "../connectors/injected/braavos"
   import { getModalWallet } from "../helpers/mapModalWallets"
   import { getStoreVersionFromBrowser } from "../helpers/getStoreVersionFromBrowser"
+  import FailedRequest from "./layouts/FailedRequest.svelte"
 
   let nodeRef: HTMLElement | undefined
 
@@ -129,13 +130,15 @@
         </Connecting>
       {:else if layout === Layout.success}
         <Success />
-      {:else if layout === Layout.failure}
+      {:else if layout === Layout.loginFailure}
         <FailedLogin
           walletName={selectedConnector?.name}
           handleCallback={() => callback(selectedWallet)}
           showFallback={showFallback}
           handleFallback={() => callback(selectedWallet, true)}
         />
+      {:else if layout === Layout.requestFailure}
+        <FailedRequest />
       {:else if layout === Layout.qrCode}
         <ArgentMobileQR handleInstallClick={() => setLayout(Layout.download)} />
       {:else if layout === Layout.approval}

src/modal/layouts/FailedRequest.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import WarningIcon from "../components/icons/WarningIcon.svelte";
+</script>
+
+<section class="flex flex-col justify-center items-center flex-grow">
+
+  <div  class="flex flex-col h-full justify-center items-center gap-4 w-full flex-grow">
+    <div class="bg-button-secondary rounded-full p-5">
+      <WarningIcon />
+    </div>
+
+    <div>
+      <h3 class="text-primary text-h4 font-bold">Couldn't perform the action</h3>
+      <p class="text-primary text-p3 font-[400]">Please try again.</p>
+    </div>
+
+  </div>
+</section>

src/types/modal.ts

@@ -17,7 +17,8 @@ export enum Layout {
   walletList = "walletList",
   connecting = "connecting",
   success = "success",
-  failure = "failure",
+  loginFailure = "loginFailure",
+  requestFailure = "requestFailure",
   qrCode = "qrCode",
   download = "download",
   approval = "approval",