diff --git a/src/hooks/wallets/useOnboard.ts b/src/hooks/wallets/useOnboard.ts index b01455984c..d244e754e6 100644 --- a/src/hooks/wallets/useOnboard.ts +++ b/src/hooks/wallets/useOnboard.ts @@ -93,6 +93,13 @@ const isMobile = () => /iPhone|iPad|iPod|Android/i.test(navigator.userAgent) // Detect injected wallet const hasInjectedWallet = () => typeof window !== 'undefined' && !!window?.ethereum +// Hide the Social login button +const hideSocialLoginButton = (onboardRoot: ShadowRoot) => { + const walletButtons = onboardRoot.querySelectorAll('.wallet-button-container') + const socialButton = Array.from(walletButtons || []).find((el) => /Social Login/.test(el.textContent || '')) + socialButton?.remove() +} + // `connectWallet` is called when connecting/switching wallets and on pairing `connect` event (when prev. session connects) // This re-entrant lock prevents multiple `connectWallet`/tracking calls that would otherwise occur for pairing module let isConnecting = false @@ -178,15 +185,6 @@ export const useInitOnboard = () => { autoSelect: { label: E2E_WALLET_NAME, disableModals: true }, }) } - - // Hide the social login button - { - const onboardRoot = document.querySelector('onboard-v2')?.shadowRoot - if (!onboardRoot) return - const walletButtons = onboardRoot?.querySelectorAll('.wallet-button-container') - const socialButton = Array.from(walletButtons).find((el) => /Social Login/.test(el.textContent || '')) - socialButton?.remove() - } }) }, [chain, onboard]) @@ -211,6 +209,20 @@ export const useInitOnboard = () => { walletSubscription.unsubscribe() } }, [onboard]) + + // Hide social login when onboard pops up + useEffect(() => { + if (!onboard) return + const onboardRoot = document.querySelector('onboard-v2')?.shadowRoot + if (!onboardRoot) return + + const observer = new MutationObserver(() => hideSocialLoginButton(onboardRoot)) + observer.observe(onboardRoot, { childList: true }) + + return () => { + observer.disconnect() + } + }, [onboard]) } export default useStore