Convert useSwapsEthToken hook to a selector (#10568)

* Convert useSwapsEthToken hook to a selector

* Code cleanup

ui/app/components/app/wallet-overview/eth-overview.js

@@ -14,7 +14,6 @@ import {
   useMetricEvent,
   useNewMetricEvent,
 } from '../../../hooks/useMetricEvent';
-import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
 import Tooltip from '../../ui/tooltip';
 import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display';
 import { PRIMARY, SECONDARY } from '../../../helpers/constants/common';
@@ -26,6 +25,7 @@ import {
   getIsMainnet,
   getIsTestnet,
   getCurrentKeyring,
+  getSwapsEthToken,
 } from '../../../selectors/selectors';
 import SwapIcon from '../../ui/icon/swap-icon.component';
 import BuyIcon from '../../ui/icon/overview-buy-icon.component';
@@ -69,7 +69,7 @@ const EthOverview = ({ className }) => {
     category: 'swaps',
   });
   const swapsEnabled = useSelector(getSwapsFeatureLiveness);
-  const swapsEthToken = useSwapsEthToken();
+  const swapsEthToken = useSelector(getSwapsEthToken);
 
   return (
     <WalletOverview

ui/app/hooks/useSwapsEthToken.js

@@ -1,53 +0,0 @@
-import { useSelector } from 'react-redux';
-import { getSelectedAccount } from '../selectors';
-import { ETH_SWAPS_TOKEN_OBJECT } from '../helpers/constants/swaps';
-import {
-  getValueFromWeiHex,
-  hexToDecimal,
-} from '../helpers/utils/conversions.util';
-
-/**
- * @typedef {Object} SwapsEthToken
- * @property {string} symbol - The symbol for ETH, namely "ETH"
- * @property {string} name - The name of the ETH currency, "Ether"
- * @property {string} address - A substitute address for the metaswap-api to
- * recognize the ETH token
- * @property {string} decimals - The number of ETH decimals, i.e. 18
- * @property {string} balance - The user's ETH balance in decimal wei, with a
- * precision of 4 decimal places
- * @property {string} string - The user's ETH balance in decimal ETH
- */
-
-/**
- * Swaps related code uses token objects for various purposes. These objects
- * always have the following properties: `symbol`, `name`, `address`, and
- * `decimals`.
- *
- * When available for the current account, the objects can have `balance` and
- * `string` properties.
- * `balance` is the users token balance in decimal values, denominated in the
- * minimal token units (according to its decimals).
- * `string` is the token balance in a readable format, ready for rendering.
- *
- * Swaps treats ETH as a token, and we use the ETH_SWAPS_TOKEN_OBJECT constant
- * to set the standard properties for the token. The useSwapsEthToken hook
- * extends that object with `balance` and `balance` values of the same type as
- * in regular ERC-20 token objects, per the above description.
- *
- * @returns {SwapsEthToken} The token object representation of the currently
- * selected account's ETH balance, as expected by the Swaps API.
- */
-export function useSwapsEthToken() {
-  const selectedAccount = useSelector(getSelectedAccount);
-  const { balance } = selectedAccount;
-
-  return {
-    ...ETH_SWAPS_TOKEN_OBJECT,
-    balance: hexToDecimal(balance),
-    string: getValueFromWeiHex({
-      value: balance,
-      numberOfDecimals: 4,
-      toDenomination: 'ETH',
-    }),
-  };
-}

ui/app/hooks/useTokensToSearch.js

@@ -9,9 +9,9 @@ import {
   getTokenExchangeRates,
   getConversionRate,
   getCurrentCurrency,
+  getSwapsEthToken,
 } from '../selectors';
 import { getSwapsTokens } from '../ducks/swaps/swaps';
-import { useSwapsEthToken } from './useSwapsEthToken';
 import { useEqualityCheck } from './useEqualityCheck';
 
 const tokenList = shuffle(
@@ -79,11 +79,11 @@ export function useTokensToSearch({
   const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual);
   const conversionRate = useSelector(getConversionRate);
   const currentCurrency = useSelector(getCurrentCurrency);
+  const swapsEthToken = useSelector(getSwapsEthToken);
 
   const memoizedTopTokens = useEqualityCheck(topTokens);
   const memoizedUsersToken = useEqualityCheck(usersTokens);
 
-  const swapsEthToken = useSwapsEthToken();
   const ethToken = getRenderableTokenData(
     swapsEthToken,
     tokenConversionRates,

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

@@ -7,7 +7,6 @@ import { useHistory } from 'react-router-dom';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 import { useTokensToSearch } from '../../../hooks/useTokensToSearch';
 import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
-import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
 import { I18nContext } from '../../../contexts/i18n';
 import DropdownInputPair from '../dropdown-input-pair';
 import DropdownSearchList from '../dropdown-search-list';
@@ -26,6 +25,7 @@ import {
   getTopAssets,
   getFetchParams,
 } from '../../../ducks/swaps/swaps';
+import { getSwapsEthToken } from '../../../selectors';
 import {
   getValueFromWeiHex,
   hexToDecimal,
@@ -76,7 +76,7 @@ export default function BuildQuote({
   const topAssets = useSelector(getTopAssets);
   const fromToken = useSelector(getFromToken);
   const toToken = useSelector(getToToken) || destinationTokenInfo;
-  const swapsEthToken = useSwapsEthToken();
+  const swapsEthToken = useSelector(getSwapsEthToken);
   const fetchParamsFromToken =
     sourceTokenInfo?.symbol === 'ETH' ? swapsEthToken : sourceTokenInfo;
 

ui/app/pages/swaps/intro-popup/intro-popup.js

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { setSwapsFromToken } from '../../../ducks/swaps/swaps';
 import { I18nContext } from '../../../contexts/i18n';
 import { BUILD_QUOTE_ROUTE } from '../../../helpers/constants/routes';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
-import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
+import { getSwapsEthToken } from '../../../selectors';
 import Button from '../../../components/ui/button';
 import Popover from '../../../components/ui/popover';
 
@@ -31,7 +31,7 @@ export default function IntroPopup({ onClose }) {
     event: 'Product Overview Dismissed',
     category: 'swaps',
   });
-  const swapsEthToken = useSwapsEthToken();
+  const swapsEthToken = useSelector(getSwapsEthToken);
 
   return (
     <div className="intro-popup">

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

@@ -10,7 +10,6 @@ import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount';
 import { useEqualityCheck } from '../../../hooks/useEqualityCheck';
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent';
 import { usePrevious } from '../../../hooks/usePrevious';
-import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken';
 import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 import FeeCard from '../fee-card';
 import {
@@ -37,6 +36,7 @@ import {
   getSelectedAccount,
   getCurrentCurrency,
   getTokenExchangeRates,
+  getSwapsEthToken,
 } from '../../../selectors';
 import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util';
 import { getTokens } from '../../../ducks/metamask/metamask';
@@ -125,6 +125,7 @@ export default function ViewQuote() {
   const usedQuote = selectedQuote || topQuote;
   const tradeValue = usedQuote?.trade?.value ?? '0x0';
   const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
+  const swapsEthToken = useSelector(getSwapsEthToken);
 
   const { isBestQuote } = usedQuote;
 
@@ -149,7 +150,6 @@ export default function ViewQuote() {
   const gasTotalInWeiHex = calcGasTotal(maxGasLimit, gasPrice);
 
   const { tokensWithBalances } = useTokenTracker(swapsTokens, true);
-  const swapsEthToken = useSwapsEthToken();
   const balanceToken =
     fetchParamsSourceToken === swapsEthToken.address
       ? swapsEthToken

ui/app/selectors/selectors.js

@@ -11,6 +11,11 @@ import {
   checksumAddress,
   getAccountByAddress,
 } from '../helpers/utils/util';
+import {
+  getValueFromWeiHex,
+  hexToDecimal,
+} from '../helpers/utils/conversions.util';
+import { ETH_SWAPS_TOKEN_OBJECT } from '../helpers/constants/swaps';
 
 export function getNetworkIdentifier(state) {
   const {
@@ -381,3 +386,51 @@ export function getUSDConversionRate(state) {
 export function getWeb3ShimUsageStateForOrigin(state, origin) {
   return state.metamask.web3ShimUsageOrigins[origin];
 }
+
+/**
+ * @typedef {Object} SwapsEthToken
+ * @property {string} symbol - The symbol for ETH, namely "ETH"
+ * @property {string} name - The name of the ETH currency, "Ether"
+ * @property {string} address - A substitute address for the metaswap-api to
+ * recognize the ETH token
+ * @property {string} decimals - The number of ETH decimals, i.e. 18
+ * @property {string} balance - The user's ETH balance in decimal wei, with a
+ * precision of 4 decimal places
+ * @property {string} string - The user's ETH balance in decimal ETH
+ */
+
+/**
+ * Swaps related code uses token objects for various purposes. These objects
+ * always have the following properties: `symbol`, `name`, `address`, and
+ * `decimals`.
+ *
+ * When available for the current account, the objects can have `balance` and
+ * `string` properties.
+ * `balance` is the users token balance in decimal values, denominated in the
+ * minimal token units (according to its decimals).
+ * `string` is the token balance in a readable format, ready for rendering.
+ *
+ * Swaps treats ETH as a token, and we use the ETH_SWAPS_TOKEN_OBJECT constant
+ * to set the standard properties for the token. The getSwapsEthToken selector
+ * extends that object with `balance` and `balance` values of the same type as
+ * in regular ERC-20 token objects, per the above description.
+ *
+ * @param {object} state - the redux state object
+ * @returns {SwapsEthToken} The token object representation of the currently
+ * selected account's ETH balance, as expected by the Swaps API.
+ */
+
+export function getSwapsEthToken(state) {
+  const selectedAccount = getSelectedAccount(state);
+  const { balance } = selectedAccount;
+
+  return {
+    ...ETH_SWAPS_TOKEN_OBJECT,
+    balance: hexToDecimal(balance),
+    string: getValueFromWeiHex({
+      value: balance,
+      numberOfDecimals: 4,
+      toDenomination: 'ETH',
+    }),
+  };
+}