Skip to content

Commit c0efccd

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #2131 from Web3Auth/feat/cleanup-modal-options
Feat/cleanup modal options
2 parents 20bb63e + ff6eadc commit c0efccd

File tree

14 files changed

+77
-125
lines changed

14 files changed

+77
-125
lines changed

‎demo/vue-app-new/src/components/AppSettings.vue‎

Lines changed: 27 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ const aaSupportedChains = computed(() => {
5151
.map((chainConfig) => ({ name: `${chainConfig!.chainId} ${chainConfig!.displayName}`, value: chainConfig!.chainId }));
5252
});
5353
54-
const adapterOptions = computed(() =>
55-
formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155) ? [{ name: "coinbase-adapter", value: "coinbase" }] : []
54+
const connectorOptions = computed(() =>
55+
formData.chainNamespaces.includes(CHAIN_NAMESPACES.EIP155) ? [{ name: "coinbase-connector", value: "coinbase" }] : []
5656
);
5757
5858
const isDisplay = (_name: string): boolean => {
@@ -139,6 +139,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
139139
data-testid="selectWidget"
140140
:aria-label="$t('app.widget.title')"
141141
:placeholder="$t('app.widget.title')"
142+
matchParentsWidth
142143
:options="[
143144
{ name: $t('app.widget.embed'), value: 'embed' },
144145
{ name: $t('app.widget.modal'), value: 'modal' },
@@ -182,6 +183,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
182183
:aria-label="$t('app.network')"
183184
:placeholder="$t('app.network')"
184185
:options="networkOptions"
186+
matchParentsWidth
185187
/>
186188
<Select
187189
v-model="formData.chainNamespaces"
@@ -191,6 +193,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
191193
:placeholder="$t('app.chainNamespaces')"
192194
:options="chainNamespaceOptions"
193195
:multiple="true"
196+
matchParentsWidth
194197
@update:model-value="onChainNamespaceChange"
195198
/>
196199
<Select
@@ -200,6 +203,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
200203
:aria-label="$t('app.chains')"
201204
:placeholder="$t('app.chains')"
202205
:multiple="true"
206+
matchParentsWidth
203207
:options="chainOptions"
204208
@update:model-value="onChainChange"
205209
/>
@@ -209,16 +213,18 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
209213
:label="$t('app.defaultChainId')"
210214
:aria-label="$t('app.defaultChainId')"
211215
:placeholder="$t('app.defaultChainId')"
216+
matchParentsWidth
212217
:options="defaultChainOptions"
213218
/>
214219
<Select
215220
v-model="formData.connectors"
216-
data-testid="selectAdapters"
217-
:label="$t('app.adapters')"
218-
:aria-label="$t('app.adapters')"
219-
:placeholder="$t('app.adapters')"
220-
:options="adapterOptions"
221+
data-testid="selectConnectors"
222+
:label="$t('app.connectors')"
223+
:aria-label="$t('app.connectors')"
224+
:placeholder="$t('app.connectors')"
225+
:options="connectorOptions"
221226
multiple
227+
matchParentsWidth
222228
:show-check-box="true"
223229
/>
224230
<Toggle
@@ -272,6 +278,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
272278
:aria-label="$t('app.whiteLabel.defaultLanguage')"
273279
:placeholder="$t('app.whiteLabel.defaultLanguage')"
274280
:options="languageOptions"
281+
matchParentsWidth
275282
:disabled="isDisabled('whiteLabelSettings')"
276283
/>
277284
<TextField
@@ -351,17 +358,25 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
351358
:placeholder="$t('app.loginProviders')"
352359
:options="loginProviderOptions"
353360
multiple
361+
matchParentsWidth
354362
class=""
355363
/>
356364
<Card v-for="p in formData.loginProviders" :key="p" :shadow="false" class="grid grid-cols-1 gap-2 px-4 py-4 sm:grid-cols-3">
357-
<div class="font-bold leading-tight text-left sm:col-span-2">{{ p }}</div>
365+
<div class="font-bold leading-tight text-left">{{ p }}</div>
358366
<Toggle
359367
v-model="formData.loginMethods[p].mainOption"
360368
:show-label="true"
361369
:size="'small'"
362370
:label-disabled="$t('app.loginMethod.mainOption')"
363371
:label-enabled="$t('app.loginMethod.mainOption')"
364372
/>
373+
<Toggle
374+
v-model="formData.loginMethods[p].showOnModal"
375+
:show-label="true"
376+
:size="'small'"
377+
:label-disabled="$t('app.loginMethod.showOnModal')"
378+
:label-enabled="$t('app.loginMethod.showOnModal')"
379+
/>
365380
<TextField
366381
v-model="formData.loginMethods[p].name"
367382
:label="$t('app.loginMethod.name')"
@@ -393,27 +408,6 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
393408
:aria-label="$t('app.loginMethod.logoDark')"
394409
:placeholder="$t('app.loginMethod.logoDark')"
395410
/>
396-
<Toggle
397-
v-model="formData.loginMethods[p].showOnModal"
398-
:show-label="true"
399-
:size="'small'"
400-
:label-disabled="$t('app.loginMethod.showOnModal')"
401-
:label-enabled="$t('app.loginMethod.showOnModal')"
402-
/>
403-
<Toggle
404-
v-model="formData.loginMethods[p].showOnDesktop"
405-
:show-label="true"
406-
:size="'small'"
407-
:label-disabled="$t('app.loginMethod.showOnDesktop')"
408-
:label-enabled="$t('app.loginMethod.showOnDesktop')"
409-
/>
410-
<Toggle
411-
v-model="formData.loginMethods[p].showOnMobile"
412-
:show-label="true"
413-
:size="'small'"
414-
:label-disabled="$t('app.loginMethod.showOnMobile')"
415-
:label-enabled="$t('app.loginMethod.showOnMobile')"
416-
/>
417411
</Card>
418412
</Card>
419413
<Card v-if="isActiveTab(3)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
@@ -428,11 +422,11 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
428422
/>
429423
<Select
430424
v-model="formData.walletPlugin.confirmationStrategy"
431-
data-testid="selectLoginProviders"
425+
data-testid="selectConfirmationStrategy"
432426
:label="$t('app.walletPlugin.confirmationStrategy')"
433427
:aria-label="$t('app.walletPlugin.confirmationStrategy')"
434428
:placeholder="$t('app.walletPlugin.confirmationStrategy')"
435-
:options="confirmationStrategyOptions"
429+
matchParentsWidth
436430
class=""
437431
/>
438432
</Card>
@@ -475,6 +469,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
475469
:placeholder="$t('app.accountAbstractionProvider.smartAccountType')"
476470
:options="SmartAccountOptions"
477471
:disabled="isDisabled('smartAccountType')"
472+
matchParentsWidth
478473
/>
479474
<Select
480475
v-model="formData.smartAccountChains"
@@ -484,6 +479,7 @@ const onSmartAccountChainChange = (chainIds: string[]) => {
484479
:placeholder="$t('app.chains')"
485480
:options="aaSupportedChains"
486481
multiple
482+
matchParentsWidth
487483
:disabled="isDisabled('smartAccountChains')"
488484
@update:model-value="onSmartAccountChainChange"
489485
/>

‎demo/vue-app-new/src/config.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,7 @@ export const defaultLoginMethod: Record<AUTH_CONNECTION_TYPE, FormConfigSettings
7474
logoLight: "",
7575
logoDark: "",
7676
mainOption: false,
77-
showOnModal: false,
78-
showOnDesktop: false,
79-
showOnMobile: false,
77+
showOnModal: true,
8078
},
8179
}),
8280
{} as Record<AUTH_CONNECTION_TYPE, FormConfigSettings>

