From b441dcec6a9bec316d3e4b3a1ef3e5794e256891 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Thu, 4 Mar 2021 13:46:01 -0330 Subject: [PATCH] Convert useSwapsEthToken hook to a selector (#10568) * Convert useSwapsEthToken hook to a selector * Code cleanup --- .../app/wallet-overview/eth-overview.js | 4 +- ui/app/hooks/useSwapsEthToken.js | 53 ------------------- ui/app/hooks/useTokensToSearch.js | 4 +- ui/app/pages/swaps/build-quote/build-quote.js | 4 +- ui/app/pages/swaps/intro-popup/intro-popup.js | 6 +-- ui/app/pages/swaps/view-quote/view-quote.js | 4 +- ui/app/selectors/selectors.js | 53 +++++++++++++++++++ 7 files changed, 64 insertions(+), 64 deletions(-) delete mode 100644 ui/app/hooks/useSwapsEthToken.js diff --git a/ui/app/components/app/wallet-overview/eth-overview.js b/ui/app/components/app/wallet-overview/eth-overview.js index d1de6730b..38ada5c24 100644 --- a/ui/app/components/app/wallet-overview/eth-overview.js +++ b/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 ( diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index c553be9d9..1efa81751 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/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 diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 49f480b40..af6e942ff 100644 --- a/ui/app/selectors/selectors.js +++ b/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', + }), + }; +}