diff --git a/packages/stateful/components/WalletProvider.tsx b/packages/stateful/components/WalletProvider.tsx index fdfa28cfb8..fa36410d9e 100644 --- a/packages/stateful/components/WalletProvider.tsx +++ b/packages/stateful/components/WalletProvider.tsx @@ -22,7 +22,9 @@ import { useRef, } from 'react' import { useTranslation } from 'react-i18next' +import { useRecoilValue } from 'recoil' +import { mountedInBrowserAtom } from '@dao-dao/state/recoil' import { Web3AuthPrompt } from '@dao-dao/types' import { CHAIN_ENDPOINTS, @@ -206,32 +208,41 @@ const InnerWalletProvider = ({ children }: PropsWithChildren<{}>) => { }, [chain.chain_id, walletManager]) // Auto-connect to Keplr mobile web if in that context. - const attemptedKeplrMobileWebConnectionRef = useRef(false) + const mountedInBrowser = useRecoilValue(mountedInBrowserAtom) + const connectingKeplrMobileWebConnectionRef = useRef(false) useEffect(() => { if ( typeof window === 'undefined' || + !mountedInBrowser || !isWalletDisconnected || - attemptedKeplrMobileWebConnectionRef.current + connectingKeplrMobileWebConnectionRef.current ) { return } - // Don't try again. - attemptedKeplrMobileWebConnectionRef.current = true + // Only try once at a time. + connectingKeplrMobileWebConnectionRef.current = true // Connect. ;(async () => { - const keplr = await ( - await import('@keplr-wallet/stores') - ).getKeplrFromWindow() - const keplrWallet = walletRepo.wallets.find( - (wallet) => wallet.walletInfo.name === 'keplr-extension' - ) - if (keplr && keplrWallet && keplr.mode === 'mobile-web') { - keplrWallet.connect() + try { + const keplr = await ( + await import('@keplr-wallet/stores') + ).getKeplrFromWindow() + const keplrWallet = walletRepo.wallets.find( + (wallet) => + wallet.walletInfo.name === keplrExtensionWallets[0].walletInfo.name + ) + if (keplr && keplrWallet && keplr.mode === 'mobile-web') { + await keplrWallet.connect() + } + } catch (err) { + console.error('Keplr mobile web connection failed', err) + } finally { + connectingKeplrMobileWebConnectionRef.current = false } })() - }, [isWalletDisconnected, walletRepo]) + }, [isWalletDisconnected, mountedInBrowser, walletRepo]) return <>{children} } diff --git a/packages/stateful/components/wallet/WalletUiConnected.tsx b/packages/stateful/components/wallet/WalletUiConnected.tsx index 828fe3f21a..7f04c097fc 100644 --- a/packages/stateful/components/wallet/WalletUiConnected.tsx +++ b/packages/stateful/components/wallet/WalletUiConnected.tsx @@ -89,7 +89,8 @@ export const WalletUiConnected = ({ {/* In Keplr mobile web, the wallet is force connected and cannot be logged out of, so only show the log out button for all other options. */} - {(walletRepo?.current.walletName !== keplrExtensionWallet.walletName || + {(walletRepo?.current.walletInfo.name !== + keplrExtensionWallet.walletInfo.name || !(walletRepo?.current.client instanceof KeplrClient) || walletRepo?.current.client.client.mode !== 'mobile-web') && (