Skip to content

feat: account linking #2423

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
lionellbriones wants to merge 9 commits into
base: master
Choose a base branch
from
Open

feat: account linking #2423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e3b2dd
added link wallet api and view
lionellbriones Mar 26, 2026
cf48d29
added link wallet flow
lionellbriones Mar 27, 2026
3a4d360
linking flow
lionellbriones Mar 27, 2026
ae4ba7f
Merge branch 'master' into feat/account-linking
lionellbriones Apr 20, 2026
df93878
keep useLinkWallet to modal
lionellbriones Apr 20, 2026
1e7b955
fix wallet list width
lionellbriones Apr 20, 2026
0a94912
add hook for wallet filtering
lionellbriones Apr 20, 2026
250f927
remove temporary buttons for testing
lionellbriones Apr 20, 2026
59ebf76
don't show wallet connect on first list
lionellbriones Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 10 additions & 6 deletions demo/vue-app-new/src/components/AppDashboard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { CHAIN_NAMESPACES, IProvider, log, WALLET_CONNECTORS } from "@web3auth/m
import {
useCheckout,
useFunding,
useLinkWallet,
useReceive,
useEnableMFA,
useAuthTokenInfo,
Expand Down Expand Up @@ -55,6 +56,7 @@ const { showWalletConnectScanner, loading: showWalletConnectScannerLoading } = u
const { showCheckout, loading: showCheckoutLoading } = useCheckout();
const { showFunding, loading: showFundingLoading } = useFunding();
const { showReceive, loading: showReceiveLoading } = useReceive();
const { linkWallet, loading: linkWalletLoading } = useLinkWallet();
const { getAuthTokenInfo, loading: getAuthTokenInfoLoading } = useAuthTokenInfo();
const { status, address } = useConnection();
const { mutateAsync: signTypedDataAsync } = useSignTypedData();
Expand Down Expand Up @@ -403,7 +405,7 @@ const onSwitchChain = async () => {
</Button>
</div>
<div class="mb-2">
<Button :loading="userInfoLoading" block size="xs" pill @click="onGetUserInfo">
<Button :loading="userInfoLoading.value" block size="xs" pill @click="onGetUserInfo">
{{ $t("app.buttons.btnGetUserInfo") }}
</Button>

Expand All @@ -424,23 +426,25 @@ const onSwitchChain = async () => {
>
{{ isMFAEnabled ? "Manage MFA" : "Enable MFA" }}
</Button>

<Button :loading="linkWalletLoading.value" block size="xs" pill class="my-2" @click="() => linkWallet()">Link Wallet</Button>
</div>
<!-- Wallet Services -->
<Card v-if="isDisplay('walletServices')" class="!h-auto lg:!h-[calc(100dvh_-_240px)] gap-4 px-4 py-4 mb-2" :shadow="false">
<div class="mb-2 text-xl font-bold leading-tight text-left">Wallet Service</div>
<Button :loading="showWalletUILoading" block size="xs" pill class="mb-2" @click="() => showWalletUI()">
<Button :loading="showWalletUILoading.value" block size="xs" pill class="mb-2" @click="() => showWalletUI()">
{{ $t("app.buttons.btnShowWalletUI") }}
</Button>
<Button :loading="showWalletConnectScannerLoading" block size="xs" pill class="mb-2" @click="() => showWalletConnectScanner()">
<Button :loading="showWalletConnectScannerLoading.value" block size="xs" pill class="mb-2" @click="() => showWalletConnectScanner()">
{{ $t("app.buttons.btnShowWalletConnectScanner") }}
</Button>
<Button :loading="showFundingLoading" block size="xs" pill class="mb-2" @click="() => showFunding()">
<Button :loading="showFundingLoading.value" block size="xs" pill class="mb-2" @click="() => showFunding()">
{{ $t("app.buttons.btnShowFunding") }}
</Button>
<Button :loading="showCheckoutLoading" block size="xs" pill class="mb-2" @click="() => showCheckout()">
<Button :loading="showCheckoutLoading.value" block size="xs" pill class="mb-2" @click="() => showCheckout()">
{{ $t("app.buttons.btnShowCheckout") }}
</Button>
<Button :loading="showReceiveLoading" block size="xs" pill class="mb-2" @click="() => showReceive()">
<Button :loading="showReceiveLoading.value" block size="xs" pill class="mb-2" @click="() => showReceive()">
{{ $t("app.buttons.btnShowReceive") }}
</Button>
<!-- <Button v-if="isDisplay('ethServices')" block size="xs" pill class="mb-2" @click="onWalletSignPersonalMessage">
Expand Down
1 change: 1 addition & 0 deletions packages/modal/src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,5 @@ export interface ConnectorsModalConfig {
}
export interface IWeb3AuthModal extends IWeb3Auth {
connect(): Promise<Connection | null>;
linkWallet(): Promise<void>;
}
8 changes: 8 additions & 0 deletions packages/modal/src/modalManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -220,6 +220,14 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
});
}