‎demo/vue-app-new/src/interfaces.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,4 @@ export interface FormConfigSettings {
66
logoDark: string;
77
mainOption: boolean;
88
showOnModal: boolean;
9-
showOnDesktop: boolean;
10-
showOnMobile: boolean;
119
}

‎demo/vue-app-new/src/translations/en.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
"chains": "Chains",
99
"defaultChainId": "Default Chain ID",
1010
"loginProviders": "Login provider",
11-
"adapters": "Adapters",
11+
"connectors": "Connectors",
1212
"showWalletDiscovery": "Show Wallet Discovery",
1313
"multiInjectedProviderDiscovery": "Multi Injected Provider Discovery",
1414
"greeting": "Let's configure Web3Auth!",
@@ -47,9 +47,7 @@
4747
"logoLight": "Logo Light",
4848
"logoDark": "Logo Dark",
4949
"mainOption": "Main Option",
50-
"showOnModal": "on Modal?",
51-
"showOnDesktop": "on Desktop?",
52-
"showOnMobile": "on Mobile?"
50+
"showOnModal": "Show on Modal"
5351
},
5452
"adapter": {
5553
"sessionTime": "Session Time"

‎packages/modal/src/config.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ export const defaultConnectorsModalConfig: ConnectorsModalConfig = {
88
[EVM_CONNECTORS.AUTH]: {
99
label: "Auth",
1010
showOnModal: true,
11-
showOnMobile: true,
12-
showOnDesktop: true,
1311
},
1412
},
1513
};

