diff --git a/src/connectors/argent/argentMobile/modal/argentModal.ts b/src/connectors/argent/argentMobile/modal/argentModal.ts index b073052..d6d09c2 100644 --- 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 = ` -
- -
- - - - -
-
-` - const overlayHtmlOnlyQR = `
@@ -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 index 06dcedb..387a2ae 100644 --- 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 index 1b55a87..4b51844 100644 --- 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 index 86de3a8..f0cdfe1 100644 --- a/src/modal/Modal.svelte +++ b/src/modal/Modal.svelte @@ -6,9 +6,10 @@ 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" @@ -16,6 +17,7 @@ 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} {:else if layout === Layout.success} - + {:else if layout === Layout.failure} {:else if layout === Layout.qrCode} setLayout(Layout.download)} /> + {:else if layout === Layout.approval} + {:else if layout === Layout.download}
-

Successfully logged in!

+

Success!

\ No newline at end of file diff --git a/src/modal/layouts/argent/ArgentMobileApproval.svelte b/src/modal/layouts/argent/ArgentMobileApproval.svelte new file mode 100644 index 0000000..71ad486 --- /dev/null +++ b/src/modal/layouts/argent/ArgentMobileApproval.svelte @@ -0,0 +1,34 @@ + + +
+ +
+ +
+ + + + + + + + + + + + + + + + + +
+ +
+

Approve the transaction

+

Open Argent on your phone to
approve the transaction

+
+
+
\ No newline at end of file diff --git a/src/types/modal.ts b/src/types/modal.ts index 2fb88fc..7c18f24 100644 --- 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 {