fix: Only instantiate service once, extract address book function

src/hooks/wallets/mpc/useMPC.ts

@@ -5,6 +5,7 @@ import { SOCIAL_WALLET_OPTIONS } from '@/services/mpc/config'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { type OnboardAPI } from '@web3-onboard/core'
+import { CHAIN_NAMESPACES } from '@web3auth/base'
 import type { Web3AuthMPCCoreKit } from '@web3auth/mpc-core-kit'
 import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
 import { getRpcServiceUrl } from '../web3'
@@ -14,7 +15,7 @@ const { getStore, setStore, useStore } = new ExternalStore<Web3AuthMPCCoreKit>()
 export const initMPC = async (chain: ChainInfo, onboard: OnboardAPI) => {
   const chainConfig = {
     chainId: `0x${Number(chain.chainId).toString(16)}`,
-    chainNamespace: 'eip155',
+    chainNamespace: CHAIN_NAMESPACES.EIP155,
     rpcTarget: getRpcServiceUrl(chain.rpcUri),
     displayName: chain.chainName,
     blockExplorer: new URL(chain.blockExplorerUriTemplate.address).origin,

src/hooks/wallets/mpc/useRehydrateSocialWallet.ts

@@ -5,7 +5,9 @@ import useOnboard, { connectWallet } from '@/hooks/wallets/useOnboard'
 import { ONBOARD_MPC_MODULE_LABEL } from '@/services/mpc/SocialLoginModule'
 import { useAppDispatch } from '@/store'
 import { upsertAddressBookEntry } from '@/store/addressBookSlice'
-import { useEffect } from 'react'
+import { type WalletState } from '@web3-onboard/core'
+import { type UserInfo } from '@web3auth/mpc-core-kit'
+import { useCallback, useEffect } from 'react'
 import { checksumAddress } from '@/utils/addresses'
 
 const useRehydrateSocialWallet = () => {
@@ -15,6 +17,22 @@ const useRehydrateSocialWallet = () => {
   const addressBook = useAddressBook()
   const dispatch = useAppDispatch()
 
+  const updateAddressBook = useCallback(
+    (userInfo: UserInfo | undefined, wallets: WalletState[] | undefined | void) => {
+      if (!userInfo || !wallets || !currentChainId || wallets.length === 0) return
+
+      const address = wallets[0].accounts[0]?.address
+      if (address) {
+        const signerAddress = checksumAddress(address)
+        if (addressBook[signerAddress] === undefined) {
+          const email = userInfo.email
+          dispatch(upsertAddressBookEntry({ address: signerAddress, chainId: currentChainId, name: email }))
+        }
+      }
+    },
+    [addressBook, currentChainId, dispatch],
+  )
+
   useEffect(() => {
     if (!chain || !onboard) return
 
@@ -37,23 +55,14 @@ const useRehydrateSocialWallet = () => {
 
         // If the signer is not in the address book => add the user's email as name
         const userInfo = socialWalletService?.getUserInfo()
-        if (userInfo && wallets && currentChainId && wallets.length > 0) {
-          const address = wallets[0].accounts[0]?.address
-          if (address) {
-            const signerAddress = checksumAddress(address)
-            if (addressBook[signerAddress] === undefined) {
-              const email = userInfo.email
-              dispatch(upsertAddressBookEntry({ address: signerAddress, chainId: currentChainId, name: email }))
-            }
-          }
-        }
+        updateAddressBook(userInfo, wallets)
       }
 
       socialWalletService.setOnConnect(onConnect)
     }
 
     void rehydrate()
-  }, [addressBook, chain, currentChainId, dispatch, onboard])
+  }, [chain, onboard, updateAddressBook])
 }
 
 export default useRehydrateSocialWallet

src/hooks/wallets/mpc/useSocialWallet.ts

@@ -7,7 +7,7 @@ const { getStore, setStore, useStore } = new ExternalStore<ISocialWalletService>
 export const initSocialWallet = async (mpcCoreKit: Web3AuthMPCCoreKit) => {
   const SocialWalletService = (await import('@/services/mpc/SocialWalletService')).default
   const socialWalletService = new SocialWalletService(mpcCoreKit)
-  setStore(new SocialWalletService(mpcCoreKit))
+  setStore(socialWalletService)
 
   return socialWalletService
 }