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
MetaMask · Dec 11, 2024 · 86b8b05 · 86b8b05
1 parent ca11dce
commit 86b8b05
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 77 deletions.
diff --git 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<any>) => 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
@@ -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 (
       <WidgetWrapper className="install-model">
         <div class='backdrop' onClick={this.onClose}></div>
@@ -145,19 +113,19 @@ export class InstallModal {
               <div class='flexContainer'>
                 <div
                   onClick={() => this.setTab(1)}
-                  class={`tab flexItem ${this.tab === 1 ? 'tabactive': ''}`}
+                  class={`tab flexItem ${currentTab === 1 ? 'tabactive': ''}`}
                 >
                   {t('DESKTOP')}
                 </div>
                 <div
                   onClick={() => this.setTab(2)}
-                  class={`tab flexItem ${this.tab === 2 ? 'tabactive': ''}`}
+                  class={`tab flexItem ${currentTab === 2 ? 'tabactive': ''}`}
                 >
                   {t('MOBILE')}
                 </div>
               </div>
             </div>
-            <div style={{ display: this.tab === 1 ? 'none' : 'block' }}>
+            <div style={{ display: currentTab === 1 ? 'none' : 'block' }}>
               <div class='flexContainer'>
                 <div
                   class='flexItem'
@@ -166,8 +134,11 @@ export class InstallModal {
                     marginTop: '4',
                   }}
                 >
-                  <div id="sdk-mm-qrcode" class='center'>
-                  </div>
+                  {
+                    svgElement && (
+                      <div id="sdk-mm-qrcode" class='center' innerHTML={svgElement} />
+                    )
+                  }
                   <div class='connectMobileText'>
                     {t('SCAN_TO_CONNECT')} <br />
                     <span class='blue'>
@@ -177,7 +148,7 @@ export class InstallModal {
                 </div>
               </div>
             </div>
-            <div style={{ display: this.tab === 2 ? 'none' : 'block' }}>
+            <div style={{ display: currentTab === 2 ? 'none' : 'block' }}>
               <div class='item'>
                 <AdvantagesListItem
                   Icon={HeartIcon}

diff --git a/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx b/packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Event, EventEmitter, State, Watch, Element } from '@stencil/core';
+import { Component, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';
 import { WidgetWrapper } from '../widget-wrapper/widget-wrapper';
 import SDKVersion from '../misc/SDKVersion';
 import CloseButton from '../misc/CloseButton';
@@ -21,6 +21,8 @@ export class SelectModal {
 
   @Prop() sdkVersion?: string;
 
+  @Prop() preferDesktop: boolean;
+
   private i18nInstance: SimpleI18n;
 
   @Event() close: EventEmitter<{ shouldTerminate?: boolean }>;
@@ -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 (
       <WidgetWrapper className="select-modal">
         <div class='backdrop' onClick={() => this.onClose(true)}></div>
@@ -108,19 +110,19 @@ export class SelectModal {
               <div class='flexContainer'>
                 <div
                   onClick={() => this.setTab(1)}
-                  class={`tab flexItem ${this.tab === 1 ? 'tabactive' : ''}`}
+                  class={`tab flexItem ${currentTab === 1 ? 'tabactive' : ''}`}
                 >
                   {t('DESKTOP')}
                 </div>
                 <div
                   onClick={() => this.setTab(2)}
-                  class={`tab flexItem ${this.tab === 2 ? 'tabactive' : ''}`}
+                  class={`tab flexItem ${currentTab === 2 ? 'tabactive' : ''}`}
                 >
                   {t('MOBILE')}
                 </div>
               </div>
             </div>
-            <div style={{ display: this.tab === 1 ? 'none' : 'block' }}>
+            <div style={{ display: currentTab === 1 ? 'none' : 'block' }}>
               <div class='flexContainer'>
                 <div
                   class='flexItem'
@@ -129,7 +131,7 @@ export class SelectModal {
                     marginTop: '4',
                   }}
                 >
-                  <div class='center' id="sdk-mm-qrcode" />
+                  <div class='center' id="sdk-mm-qrcode" innerHTML={svgElement} />
                   <div class='connectMobileText'>
                     {t('SCAN_TO_CONNECT')}
                     <br />
@@ -140,7 +142,7 @@ export class SelectModal {
                 </div>
               </div>
             </div>
-            <div style={{ display: this.tab === 2 ? 'none' : 'block' }}>
+            <div style={{ display: currentTab === 2 ? 'none' : 'block' }}>
               <div
                 style={{
                   display: 'flex',

diff --git a/packages/sdk/src/ui/InstallModal/InstallModal-web.ts b/packages/sdk/src/ui/InstallModal/InstallModal-web.ts
@@ -81,6 +81,7 @@ const sdkWebInstallModal = ({
           },
           onClose: unmount,
           link,
+          preferDesktop: preferDesktop ?? false,
         })
         .catch((err) => {
           console.error(err);

diff --git 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),
     );