‎packages/modal/src/modalManager.ts‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -258,8 +258,6 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
258258
extraLoginOptions: authConnectionConfig.jwtParameters,
259259
isDefault: true,
260260
showOnModal: true,
261-
showOnDesktop: true,
262-
showOnMobile: true,
263261
};
264262
}
265263
embedWalletConfigMap.set(groupedAuthConnectionId || authConnectionId, authConnectionConfig);
@@ -314,8 +312,6 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
314312
const defaultConnectorConfig = {
315313
label: CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(capitalizeFirstLetter).join(" "),
316314
showOnModal: true,
317-
showOnMobile: true,
318-
showOnDesktop: true,
319315
};
320316

321317
this.modalConfig.connectors[connectorName] = {

‎packages/modal/src/ui/components/Button/ButtonWallet/ButtonWallet.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ function ButtonWallet(props: ButtonWalletProps) {
4343
onClick={handleBtnClick}
4444
>
4545
<div className="w3a--flex w3a--items-center w3a--gap-x-2">
46-
<figure className={button.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300"}>
46+
<figure className="w3a--size-5">
4747
<Image
4848
imageData={button.icon}
4949
imageId={`login-${button.name}`}
@@ -55,7 +55,7 @@ function ButtonWallet(props: ButtonWalletProps) {
5555
extension={button.imgExtension || "webp"}
5656
/>
5757
</figure>
58-
<p className="w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">{label}</p>
58+
<p className="w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">{label}</p>
5959
</div>
6060
{button.hasInjectedWallet && (
6161
<span

‎packages/modal/src/ui/components/Login/Login.tsx‎

Lines changed: 37 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ function Login(props: LoginProps) {
5151
showInstalledExternalWallets,
5252
logoAlignment = "center",
5353
buttonRadius = "pill",
54-
enableMainSocialLoginButton = false,
5554
} = props;
5655

5756
const [t] = useTranslation(undefined, { i18n });
@@ -88,17 +87,44 @@ function Login(props: LoginProps) {
8887
const visibleRows: rowType[] = [];
8988
const otherRows: rowType[] = [];
9089

91-
const loginOptions = Object.keys(socialLoginsConfig.loginMethods).filter((method) => {
92-
return !socialLoginsConfig.loginMethods[method as AUTH_CONNECTION_TYPE].showOnModal === false && !restrictedLoginMethods.includes(method);
93-
});
90+
const loginMethodsOrder = (socialLoginsConfig.loginMethodsOrder || []).reduce(
91+
(acc, method, index) => {
92+
acc[method] = index;
93+
return acc;
94+
},
95+
{} as Record<string, number>
96+
);
97+
98+
const loginOptions = Object.keys(socialLoginsConfig.loginMethods)
99+
.filter((method) => {
100+
return !socialLoginsConfig.loginMethods[method as AUTH_CONNECTION_TYPE].showOnModal === false && !restrictedLoginMethods.includes(method);
101+
})
102+
.sort((a, b) => {
103+
const maxOrder = (socialLoginsConfig.loginMethodsOrder || []).length;
104+
const aOrder = loginMethodsOrder[a] ?? maxOrder;
105+
const bOrder = loginMethodsOrder[b] ?? maxOrder;
106+
107+
const { mainOption: aMainOption } = socialLoginsConfig.loginMethods[a as AUTH_CONNECTION_TYPE] || {};
108+
const { mainOption: bMainOption } = socialLoginsConfig.loginMethods[b as AUTH_CONNECTION_TYPE] || {};
109+
110+
// if both are main options, sort by order
111+
if (aMainOption && bMainOption) {
112+
return aOrder - bOrder;
113+
}
114+
115+
// if one is main option, it should be first
116+
if (aMainOption) return -1;
117+
if (bMainOption) return 1;
118+
119+
// if none are main options, sort by order
120+
return aOrder - bOrder;
121+
});
94122

95123
loginOptions.forEach((method, index) => {
96124
const connectorConfig = socialLoginsConfig.loginMethods[method as AUTH_CONNECTION_TYPE];
97125
const name = capitalizeFirstLetter(connectorConfig.name || method);
98-
// const orderIndex = socialLoginsConfig.loginMethodsOrder.indexOf(method) + 1;
99126
const order = index + 1;
100127

101-
const isMainOption = order === 1 && enableMainSocialLoginButton;
102128
const isPrimaryBtn = socialLoginsConfig?.uiConfig?.primaryButton === "socialLogin" && order === 1;
103129

104130
const loginOptionLength = loginOptions.length;
@@ -122,7 +148,6 @@ function Login(props: LoginProps) {
122148
login_hint: "",
123149
},
124150
order,
125-
isMainOption,
126151
});
127152
}
128153

@@ -141,14 +166,13 @@ function Login(props: LoginProps) {
141166
login_hint: "",
142167
},
143168
order,
144-
isMainOption,
145169
});
146170
});
147171

148172
setVisibleRow(visibleRows);
149173
setOtherRow(otherRows);
150174
setCanShowMore(maxOptions.length > 4); // Update the state based on the condition
151-
}, [socialLoginsConfig, isDark, enableMainSocialLoginButton, buttonRadius]);
175+
}, [socialLoginsConfig, isDark, buttonRadius]);
152176

