@metamask/sdk-install-modal-web - npm Package Compare versions

Comparing version 0.31.1 to 0.31.2

CHANGELOG.md

@@ -9,2 +9,6 @@ # Changelog
 
+## [0.31.2]
+### Fixed
+- Set initial modal tab based on preferDesktop option ([#1158](https://github.com/MetaMask/metamask-sdk/pull/1158))
+
 ## [0.31.1]
@@ -173,3 +177,4 @@ ### Changed
 
-[Unreleased]: https://github.com/MetaMask/metamask-sdk/compare/@metamask/sdk-install-modal-web@0.31.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-sdk/compare/@metamask/sdk-install-modal-web@0.31.2...HEAD
+[0.31.2]: https://github.com/MetaMask/metamask-sdk/compare/@metamask/sdk-install-modal-web@0.31.1...@metamask/sdk-install-modal-web@0.31.2
 [0.31.1]: https://github.com/MetaMask/metamask-sdk/compare/@metamask/sdk-install-modal-web@0.31.0...@metamask/sdk-install-modal-web@0.31.1
@@ -176,0 +181,0 @@ [0.31.0]: https://github.com/MetaMask/metamask-sdk/compare/@metamask/sdk-install-modal-web@0.30.2...@metamask/sdk-install-modal-web@0.31.0

dist/cjs/loader.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-e2e1ee7a.js');
+const index = require('./index-df2c1e4c.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
@@ -12,3 +12,3 @@
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mm-install-modal.cjs",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"],"link":["updateLink"],"translationsLoaded":["onTranslationsLoaded"],"tab":["onTabChange"]}]]],["mm-pending-modal.cjs",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal.cjs",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"tab":[32],"translationsLoaded":[32]},null,{"link":["updateLink"]}]]]], options);
+  return index.bootstrapLazy([["mm-install-modal.cjs",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]],["mm-pending-modal.cjs",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal.cjs",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]]], options);
 };
@@ -15,0 +15,0 @@

dist/cjs/mm-install-modal.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-e2e1ee7a.js');
-const simpleI18n = require('./simple-i18n-6f83aa86.js');
+const index = require('./index-df2c1e4c.js');
+const simpleI18n = require('./simple-i18n-e4b2e147.js');
 const index$1 = require('./index-bf160fda.js');
@@ -43,2 +43,3 @@
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
@@ -49,3 +50,3 @@ this.onClose = this.onClose.bind(this);
         this.render = this.render.bind(this);
-        this.setTab(2);
+        this.setTab(this.preferDesktop ? 1 : 2);
         this.i18nInstance = new simpleI18n.SimpleI18n();
@@ -67,31 +68,2 @@ }
     }
-    updateLink(newLink) {
-        if (!this.translationsLoaded || this.tab !== 2) {
-            return;
-        }
-        const svgElement = index$1.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;
-    }
-    onTranslationsLoaded(isLoaded) {
-        if (isLoaded && this.tab === 2) {
-            this.updateLink(this.link);
-        }
-    }
-    onTabChange(newTab) {
-        if (newTab === 2 && this.translationsLoaded) {
-            this.updateLink(this.link);
-        }
-    }
     onClose() {
@@ -105,6 +77,4 @@ this.close.emit();
         this.tab = newTab;
+        this.isDefaultTab = false;
     }
