@@ -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 {