fix: clearing input on connect wallet (#6928)

* fix: clearing input on connect wallet

* update e2e tests

cypress/e2e/wallet-connection/connect.test.ts

@@ -2,7 +2,7 @@ import { getTestSelector } from '../../utils'
 import { DISCONNECTED_WALLET_USER_STATE } from '../../utils/user-state'
 
 describe('disconnect wallet', () => {
-  it('should clear state', () => {
+  it('should not clear state', () => {
     cy.visit('/swap', { ethereum: 'hardhat' })
     cy.get('#swap-currency-input .token-amount-input').clear().type('1')
 
@@ -22,7 +22,7 @@ describe('disconnect wallet', () => {
     cy.contains('Connect Wallet')
 
     // Verify swap input is cleared
-    cy.get('#swap-currency-input .token-amount-input').should('have.value', '')
+    cy.get('#swap-currency-input .token-amount-input').should('have.value', '1')
   })
 })
 

src/components/Web3Provider/index.tsx

@@ -10,7 +10,7 @@ import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/tra
 import useEagerlyConnect from 'hooks/useEagerlyConnect'
 import useOrderedConnections from 'hooks/useOrderedConnections'
 import usePrevious from 'hooks/usePrevious'
-import { ReactNode, useEffect, useMemo, useState } from 'react'
+import { ReactNode, useEffect } from 'react'
 import { useLocation } from 'react-router-dom'
 import { useConnectedWallets } from 'state/wallets/hooks'
 import { getCurrentPageFromLocation } from 'utils/urlRoutes'
@@ -20,16 +20,8 @@ export default function Web3Provider({ children }: { children: ReactNode }) {
   const connections = useOrderedConnections()
   const connectors: [Connector, Web3ReactHooks][] = connections.map(({ hooks, connector }) => [connector, hooks])
 
-  // Force a re-render when our connection state changes.
-  const [index, setIndex] = useState(0)
-  useEffect(() => setIndex((index) => index + 1), [connections])
-  const key = useMemo(
-    () => connections.map((connection) => connection.getName()).join('-') + index,
-    [connections, index]
-  )
-
   return (
-    <Web3ReactProvider connectors={connectors} key={key}>
+    <Web3ReactProvider connectors={connectors}>
       <Updater />
       {children}
     </Web3ReactProvider>

src/hooks/useOrderedConnections.ts

 import { getConnection } from 'connection'
 import { ConnectionType } from 'connection/types'
 import { useMemo } from 'react'
-import { useAppSelector } from 'state/hooks'
 
 const SELECTABLE_WALLETS = [
   ConnectionType.UNISWAP_WALLET_V2,
@@ -11,23 +10,17 @@ const SELECTABLE_WALLETS = [
 ]
 
 export default function useOrderedConnections() {
-  const selectedWallet = useAppSelector((state) => state.user.selectedWallet)
-
   return useMemo(() => {
     const orderedConnectionTypes: ConnectionType[] = []
 
     // Always attempt to use to Gnosis Safe first, as we can't know if we're in a SafeContext.
     orderedConnectionTypes.push(ConnectionType.GNOSIS_SAFE)
 
-    // Add the `selectedWallet` to the top so it's prioritized, then add the other selectable wallets.
-    if (selectedWallet) {
-      orderedConnectionTypes.push(selectedWallet)
-    }
-    orderedConnectionTypes.push(...SELECTABLE_WALLETS.filter((wallet) => wallet !== selectedWallet))
+    orderedConnectionTypes.push(...SELECTABLE_WALLETS)
 
     // Add network connection last as it should be the fallback.
     orderedConnectionTypes.push(ConnectionType.NETWORK)
 
     return orderedConnectionTypes.map((connectionType) => getConnection(connectionType))
-  }, [selectedWallet])
+  }, [])
 }