-    componentDidLoad() {
-        this.updateLink(this.link);
-    }
     render() {
@@ -115,13 +85,16 @@ if (!this.translationsLoaded) {
         const t = (key) => this.i18nInstance.t(key);
-        return (index.h(simpleI18n.WidgetWrapper, { className: "install-model" }, index.h("div", { class: 'backdrop', onClick: this.onClose }), index.h("div", { class: 'modal' }, index.h("div", { class: 'closeButtonContainer' }, index.h("div", { class: 'right' }, index.h("span", { class: 'closeButton', onClick: this.onClose }, index.h(simpleI18n.CloseButton, null)))), index.h("div", { class: 'logoContainer' }, index.h(simpleI18n.Logo, null)), index.h("div", null, index.h("div", { class: 'tabcontainer' }, index.h("div", { class: 'flexContainer' }, index.h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), index.h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), index.h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, index.h("div", { class: 'flexContainer' }, index.h("div", { class: 'flexItem', style: {
+        const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab;
+        const svgElement = index$1.encodeQR(this.link, "svg", {
+            ecc: "medium",
+            scale: 2
+        });
+        console.log(`Showing modal with link ${this.link} and SVG QRCode ${svgElement}`);
+        return (index.h(simpleI18n.WidgetWrapper, { className: "install-model" }, index.h("div", { class: 'backdrop', onClick: this.onClose }), index.h("div", { class: 'modal' }, index.h("div", { class: 'closeButtonContainer' }, index.h("div", { class: 'right' }, index.h("span", { class: 'closeButton', onClick: this.onClose }, index.h(simpleI18n.CloseButton, null)))), index.h("div", { class: 'logoContainer' }, index.h(simpleI18n.Logo, null)), index.h("div", null, index.h("div", { class: 'tabcontainer' }, index.h("div", { class: 'flexContainer' }, index.h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), index.h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), index.h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, index.h("div", { class: 'flexContainer' }, index.h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, index.h("div", { id: "sdk-mm-qrcode", class: 'center' }), index.h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", index.h("br", null), index.h("span", { class: 'blue' }, index.h("b", null, t('META_MASK_MOBILE_APP'))))))), index.h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), index.h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, index.h(InstallIcon, null), index.h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), index.h(simpleI18n.SDKVersion, { version: this.sdkVersion }))));
+            } }, svgElement && (index.h("div", { id: "sdk-mm-qrcode", class: 'center', innerHTML: svgElement })), index.h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", index.h("br", null), index.h("span", { class: 'blue' }, index.h("b", null, t('META_MASK_MOBILE_APP'))))))), index.h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), index.h("div", { class: 'item' }, index.h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), index.h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, index.h(InstallIcon, null), index.h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), index.h(simpleI18n.SDKVersion, { version: this.sdkVersion }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "preferDesktop": ["updatePreferDesktop"],
-        "link": ["updateLink"],
-        "translationsLoaded": ["onTranslationsLoaded"],
-        "tab": ["onTabChange"]
+        "preferDesktop": ["updatePreferDesktop"]
     }; }
@@ -128,0 +101,0 @@ };

dist/cjs/mm-pending-modal.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-e2e1ee7a.js');
-const simpleI18n = require('./simple-i18n-6f83aa86.js');
+const index = require('./index-df2c1e4c.js');
+const simpleI18n = require('./simple-i18n-e4b2e147.js');
 
@@ -9,0 +9,0 @@ const styleCss = ".flexContainer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n}\n\n.flexItem {\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n}\n\n.flexItem11 {\n    flex: 11;\n    justify-content: center;\n    align-items: center;\n}\n\n.flexItem1 {\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n}\n\n.tab {\n    padding: 8px;\n    cursor: pointer;\n    background-color: #F2F4F6;\n    font-size: 12px;\n    text-align: center;\n    color: #24292E;\n}\n\n.tabcontainer {\n    padding: 4px;\n    background-color: #F2F4F6;\n    border-radius: 8px;\n    margin-bottom: 30px;\n    margin-top: 30px;\n}\n\n.tabactive {\n    background-color: white;\n    -webkit-transition: background-color 300ms linear;\n    -ms-transition: background-color 300ms linear;\n    transition: background-color 300ms linear;\n    border-radius: 8px;\n}\n\n.item {\n    font-size: 12px;\n    margin-bottom: 16px;\n    border-radius: 8px;\n    padding: 10px;\n    border: 2px #F2F4F6 solid;\n    color: #24292E;\n}\n\n.extensionLabel {\n    font-style: normal;\n    font-weight: bold;\n    font-size: 14px;\n    text-align: cetner;\n    color: #24272A;\n}\n\n.notice {\n    font-size: 12px;\n    margin-left: 10px;\n    margin-right: 10px;\n    color: grey;\n}\n\n.button {\n    margin-top: 41.5px;\n    margin-bottom: 20px;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 12px 20px;\n    background: #037DD6;\n    border-radius: 32px;\n    color: white;\n    border: 0;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.backdrop {\n    visibility: visible;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 99998;\n    background: rgba(0, 0, 0, 0.87);\n    opacity: 0.3;\n}\n\n.modal {\n    visibility: visible;\n    position: fixed;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 99999;\n    background: white;\n    padding: 20px;\n    border-radius: 8px;\n    top: 50%;\n    max-width: 100%;\n    width: 460px;\n    min-width: 300px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;\n    -webkit-font-smoothing: antialiased;\n}\n\n.closeButton {\n    color: #BBC0C5;\n    cursor: pointer;\n}\n\n.logoContainer {\n    margin-left: 24px;\n    margin-right: 24px;\n    margin-top: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.connectMobileText {\n    font-size: 14px;\n    color: black;\n    margin-top: 28px;\n    margin-bottom: 28px;\n    line-height: 2;\n}\n\n.blue {\n    color: #037DD6;\n    font-weight: 700;\n}\n\n.installExtensionText {\n    margin-left: 10px;\n}\n\n.center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.right {\n    display: flex;\n    align-items: center;\n    justify-content: right;\n}\n\n#sdk-mm-qrcode {\n    svg {\n        width: 50%;\n    }\n}";

dist/cjs/mm-select-modal.cjs.entry.js

@@ -5,4 +5,4 @@ 'use strict';
 
-const index = require('./index-e2e1ee7a.js');
-const simpleI18n = require('./simple-i18n-6f83aa86.js');
+const index = require('./index-df2c1e4c.js');
+const simpleI18n = require('./simple-i18n-e4b2e147.js');
 const index$1 = require('./index-bf160fda.js');
@@ -142,5 +142,8 @@
         this.sdkVersion = undefined;
+        this.preferDesktop = undefined;
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
         this.i18nInstance = new simpleI18n.SimpleI18n();
+        this.setTab(this.preferDesktop ? 1 : 2);
     }
@@ -161,20 +164,15 @@ async connectedCallback() {
         this.tab = tab;
+        this.isDefaultTab = false;
     }
-    updateLink(newLink) {
-        const svgElement = index$1.encodeQR(newLink, "svg", {
-            ecc: "medium",
-            scale: 2
-        });
-        if (!this.el.shadowRoot) {
-            return;
+    disconnectedCallback() {
+        this.onClose();
+    }
+    updatePreferDesktop(newValue) {
+        if (newValue) {
+            this.setTab(1);
         }
-        const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode");
-        if (!qrcodeDiv) {
-            return;
+        else {
+            this.setTab(2);
         }
-        qrcodeDiv.innerHTML = svgElement;
     }
-    disconnectedCallback() {
-        this.onClose();
-    }
     render() {
@@ -186,6 +184,11 @@ if (!this.translationsLoaded) {
         const sdkVersion = this.sdkVersion;
-        return (index.h(simpleI18n.WidgetWrapper, { className: "select-modal" }, index.h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), index.h("div", { class: 'modal' }, index.h("div", { class: 'closeButtonContainer' }, index.h("div", { class: 'right' }, index.h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, index.h(simpleI18n.CloseButton, null)))), index.h("div", { class: 'logoContainer' }, index.h(simpleI18n.Logo, null)), index.h("div", null, index.h("div", { class: 'tabcontainer' }, index.h("div", { class: 'flexContainer' }, index.h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), index.h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), index.h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, index.h("div", { class: 'flexContainer' }, index.h("div", { class: 'flexItem', style: {
+        const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab;
+        const svgElement = index$1.encodeQR(this.link, "svg", {
+            ecc: "medium",
+            scale: 2
+        });
+        return (index.h(simpleI18n.WidgetWrapper, { className: "select-modal" }, index.h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), index.h("div", { class: 'modal' }, index.h("div", { class: 'closeButtonContainer' }, index.h("div", { class: 'right' }, index.h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, index.h(simpleI18n.CloseButton, null)))), index.h("div", { class: 'logoContainer' }, index.h(simpleI18n.Logo, null)), index.h("div", null, index.h("div", { class: 'tabcontainer' }, index.h("div", { class: 'flexContainer' }, index.h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), index.h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), index.h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, index.h("div", { class: 'flexContainer' }, index.h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, index.h("div", { class: 'center', id: "sdk-mm-qrcode" }), index.h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), index.h("br", null), index.h("span", { class: 'blue' }, index.h("b", null, t('META_MASK_MOBILE_APP'))))))), index.h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, index.h("div", { style: {
+            } }, index.h("div", { class: 'center', id: "sdk-mm-qrcode", innerHTML: svgElement }), index.h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), index.h("br", null), index.h("span", { class: 'blue' }, index.h("b", null, t('META_MASK_MOBILE_APP'))))))), index.h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, index.h("div", { style: {
                 display: 'flex',
@@ -199,3 +202,3 @@ justifyContent: 'center',
     static get watchers() { return {
-        "link": ["updateLink"]
+        "preferDesktop": ["updatePreferDesktop"]
     }; }
@@ -202,0 +205,0 @@ };

dist/cjs/sdk-install-modal-web.cjs.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-e2e1ee7a.js');
+const index = require('./index-df2c1e4c.js');
 const appGlobals = require('./app-globals-3a1e7e63.js');
@@ -23,3 +23,3 @@
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["mm-install-modal.cjs",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"],"link":["updateLink"],"translationsLoaded":["onTranslationsLoaded"],"tab":["onTabChange"]}]]],["mm-pending-modal.cjs",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal.cjs",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"tab":[32],"translationsLoaded":[32]},null,{"link":["updateLink"]}]]]], options);
+  return index.bootstrapLazy([["mm-install-modal.cjs",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]],["mm-pending-modal.cjs",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal.cjs",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]]], options);
 });
@@ -26,0 +26,0 @@

dist/collection/components/mm-install-modal/mm-install-modal.js

@@ -19,2 +19,3 @@ import { h } from "@stencil/core";
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
@@ -25,3 +26,3 @@ this.onClose = this.onClose.bind(this);
         this.render = this.render.bind(this);
-        this.setTab(2);
+        this.setTab(this.preferDesktop ? 1 : 2);
         this.i18nInstance = new SimpleI18n();
@@ -43,31 +44,2 @@ }
     }
-    updateLink(newLink) {
-        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;
-    }
-    onTranslationsLoaded(isLoaded) {
-        if (isLoaded && this.tab === 2) {
-            this.updateLink(this.link);
-        }
-    }
-    onTabChange(newTab) {
-        if (newTab === 2 && this.translationsLoaded) {
-            this.updateLink(this.link);
-        }
-    }
     onClose() {
@@ -81,6 +53,4 @@ this.close.emit();
         this.tab = newTab;
+        this.isDefaultTab = false;
     }
-    componentDidLoad() {
-        this.updateLink(this.link);
-    }
     render() {
@@ -91,6 +61,12 @@ if (!this.translationsLoaded) {
         const t = (key) => this.i18nInstance.t(key);
-        return (h(WidgetWrapper, { className: "install-model" }, h("div", { class: 'backdrop', onClick: this.onClose }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: this.onClose }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
+        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 (h(WidgetWrapper, { className: "install-model" }, h("div", { class: 'backdrop', onClick: this.onClose }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: this.onClose }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, h("div", { id: "sdk-mm-qrcode", class: 'center' }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, h(InstallIcon, null), h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), h(SDKVersion, { version: this.sdkVersion }))));
+            } }, svgElement && (h("div", { id: "sdk-mm-qrcode", class: 'center', innerHTML: svgElement })), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, h(InstallIcon, null), h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), h(SDKVersion, { version: this.sdkVersion }))));
     }
@@ -167,2 +143,3 @@ static get is() { return "mm-install-modal"; }
             "tab": {},
+            "isDefaultTab": {},
             "translationsLoaded": {}
@@ -209,11 +186,2 @@ };
                 "methodName": "updatePreferDesktop"
-            }, {
-                "propName": "link",
-                "methodName": "updateLink"
-            }, {
-                "propName": "translationsLoaded",
-                "methodName": "onTranslationsLoaded"
-            }, {
-                "propName": "tab",
-                "methodName": "onTabChange"
             }];
@@ -220,0 +188,0 @@ }

dist/collection/components/mm-select-modal/mm-select-modal.js

@@ -14,5 +14,8 @@ import { h } from "@stencil/core";
         this.sdkVersion = undefined;
+        this.preferDesktop = undefined;
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
         this.i18nInstance = new SimpleI18n();
+        this.setTab(this.preferDesktop ? 1 : 2);
     }
