From a73086fbbafbfc404eafef73edccc8cf53c39a71 Mon Sep 17 00:00:00 2001
From: katspaugh <katspaugh@gmail.com>
Date: Fri, 3 Nov 2023 13:36:51 +0100
Subject: [PATCH] Move to useSocialWallet

---
 src/hooks/wallets/mpc/useSocialWallet.ts | 24 ++++++++++++++++++++++++
 src/hooks/wallets/useOnboard.ts          | 21 ---------------------
 2 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/hooks/wallets/mpc/useSocialWallet.ts b/src/hooks/wallets/mpc/useSocialWallet.ts
index d98998ffdd..4d2dd700ef 100644
--- a/src/hooks/wallets/mpc/useSocialWallet.ts
+++ b/src/hooks/wallets/mpc/useSocialWallet.ts
@@ -13,6 +13,23 @@ import useMpc from './useMPC'
 
 const { getStore, setStore, useStore } = new ExternalStore<ISocialWalletService>()
 
+// Listen to onboard modal open and hide the social login button
+const hideOnboardButton = () => {
+  const onboardRoot = document.querySelector('onboard-v2')?.shadowRoot
+  if (!onboardRoot) return
+
+  const hideSocialLoginButton = () => {
+    const walletButtons = onboardRoot.querySelectorAll('.wallet-button-container') || []
+    const socialButton = Array.from(walletButtons).find((el) => el.textContent?.includes(ONBOARD_MPC_MODULE_LABEL))
+    socialButton?.remove()
+  }
+
+  const observer = new MutationObserver(hideSocialLoginButton)
+  observer.observe(onboardRoot, { childList: true })
+
+  return () => observer.disconnect()
+}
+
 export const useInitSocialWallet = () => {
   const mpcCoreKit = useMpc()
   const onboard = useOnboard()
@@ -54,6 +71,13 @@ export const useInitSocialWallet = () => {
       setStore(new SocialWalletService(mpcCoreKit))
     }
   }, [mpcCoreKit])
+
+  // Hide social login when onboard pops up
+  // @FIXME the button should work but atm it doesn't
+  useEffect(() => {
+    if (!onboard) return
+    return hideOnboardButton()
+  }, [onboard])
 }
 
 export const getSocialWalletService = getStore
diff --git a/src/hooks/wallets/useOnboard.ts b/src/hooks/wallets/useOnboard.ts
index 9ad5e54e55..4d8f2c1ab9 100644
--- a/src/hooks/wallets/useOnboard.ts
+++ b/src/hooks/wallets/useOnboard.ts
@@ -93,13 +93,6 @@ 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) => el.textContent?.includes(ONBOARD_MPC_MODULE_LABEL))
-  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
@@ -209,20 +202,6 @@ 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