From 3fd8eaeb345364c724a9f92d8a98901c785fd3b5 Mon Sep 17 00:00:00 2001 From: Braian Mellor Date: Tue, 10 Mar 2026 13:32:54 -0300 Subject: [PATCH] fix: show WalletConnect instead of MetaMask on mobile MetaMask browser for non-FULL sign-in modes --- src/hooks/useWalletOptions.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/hooks/useWalletOptions.ts b/src/hooks/useWalletOptions.ts index 2c94572f..50612bd8 100644 --- a/src/hooks/useWalletOptions.ts +++ b/src/hooks/useWalletOptions.ts @@ -46,16 +46,22 @@ export const useWalletOptions = ({ connectionOptions, signInOptionsMode }: UseWa // For ONE and TWO modes: determine which wallet options to show const hasEthereumProvider = !!window.ethereum + const isMobileMetaMaskBrowser = + hasEthereumProvider && !!(window.ethereum as { isMetaMask?: boolean })?.isMetaMask && /Mobi|Android/i.test(navigator.userAgent) const googleOption = allWalletOptions.find(opt => opt === ConnectionOptionType.GOOGLE) const metamaskOption = allWalletOptions.find(opt => opt === ConnectionOptionType.METAMASK) + const walletConnectOption = allWalletOptions.find(opt => opt === ConnectionOptionType.WALLET_CONNECT) - // TWO mode: Show Google + MetaMask (if Ethereum provider exists) + // On mobile MetaMask browser, prefer WalletConnect over MetaMask + const preferredWalletOption = isMobileMetaMaskBrowser && walletConnectOption ? walletConnectOption : metamaskOption + + // TWO mode: Show Google + wallet option (if Ethereum provider exists) if (signInOptionsMode === SignInOptionsMode.TWO) { - if (hasEthereumProvider && metamaskOption) { + if (hasEthereumProvider && preferredWalletOption) { return { firstWalletOption: googleOption, - secondWalletOption: metamaskOption, - remainingWalletOptions: allWalletOptions.filter(opt => opt !== googleOption && opt !== metamaskOption) + secondWalletOption: preferredWalletOption, + remainingWalletOptions: allWalletOptions.filter(opt => opt !== googleOption && opt !== preferredWalletOption) } } @@ -67,12 +73,12 @@ export const useWalletOptions = ({ connectionOptions, signInOptionsMode }: UseWa } } - // ONE mode: Show MetaMask (if Ethereum provider exists) or nothing - if (hasEthereumProvider && metamaskOption) { + // ONE mode: Show wallet option (if Ethereum provider exists) or nothing + if (hasEthereumProvider && preferredWalletOption) { return { - firstWalletOption: metamaskOption, + firstWalletOption: preferredWalletOption, secondWalletOption: undefined, - remainingWalletOptions: allWalletOptions.filter(opt => opt !== metamaskOption) + remainingWalletOptions: allWalletOptions.filter(opt => opt !== preferredWalletOption) } }