From 86b8b05822a4af54ac266054de0af5405a1468d4 Mon Sep 17 00:00:00 2001 From: Eddie Penta Date: Wed, 11 Dec 2024 05:23:32 -0500 Subject: [PATCH] Set initial modal tab based on preferDesktop option (#1158) * fix: set inital tab based on preferDesktop prop * fix: always ensure we use preferDesktop * chore: add retry logic for updateLink component function * fix: select modal as well as install modal --- .../sdk-install-modal-web/src/components.d.ts | 2 + .../mm-install-modal/mm-install-modal.tsx | 73 ++++++------------- .../mm-select-modal/mm-select-modal.tsx | 54 +++++++------- .../src/ui/InstallModal/InstallModal-web.ts | 1 + packages/sdk/src/ui/InstallModal/Modal-web.ts | 1 + 5 files changed, 54 insertions(+), 77 deletions(-) diff --git a/packages/sdk-install-modal-web/src/components.d.ts b/packages/sdk-install-modal-web/src/components.d.ts index cd37afd03..07a464fe6 100644 --- a/packages/sdk-install-modal-web/src/components.d.ts +++ b/packages/sdk-install-modal-web/src/components.d.ts @@ -27,6 +27,7 @@ export namespace Components { * The QR code link */ "link": string; + "preferDesktop": boolean; "sdkVersion"?: string; } } @@ -133,6 +134,7 @@ declare namespace LocalJSX { "link"?: string; "onClose"?: (event: MmSelectModalCustomEvent<{ shouldTerminate?: boolean }>) => void; "onConnectWithExtension"?: (event: MmSelectModalCustomEvent) => void; + "preferDesktop"?: boolean; "sdkVersion"?: string; } interface IntrinsicElements { diff --git a/packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx b/packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx index a2a5981a2..c57405dfb 100644 --- a/packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx +++ b/packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx @@ -33,6 +33,8 @@ export class InstallModal { @State() tab: number = 1; + @State() isDefaultTab: boolean = true; + @Element() el: HTMLElement; @State() private translationsLoaded: boolean = false; @@ -42,7 +44,7 @@ export class InstallModal { this.onStartDesktopOnboardingHandler = this.onStartDesktopOnboardingHandler.bind(this); this.setTab = this.setTab.bind(this); this.render = this.render.bind(this); - this.setTab(2); + this.setTab(this.preferDesktop ? 1 : 2); this.i18nInstance = new SimpleI18n(); } @@ -63,46 +65,6 @@ export class InstallModal { } } - @Watch('link') - updateLink(newLink: string) { - if (!this.translationsLoaded || this.tab !== 2) { - return; - } - - const svgElement = encodeQR(newLink, "svg", { - ecc: "medium", - scale: 2 - }); - - if (!this.el.shadowRoot) { - console.warn('Shadow root not found'); - return; - } - - const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode"); - - if (!qrcodeDiv) { - console.warn('QR code div not found'); - return; - } - - qrcodeDiv.innerHTML = svgElement; - } - - @Watch('translationsLoaded') - onTranslationsLoaded(isLoaded: boolean) { - if (isLoaded && this.tab === 2) { - this.updateLink(this.link); - } - } - - @Watch('tab') - onTabChange(newTab: number) { - if (newTab === 2 && this.translationsLoaded) { - this.updateLink(this.link); - } - } - onClose() { this.close.emit(); } @@ -113,10 +75,7 @@ export class InstallModal { setTab(newTab: number) { this.tab = newTab - } - - componentDidLoad() { - this.updateLink(this.link); + this.isDefaultTab = false; } render() { @@ -126,6 +85,15 @@ export class InstallModal { const t = (key: string) => this.i18nInstance.t(key); + const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab + + const svgElement = encodeQR(this.link, "svg", { + ecc: "medium", + scale: 2 + }); + + console.log(`Showing modal with link ${this.link} and SVG QRCode ${svgElement}`) + return (
@@ -145,19 +113,19 @@ export class InstallModal {
this.setTab(1)} - class={`tab flexItem ${this.tab === 1 ? 'tabactive': ''}`} + class={`tab flexItem ${currentTab === 1 ? 'tabactive': ''}`} > {t('DESKTOP')}
this.setTab(2)} - class={`tab flexItem ${this.tab === 2 ? 'tabactive': ''}`} + class={`tab flexItem ${currentTab === 2 ? 'tabactive': ''}`} > {t('MOBILE')}
-
+
-
-
+ { + svgElement && ( +
+ ) + }
{t('SCAN_TO_CONNECT')}
@@ -177,7 +148,7 @@ export class InstallModal {
-
+
; @@ -29,12 +31,15 @@ export class SelectModal { @State() tab: number = 1; + @State() isDefaultTab: boolean = true; + @Element() el: HTMLElement; @State() private translationsLoaded: boolean = false; constructor() { this.i18nInstance = new SimpleI18n(); + this.setTab(this.preferDesktop ? 1 : 2); } async connectedCallback() { @@ -54,32 +59,22 @@ export class SelectModal { setTab(tab: number) { this.tab = tab; - } - - @Watch('link') - updateLink(newLink: string) { - const svgElement = encodeQR(newLink, "svg", { - ecc: "medium", - scale: 2 - }) - - if (!this.el.shadowRoot) { - return; - } - - const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode"); - - if (!qrcodeDiv) { - return; - } - - qrcodeDiv.innerHTML = svgElement + this.isDefaultTab = false; } disconnectedCallback() { this.onClose(); } + @Watch('preferDesktop') + updatePreferDesktop(newValue: boolean) { + if (newValue) { + this.setTab(1); + } else { + this.setTab(2); + } + } + render() { if (!this.translationsLoaded) { return null; @@ -89,6 +84,13 @@ export class SelectModal { const sdkVersion = this.sdkVersion + const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab + + const svgElement = encodeQR(this.link, "svg", { + ecc: "medium", + scale: 2 + }) + return (
this.onClose(true)}>
@@ -108,19 +110,19 @@ export class SelectModal {
this.setTab(1)} - class={`tab flexItem ${this.tab === 1 ? 'tabactive' : ''}`} + class={`tab flexItem ${currentTab === 1 ? 'tabactive' : ''}`} > {t('DESKTOP')}
this.setTab(2)} - class={`tab flexItem ${this.tab === 2 ? 'tabactive' : ''}`} + class={`tab flexItem ${currentTab === 2 ? 'tabactive' : ''}`} > {t('MOBILE')}
-
+
-
+
{t('SCAN_TO_CONNECT')}
@@ -140,7 +142,7 @@ export class SelectModal {
-
+
{ console.error(err); diff --git a/packages/sdk/src/ui/InstallModal/Modal-web.ts b/packages/sdk/src/ui/InstallModal/Modal-web.ts index 35faa8c96..3e58207f4 100644 --- a/packages/sdk/src/ui/InstallModal/Modal-web.ts +++ b/packages/sdk/src/ui/InstallModal/Modal-web.ts @@ -92,6 +92,7 @@ export default class ModalLoader { ) as HTMLMmSelectModalElement; modal.link = props.link; modal.sdkVersion = props.sdkVersion ?? this.sdkVersion; + modal.preferDesktop = props.preferDesktop; modal.addEventListener('close', ({ detail: { shouldTerminate } }) => props.onClose(shouldTerminate), );