Skip to content

Commit 86b8b05

Browse files
ecp4224ecp4224
authored
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
1 parent ca11dce commit 86b8b05

File tree

5 files changed

+54
-77
lines changed

5 files changed

+54
-77
lines changed

‎packages/sdk-install-modal-web/src/components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export namespace Components {
2727
* The QR code link
2828
*/
2929
"link": string;
30+
"preferDesktop": boolean;
3031
"sdkVersion"?: string;
3132
}
3233
}
@@ -133,6 +134,7 @@ declare namespace LocalJSX {
133134
"link"?: string;
134135
"onClose"?: (event: MmSelectModalCustomEvent<{ shouldTerminate?: boolean }>) => void;
135136
"onConnectWithExtension"?: (event: MmSelectModalCustomEvent<any>) => void;
137+
"preferDesktop"?: boolean;
136138
"sdkVersion"?: string;
137139
}
138140
interface IntrinsicElements {

‎packages/sdk-install-modal-web/src/components/mm-install-modal/mm-install-modal.tsx‎

Lines changed: 22 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ export class InstallModal {
3333

3434
@State() tab: number = 1;
3535

36+
@State() isDefaultTab: boolean = true;
37+
3638
@Element() el: HTMLElement;
3739

3840
@State() private translationsLoaded: boolean = false;
@@ -42,7 +44,7 @@ export class InstallModal {
4244
this.onStartDesktopOnboardingHandler = this.onStartDesktopOnboardingHandler.bind(this);
4345
this.setTab = this.setTab.bind(this);
4446
this.render = this.render.bind(this);
45-
this.setTab(2);
47+
this.setTab(this.preferDesktop ? 1 : 2);
4648

4749
this.i18nInstance = new SimpleI18n();
4850
}
@@ -63,46 +65,6 @@ export class InstallModal {
6365
}
6466
}
6567

66-
@Watch('link')
67-
updateLink(newLink: string) {
68-
if (!this.translationsLoaded || this.tab !== 2) {
69-
return;
70-
}
71-
72-
const svgElement = encodeQR(newLink, "svg", {
73-
ecc: "medium",
74-
scale: 2
75-
});
76-
77-
if (!this.el.shadowRoot) {
78-
console.warn('Shadow root not found');
79-
return;
80-
}
81-
82-
const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode");
83-
84-
if (!qrcodeDiv) {
85-
console.warn('QR code div not found');
86-
return;
87-
}
88-
89-
qrcodeDiv.innerHTML = svgElement;
90-
}
91-
92-
@Watch('translationsLoaded')
93-
onTranslationsLoaded(isLoaded: boolean) {
94-
if (isLoaded && this.tab === 2) {
95-
this.updateLink(this.link);
96-
}
97-
}
98-
99-
@Watch('tab')
100-
onTabChange(newTab: number) {
101-
if (newTab === 2 && this.translationsLoaded) {
102-
this.updateLink(this.link);
103-
}
104-
}
105-
10668
onClose() {
10769
this.close.emit();
10870
}
@@ -113,10 +75,7 @@ export class InstallModal {
11375

11476
setTab(newTab: number) {
11577
this.tab = newTab
116-
}
117-
118-
componentDidLoad() {
119-
this.updateLink(this.link);
78+
this.isDefaultTab = false;
12079
}
12180

12281
render() {
@@ -126,6 +85,15 @@ export class InstallModal {
12685

12786
const t = (key: string) => this.i18nInstance.t(key);
12887

88+
const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab
89+
90+
const svgElement = encodeQR(this.link, "svg", {
91+
ecc: "medium",
92+
scale: 2
93+
});
94+
95+
console.log(`Showing modal with link ${this.link} and SVG QRCode ${svgElement}`)
96+
12997
return (
13098
<WidgetWrapper className="install-model">
13199
<div class='backdrop' onClick={this.onClose}></div>
@@ -145,19 +113,19 @@ export class InstallModal {
145113
<div class='flexContainer'>
146114
<div
147115
onClick={() => this.setTab(1)}
148-
class={`tab flexItem ${this.tab === 1 ? 'tabactive': ''}`}
116+
class={`tab flexItem ${currentTab === 1 ? 'tabactive': ''}`}
149117
>
150118
{t('DESKTOP')}
151119
</div>
152120
<div
153121
onClick={() => this.setTab(2)}
154-
class={`tab flexItem ${this.tab === 2 ? 'tabactive': ''}`}
122+
class={`tab flexItem ${currentTab === 2 ? 'tabactive': ''}`}
155123
>
156124
{t('MOBILE')}
157125
</div>
158126
</div>
159127
</div>
160-
<div style={{ display: this.tab === 1 ? 'none' : 'block' }}>
128+
<div style={{ display: currentTab === 1 ? 'none' : 'block' }}>
161129
<div class='flexContainer'>
162130
<div
163131
class='flexItem'
@@ -166,8 +134,11 @@ export class InstallModal {
166134
marginTop: '4',
167135
}}
168136
>
169-
<div id="sdk-mm-qrcode" class='center'>
170-
</div>
137+
{
138+
svgElement && (
139+
<div id="sdk-mm-qrcode" class='center' innerHTML={svgElement} />
140+
)
141+
}
171142
<div class='connectMobileText'>
172143
{t('SCAN_TO_CONNECT')} <br />
173144
<span class='blue'>
@@ -177,7 +148,7 @@ export class InstallModal {
177148
</div>
178149
</div>
179150
</div>
180-
<div style={{ display: this.tab === 2 ? 'none' : 'block' }}>
151+
<div style={{ display: currentTab === 2 ? 'none' : 'block' }}>
181152
<div class='item'>
182153
<AdvantagesListItem
183154
Icon={HeartIcon}

‎packages/sdk-install-modal-web/src/components/mm-select-modal/mm-select-modal.tsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Prop, h, Event, EventEmitter, State, Watch, Element } from '@stencil/core';
1+
import { Component, Prop, h, Event, EventEmitter, State, Element, Watch } from '@stencil/core';
22
import { WidgetWrapper } from '../widget-wrapper/widget-wrapper';
33
import SDKVersion from '../misc/SDKVersion';
44
import CloseButton from '../misc/CloseButton';
@@ -21,6 +21,8 @@ export class SelectModal {
2121

2222
@Prop() sdkVersion?: string;
2323

24+
@Prop() preferDesktop: boolean;
25+
2426
private i18nInstance: SimpleI18n;
2527

2628
@Event() close: EventEmitter<{ shouldTerminate?: boolean }>;
@@ -29,12 +31,15 @@ export class SelectModal {
2931

3032
@State() tab: number = 1;
3133

34+
@State() isDefaultTab: boolean = true;
35+
3236
@Element() el: HTMLElement;
3337

3438
@State() private translationsLoaded: boolean = false;
3539

3640
constructor() {
3741
this.i18nInstance = new SimpleI18n();
42+
this.setTab(this.preferDesktop ? 1 : 2);
3843
}
3944

4045
async connectedCallback() {
@@ -54,32 +59,22 @@ export class SelectModal {
5459

5560
setTab(tab: number) {
5661
this.tab = tab;
57-
}
58-
59-
@Watch('link')
60-
updateLink(newLink: string) {
61-
const svgElement = encodeQR(newLink, "svg", {
62-
ecc: "medium",
63-
scale: 2
64-
})
65-
66-
if (!this.el.shadowRoot) {
67-
return;
68-
}
69-
70-
const qrcodeDiv = this.el.shadowRoot.querySelector("#sdk-mm-qrcode");
71-
72-
if (!qrcodeDiv) {
73-
return;
74-
}
75-
76-
qrcodeDiv.innerHTML = svgElement
62+
this.isDefaultTab = false;
7763
}
7864

7965
disconnectedCallback() {
8066
this.onClose();
8167
}
8268

69+
@Watch('preferDesktop')
70+
updatePreferDesktop(newValue: boolean) {
71+
if (newValue) {
72+
this.setTab(1);
73+
} else {
74+
this.setTab(2);
75+
}
76+
}
77+
8378
render() {
8479
if (!this.translationsLoaded) {
8580
return null;
@@ -89,6 +84,13 @@ export class SelectModal {
8984

9085
const sdkVersion = this.sdkVersion
9186

87+
const currentTab = this.isDefaultTab ? this.preferDesktop ? 1 : 2 : this.tab
88+
89+
const svgElement = encodeQR(this.link, "svg", {
90+
ecc: "medium",
91+
scale: 2
92+
})
93+
9294
return (
9395
<WidgetWrapper className="select-modal">
9496
<div class='backdrop' onClick={() => this.onClose(true)}></div>
@@ -108,19 +110,19 @@ export class SelectModal {
108110
<div class='flexContainer'>
109111
<div
110112
onClick={() => this.setTab(1)}
111-
class={`tab flexItem ${this.tab === 1 ? 'tabactive' : ''}`}
113+
class={`tab flexItem ${currentTab === 1 ? 'tabactive' : ''}`}
112114
>
113115
{t('DESKTOP')}
114116
</div>
115117
<div
116118
onClick={() => this.setTab(2)}
117-
class={`tab flexItem ${this.tab === 2 ? 'tabactive' : ''}`}
119+
class={`tab flexItem ${currentTab === 2 ? 'tabactive' : ''}`}
118120
>
119121
{t('MOBILE')}
120122
</div>
121123
</div>
122124
</div>
123-
<div style={{ display: this.tab === 1 ? 'none' : 'block' }}>
125+
<div style={{ display: currentTab === 1 ? 'none' : 'block' }}>
124126
<div class='flexContainer'>
125127
<div
126128
class='flexItem'
@@ -129,7 +131,7 @@ export class SelectModal {
129131
marginTop: '4',
130132
}}
131133
>
132-
<div class='center' id="sdk-mm-qrcode" />
134+
<div class='center' id="sdk-mm-qrcode" innerHTML={svgElement} />
133135
<div class='connectMobileText'>
134136
{t('SCAN_TO_CONNECT')}
135137
<br />
@@ -140,7 +142,7 @@ export class SelectModal {
140142
</div>
141143
</div>
142144
</div>
143-
<div style={{ display: this.tab === 2 ? 'none' : 'block' }}>
145+
<div style={{ display: currentTab === 2 ? 'none' : 'block' }}>
144146
<div
145147
style={{
146148
display: 'flex',

‎packages/sdk/src/ui/InstallModal/InstallModal-web.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,7 @@ const sdkWebInstallModal = ({
8181
},
8282
onClose: unmount,
8383
link,
84+
preferDesktop: preferDesktop ?? false,
8485
})
8586
.catch((err) => {
8687
console.error(err);

‎packages/sdk/src/ui/InstallModal/Modal-web.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ export default class ModalLoader {
9292
) as HTMLMmSelectModalElement;
9393
modal.link = props.link;
9494
modal.sdkVersion = props.sdkVersion ?? this.sdkVersion;
95+
modal.preferDesktop = props.preferDesktop;
9596
modal.addEventListener('close', ({ detail: { shouldTerminate } }) =>
9697
props.onClose(shouldTerminate),
9798
);

0 commit comments

Comments
 (0)