Merge pull request #154 from argentlabs/feat/approve-argent-mobile

Feat: Approve argent mobile
argentlabs · Nov 13, 2024 · 3b2b33d · 3b2b33d
2 parents f063b2f + b47b23f
commit 3b2b33d
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 141 deletions.
diff --git a/src/connectors/argent/argentMobile/modal/argentModal.ts b/src/connectors/argent/argentMobile/modal/argentModal.ts
@@ -11,41 +11,6 @@ export interface RequestArguments {
   params?: unknown[] | object
 }
 
-// TODO - SK-47 - remove this
-const overlayStyle = {
-  position: "fixed",
-  top: "0",
-  left: "0",
-  right: "0",
-  bottom: "0",
-  backgroundColor: "rgba(0,0,0,0.8)",
-  backdropFilter: "blur(10px)",
-  zIndex: "9999",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  flexDirection: "column",
-  color: "white",
-  fontWeight: "500",
-  fontFamily: "'Barlow', sans-serif",
-}
-
-// TODO - SK-47 - remove this
-const iframeStyle = {
-  width: "840px",
-  height: "540px",
-  zIndex: "99999",
-  backgroundColor: "white",
-  border: "none",
-  outline: "none",
-  borderRadius: "40px",
-  boxShadow: "0px 4px 40px 0px rgb(0 0 0), 0px 4px 8px 0px rgb(0 0 0 / 25%)",
-  position: "fixed",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%,-50%)",
-}
-
 const iframeStyleOnlyQR = {
   width: "245px",
   height: "245px",
@@ -56,19 +21,6 @@ const iframeStyleOnlyQR = {
   outline: "none",
 }
 
-// TODO - SK-47 - remove this
-const overlayHtml = `
-  <div id="argent-mobile-modal-container" style="position: relative">
-    <iframe class="argent-iframe" allow="clipboard-write"></iframe>
-    <div class="argent-close-button" style="position: absolute; top: 24px; right: 24px; cursor: pointer;">
-      <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="16" cy="16" r="16" fill="#F5F3F0"/>
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M22.2462 9.75382C22.7018 10.2094 22.7018 10.9481 22.2462 11.4037L17.6499 16L22.2462 20.5963C22.7018 21.0519 22.7018 21.7906 22.2462 22.2462C21.7905 22.7018 21.0519 22.7018 20.5962 22.2462L16 17.6499L11.4039 22.246C10.9482 22.7017 10.2096 22.7017 9.75394 22.246C9.29833 21.7904 9.29833 21.0517 9.75394 20.5961L14.3501 16L9.75394 11.4039C9.29833 10.9483 9.29833 10.2096 9.75394 9.75396C10.2096 9.29835 10.9482 9.29835 11.4039 9.75396L16 14.3501L20.5962 9.75382C21.0519 9.29821 21.7905 9.29821 22.2462 9.75382Z" fill="#333332"/>
-      </svg>
-    </div>
-  </div>
-`
-
 const overlayHtmlOnlyQR = `
   <div id="argent-mobile-modal-container" style="position: relative; display: flex; justify-content: center; align-items: center">
     <iframe class="argent-iframe" allow="clipboard-write"></iframe>
@@ -148,59 +100,46 @@ class ArgentModal {
     }
   }
 
-  // TODO - SK-47 - handle this
   public showApprovalModal(_: RequestArguments): void {
     if (device === "desktop") {
-      this.showModalOld({
-        desktop: `${this.bridgeUrl}?action=sign`,
-        ios: "",
-        android: "",
-      })
+      this.getModal(undefined, Layout.approval)
       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, 
+    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.showModalOld({
-      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`,
-    })
+    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,
+    )
   }
 
   public closeModal(success?: boolean) {
     const modal = this.standaloneConnectorModal
     if (success) {
       modal?.$set({ layout: Layout.success })
-      setTimeout(() => modal?.$destroy(), 3000)
+      setTimeout(() => modal?.$destroy(), 500)
     } else {
       modal?.$set({ layout: Layout.failure })
     }
   }
 