public async linkWallet(): Promise<void> {
Copy link
Copy Markdown
Member

@tuna1207 tuna1207 Apr 29, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we should add this to no modal and use it from there

if (!this.loginModal) throw WalletInitializationError.notReady("Login modal is not initialized");
if (!this.connectedConnectorName || !CONNECTED_STATUSES.includes(this.status)) {
throw WalletInitializationError.notReady("Must be connected before linking a wallet");
}
this.loginModal.openLinkWallet();
}

protected initUIConfig(projectConfig: ProjectConfig) {
super.initUIConfig(projectConfig);
this.options.uiConfig = deepmerge(cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
Expand Down
2 changes: 2 additions & 0 deletions packages/modal/src/ui/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ export const PAGES = {
WALLET_LIST: "connect_wallet",
/** QR code or instructions for connecting to the selected wallet */
WALLET_CONNECTION_DETAILS: "selected_wallet",
/** Link an external wallet to the logged-in account */
LINK_WALLET: "link_wallet",
};

export const CONNECT_WALLET_PAGES = {
Expand Down
141 changes: 23 additions & 118 deletions packages/modal/src/ui/containers/ConnectWallet/ConnectWallet.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { ANALYTICS_EVENTS, type ChainNamespaceType, log, type WALLET_CONNECTOR_TYPE, WALLET_CONNECTORS } from "@web3auth/no-modal";
import { FormEvent, useCallback, useContext, useEffect, useMemo, useState } from "react";
import { ANALYTICS_EVENTS, log, WALLET_CONNECTORS } from "@web3auth/no-modal";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";

import { CONNECT_WALLET_PAGES, PAGES } from "../../constants";
import { AnalyticsContext } from "../../context/AnalyticsContext";
import { useModalState } from "../../context/ModalStateContext";
import { useBodyState } from "../../context/RootContext";
import { useWidget } from "../../context/WidgetContext";
import { useWalletFiltering } from "../../hooks/useWalletFiltering";
import { ExternalButton } from "../../interfaces";
import { ConnectWalletProps } from "./ConnectWallet.type";
import ConnectWalletChainFilter from "./ConnectWalletChainFilter";
Expand All @@ -22,15 +23,31 @@ function ConnectWallet(props: ConnectWalletProps) {
const { deviceDetails, isDark, uiConfig } = useWidget();
const { walletRegistry } = uiConfig;
const { modalState, setModalState, handleShowExternalWallets, preHandleExternalWalletClick: handleExternalWalletClick } = useModalState();
const { externalWalletsConfig: config, walletConnectUri, metamaskConnectUri } = modalState;
const { walletConnectUri, metamaskConnectUri } = modalState;

const {
allUniqueButtons,
externalButtons,
totalExternalWalletsCount,
initialWalletCount,
walletSearch,
handleWalletSearch,
selectedChain,
setSelectedChain: handleChainFilterChange,
isShowAllWallets,
handleMoreWallets,
} = useWalletFiltering({
allRegistryButtons,
customConnectorButtons,
connectorVisibilityMap,
externalWalletsConfig: modalState.externalWalletsConfig,
walletRegistry,
});

const [currentPage, setCurrentPage] = useState(CONNECT_WALLET_PAGES.CONNECT_WALLET);
const [selectedWallet, setSelectedWallet] = useState(false);
const [isLoading] = useState<boolean>(false);
const [selectedButton, setSelectedButton] = useState<ExternalButton>(null);
const [walletSearch, setWalletSearch] = useState<string>("");
const [selectedChain, setSelectedChain] = useState<string>("all");
const [isShowAllWallets, setIsShowAllWallets] = useState<boolean>(false);
// Track if user came directly from Login page with a pre-selected wallet
const [isPreSelectedFromLogin, setIsPreSelectedFromLogin] = useState(false);

Expand Down Expand Up @@ -69,114 +86,6 @@ function ConnectWallet(props: ConnectWalletProps) {
return bodyState.installLinks?.show || bodyState.multiChainSelector?.show;
}, [bodyState.installLinks?.show, bodyState.multiChainSelector?.show]);

const walletDiscoverySupported = useMemo(() => {
const supported = walletRegistry && (Object.keys(walletRegistry.default || {}).length > 0 || Object.keys(walletRegistry.others || {}).length > 0);
return supported;
}, [walletRegistry]);

const allUniqueButtons = useMemo(() => {
const uniqueButtonSet = new Set();
return customConnectorButtons.concat(allRegistryButtons).filter((button) => {
if (uniqueButtonSet.has(button.name)) return false;
uniqueButtonSet.add(button.name);
return true;
});
}, [allRegistryButtons, customConnectorButtons]);

const defaultButtonKeys = useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);

const defaultButtons = useMemo(() => {
// display order: default injected buttons > custom adapter buttons > default non-injected buttons
const buttons = [
...allRegistryButtons.filter((button) => button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
...customConnectorButtons,
...allRegistryButtons.filter((button) => !button.hasInjectedWallet && defaultButtonKeys.has(button.name)),
].sort((a, b) => {
// favor MetaMask over other wallets
if (a.name === WALLET_CONNECTORS.METAMASK && b.name === WALLET_CONNECTORS.METAMASK) {
// favor installed MetaMask over non-installed MetaMask
if (a.isInstalled) return -1;
if (b.isInstalled) return 1;
// favor injected MetaMask over non-injected MetaMask
if (a.hasInjectedWallet) return -1;
if (b.hasInjectedWallet) return 1;
return 0;
}
if (a.name === WALLET_CONNECTORS.METAMASK) return -1;
if (b.name === WALLET_CONNECTORS.METAMASK) return 1;
return 0;
});

const buttonSet = new Set();
return buttons
.filter((button) => {
if (buttonSet.has(button.name)) return false;
buttonSet.add(button.name);
return true;
})
.filter((button) => selectedChain === "all" || button.chainNamespaces?.includes(selectedChain as ChainNamespaceType));
}, [allRegistryButtons, customConnectorButtons, defaultButtonKeys, selectedChain]);

const installedWalletButtons = useMemo(() => {
const visibilityMap = connectorVisibilityMap;
return Object.keys(config).reduce((acc, localConnector) => {
if (localConnector !== WALLET_CONNECTORS.WALLET_CONNECT_V2 && visibilityMap[localConnector]) {
acc.push({
name: localConnector,
displayName: config[localConnector as WALLET_CONNECTOR_TYPE].label || localConnector,
hasInjectedWallet: config[localConnector as WALLET_CONNECTOR_TYPE].isInjected,
hasWalletConnect: false,
hasInstallLinks: false,
});
}
return acc;
}, [] as ExternalButton[]);
}, [connectorVisibilityMap, config]);

const handleWalletSearch = (e: FormEvent<HTMLInputElement>) => {
const searchValue = (e.target as HTMLInputElement).value;
setWalletSearch(searchValue);
};

const handleChainFilterChange = (chain: string) => {
setSelectedChain(chain);
};

const filteredButtons = useMemo(() => {
if (walletDiscoverySupported) {
return [...allUniqueButtons.filter((button) => button.hasInjectedWallet), ...allUniqueButtons.filter((button) => !button.hasInjectedWallet)]
.sort((a, _) => (a.name === WALLET_CONNECTORS.METAMASK ? -1 : 1))
.filter((button) => selectedChain === "all" || button.chainNamespaces.includes(selectedChain as ChainNamespaceType))
.filter((button) => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
}
return installedWalletButtons;
}, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);

const externalButtons = useMemo(() => {
if (walletDiscoverySupported && !walletSearch && !isShowAllWallets) {
return defaultButtons;
}
return filteredButtons;
}, [walletDiscoverySupported, walletSearch, filteredButtons, defaultButtons, isShowAllWallets]);

const totalExternalWalletsCount = useMemo(() => filteredButtons.length, [filteredButtons]);

const initialWalletCount = useMemo(() => {
if (isShowAllWallets) return totalExternalWalletsCount;
return walletDiscoverySupported ? defaultButtons.length : installedWalletButtons.length;
}, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);

// Automatically show all wallets if there are less than or equal to 15 wallets
// also resets everytime we search causing no. of wallets to change or select different chain
useEffect(() => {
if (walletDiscoverySupported && totalExternalWalletsCount <= 15) {
// eslint-disable-next-line react-hooks/set-state-in-effect -- intentional
setIsShowAllWallets(true);
} else {
setIsShowAllWallets(false);
}
}, [walletDiscoverySupported, selectedChain, totalExternalWalletsCount]);

// Handle pre-selected wallet from Login page (e.g., MetaMask QR code flow)
useEffect(() => {
if (bodyState.preSelectedWallet) {
Expand Down Expand Up @@ -262,10 +171,6 @@ function ConnectWallet(props: ConnectWalletProps) {
}
};

const handleMoreWallets = () => {
setIsShowAllWallets(true);
};

const qrCodeValue = useMemo(() => {
if (!selectedWallet) return null;

Expand Down
9 changes: 3 additions & 6 deletions packages/modal/src/ui/containers/ConnectWallet/ConnectWalletList/ConnectWalletList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,12 +129,9 @@ function ConnectWalletList(props: ConnectWalletListProps) {
return (
<>
<ul
className={cn(
"w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container -w3a--mx-5 w3a--pl-5 w3a--pr-1",
{
"w3a--h-[328px]": !showMoreWalletsButton,
}
)}
className={cn("w3a--overflow-y-auto w3a--flex w3a--flex-col w3a--gap-y-2 w3a--h-[280px] w3a--social-container -w3a--mx-5 w3a--px-5", {
"w3a--h-[328px]": !showMoreWalletsButton,
})}
>
{externalButtons.length === 0 ? (
<NoWalletsFound />
Expand Down
Loading
Loading