fix: preserve Safe App connection after new EOA connections (balancer…

…#1011)

lib/modules/web3/UserAccountProvider.tsx

@@ -11,6 +11,7 @@ import { setTag, setUser } from '@sentry/nextjs'
 import { config, isProd } from '@/lib/config/app.config'
 import { captureError, ensureError } from '@/lib/shared/utils/errors'
 import { useIsMounted } from '@/lib/shared/hooks/useIsMounted'
+import { useSafeAppConnectionGuard } from './useSafeAppConnectionGuard'
 
 async function isAuthorizedAddress(address: Address): Promise<boolean> {
   try {
@@ -71,6 +72,8 @@ export function _useUserAccount() {
     isBlocked,
   }
 
+  useSafeAppConnectionGuard(result.connector, result.chainId)
+
   useEffect(() => {
     if (result.userAddress) {
       setUser({

lib/modules/web3/useSafeAppConnectionGuard.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Connector, useConnect } from 'wagmi'
+import { useEffect } from 'react'
+
+/*
+  If the app is running as a Safe App and an EOA connection is created in another tab,
+  this hook will ensure that the Safe App tab keeps connected to the Safe account.
+*/
+export function useSafeAppConnectionGuard(newConnector?: Connector, chainId?: number) {
+  const { connect, connectors } = useConnect()
+  useEffect(() => {
+    const safeConnector = connectors.find(c => c.id === 'safe')
+    if (newConnector && newConnector?.id !== 'safe' && safeConnector) {
+      connect({ chainId, connector: safeConnector })
+    }
+  }, [newConnector])
+}