@@ -33,20 +36,15 @@ async connectedCallback() {
         this.tab = tab;
+        this.isDefaultTab = false;
     }
-    updateLink(newLink) {
-        const svgElement = encodeQR(newLink, "svg", {
-            ecc: "medium",
-            scale: 2
-        });
-        if (!this.el.shadowRoot) {
-            return;
+    disconnectedCallback() {
+        this.onClose();
+    }
+    updatePreferDesktop(newValue) {
+        if (newValue) {
+            this.setTab(1);
         }
-        const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode");
-        if (!qrcodeDiv) {
-            return;
+        else {
+            this.setTab(2);
         }
-        qrcodeDiv.innerHTML = svgElement;
     }
-    disconnectedCallback() {
-        this.onClose();
-    }
     render() {
@@ -58,6 +56,11 @@ if (!this.translationsLoaded) {
         const sdkVersion = this.sdkVersion;
-        return (h(WidgetWrapper, { className: "select-modal" }, h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
+        const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab;
+        const svgElement = encodeQR(this.link, "svg", {
+            ecc: "medium",
+            scale: 2
+        });
+        return (h(WidgetWrapper, { className: "select-modal" }, h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, h("div", { class: 'center', id: "sdk-mm-qrcode" }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, h("div", { style: {
+            } }, h("div", { class: 'center', id: "sdk-mm-qrcode", innerHTML: svgElement }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, h("div", { style: {
                 display: 'flex',
@@ -116,2 +119,19 @@ justifyContent: 'center',
                 "reflect": false
+            },
+            "preferDesktop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "prefer-desktop",
+                "reflect": false
             }
@@ -123,2 +143,3 @@ };
             "tab": {},
+            "isDefaultTab": {},
             "translationsLoaded": {}
@@ -163,4 +184,4 @@ };
         return [{
-                "propName": "link",
-                "methodName": "updateLink"
+                "propName": "preferDesktop",
+                "methodName": "updatePreferDesktop"
             }];
@@ -167,0 +188,0 @@ }

dist/esm/loader.js

@@ -1,3 +0,3 @@
-import { b as bootstrapLazy } from './index-4b8a94c9.js';
-export { s as setNonce } from './index-4b8a94c9.js';
+import { b as bootstrapLazy } from './index-a83c417f.js';
+export { s as setNonce } from './index-a83c417f.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
@@ -8,3 +8,3 @@
   await globalScripts();
-  return bootstrapLazy([["mm-install-modal",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"],"link":["updateLink"],"translationsLoaded":["onTranslationsLoaded"],"tab":["onTabChange"]}]]],["mm-pending-modal",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"tab":[32],"translationsLoaded":[32]},null,{"link":["updateLink"]}]]]], options);
+  return bootstrapLazy([["mm-install-modal",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]],["mm-pending-modal",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]]], options);
 };
@@ -11,0 +11,0 @@

dist/esm/mm-install-modal.entry.js

@@ -1,3 +0,3 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-4b8a94c9.js';
-import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-81e97ab4.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a83c417f.js';
+import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-50218fcb.js';
 import { e as encodeQR } from './index-f0bfb0c3.js';
@@ -38,2 +38,3 @@
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
@@ -44,3 +45,3 @@ this.onClose = this.onClose.bind(this);
         this.render = this.render.bind(this);
-        this.setTab(2);
+        this.setTab(this.preferDesktop ? 1 : 2);
         this.i18nInstance = new SimpleI18n();
@@ -62,31 +63,2 @@ }
     }
-    updateLink(newLink) {
-        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;
-    }
-    onTranslationsLoaded(isLoaded) {
-        if (isLoaded && this.tab === 2) {
-            this.updateLink(this.link);
-        }
-    }
-    onTabChange(newTab) {
-        if (newTab === 2 && this.translationsLoaded) {
-            this.updateLink(this.link);
-        }
-    }
     onClose() {
@@ -100,6 +72,4 @@ this.close.emit();
         this.tab = newTab;
+        this.isDefaultTab = false;
     }
-    componentDidLoad() {
-        this.updateLink(this.link);
-    }
     render() {
@@ -110,13 +80,16 @@ if (!this.translationsLoaded) {
         const t = (key) => this.i18nInstance.t(key);
-        return (h(WidgetWrapper, { className: "install-model" }, h("div", { class: 'backdrop', onClick: this.onClose }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: this.onClose }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
+        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 (h(WidgetWrapper, { className: "install-model" }, h("div", { class: 'backdrop', onClick: this.onClose }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: this.onClose }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, h("div", { id: "sdk-mm-qrcode", class: 'center' }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, h(InstallIcon, null), h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), h(SDKVersion, { version: this.sdkVersion }))));
+            } }, svgElement && (h("div", { id: "sdk-mm-qrcode", class: 'center', innerHTML: svgElement })), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), " ", h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: HeartIcon, text: t('INSTALL_MODAL.TRUSTED_BY_USERS') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: LockIcon, text: t('INSTALL_MODAL.LEADING_CRYPTO_WALLET') })), h("div", { class: 'item' }, h(AdvantagesListItem, { Icon: WalletIcon, text: t('INSTALL_MODAL.CONTROL_DIGITAL_INTERACTIONS') })), h("button", { class: 'button', onClick: this.onStartDesktopOnboardingHandler }, h(InstallIcon, null), h("span", { class: 'installExtensionText' }, t('INSTALL_MODAL.INSTALL_META_MASK_EXTENSION'))))), h(SDKVersion, { version: this.sdkVersion }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "preferDesktop": ["updatePreferDesktop"],
-        "link": ["updateLink"],
-        "translationsLoaded": ["onTranslationsLoaded"],
-        "tab": ["onTabChange"]
+        "preferDesktop": ["updatePreferDesktop"]
     }; }
@@ -123,0 +96,0 @@ };

dist/esm/mm-pending-modal.entry.js

@@ -1,3 +0,3 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-4b8a94c9.js';
-import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-81e97ab4.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-a83c417f.js';
+import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-50218fcb.js';
 
@@ -4,0 +4,0 @@ const styleCss = ".flexContainer {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: row;\n}\n\n.flexItem {\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n}\n\n.flexItem11 {\n    flex: 11;\n    justify-content: center;\n    align-items: center;\n}\n\n.flexItem1 {\n    flex: 1;\n    justify-content: center;\n    align-items: center;\n}\n\n.tab {\n    padding: 8px;\n    cursor: pointer;\n    background-color: #F2F4F6;\n    font-size: 12px;\n    text-align: center;\n    color: #24292E;\n}\n\n.tabcontainer {\n    padding: 4px;\n    background-color: #F2F4F6;\n    border-radius: 8px;\n    margin-bottom: 30px;\n    margin-top: 30px;\n}\n\n.tabactive {\n    background-color: white;\n    -webkit-transition: background-color 300ms linear;\n    -ms-transition: background-color 300ms linear;\n    transition: background-color 300ms linear;\n    border-radius: 8px;\n}\n\n.item {\n    font-size: 12px;\n    margin-bottom: 16px;\n    border-radius: 8px;\n    padding: 10px;\n    border: 2px #F2F4F6 solid;\n    color: #24292E;\n}\n\n.extensionLabel {\n    font-style: normal;\n    font-weight: bold;\n    font-size: 14px;\n    text-align: cetner;\n    color: #24272A;\n}\n\n.notice {\n    font-size: 12px;\n    margin-left: 10px;\n    margin-right: 10px;\n    color: grey;\n}\n\n.button {\n    margin-top: 41.5px;\n    margin-bottom: 20px;\n    width: 100%;\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 12px 20px;\n    background: #037DD6;\n    border-radius: 32px;\n    color: white;\n    border: 0;\n    font-size: 14px;\n    cursor: pointer;\n}\n\n.backdrop {\n    visibility: visible;\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n    z-index: 99998;\n    background: rgba(0, 0, 0, 0.87);\n    opacity: 0.3;\n}\n\n.modal {\n    visibility: visible;\n    position: fixed;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 99999;\n    background: white;\n    padding: 20px;\n    border-radius: 8px;\n    top: 50%;\n    max-width: 100%;\n    width: 460px;\n    min-width: 300px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px;\n    -webkit-font-smoothing: antialiased;\n}\n\n.closeButton {\n    color: #BBC0C5;\n    cursor: pointer;\n}\n\n.logoContainer {\n    margin-left: 24px;\n    margin-right: 24px;\n    margin-top: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.connectMobileText {\n    font-size: 14px;\n    color: black;\n    margin-top: 28px;\n    margin-bottom: 28px;\n    line-height: 2;\n}\n\n.blue {\n    color: #037DD6;\n    font-weight: 700;\n}\n\n.installExtensionText {\n    margin-left: 10px;\n}\n\n.center {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}\n\n.right {\n    display: flex;\n    align-items: center;\n    justify-content: right;\n}\n\n#sdk-mm-qrcode {\n    svg {\n        width: 50%;\n    }\n}";

dist/esm/mm-select-modal.entry.js

@@ -1,3 +0,3 @@
-import { h, r as registerInstance, c as createEvent, g as getElement } from './index-4b8a94c9.js';
-import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-81e97ab4.js';
+import { h, r as registerInstance, c as createEvent, g as getElement } from './index-a83c417f.js';
+import { S as SimpleI18n, C as CloseButton, L as Logo, a as SDKVersion, W as WidgetWrapper } from './simple-i18n-50218fcb.js';
 import { e as encodeQR } from './index-f0bfb0c3.js';
@@ -137,5 +137,8 @@
         this.sdkVersion = undefined;
+        this.preferDesktop = undefined;
         this.tab = 1;
+        this.isDefaultTab = true;
         this.translationsLoaded = false;
         this.i18nInstance = new SimpleI18n();
+        this.setTab(this.preferDesktop ? 1 : 2);
     }
