Skip to content

Commit 94edafb

Browse files
chaitanyapottichaitanyapotti
authored
Merge pull request #2278 from Web3Auth:feat/social-login-fix
Feat/social-login-fix
2 parents 36b94d6 + 0626bbc commit 94edafb

File tree

10 files changed

+1401
-765
lines changed

10 files changed

+1401
-765
lines changed

‎demo/vue-app-new/package-lock.json‎

Lines changed: 1310 additions & 703 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/vue-app-new/package.json‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -11,43 +11,40 @@
1111
},
1212
"dependencies": {
1313
"@solana/web3.js": "^1.98.4",
14-
"@tanstack/vue-query": "^5.85.5",
14+
"@tanstack/vue-query": "^5.90.2",
1515
"@toruslabs/base-controllers": "^8.6.1",
1616
"@toruslabs/bs58": "^1.0.0",
1717
"@toruslabs/ethereum-controllers": "^8.6.2",
1818
"@toruslabs/solana-controllers": "^8.6.1",
1919
"@toruslabs/tweetnacl-js": "^1.0.4",
2020
"@toruslabs/vue-components": "^8.0.8",
2121
"@toruslabs/vue-icons": "^8.0.2",
22-
"@wagmi/vue": "^0.2.2",
22+
"@wagmi/vue": "^0.2.11",
2323
"@web3auth/auth": "^10.5.0",
2424
"@web3auth/modal": "file:../../packages/modal",
2525
"@web3auth/no-modal": "file:../../packages/no-modal",
2626
"@web3auth/sign-in-with-ethereum": "^5.0.0",
2727
"@web3auth/ws-embed": "^5.0.23",
2828
"ethers": "^6.15.0",
29-
"petite-vue-i18n": "^11.1.11",
30-
"vue": "^3.5.20"
29+
"petite-vue-i18n": "^11.1.12",
30+
"vue": "^3.5.22"
3131
},
3232
"devDependencies": {
3333
"@toruslabs/eslint-config-vue": "^4.1.5",
3434
"@vitejs/plugin-vue": "^6.0.1",
3535
"autoprefixer": "^10.4.21",
36-
"eslint": "^9.34.0",
37-
"globals": "^16.3.0",
36+
"eslint": "^9.36.0",
37+
"globals": "^16.4.0",
3838
"postcss": "^8.5.6",
3939
"prettier": "^3.6.2",
4040
"stream-browserify": "^3.0.0",
4141
"tailwindcss": "^3.4.13",
42-
"typescript": "^5.9.2",
43-
"vite": "^7.1.3",
44-
"vue-tsc": "^3.0.6"
45-
},
46-
"overrides": {
47-
"ox": "0.6.9"
42+
"typescript": "^5.9.3",
43+
"vite": "^7.1.7",
44+
"vue-tsc": "^3.1.0"
4845
},
4946
"optionalDependencies": {
50-
"@esbuild/linux-x64": "0.25.9"
47+
"@esbuild/linux-x64": "0.25.10"
5148
},
5249
"lint-staged": {
5350
"!(*d).{js,ts}": [

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,6 @@
8080
"packages/modal"
8181
],
8282
"overrides": {
83-
"ox": "0.6.9",
8483
"react": "19.1.1",
8584
"react-dom": "19.1.1"
8685
}

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ function ConnectWallet(props: ConnectWalletProps) {
2525
deviceDetails,
2626
buttonRadius = "pill",
2727
chainNamespace,
28+
isExternalWalletModeOnly,
2829
onBackClick,
2930
handleExternalWalletClick,
3031
handleWalletDetailsHeight,
@@ -235,10 +236,18 @@ function ConnectWallet(props: ConnectWalletProps) {
235236
return walletConnectUri;
236237
}, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
237238

239+
const disableBackButton = useMemo(() => {
240+
// If wallet is selected, show the back button
241+
if (selectedWallet) return false;
242+
// Otherwise, if external wallet mode only, login screen is skipped so back button is not needed
243+
if (isExternalWalletModeOnly) return true;
244+
return false;
245+
}, [selectedWallet, isExternalWalletModeOnly]);
246+
238247
return (
239248
<div className="w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4">
240249
{/* Header */}
241-
<ConnectWalletHeader onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
250+
<ConnectWalletHeader disableBackButton={disableBackButton} onBackClick={handleBack} currentPage={currentPage} selectedButton={selectedButton} />
242251
{/* Body */}
243252
{selectedWallet ? (
244253
<ConnectWalletQrCode
@@ -250,13 +259,15 @@ function ConnectWallet(props: ConnectWalletProps) {
250259
/>
251260
) : (
252261
<div className="w3a--flex w3a--flex-col w3a--gap-y-2">
253-
<ConnectWalletChainFilter
254-
isDark={isDark}
255-
isLoading={isLoading}
256-
selectedChain={selectedChain}
257-
setSelectedChain={handleChainFilterChange}
258-
chainNamespace={chainNamespace}
259-
/>
262+
{chainNamespace.length > 1 && (
263+
<ConnectWalletChainFilter
264+
isDark={isDark}
265+
isLoading={isLoading}
266+
selectedChain={selectedChain}
267+
setSelectedChain={handleChainFilterChange}
268+
chainNamespace={chainNamespace}
269+
/>
270+
)}
260271
{/* Search Input */}
261272
<ConnectWalletSearch
262273
totalExternalWalletCount={totalExternalWalletsCount}

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export interface ConnectWalletProps {
1414
deviceDetails: { platform: platform; browser: browser; os: os };
1515
chainNamespace: ChainNamespaceType[];
1616
buttonRadius: ButtonRadiusType;
17+
isExternalWalletModeOnly: boolean;
1718
onBackClick?: (flag: boolean) => void;
1819
handleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;
1920
handleWalletDetailsHeight: () => void;

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.tsx‎

Lines changed: 23 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import i18n from "../../../localeImport";
55
import { ConnectWalletHeaderProps } from "./ConnectWalletHeader.type";
66

77
function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
8-
const { onBackClick, currentPage, selectedButton } = props;
8+
const { disableBackButton, onBackClick, currentPage, selectedButton } = props;
99
const [t] = useTranslation(undefined, { i18n });
1010

1111
const handleBack = () => {
@@ -16,25 +16,29 @@ function ConnectWalletHeader(props: ConnectWalletHeaderProps) {
1616

1717
return (
1818
<div className="w3a--flex w3a--items-center w3a--justify-between">
19-
<button
20-
type="button"
21-
className="w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full"
22-
onClick={handleBack}
23-
>
24-
<svg
25-
xmlns="http://www.w3.org/2000/svg"
26-
fill="none"
27-
viewBox="0 0 20 20"
28-
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
19+
{!disableBackButton ? (
20+
<button
21+
type="button"
22+
className="w3a--z-20 w3a--flex w3a--size-5 w3a--cursor-pointer w3a--items-center w3a--justify-center w3a--rounded-full"
23+
onClick={handleBack}
2924
>
30-
<path
31-
fill="currentColor"
32-
fillRule="evenodd"
33-
d="M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414"
34-
clipRule="evenodd"
35-
/>
36-
</svg>
37-
</button>
25+
<svg
26+
xmlns="http://www.w3.org/2000/svg"
27+
fill="none"
28+
viewBox="0 0 20 20"
29+
className="w3a--text-app-gray-500 hover:w3a--text-app-gray-900 dark:w3a--text-app-gray-200 dark:hover:w3a--text-app-white"
30+
>
31+
<path
32+
fill="currentColor"
33+
fillRule="evenodd"
34+
d="M9.707 16.707a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414l6-6a1 1 0 0 1 1.414 1.414L5.414 9H17a1 1 0 1 1 0 2H5.414l4.293 4.293a1 1 0 0 1 0 1.414"
35+
clipRule="evenodd"
36+
/>
37+
</svg>
38+
</button>
39+
) : (
40+
<div />
41+
)}
3842
<p className="w3a--text-base w3a--font-medium w3a--text-app-gray-900 dark:w3a--text-app-white">
3943
{currentPage === CONNECT_WALLET_PAGES.SELECTED_WALLET
4044
? selectedButton?.displayName

‎packages/modal/src/ui/components/ConnectWallet/ConnectWalletHeader/ConnectWalletHeader.type.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ExternalButton } from "../../../interfaces";
22

33
export interface ConnectWalletHeaderProps {
4+
disableBackButton?: boolean;
45
onBackClick: () => void;
56
currentPage: string;
67
selectedButton: ExternalButton;

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

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
WALLET_CONNECTORS,
99
WalletLoginError,
1010
} from "@web3auth/no-modal";
11-
import { MouseEvent as ReactMouseEvent, useContext, useEffect, useMemo, useRef, useState } from "react";
11+
import { MouseEvent as ReactMouseEvent, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
1212
import { useTranslation } from "react-i18next";
1313

1414
import { capitalizeFirstLetter, CAPTCHA_SITE_KEY } from "../../config";
@@ -72,7 +72,7 @@ function Login(props: LoginProps) {
7272
const [countryFlag, setCountryFlag] = useState<string>("");
7373
const [passwordlessErrorMessage, setPasswordlessErrorMessage] = useState<string>("");
7474
const [otpErrorMessage, setOtpErrorMessage] = useState<string>("");
75-
const [expand, setExpand] = useState(false);
75+
const [expandSocialLogins, setExpandSocialLogins] = useState(false);
7676
const [canShowMore, setCanShowMore] = useState(false);
7777
const [visibleRow, setVisibleRow] = useState<rowType[]>([]);
7878
const [otherRow, setOtherRow] = useState<rowType[]>([]);
@@ -86,15 +86,15 @@ function Login(props: LoginProps) {
8686
const [captchaError, setCaptchaError] = useState<string>("");
8787
const captchaRef = useRef<HCaptcha>(null);
8888

89-
const handleExpand = () => {
90-
setExpand((prev) => !prev);
89+
const handleSocialLoginExpand = () => {
90+
setExpandSocialLogins((prev) => !prev);
9191
setIsPasswordLessCtaClicked(false);
9292
handleSocialLoginHeight();
9393
};
9494

9595
useEffect(() => {
9696
const maxOptions = Object.keys(socialLoginsConfig.loginMethods).filter((loginMethodKey) => {
97-
return socialLoginsConfig.loginMethods[loginMethodKey as AUTH_CONNECTION_TYPE].showOnModal;
97+
return socialLoginsConfig.loginMethods[loginMethodKey as AUTH_CONNECTION_TYPE].showOnModal && !restrictedLoginMethods.includes(loginMethodKey);
9898
});
9999

100100
const visibleRows: rowType[] = [];
@@ -305,16 +305,6 @@ function Login(props: LoginProps) {
305305
if (isSmsPasswordLessLoginVisible) getLocation();
306306
}, [isSmsPasswordLessLoginVisible]);
307307

308-
const handleConnectWallet = (e: ReactMouseEvent<HTMLButtonElement>) => {
309-
analytics?.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
310-
total_external_wallets: totalExternalWallets,
311-
installed_external_wallets: installedExternalWallets.length,
312-
});
313-
setIsPasswordLessCtaClicked(false);
314-
e.preventDefault();
315-
if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
316-
};
317-
318308
const handleOtpComplete = async (otp: string) => {
319309
setOtpLoading(true);
320310
if (otpErrorMessage) setOtpErrorMessage("");
@@ -399,6 +389,25 @@ function Login(props: LoginProps) {
399389
return installedExternalWalletConfig.filter((wallet) => wallet.name === WALLET_CONNECTORS.METAMASK);
400390
}, [installedExternalWalletConfig, showInstalledExternalWallets]);
401391

392+
const handleConnectWallet = useCallback(
393+
(e?: ReactMouseEvent<HTMLButtonElement>) => {
394+
analytics?.track(ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
395+
total_external_wallets: totalExternalWallets,
396+
installed_external_wallets: installedExternalWallets.length,
397+
});
398+
setIsPasswordLessCtaClicked(false);
399+
e?.preventDefault();
400+
if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
401+
},
402+
[analytics, handleExternalWalletBtnClick, installedExternalWallets.length, totalExternalWallets]
403+
);
404+
405+
useEffect(() => {
406+
if (showExternalWalletButton && !areSocialLoginsVisible && !showPasswordLessInput) {
407+
handleConnectWallet();
408+
}
409+
}, [showExternalWalletButton, areSocialLoginsVisible, showPasswordLessInput, handleConnectWallet]);
410+
402411
if (showOtpFlow) {
403412
return (
404413
<LoginOtp
@@ -423,7 +432,7 @@ function Login(props: LoginProps) {
423432
canShowMore={canShowMore}
424433
handleSocialLoginClick={handleSocialLoginClick}
425434
socialLoginsConfig={socialLoginsConfig}
426-
handleExpandSocialLogins={handleExpand}
435+
handleExpandSocialLogins={handleSocialLoginExpand}
427436
buttonRadius={buttonRadius}
428437
/>
429438
);
@@ -591,7 +600,7 @@ function Login(props: LoginProps) {
591600
return sections;
592601
};
593602

594-
const expandedView = () => socialLoginSection(otherRow);
603+
const socialLoginExpandedView = () => socialLoginSection(otherRow);
595604

596605
return (
597606
<div className="w3a--flex w3a--flex-col w3a--items-center w3a--gap-y-4 w3a--p-2">
@@ -643,10 +652,10 @@ function Login(props: LoginProps) {
643652
{!showCaptcha && (
644653
<div className="w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2">
645654
{/* DEFAULT VIEW */}
646-
{!expand && defaultView()}
655+
{!expandSocialLogins && defaultView()}
647656

648657
{/* EXPANDED VIEW */}
649-
{expand && expandedView()}
658+
{expandSocialLogins && socialLoginExpandedView()}
650659
</div>
651660
)}
652661
</div>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,10 @@ function Root(props: RootProps) {
9898
if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(flag);
9999
};
100100

101+
const isExternalWalletModeOnly = useMemo(() => {
102+
return !showPasswordLessInput && !areSocialLoginsVisible;
103+
}, [areSocialLoginsVisible, showPasswordLessInput]);
104+
101105
// Wallet Details
102106
const mobileInstallLinks = useMemo<JSX.Element[]>(() => {
103107
if (deviceDetails.platform === "desktop") return [];
@@ -502,6 +506,7 @@ function Root(props: RootProps) {
502506
chainNamespace={chainNamespaces}
503507
buttonRadius={buttonRadiusType}
504508
handleWalletDetailsHeight={handleWalletDetailsHeight}
509+
isExternalWalletModeOnly={isExternalWalletModeOnly}
505510
onBackClick={onBackClick}
506511
handleExternalWalletClick={preHandleExternalWalletClick}
507512
/>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AUTH_CONNECTION, BUILD_ENV, WEB3AUTH_NETWORK } from "@web3auth/auth";
1+
import { AUTH_CONNECTION, AUTH_CONNECTION_TYPE, BUILD_ENV, WEB3AUTH_NETWORK } from "@web3auth/auth";
22
import { cloneDeep, CONNECTOR_NAMES, log, WALLET_CONNECTOR_TYPE, WALLET_CONNECTORS, WIDGET_TYPE } from "@web3auth/no-modal";
33
import deepmerge from "deepmerge";
44
import { useEffect, useMemo, useState } from "react";
@@ -97,7 +97,9 @@ function Widget(props: WidgetProps) {
9797
if (Object.keys(modalState.socialLoginsConfig?.loginMethods || {}).length === 0) return false;
9898

9999
const isAnySocialLoginVisible = Object.entries(modalState.socialLoginsConfig?.loginMethods || {}).some(
100-
([k, v]) => k !== AUTH_CONNECTION.EMAIL_PASSWORDLESS && v.showOnModal !== false
100+
([k, v]) =>
101+
!([AUTH_CONNECTION.EMAIL_PASSWORDLESS, AUTH_CONNECTION.SMS_PASSWORDLESS] as AUTH_CONNECTION_TYPE[]).includes(k as AUTH_CONNECTION_TYPE) &&
102+
v.showOnModal !== false
101103
);
102104
return isAnySocialLoginVisible;
103105
}, [modalState]);

0 commit comments

Comments
 (0)