Watch onboard modal

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