-  // TODO - SK-47 - remove this
-  public closeModalOld(success?: boolean) {
-    if (success) {
-      this.overlay
-        ?.querySelector("iframe")
-        ?.contentWindow?.postMessage("argent-login.success", "*")
-      this.popupWindow?.postMessage("argent-login.success", "*")
-      this.closingTimeout = setTimeout(this.close, 3400)
-    } else {
-      this.close()
-    }
-  }
-
-  private showModal(urls: Urls, modalWallet: ModalWalletExtended) {
+  private getModal(
+    modalWallet?: ModalWalletExtended,
+    modalLayout: Layout = Layout.qrCode,
+  ) {
     this.standaloneConnectorModal = new Modal({
       target: getModalTarget(),
       props: {
-        layout: Layout.qrCode,
-        dappName: modalWallet.dappName,
+        layout: modalLayout,
+        dappName: modalWallet?.dappName,
         showBackButton: false,
         selectedWallet: modalWallet,
         callback: async (wallet: ModalWallet | null) => {
@@ -215,64 +154,12 @@ class ArgentModal {
         },
       },
     })
-
-    this.getQR(urls)
   }
 
-  // TODO - SK-47 - remove this
-  private showModalOld(urls: Urls) {
-    clearTimeout(this.closingTimeout)
-    if (this.overlay || this.popupWindow) {
-      this.close()
-    }
-
-    if (device === "android" || device === "ios") {
-      const toMobileApp = document.createElement("button")
-      toMobileApp.style.display = "none"
-      toMobileApp.addEventListener("click", () => {
-        window.location.href = urls[device]
-      })
-      toMobileApp.click()
+  private showModal(urls: Urls, modalWallet?: ModalWalletExtended) {
+    this.getModal(modalWallet, Layout.qrCode)
 
-      return
-    }
-    if (this.type === "window") {
-      const features =
-        "menubar=no,location=no,resizable=no,scrollbars=no,status=no,width=840,height=540"
-      this.popupWindow =
-        window.open(urls.desktop, "_blank", features) || undefined
-      return
-    }
-
-    // type=overlay, device=desktop
-    const overlay = document.createElement("div")
-    overlay.innerHTML = overlayHtml
-    overlay.id = "argent-mobile-modal-overlay"
-    for (const [key, value] of Object.entries(overlayStyle)) {
-      overlay.style[key as any] = value
-    }
-    document.body.appendChild(overlay)
-    overlay.addEventListener("click", () => this.closeModal())
-    this.overlay = overlay
-
-    const iframe = overlay.querySelector("iframe") as HTMLIFrameElement
-    iframe.setAttribute("src", urls.desktop)
-    for (const [key, value] of Object.entries(iframeStyle)) {
-      iframe.style[key as any] = value
-    }
-
-    const closeButton = overlay.querySelector(
-      ".argent-close-button",
-    ) as HTMLDivElement
-    closeButton.addEventListener("click", () => this.closeModal())
-  }
-
-  // TODO - SK-47 - remove this
-  private close = () => {
-    this.overlay?.remove()
-    this.popupWindow?.close()
-    this.overlay = undefined
-    this.popupWindow = undefined
+    this.getQR(urls)
   }
 }
 

diff --git a/src/connectors/argent/argentMobile/modal/starknet/adapter.ts b/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.closeModalOld(true)
+      argentModal.closeModal(true)
       return response
     } catch (error) {
-      argentModal.closeModalOld()
+      argentModal.closeModal()
       if (error instanceof Error) {
         throw new Error(error.message)
       }

diff --git a/src/main.ts b/src/main.ts
@@ -202,7 +202,7 @@ export const connect = async ({
               })
 
               modal.$set({ layout: Layout.success })
-              setTimeout(() => modal.$destroy(), 3000)
+              setTimeout(() => modal.$destroy(), 500)
             } else {
               resolve({
                 connector: selectedConnector,

diff --git a/src/modal/Modal.svelte b/src/modal/Modal.svelte
@@ -6,16 +6,18 @@
   import Header from "./components/Header.svelte"
   import WalletList from "./layouts/WalletList.svelte"
   import Connecting from "./layouts/Connecting.svelte"
+  import ArgentMobileApproval from "./layouts/argent/ArgentMobileApproval.svelte"
   import ArgentMobileQR from "./layouts/argent/ArgentMobileQR.svelte"
   import FailedLogin from "./layouts/FailedLogin.svelte"
-  import SuccessfulLogin from "./layouts/SuccessfulLogin.svelte"
+  import Success from "./layouts/Success.svelte"
   import DownloadWallet from "./layouts/DownloadWallet/DownloadWallet.svelte"
   import DynamicIcon from "./components/DynamicIcon.svelte"
 
   import { isInArgentMobileAppBrowser } from "../connectors/argent/helpers"
   import { extractConnector } from "../helpers/connector"
   import { StarknetkitCompoundConnector } from "../connectors"
   import { ArgentX } from "../connectors/injected/argentX"
+  import { Braavos } from "../connectors/injected/braavos"
   import { getModalWallet } from "../helpers/mapModalWallets"
   import { getStoreVersionFromBrowser } from "../helpers/getStoreVersionFromBrowser"
 
@@ -71,7 +73,7 @@
     if (isBraavosMobileApp) {
       try {
         void callback(getModalWallet(new Braavos()))
-      } catch {
+      } catch (e) {
         console.error(e)
       }
       return
@@ -122,7 +124,7 @@
           {/if}
         </Connecting>
       {:else if layout === Layout.success}
-        <SuccessfulLogin />
+        <Success />
       {:else if layout === Layout.failure}
         <FailedLogin
           walletName={selectedConnector?.name}
@@ -132,6 +134,8 @@
         />
       {:else if layout === Layout.qrCode}
         <ArgentMobileQR handleInstallClick={() => setLayout(Layout.download)} />
+      {:else if layout === Layout.approval}
+        <ArgentMobileApproval />
       {:else if layout === Layout.download}
         <DownloadWallet
           store={getStoreVersionFromBrowser()}

diff --git a/src/modal/layouts/SuccessfulLogin.svelte → src/modal/layouts/Success.svelte b/src/modal/layouts/SuccessfulLogin.svelte → src/modal/layouts/Success.svelte
@@ -8,5 +8,5 @@
     <SuccessCheckIcon />
   </div>
 
-  <h3 class="text-primary text-h4 font-bold">Successfully logged in!</h3>
+  <h3 class="text-primary text-h4 font-bold">Success!</h3>
 </section>
diff --git a/src/modal/layouts/argent/ArgentMobileApproval.svelte b/src/modal/layouts/argent/ArgentMobileApproval.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+
+</script>
+
+<section class="flex flex-col justify-center items-center flex-grow">
+
+  <div  class="flex flex-col h-full justify-center items-center gap-8 w-full flex-grow">
+
+    <div>
+      <svg width="140" height="141" viewBox="0 0 140 141" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <mask id="mask0_82_210" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="140" height="141">
+          <path d="M69.9639 140.094C108.42 140.094 139.595 108.92 139.595 70.4639C139.595 32.008 108.42 0.833313 69.9639 0.833313C31.508 0.833313 0.333344 32.008 0.333344 70.4639C0.333344 108.92 31.508 140.094 69.9639 140.094Z" fill="#BFBFBF"/>
+        </mask>
+        <g mask="url(#mask0_82_210)">
+          <path d="M69.9639 140.094C108.42 140.094 139.595 108.92 139.595 70.4639C139.595 32.008 108.42 0.833313 69.9639 0.833313C31.508 0.833313 0.333344 32.008 0.333344 70.4639C0.333344 108.92 31.508 140.094 69.9639 140.094Z" fill="#BFBFBF" fill-opacity="0.2"/>
+          <circle opacity="0.5" cx="69.6835" cy="70.1833" r="28.5" stroke="#FF7A52" stroke-width="0.633333"/>
+          <circle opacity="0.4" cx="69.6835" cy="70.1833" r="36.1" stroke="#FF7A52" stroke-width="0.633333"/>
+          <circle opacity="0.2" cx="69.6834" cy="70.1833" r="50.0333" stroke="#FF7A52" stroke-width="0.633333"/>
+          <path d="M71.63 64.1667H68.3704C68.2614 64.1667 68.1742 64.2607 68.1718 64.3775C68.1059 67.6613 66.5044 70.7781 63.7479 72.9857C63.6603 73.0557 63.6404 73.1874 63.7044 73.2823L65.6115 76.1111C65.6764 76.2074 65.8028 76.2291 65.8918 76.1584C67.6154 74.7871 69.0018 73.1327 70.0002 71.2991C70.9985 73.1327 72.385 74.7871 74.1086 76.1584C74.1975 76.2291 74.3239 76.2074 74.3889 76.1111L76.296 73.2823C76.3599 73.1874 76.34 73.0557 76.2525 72.9857C73.4959 70.7781 71.8944 67.6613 71.8286 64.3775C71.8262 64.2607 71.7389 64.1667 71.63 64.1667Z" fill="#FF875B"/>
+          <path d="M42.2656 41.1541L97.3366 41.1541C102.578 41.1541 106.827 45.4032 106.827 50.6448L106.827 170.156C106.827 175.398 102.578 179.647 97.3366 179.647L42.2656 179.647C37.0241 179.647 32.775 175.398 32.775 170.156L32.775 50.6447C32.775 45.4032 37.0241 41.1541 42.2656 41.1541Z" fill="#FF875B" stroke="black" stroke-width="3.51504"/>
+          <path d="M44.6111 139.224L38.2837 139.224L31.9568 139.224L32.6599 47.1296L37.5617 41.0012L94.5247 40.803L44.6111 139.224Z" fill="white" fill-opacity="0.3"/>
+          <path d="M42.266 41.1541L97.337 41.1541C102.578 41.1541 106.828 45.4032 106.828 50.6448L106.828 170.156C106.828 175.398 102.578 179.647 97.3369 179.647L42.2659 179.647C37.0244 179.647 32.7753 175.398 32.7753 170.156L32.7753 50.6447C32.7753 45.4032 37.0244 41.1541 42.266 41.1541Z" stroke="black" stroke-width="3.51504"/>
+          <path d="M53.6909 39.3966L87.1044 39.3966L87.1044 40.9326C87.1044 44.0387 84.5865 46.5567 81.4804 46.5567L59.3149 46.5567C56.2088 46.5567 53.6909 44.0387 53.6909 40.9326L53.6909 39.3966Z" fill="black"/>
+          <path d="M73.0967 82.5333H66.9034C66.6965 82.5333 66.5307 82.7164 66.5262 82.9439C66.401 89.3387 63.3581 95.4081 58.1207 99.7072C57.9544 99.8436 57.9165 100.1 58.0381 100.285L61.6616 105.793C61.7849 105.981 62.0251 106.023 62.1942 105.886C65.469 103.215 68.1031 99.9935 70 96.4228C71.897 99.9935 74.5312 103.215 77.8061 105.886C77.975 106.023 78.2152 105.981 78.3386 105.793L81.9622 100.285C82.0836 100.1 82.0457 99.8436 81.8796 99.7072C76.642 95.4081 73.5991 89.3387 73.4741 82.9439C73.4696 82.7164 73.3036 82.5333 73.0967 82.5333Z" fill="white"/>
+        </g>
+      </svg>
+    </div>
+
+    <hgroup class="flex flex-col gap-1">
+      <h3 class="text-primary text-h4 font-bold">Approve the transaction</h3>
+      <h4 class="text-primary text-p3">Open Argent on your phone to <br/> approve the transaction</h4>
+    </hgroup>
+  </div>
+</section>
diff --git a/src/types/modal.ts b/src/types/modal.ts
@@ -20,6 +20,7 @@ export enum Layout {
   failure = "failure",
   qrCode = "qrCode",
   download = "download",
+  approval = "approval",
 }
 
 export interface ConnectOptions extends GetWalletOptions {