@@ -156,20 +159,15 @@ async connectedCallback() {
         this.tab = tab;
+        this.isDefaultTab = false;
     }
-    updateLink(newLink) {
-        const svgElement = encodeQR(newLink, "svg", {
-            ecc: "medium",
-            scale: 2
-        });
-        if (!this.el.shadowRoot) {
-            return;
+    disconnectedCallback() {
+        this.onClose();
+    }
+    updatePreferDesktop(newValue) {
+        if (newValue) {
+            this.setTab(1);
         }
-        const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode");
-        if (!qrcodeDiv) {
-            return;
+        else {
+            this.setTab(2);
         }
-        qrcodeDiv.innerHTML = svgElement;
     }
-    disconnectedCallback() {
-        this.onClose();
-    }
     render() {
@@ -181,6 +179,11 @@ if (!this.translationsLoaded) {
         const sdkVersion = this.sdkVersion;
-        return (h(WidgetWrapper, { className: "select-modal" }, h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${this.tab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${this.tab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: this.tab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
+        const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab;
+        const svgElement = encodeQR(this.link, "svg", {
+            ecc: "medium",
+            scale: 2
+        });
+        return (h(WidgetWrapper, { className: "select-modal" }, h("div", { class: 'backdrop', onClick: () => this.onClose(true) }), h("div", { class: 'modal' }, h("div", { class: 'closeButtonContainer' }, h("div", { class: 'right' }, h("span", { class: 'closeButton', onClick: () => this.onClose(true) }, h(CloseButton, null)))), h("div", { class: 'logoContainer' }, h(Logo, null)), h("div", null, h("div", { class: 'tabcontainer' }, h("div", { class: 'flexContainer' }, h("div", { onClick: () => this.setTab(1), class: `tab flexItem ${currentTab === 1 ? 'tabactive' : ''}` }, t('DESKTOP')), h("div", { onClick: () => this.setTab(2), class: `tab flexItem ${currentTab === 2 ? 'tabactive' : ''}` }, t('MOBILE')))), h("div", { style: { display: currentTab === 1 ? 'none' : 'block' } }, h("div", { class: 'flexContainer' }, h("div", { class: 'flexItem', style: {
                 textAlign: 'center',
                 marginTop: '4',
-            } }, h("div", { class: 'center', id: "sdk-mm-qrcode" }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: this.tab === 2 ? 'none' : 'block' } }, h("div", { style: {
+            } }, h("div", { class: 'center', id: "sdk-mm-qrcode", innerHTML: svgElement }), h("div", { class: 'connectMobileText' }, t('SCAN_TO_CONNECT'), h("br", null), h("span", { class: 'blue' }, h("b", null, t('META_MASK_MOBILE_APP'))))))), h("div", { style: { display: currentTab === 2 ? 'none' : 'block' } }, h("div", { style: {
                 display: 'flex',
@@ -194,3 +197,3 @@ justifyContent: 'center',
     static get watchers() { return {
-        "link": ["updateLink"]
+        "preferDesktop": ["updatePreferDesktop"]
     }; }
@@ -197,0 +200,0 @@ };

dist/esm/sdk-install-modal-web.js

@@ -1,3 +0,3 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-4b8a94c9.js';
-export { s as setNonce } from './index-4b8a94c9.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-a83c417f.js';
+export { s as setNonce } from './index-a83c417f.js';
 import { g as globalScripts } from './app-globals-0f993ce5.js';
@@ -19,5 +19,5 @@
   await globalScripts();
-  return bootstrapLazy([["mm-install-modal",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"],"link":["updateLink"],"translationsLoaded":["onTranslationsLoaded"],"tab":["onTabChange"]}]]],["mm-pending-modal",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"tab":[32],"translationsLoaded":[32]},null,{"link":["updateLink"]}]]]], options);
+  return bootstrapLazy([["mm-install-modal",[[1,"mm-install-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]],["mm-pending-modal",[[1,"mm-pending-modal",{"displayOTP":[4,"display-o-t-p"],"sdkVersion":[1,"sdk-version"],"otpCode":[1,"otp-code"],"translationsLoaded":[32]}]]],["mm-select-modal",[[1,"mm-select-modal",{"link":[1],"sdkVersion":[1,"sdk-version"],"preferDesktop":[4,"prefer-desktop"],"tab":[32],"isDefaultTab":[32],"translationsLoaded":[32]},null,{"preferDesktop":["updatePreferDesktop"]}]]]], options);
 });
 
 //# sourceMappingURL=sdk-install-modal-web.js.map

dist/sdk-install-modal-web/sdk-install-modal-web.esm.js

@@ -1,2 +0,2 @@
-import{p as e,b as o}from"./p-4739b8e2.js";export{s as setNonce}from"./p-4739b8e2.js";import{g as a}from"./p-e1255160.js";var n=()=>{const s=import.meta.url;const o={};if(s!==""){o.resourcesUrl=new URL(".",s).href}return e(o)};n().then((async e=>{await a();return o([["p-031fdccc",[[1,"mm-install-modal",{link:[1],sdkVersion:[1,"sdk-version"],preferDesktop:[4,"prefer-desktop"],tab:[32],translationsLoaded:[32]},null,{preferDesktop:["updatePreferDesktop"],link:["updateLink"],translationsLoaded:["onTranslationsLoaded"],tab:["onTabChange"]}]]],["p-ea8736ef",[[1,"mm-pending-modal",{displayOTP:[4,"display-o-t-p"],sdkVersion:[1,"sdk-version"],otpCode:[1,"otp-code"],translationsLoaded:[32]}]]],["p-c91b6be2",[[1,"mm-select-modal",{link:[1],sdkVersion:[1,"sdk-version"],tab:[32],translationsLoaded:[32]},null,{link:["updateLink"]}]]]],e)}));
+import{p as e,b as o}from"./p-3ed06e9b.js";export{s as setNonce}from"./p-3ed06e9b.js";import{g as r}from"./p-e1255160.js";var t=()=>{const s=import.meta.url;const o={};if(s!==""){o.resourcesUrl=new URL(".",s).href}return e(o)};t().then((async e=>{await r();return o([["p-9b90adac",[[1,"mm-install-modal",{link:[1],sdkVersion:[1,"sdk-version"],preferDesktop:[4,"prefer-desktop"],tab:[32],isDefaultTab:[32],translationsLoaded:[32]},null,{preferDesktop:["updatePreferDesktop"]}]]],["p-db91bb82",[[1,"mm-pending-modal",{displayOTP:[4,"display-o-t-p"],sdkVersion:[1,"sdk-version"],otpCode:[1,"otp-code"],translationsLoaded:[32]}]]],["p-569339f2",[[1,"mm-select-modal",{link:[1],sdkVersion:[1,"sdk-version"],preferDesktop:[4,"prefer-desktop"],tab:[32],isDefaultTab:[32],translationsLoaded:[32]},null,{preferDesktop:["updatePreferDesktop"]}]]]],e)}));
 //# sourceMappingURL=sdk-install-modal-web.esm.js.map

dist/types/components.d.ts

@@ -30,2 +30,3 @@ /* eslint-disable */
         "link": string;
+        "preferDesktop": boolean;
         "sdkVersion"?: string;
@@ -137,2 +138,3 @@ }
         "onConnectWithExtension"?: (event: MmSelectModalCustomEvent<any>) => void;
+        "preferDesktop"?: boolean;
         "sdkVersion"?: string;
@@ -139,0 +141,0 @@ }

dist/types/components/mm-install-modal/mm-install-modal.d.ts

@@ -13,2 +13,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
     tab: number;
+    isDefaultTab: boolean;
     el: HTMLElement;
@@ -19,11 +20,7 @@ private translationsLoaded;
     updatePreferDesktop(newValue: boolean): void;
-    updateLink(newLink: string): void;
-    onTranslationsLoaded(isLoaded: boolean): void;
-    onTabChange(newTab: number): void;
     onClose(): void;
     onStartDesktopOnboardingHandler(): void;
     setTab(newTab: number): void;
-    componentDidLoad(): void;
     render(): any;
 }
 //# sourceMappingURL=mm-install-modal.d.ts.map

dist/types/components/mm-select-modal/mm-select-modal.d.ts

@@ -8,2 +8,3 @@ import { EventEmitter } from '../../stencil-public-runtime';
     sdkVersion?: string;
+    preferDesktop: boolean;
     private i18nInstance;
@@ -15,2 +16,3 @@ close: EventEmitter<{
     tab: number;
+    isDefaultTab: boolean;
     el: HTMLElement;
@@ -23,6 +25,6 @@ private translationsLoaded;
     setTab(tab: number): void;
-    updateLink(newLink: string): void;
     disconnectedCallback(): void;
+    updatePreferDesktop(newValue: boolean): void;
     render(): any;
 }
 //# sourceMappingURL=mm-select-modal.d.ts.map

package.json

 {
   "name": "@metamask/sdk-install-modal-web",
-  "version": "0.31.1",
+  "version": "0.31.2",
   "description": "MetaMask SDK Install Modal for Web",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/MetaMask/metamask-sdk#readme",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1789110

decreased by-0.21%

Lines of code

9293

decreased by-0.68%

No dependency changes