153177
const handleCustomLogin = async (authConnection: AUTH_CONNECTION_TYPE, loginHint: string) => {
154178
try {
@@ -386,7 +410,9 @@ function Login(props: LoginProps) {
386410
})}
387411
onClick={() => handleInstalledWalletClick(wallet)}
388412
>
389-
<p className="w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">{wallet.displayName}</p>
413+
<p className="w3a--max-w-[180px] w3a--truncate w3a--text-base w3a--font-normal w3a--text-app-gray-700 dark:w3a--text-app-white">
414+
{wallet.displayName}
415+
</p>
390416
<div className="w3a--flex w3a--items-center w3a--gap-x-2">
391417
{wallet.hasInjectedWallet && (
392418
<span
@@ -396,7 +422,7 @@ function Login(props: LoginProps) {
396422
{t("modal.external.installed")}
397423
</span>
398424
)}
399-
<figure className={wallet.icon ? "w3a--size-5" : "w3a--size-5 w3a--rounded-full w3a--bg-app-gray-300"}>
425+
<figure className="w3a--size-5">
400426
<Image
401427
imageData={wallet.icon}
402428
imageId={`login-${wallet.name}`}

‎packages/modal/src/ui/components/Login/Login.type.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export interface LoginProps {
3030
totalExternalWallets: number;
3131
logoAlignment?: LogoAlignmentType;
3232
buttonRadius?: ButtonRadiusType;
33-
enableMainSocialLoginButton?: boolean;
3433
handleExternalWalletBtnClick?: (flag: boolean) => void;
3534
handleSocialLoginClick: (params: SocialLoginEventType) => void;
3635
handleExternalWalletClick: (params: ExternalWalletEventType) => void;

0 commit comments

Comments
 (0)