Merge remote-tracking branch 'origin/feat/argent-one-button-connector…

…' into beta
argentlabs · Nov 13, 2024 · 0fbb647 · 0fbb647
2 parents c601b6c + 3b2b33d
commit 0fbb647
Show file tree

Hide file tree

Showing 19 changed files with 321 additions and 161 deletions.
diff --git a/.releaserc b/.releaserc
@@ -8,6 +8,10 @@
     {
       "name": "beta",
       "prerelease": true
+    },
+    {
+      "name": "beta-braavos-mobile",
+      "prerelease": true
     }
   ],
   "plugins": [

diff --git a/package.json b/package.json
@@ -57,6 +57,11 @@
       "import": "./dist/braavos.js",
       "require": "./dist/braavos.cjs"
     },
+    "./braavosMobile": {
+      "types": "./dist/braavosMobile.d.ts",
+      "import": "./dist/braavosMobile.js",
+      "require": "./dist/braavosMobile.cjs"
+    },
     "./window": {
       "types": "./dist/window.d.ts",
       "import": "./dist/window.js",
@@ -76,8 +81,8 @@
   ],
   "dependencies": {
     "@argent/x-ui": "^1.70.1",
-    "@starknet-io/get-starknet": "^4.0.0",
-    "@starknet-io/get-starknet-core": "^4.0.0",
+    "@starknet-io/get-starknet": "^4.0.2",
+    "@starknet-io/get-starknet-core": "^4.0.2",
     "@starknet-io/types-js": "^0.7.7",
     "@trpc/client": "^10.38.1",
     "@trpc/server": "^10.38.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
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/connectors/braavosMobile/constants.ts b/src/connectors/braavosMobile/constants.ts
@@ -0,0 +1,39 @@
+export const BRAAVOS_MOBILE_APP_ICON = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32px" height="32px" viewBox="0 0 32 32" version="1.1">
+    <defs>
+    <clipPath id="clip1">
+      <path d="M 5.332031 0 L 26.667969 0 C 29.613281 0 32 2.386719 32 5.332031 L 32 26.667969 C 32 29.613281 29.613281 32 26.667969 32 L 5.332031 32 C 2.386719 32 0 29.613281 0 26.667969 L 0 5.332031 C 0 2.386719 2.386719 0 5.332031 0 Z M 5.332031 0 "/>
+    </clipPath>
+    <linearGradient id="linear0" gradientUnits="userSpaceOnUse" x1="-9.552" y1="-6.444" x2="50.240002" y2="41.303001" gradientTransform="matrix(0.666667,0,0,0.666667,0,0)">
+      <stop offset="0" style="stop-color:rgb(3.529412%,45.09804%,75.294119%);stop-opacity:1;"/>
+      <stop offset="1" style="stop-color:rgb(10.980392%,28.627452%,87.058824%);stop-opacity:1;"/>
+    </linearGradient>
+    <clipPath id="clip2">
+      <path d="M 7 4 L 25 4 L 25 15 L 7 15 Z M 7 4 "/>
+    </clipPath>
+    <clipPath id="clip3">
+      <path d="M 5.332031 0 L 26.667969 0 C 29.613281 0 32 2.386719 32 5.332031 L 32 26.667969 C 32 29.613281 29.613281 32 26.667969 32 L 5.332031 32 C 2.386719 32 0 29.613281 0 26.667969 L 0 5.332031 C 0 2.386719 2.386719 0 5.332031 0 Z M 5.332031 0 "/>
+    </clipPath>
+    <clipPath id="clip4">
+    	<path d="M 6 13 L 26 13 L 26 28 L 6 28 Z M 6 13 "/>
+    </clipPath>
+    <clipPath id="clip5">
+      <path d="M 5.332031 0 L 26.667969 0 C 29.613281 0 32 2.386719 32 5.332031 L 32 26.667969 C 32 29.613281 29.613281 32 26.667969 32 L 5.332031 32 C 2.386719 32 0 29.613281 0 26.667969 L 0 5.332031 C 0 2.386719 2.386719 0 5.332031 0 Z M 5.332031 0 "/>
+    </clipPath>
+    </defs>
+    <g id="surface1">
+      <g clip-path="url(#clip1)" clip-rule="nonzero">
+        <rect x="0" y="0" width="32" height="32" style="fill:url(#linear0);stroke:none;"/>
+      </g>
+    	<g clip-path="url(#clip2)" clip-rule="nonzero">
+        <g clip-path="url(#clip3)" clip-rule="nonzero">
+	        <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 19.507812 6.320312 C 19.542969 6.378906 19.496094 6.453125 19.425781 6.453125 C 18.027344 6.453125 16.886719 7.5625 16.859375 8.941406 C 16.375 8.851562 15.878906 8.847656 15.390625 8.929688 C 15.359375 7.554688 14.222656 6.453125 12.824219 6.453125 C 12.757812 6.453125 12.710938 6.378906 12.746094 6.320312 C 13.453125 5.128906 14.738281 4.398438 16.125 4.398438 C 17.515625 4.394531 18.800781 5.125 19.507812 6.320312 M 23.65625 14.847656 C 24.132812 14.992188 24.585938 14.574219 24.402344 14.109375 C 23.066406 10.65625 19.109375 9.242188 16.105469 9.242188 C 13.097656 9.242188 9.054688 10.703125 7.804688 14.128906 C 7.632812 14.589844 8.082031 14.996094 8.550781 14.851562 L 15.75 12.648438 C 15.957031 12.582031 16.179688 12.582031 16.386719 12.644531 Z M 23.65625 14.847656 "/>
+        </g>
+    	</g>
+    	<g clip-path="url(#clip4)" clip-rule="nonzero">
+        <g clip-path="url(#clip5)" clip-rule="nonzero">
+          <path style=" stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;" d="M 7.734375 15.511719 L 15.757812 13.078125 C 15.964844 13.015625 16.183594 13.015625 16.390625 13.078125 L 24.464844 15.511719 C 25.136719 15.714844 25.597656 16.335938 25.597656 17.042969 L 25.597656 24.378906 C 25.566406 26.167969 23.960938 27.605469 22.167969 27.605469 L 19.195312 27.605469 C 19.054688 27.605469 18.917969 27.550781 18.820312 27.449219 C 18.71875 27.347656 18.664062 27.214844 18.664062 27.074219 L 18.664062 24.5 C 18.664062 23.488281 19.261719 22.570312 20.191406 22.164062 C 21.433594 21.621094 22.90625 20.886719 23.183594 19.410156 C 23.269531 18.933594 22.960938 18.472656 22.484375 18.378906 C 21.285156 18.140625 19.953125 18.230469 18.824219 18.734375 C 17.546875 19.308594 17.210938 20.257812 17.085938 21.539062 L 16.9375 22.914062 C 16.890625 23.335938 16.496094 23.65625 16.074219 23.65625 C 15.636719 23.65625 15.308594 23.324219 15.261719 22.886719 L 15.113281 21.539062 C 15.007812 20.441406 14.8125 19.378906 13.683594 18.875 C 12.390625 18.296875 11.09375 18.105469 9.714844 18.378906 C 9.238281 18.472656 8.929688 18.933594 9.015625 19.410156 C 9.296875 20.898438 10.757812 21.617188 12.007812 22.164062 C 12.9375 22.570312 13.535156 23.488281 13.535156 24.5 L 13.535156 27.074219 C 13.535156 27.367188 13.296875 27.605469 13.003906 27.605469 L 10.03125 27.605469 C 8.238281 27.605469 6.628906 26.167969 6.597656 24.378906 L 6.597656 17.039062 C 6.597656 16.335938 7.058594 15.714844 7.734375 15.511719 "/>
+        </g>
+    	</g>
+    </g>
+</svg>
+`
diff --git a/src/connectors/braavosMobile/helpers/inAppBrowser.ts b/src/connectors/braavosMobile/helpers/inAppBrowser.ts
@@ -0,0 +1,14 @@
+export const isInBraavosMobileAppBrowser = (): boolean => {
+  if (typeof window === "undefined") {
+    return false
+  }
+
+  const userAgent = navigator.userAgent.toLowerCase()
+  const isBraavosMobileApp = userAgent.includes("braavos")
+
+  if (!isBraavosMobileApp) {
+    return false
+  }
+
+  return isBraavosMobileApp
+}
diff --git a/src/connectors/braavosMobile/helpers/index.ts b/src/connectors/braavosMobile/helpers/index.ts
@@ -0,0 +1 @@
+export * from "./inAppBrowser"