Fix and simplify account switching in Swaps (#9549)

* Ensure rendered swap from token balance updates when token balance changes

* Disable account switching on all swaps routes other than build quote

ui/app/hooks/useTokensToSearch.js

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useMemo } from 'react'
 import { useSelector } from 'react-redux'
 import contractMap from 'eth-contract-metadata'
 import BigNumber from 'bignumber.js'
@@ -64,34 +64,34 @@ export function useTokensToSearch ({
   const memoizedUsersToken = useEqualityCheck(usersTokens)
 
   const swapsEthToken = useSwapsEthToken()
-  const [ethToken] = useState(() => getRenderableTokenData(
+  const ethToken = getRenderableTokenData(
     swapsEthToken,
     tokenConversionRates,
     conversionRate,
     currentCurrency,
-  ))
+  )
+  const memoizedEthToken = useEqualityCheck(ethToken)
 
   const swapsTokens = useSelector(getSwapsTokens) || []
   let tokensToSearch
   if (onlyEth) {
-    tokensToSearch = [ethToken]
+    tokensToSearch = [memoizedEthToken]
   } else if (singleToken) {
     tokensToSearch = providedTokens
   } else if (providedTokens) {
-    tokensToSearch = [ethToken, ...providedTokens]
+    tokensToSearch = [memoizedEthToken, ...providedTokens]
   } else if (swapsTokens.length) {
-    tokensToSearch = [ethToken, ...swapsTokens]
+    tokensToSearch = [memoizedEthToken, ...swapsTokens]
   } else {
-    tokensToSearch = [ethToken, ...tokenList]
+    tokensToSearch = [memoizedEthToken, ...tokenList]
   }
   const memoizedTokensToSearch = useEqualityCheck(tokensToSearch)
-
   return useMemo(() => {
 
     const usersTokensAddressMap = memoizedUsersToken.reduce((acc, token) => ({ ...acc, [token.address]: token }), {})
 
     const tokensToSearchBuckets = {
-      owned: singleToken ? [] : [ethToken],
+      owned: singleToken ? [] : [memoizedEthToken],
       top: [],
       others: [],
     }
@@ -116,5 +116,5 @@ export function useTokensToSearch ({
       ...tokensToSearchBuckets.top,
       ...tokensToSearchBuckets.others,
     ]
-  }, [memoizedTokensToSearch, memoizedUsersToken, tokenConversionRates, conversionRate, currentCurrency, memoizedTopTokens, ethToken, singleToken])
+  }, [memoizedTokensToSearch, memoizedUsersToken, tokenConversionRates, conversionRate, currentCurrency, memoizedTopTokens, memoizedEthToken, singleToken])
 }

ui/app/pages/routes/routes.component.js

@@ -52,6 +52,7 @@ import {
   SWAPS_ROUTE,
   SETTINGS_ROUTE,
   UNLOCK_ROUTE,
+  BUILD_QUOTE_ROUTE,
 } from '../../helpers/constants/routes'
 
 import { ENVIRONMENT_TYPE_NOTIFICATION, ENVIRONMENT_TYPE_POPUP } from '../../../../app/scripts/lib/enums'
@@ -161,6 +162,11 @@ export default class Routes extends Component {
     return Boolean(matchPath(location.pathname, { path: SWAPS_ROUTE, exact: false }))
   }
 
+  onSwapsBuildQuotePage () {
+    const { location } = this.props
+    return Boolean(matchPath(location.pathname, { path: BUILD_QUOTE_ROUTE, exact: false }))
+  }
+
   hideAppHeader () {
     const { location } = this.props
 
@@ -248,7 +254,7 @@ export default class Routes extends Component {
 
               }
             }}
-            disabled={this.onConfirmPage()}
+            disabled={this.onConfirmPage() || (this.onSwapsPage() && !this.onSwapsBuildQuotePage())}
           />
         ) }
         <Sidebar

ui/app/pages/swaps/build-quote/build-quote.js

@@ -153,6 +153,18 @@ export default function BuildQuote ({
 
   const hideDropdownItemIf = useCallback((item) => item.address === fromTokenAddress, [fromTokenAddress])
 
+  const tokensWithBalancesFromToken = tokensWithBalances.find((token) => token.address === fromToken?.address)
+  const previousTokensWithBalancesFromToken = usePrevious(tokensWithBalancesFromToken)
+
+  useEffect(() => {
+    const notEth = tokensWithBalancesFromToken?.address !== ETH_SWAPS_TOKEN_OBJECT.address
+    const addressesAreTheSame = tokensWithBalancesFromToken?.address === previousTokensWithBalancesFromToken?.address
+    const balanceHasChanged = tokensWithBalancesFromToken?.balance !== previousTokensWithBalancesFromToken?.balance
+    if (notEth && addressesAreTheSame && balanceHasChanged) {
+      dispatch(setSwapsFromToken({ ...fromToken, balance: tokensWithBalancesFromToken?.balance, string: tokensWithBalancesFromToken?.string }))
+    }
+  }, [dispatch, tokensWithBalancesFromToken, previousTokensWithBalancesFromToken, fromToken])
+
   // If the eth balance changes while on build quote, we update the selected from token
   useEffect(() => {
     if (fromToken?.address === ETH_SWAPS_TOKEN_OBJECT.address && (fromToken?.balance !== ethBalance)) {