fix: Remove Eager Connection Refactor (#7391)

* Revert "feat: account suspense (#7337)"

This reverts commit ed87df62694c2c07518b04edf906d022f0023b71.

* Revert "feat: lazy-load safe only if iframed (#7360)"

This reverts commit b9fc65ec9a15e32fb6eb12d53cc45b8778854be9.

* Revert "feat: eagerly connect outside of react lifecycle (#7334)"

This reverts commit 54880d201a3629988868dcd80c87a7794876cf44.

CODEOWNERS

@@ -0,0 +1 @@
+* @uniswap/web-admins

cypress/support/commands.ts

@@ -53,6 +53,7 @@ Cypress.Commands.overwrite(
 
             setInitialUserState(win, {
               ...initialState,
+              hideUniswapWalletBanner: true,
               ...CONNECTED_WALLET_USER_STATE,
               ...(options?.userState ?? {}),
             })

cypress/utils/user-state.ts

@@ -1,4 +1,3 @@
-import { connectionMetaKey } from '../../src/connection/meta'
 import { ConnectionType } from '../../src/connection/types'
 import { UserState } from '../../src/state/user/reducer'
 
@@ -11,30 +10,23 @@ export const DISCONNECTED_WALLET_USER_STATE: Partial<UserState> = { selectedWall
  * Other persisted slices are not set, so they will be filled with their respective initial values
  * when the app runs.
  */
-export function setInitialUserState(win: Cypress.AUTWindow, state: UserState) {
+export function setInitialUserState(win: Cypress.AUTWindow, initialUserState: any) {
-  // Selected wallet should also be reflected in localStorage, so that eager connections work.
-  if (state.selectedWallet) {
-    win.localStorage.setItem(
-      connectionMetaKey,
-      JSON.stringify({
-        type: state.selectedWallet,
-      })
-    )
-  }
-
   win.indexedDB.deleteDatabase('redux')
+
   const dbRequest = win.indexedDB.open('redux')
+
   dbRequest.onsuccess = function () {
     const db = dbRequest.result
     const transaction = db.transaction('keyvaluepairs', 'readwrite')
     const store = transaction.objectStore('keyvaluepairs')
     store.put(
       {
-        user: state,
+        user: initialUserState,
       },
       'persist:interface'
     )
   }
+
   dbRequest.onupgradeneeded = function () {
     const db = dbRequest.result
     db.createObjectStore('keyvaluepairs')

patches/@web3-react+gnosis-safe+8.2.3.patch

@@ -1,15 +0,0 @@
-diff --git a/node_modules/@web3-react/gnosis-safe/dist/index.js b/node_modules/@web3-react/gnosis-safe/dist/index.js
-index 015a33c..4cd7cde 100644
---- a/node_modules/@web3-react/gnosis-safe/dist/index.js
-+++ b/node_modules/@web3-react/gnosis-safe/dist/index.js
-@@ -68,8 +68,8 @@ class GnosisSafe extends types_1.Connector {
-             if (this.eagerConnection)
-                 return;
-             // kick off import early to minimize waterfalls
--            const SafeAppProviderPromise = Promise.resolve().then(() => __importStar(require('@safe-global/safe-apps-provider'))).then(({ SafeAppProvider }) => SafeAppProvider);
--            yield (this.eagerConnection = Promise.resolve().then(() => __importStar(require('@safe-global/safe-apps-sdk'))).then((m) => __awaiter(this, void 0, void 0, function* () {
-+            const SafeAppProviderPromise = Promise.resolve().then(async () => __importStar(await import('@safe-global/safe-apps-provider'))).then(({ SafeAppProvider }) => SafeAppProvider);
-+            yield (this.eagerConnection = Promise.resolve().then(async () => __importStar(await import('@safe-global/safe-apps-sdk'))).then((m) => __awaiter(this, void 0, void 0, function* () {
-                 this.sdk = new m.default(this.options);
-                 const safe = yield Promise.race([
-                     this.sdk.safe.getInfo(),

src/components/Web3Provider/index.test.tsx

@@ -5,6 +5,7 @@ import { Provider as EIP1193Provider } from '@web3-react/types'
 import { sendAnalyticsEvent, user } from 'analytics'
 import { connections, getConnection } from 'connection'
 import { Connection, ConnectionType } from 'connection/types'
+import useEagerlyConnect from 'hooks/useEagerlyConnect'
 import { Provider } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
 import store from 'state'
@@ -33,6 +34,7 @@ jest.mock('connection', () => {
 
   return { ConnectionType, getConnection: jest.fn(), connections: [mockConnection] }
 })
+jest.mock('hooks/useEagerlyConnect', () => jest.fn())
 
 jest.unmock('@web3-react/core')
 
@@ -58,6 +60,7 @@ describe('Web3Provider', () => {
     await act(async () => {
       await result
     })
+    expect(useEagerlyConnect).toHaveBeenCalled()
     expect(result).toBeTruthy()
   })
 

src/components/Web3Provider/index.tsx

@@ -6,6 +6,7 @@ import { connections, getConnection } from 'connection'
 import { isSupportedChain } from 'constants/chains'
 import { RPC_PROVIDERS } from 'constants/providers'
 import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
+import useEagerlyConnect from 'hooks/useEagerlyConnect'
 import usePrevious from 'hooks/usePrevious'
 import { ReactNode, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
@@ -14,6 +15,7 @@ import { getCurrentPageFromLocation } from 'utils/urlRoutes'
 import { getWalletMeta } from 'utils/walletMeta'
 
 export default function Web3Provider({ children }: { children: ReactNode }) {
+  useEagerlyConnect()
   const connectors = connections.map<[Connector, Web3ReactHooks]>(({ hooks, connector }) => [connector, hooks])
 
   return (

src/components/Web3Status/index.tsx

@@ -4,19 +4,17 @@ import { useWeb3React } from '@web3-react/core'
 import { sendAnalyticsEvent, TraceEvent } from 'analytics'
 import PortfolioDrawer, { useAccountDrawer } from 'components/AccountDrawer'
 import { usePendingActivity } from 'components/AccountDrawer/MiniPortfolio/Activity/hooks'
-import Loader, { LoaderV3 } from 'components/Icons/LoadingSpinner'
+import Loader from 'components/Icons/LoadingSpinner'
 import { IconWrapper } from 'components/Identicon/StatusIcon'
 import PrefetchBalancesWrapper from 'components/PrefetchBalancesWrapper/PrefetchBalancesWrapper'
 import { getConnection } from 'connection'
-import { useConnectionReady } from 'connection/eagerlyConnect'
-import { ConnectionMeta, getPersistedConnectionMeta, setPersistedConnectionMeta } from 'connection/meta'
 import useENSName from 'hooks/useENSName'
 import useLast from 'hooks/useLast'
 import { navSearchInputVisibleSize } from 'hooks/useScreenSize'
 import { Portal } from 'nft/components/common/Portal'
 import { useIsNftClaimAvailable } from 'nft/hooks/useIsNftClaimAvailable'
 import { darken } from 'polished'
-import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useCallback } from 'react'
 import { useAppSelector } from 'state/hooks'
 import styled from 'styled-components'
 import { colors } from 'theme/colors'
@@ -96,15 +94,8 @@ const Web3StatusConnected = styled(Web3StatusGeneric)<{
   }
 `
 
-const Web3StatusConnecting = styled(Web3StatusConnected)`
+const AddressAndChevronContainer = styled.div`
-  &:disabled {
-    opacity: 1;
-  }
-`
-
-const AddressAndChevronContainer = styled.div<{ loading?: boolean }>`
   display: flex;
-  opacity: ${({ loading, theme }) => loading && theme.opacity.disabled};
 
   @media only screen and (max-width: ${navSearchInputVisibleSize}px) {
     display: none;
@@ -137,11 +128,8 @@ const StyledConnectButton = styled.button`
 function Web3StatusInner() {
   const switchingChain = useAppSelector((state) => state.wallets.switchingChain)
   const ignoreWhileSwitchingChain = useCallback(() => !switchingChain, [switchingChain])
-  const connectionReady = useConnectionReady()
+  const { account, connector } = useLast(useWeb3React(), ignoreWhileSwitchingChain)
-  const activeWeb3 = useWeb3React()
+  const { ENSName } = useENSName(account)
-  const lastWeb3 = useLast(useWeb3React(), ignoreWhileSwitchingChain)
-  const { account, connector } = useMemo(() => (activeWeb3.account ? activeWeb3 : lastWeb3), [activeWeb3, lastWeb3])
-  const { ENSName, loading: ENSLoading } = useENSName(account)
   const connection = getConnection(connector)
 
   const [, toggleAccountDrawer] = useAccountDrawer()
@@ -153,48 +141,6 @@ function Web3StatusInner() {
 
   const { hasPendingActivity, pendingActivityCount } = usePendingActivity()
 
-  // Display a loading state while initializing the connection, based on the last session's persisted connection.
-  // The connection will go through three states:
-  // - startup:       connection is not ready
-  // - initializing:  account is available, but ENS (if preset on the persisted initialMeta) is still loading
-  // - initialized:   account and ENS are available
-  // Subsequent connections are always considered initialized, and will not display startup/initializing states.
-  const initialConnection = useRef(getPersistedConnectionMeta())
-  const isConnectionInitializing = Boolean(
-    initialConnection.current?.address === account && initialConnection.current?.ENSName && ENSLoading
-  )
-  const isConnectionInitialized = connectionReady && !isConnectionInitializing
-  // Clear the initial connection once initialized so it does not interfere with subsequent connections.
-  useEffect(() => {
-    if (isConnectionInitialized) {
-      initialConnection.current = undefined
-    }
-  }, [isConnectionInitialized])
-  // Persist the connection if it changes, so it can be used to initialize the next session's connection.
-  useEffect(() => {
-    if (account || ENSName) {
-      const meta: ConnectionMeta = {
-        type: connection.type,
-        address: account,
-        ENSName: ENSName ?? undefined,
-      }
-      setPersistedConnectionMeta(meta)
-    }
-  }, [ENSName, account, connection.type])
-
-  if (!isConnectionInitialized) {
-    return (
-      <Web3StatusConnecting disabled={!isConnectionInitializing} onClick={handleWalletDropdownClick}>
-        <IconWrapper size={24}>
-          <LoaderV3 size="24px" />
-        </IconWrapper>
-        <AddressAndChevronContainer loading={true}>
-          <Text>{initialConnection.current?.ENSName ?? shortenAddress(initialConnection.current?.address)}</Text>
-        </AddressAndChevronContainer>
-      </Web3StatusConnecting>
-    )
-  }
-
   if (account) {
     return (
       <TraceEvent
@@ -221,7 +167,7 @@ function Web3StatusInner() {
             </RowBetween>
           ) : (
             <AddressAndChevronContainer>
-              <Text>{ENSName ?? shortenAddress(account)}</Text>
+              <Text>{ENSName || shortenAddress(account)}</Text>
             </AddressAndChevronContainer>
           )}
         </Web3StatusConnected>

src/connection/eagerlyConnect.ts

@@ -1,70 +0,0 @@
-import { Connector } from '@web3-react/types'
-import { useSyncExternalStore } from 'react'
-
-import { getConnection, gnosisSafeConnection, networkConnection } from './index'
-import { deletePersistedConnectionMeta, getPersistedConnectionMeta } from './meta'
-import { ConnectionType } from './types'
-
-class FailedToConnect extends Error {}
-
-let connectionReady: Promise<void> | true = true
-
-export function useConnectionReady() {
-  return useSyncExternalStore(
-    (onStoreChange) => {
-      if (connectionReady instanceof Promise) {
-        connectionReady.finally(onStoreChange)
-      }
-      return () => undefined
-    },
-    () => connectionReady === true
-  )
-}
-
-async function connect(connector: Connector, type: ConnectionType) {
-  performance.mark(`web3:connect:${type}:start`)
-  try {
-    if (connector.connectEagerly) {
-      await connector.connectEagerly()
-    } else {
-      await connector.activate()
-    }
-    return true
-  } catch (error) {
-    console.debug(`web3-react eager connection error: ${error}`)
-    return false
-  } finally {
-    performance.measure(`web3:connect:${type}`, `web3:connect:${type}:start`)
-  }
-}
-
-// The Safe connector will only work from safe.global, which iframes;
-// it is only necessary to try (and to load all the deps) if we are in an iframe.
-if (window !== window.parent) {
-  connect(gnosisSafeConnection.connector, ConnectionType.GNOSIS_SAFE)
-}
-
-connect(networkConnection.connector, ConnectionType.NETWORK)
-
-// Get the persisted wallet type from the last session.
-const meta = getPersistedConnectionMeta()
-if (meta?.type) {
-  const selectedConnection = getConnection(meta.type)
-  if (selectedConnection) {
-    connectionReady = connect(selectedConnection.connector, meta.type)
-      .then((connected) => {
-        if (!connected) throw new FailedToConnect()
-      })
-      .catch((error) => {
-        // Clear the persisted wallet type if it failed to connect.
-        deletePersistedConnectionMeta()
-        // Log it if it threw an unknown error.
-        if (!(error instanceof FailedToConnect)) {
-          console.error(error)
-        }
-      })
-      .finally(() => {
-        connectionReady = true
-      })
-  }
-}

src/connection/meta.ts

@@ -1,37 +0,0 @@
-import { ConnectionType, toConnectionType } from './types'
-
-export interface ConnectionMeta {
-  type: ConnectionType
-  address?: string
-  ENSName?: string
-}
-
-export const connectionMetaKey = 'connection_meta'
-
-export function getPersistedConnectionMeta(): ConnectionMeta | undefined {
-  try {
-    const value = localStorage.getItem(connectionMetaKey)
-    if (value) {
-      const raw = JSON.parse(value) as ConnectionMeta
-      const connectionType = toConnectionType(raw.type)
-      if (connectionType) {
-        return {
-          type: connectionType,
-          address: raw.address,
-          ENSName: raw.ENSName,
-        }
-      }
-    }
-  } catch (e) {
-    console.warn(e)
-  }
-  return
-}
-
-export function setPersistedConnectionMeta(meta: ConnectionMeta) {
-  localStorage.setItem(connectionMetaKey, JSON.stringify(meta))
-}
-
-export function deletePersistedConnectionMeta() {
-  localStorage.removeItem(connectionMetaKey)
-}

src/connection/types.ts

@@ -11,14 +11,6 @@ export enum ConnectionType {
   GNOSIS_SAFE = 'GNOSIS_SAFE',
 }
 
-export function toConnectionType(value = ''): ConnectionType | undefined {
-  if (Object.keys(ConnectionType).includes(value)) {
-    return value as ConnectionType
-  } else {
-    return undefined
-  }
-}
-
 export interface Connection {
   getName(): string
   connector: Connector

src/hooks/useENSName.ts

@@ -34,12 +34,11 @@ export default function useENSName(address?: string): { ENSName: string | null;
   const checkedName = address === fwdAddr?.address ? name : null
 
   const changed = debouncedAddress !== address
-  const loading = changed || resolverAddress.loading || nameCallRes.loading || fwdAddr.loading
   return useMemo(
     () => ({
       ENSName: changed ? null : checkedName,
-      loading,
+      loading: changed || resolverAddress.loading || nameCallRes.loading,
     }),
-    [changed, checkedName, loading]
+    [changed, nameCallRes.loading, checkedName, resolverAddress.loading]
   )
 }

src/hooks/useEagerlyConnect.ts

@@ -0,0 +1,47 @@
+import { Connector } from '@web3-react/types'
+import { gnosisSafeConnection, networkConnection } from 'connection'
+import { getConnection } from 'connection'
+import { useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from 'state/hooks'
+import { updateSelectedWallet } from 'state/user/reducer'
+
+import { useStateRehydrated } from './useStateRehydrated'
+
+async function connect(connector: Connector) {
+  try {
+    if (connector.connectEagerly) {
+      await connector.connectEagerly()
+    } else {
+      await connector.activate()
+    }
+  } catch (error) {
+    console.debug(`web3-react eager connection error: ${error}`)
+  }
+}
+
+export default function useEagerlyConnect() {
+  const dispatch = useAppDispatch()
+
+  const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
+  const rehydrated = useStateRehydrated()
+
+  useEffect(() => {
+    try {
+      connect(gnosisSafeConnection.connector)
+      connect(networkConnection.connector)
+
+      if (!selectedWallet) return
+      const selectedConnection = getConnection(selectedWallet)
+
+      if (selectedConnection) {
+        connect(selectedConnection.connector)
+      }
+    } catch {
+      // only clear the persisted wallet type if it failed to connect.
+      if (rehydrated) {
+        dispatch(updateSelectedWallet({ wallet: undefined }))
+      }
+      return
+    }
+  }, [dispatch, rehydrated, selectedWallet])
+}

src/index.tsx

@@ -2,7 +2,6 @@ import '@reach/dialog/styles.css'
 import 'inter-ui'
 import 'polyfills'
 import 'tracing'
-import 'connection/eagerlyConnect'
 
 import { ApolloProvider } from '@apollo/client'
 import { FeatureFlagsProvider } from 'featureFlags'

src/pages/Swap/index.tsx

@@ -29,7 +29,6 @@ import SwapDetailsDropdown from 'components/swap/SwapDetailsDropdown'
 import SwapHeader from 'components/swap/SwapHeader'
 import { SwitchLocaleLink } from 'components/SwitchLocaleLink'
 import TokenSafetyModal from 'components/TokenSafety/TokenSafetyModal'
-import { useConnectionReady } from 'connection/eagerlyConnect'
 import { getChainInfo } from 'constants/chainInfo'
 import { asSupportedChain, isSupportedChain } from 'constants/chains'
 import { getSwapCurrencyId, TOKEN_SHORTHANDS } from 'constants/tokens'
@@ -184,7 +183,6 @@ export function Swap({
   onCurrencyChange?: (selected: Pick<SwapState, Field.INPUT | Field.OUTPUT>) => void
   disableTokenInputs?: boolean
 }) {
-  const connectionReady = useConnectionReady()
   const { account, chainId: connectedChainId, connector } = useWeb3React()
   const trace = useTrace()
 
@@ -734,7 +732,7 @@ export function Swap({
             <ButtonPrimary $borderRadius="16px" disabled={true}>
               <Trans>Connecting to {getChainInfo(switchingChain)?.label}</Trans>
             </ButtonPrimary>
-          ) : connectionReady && !account ? (
+          ) : !account ? (
             <TraceEvent
               events={[BrowserEvent.onClick]}
               name={InterfaceEventName.CONNECT_WALLET_BUTTON_CLICKED}

src/setupTests.ts

@@ -74,12 +74,6 @@ jest.mock('@web3-react/core', () => {
   }
 })
 
-jest.mock('connection/eagerlyConnect', () => {
-  return {
-    useConnectionReady: () => true,
-  }
-})
-
 jest.mock('state/routing/slice', () => {
   const routingSlice = jest.requireActual('state/routing/slice')
   return {

src/state/swap/hooks.tsx

@@ -1,7 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { ChainId, Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { useWeb3React } from '@web3-react/core'
-import { useConnectionReady } from 'connection/eagerlyConnect'
 import { useFotAdjustmentsEnabled } from 'featureFlags/flags/fotAdjustments'
 import useAutoSlippageTolerance from 'hooks/useAutoSlippageTolerance'
 import { useDebouncedTrade } from 'hooks/useDebouncedTrade'
@@ -169,12 +168,11 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine
   // slippage amount used to submit the trade
   const allowedSlippage = uniswapXAutoSlippage ?? classicAllowedSlippage
 
-  const connectionReady = useConnectionReady()
   const inputError = useMemo(() => {
     let inputError: ReactNode | undefined
 
     if (!account) {
-      inputError = connectionReady ? <Trans>Connect Wallet</Trans> : <Trans>Connecting Wallet...</Trans>
+      inputError = <Trans>Connect Wallet</Trans>
     }
 
     if (!currencies[Field.INPUT] || !currencies[Field.OUTPUT]) {
@@ -202,7 +200,7 @@ export function useDerivedSwapInfo(state: SwapState, chainId: ChainId | undefine
     }
 
     return inputError
-  }, [account, currencies, parsedAmount, to, currencyBalances, trade?.trade, allowedSlippage, connectionReady])
+  }, [account, currencies, parsedAmount, to, currencyBalances, trade.trade, allowedSlippage])
 
   return useMemo(
     () => ({

src/state/user/reducer.ts

@@ -1,5 +1,4 @@
 import { createSlice } from '@reduxjs/toolkit'
-import { deletePersistedConnectionMeta, getPersistedConnectionMeta } from 'connection/meta'
 
 import { ConnectionType } from '../../connection/types'
 import { SupportedLocale } from '../../constants/locales'
@@ -7,7 +6,6 @@ import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants/misc'
 import { RouterPreference } from '../../state/routing/types'
 import { SerializedPair, SerializedToken, SlippageTolerance } from './types'
 
-const selectedWallet = getPersistedConnectionMeta()?.type
 const currentTimestamp = () => new Date().getTime()
 
 export interface UserState {
@@ -61,7 +59,7 @@ function pairKey(token0Address: string, token1Address: string) {
 }
 
 export const initialState: UserState = {
-  selectedWallet,
+  selectedWallet: undefined,
   userLocale: null,
   userRouterPreference: RouterPreference.API,
   userHideClosedPositions: false,
@@ -80,9 +78,6 @@ const userSlice = createSlice({
   initialState,
   reducers: {
     updateSelectedWallet(state, { payload: { wallet } }) {
-      if (!wallet) {
-        deletePersistedConnectionMeta()
-      }
       state.selectedWallet = wallet
     },
     updateUserLocale(state, action) {