From 60514c12b0ad6ae69d8a6ca793950b0a272acd72 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 15 Mar 2021 14:21:43 -0230 Subject: [PATCH] Fix: ETH 'token' now only appears once in the swaps to and from dropdowns. (#10650) --- ui/app/hooks/useTokensToSearch.js | 38 +++++++------------ ui/app/pages/swaps/build-quote/build-quote.js | 33 ++++++++++------ .../pages/swaps/swaps-util-test-constants.js | 7 +++- ui/app/pages/swaps/swaps.util.js | 19 ++++++---- ui/app/pages/swaps/swaps.util.test.js | 5 ++- 5 files changed, 55 insertions(+), 47 deletions(-) diff --git a/ui/app/hooks/useTokensToSearch.js b/ui/app/hooks/useTokensToSearch.js index 3336ceae0..b1af93cdf 100644 --- a/ui/app/hooks/useTokensToSearch.js +++ b/ui/app/hooks/useTokensToSearch.js @@ -69,13 +69,7 @@ export function getRenderableTokenData( }; } -export function useTokensToSearch({ - providedTokens, - usersTokens = [], - topTokens = {}, - onlyEth, - singleToken, -}) { +export function useTokensToSearch({ usersTokens = [], topTokens = {} }) { const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual); const conversionRate = useSelector(getConversionRate); const currentCurrency = useSelector(getCurrentCurrency); @@ -93,18 +87,16 @@ export function useTokensToSearch({ const memoizedEthToken = useEqualityCheck(ethToken); const swapsTokens = useSelector(getSwapsTokens) || []; - let tokensToSearch; - if (onlyEth) { - tokensToSearch = [memoizedEthToken]; - } else if (singleToken) { - tokensToSearch = providedTokens; - } else if (providedTokens) { - tokensToSearch = [memoizedEthToken, ...providedTokens]; - } else if (swapsTokens.length) { - tokensToSearch = [memoizedEthToken, ...swapsTokens]; - } else { - tokensToSearch = [memoizedEthToken, ...tokenList]; - } + + const tokensToSearch = swapsTokens.length + ? swapsTokens + : [ + memoizedEthToken, + ...tokenList.filter( + (token) => token.symbol !== memoizedEthToken.symbol, + ), + ]; + const memoizedTokensToSearch = useEqualityCheck(tokensToSearch); return useMemo(() => { const usersTokensAddressMap = memoizedUsersToken.reduce( @@ -113,7 +105,7 @@ export function useTokensToSearch({ ); const tokensToSearchBuckets = { - owned: singleToken ? [] : [memoizedEthToken], + owned: [], top: [], others: [], }; @@ -126,8 +118,8 @@ export function useTokensToSearch({ currentCurrency, ); if ( - usersTokensAddressMap[token.address] && - (renderableDataToken.symbol === 'ETH' || + renderableDataToken.symbol === 'ETH' || + (usersTokensAddressMap[token.address] && Number(renderableDataToken.balance ?? 0) !== 0) ) { tokensToSearchBuckets.owned.push(renderableDataToken); @@ -158,7 +150,5 @@ export function useTokensToSearch({ conversionRate, currentCurrency, memoizedTopTokens, - memoizedEthToken, - singleToken, ]); } diff --git a/ui/app/pages/swaps/build-quote/build-quote.js b/ui/app/pages/swaps/build-quote/build-quote.js index b70d5ccf9..7648efe47 100644 --- a/ui/app/pages/swaps/build-quote/build-quote.js +++ b/ui/app/pages/swaps/build-quote/build-quote.js @@ -2,10 +2,13 @@ import React, { useContext, useEffect, useState, useCallback } from 'react'; import PropTypes from 'prop-types'; import { useDispatch, useSelector } from 'react-redux'; import classnames from 'classnames'; -import { uniqBy } from 'lodash'; +import { uniqBy, isEqual } from 'lodash'; import { useHistory } from 'react-router-dom'; import { MetaMetricsContext } from '../../../contexts/metametrics.new'; -import { useTokensToSearch } from '../../../hooks/useTokensToSearch'; +import { + useTokensToSearch, + getRenderableTokenData, +} from '../../../hooks/useTokensToSearch'; import { useEqualityCheck } from '../../../hooks/useEqualityCheck'; import { I18nContext } from '../../../contexts/i18n'; import DropdownInputPair from '../dropdown-input-pair'; @@ -25,7 +28,12 @@ import { getTopAssets, getFetchParams, } from '../../../ducks/swaps/swaps'; -import { getSwapsEthToken } from '../../../selectors'; +import { + getSwapsEthToken, + getTokenExchangeRates, + getConversionRate, + getCurrentCurrency, +} from '../../../selectors'; import { getValueFromWeiHex, hexToDecimal, @@ -80,6 +88,10 @@ export default function BuildQuote({ const fetchParamsFromToken = sourceTokenInfo?.symbol === 'ETH' ? swapsEthToken : sourceTokenInfo; + const tokenConversionRates = useSelector(getTokenExchangeRates, isEqual); + const conversionRate = useSelector(getConversionRate); + const currentCurrency = useSelector(getCurrentCurrency); + const { loading, tokensWithBalances } = useTokenTracker(tokens); // If the fromToken was set in a call to `onFromSelect` (see below), and that from token has a balance @@ -93,15 +105,12 @@ export default function BuildQuote({ ); const memoizedUsersTokens = useEqualityCheck(usersTokens); - const selectedFromToken = useTokensToSearch({ - providedTokens: - fromToken || fetchParamsFromToken - ? [fromToken || fetchParamsFromToken] - : [], - usersTokens: memoizedUsersTokens, - onlyEth: (fromToken || fetchParamsFromToken)?.symbol === 'ETH', - singleToken: true, - })[0]; + const selectedFromToken = getRenderableTokenData( + fromToken || fetchParamsFromToken, + tokenConversionRates, + conversionRate, + currentCurrency, + ); const tokensToSearch = useTokensToSearch({ usersTokens: memoizedUsersTokens, diff --git a/ui/app/pages/swaps/swaps-util-test-constants.js b/ui/app/pages/swaps/swaps-util-test-constants.js index 95c4209ea..1491b1184 100644 --- a/ui/app/pages/swaps/swaps-util-test-constants.js +++ b/ui/app/pages/swaps/swaps-util-test-constants.js @@ -9,7 +9,7 @@ export const AGGREGATOR_METADATA_BASE_PROD_URL = export const TOP_ASSET_BASE_PROD_URL = 'https://api.metaswap.codefi.network/topAssets'; -export const TOKENS = [ +const BASE_TOKENS = [ { erc20: true, symbol: 'META', @@ -82,9 +82,12 @@ export const TOKENS = [ decimals: 8, address: '0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599', }, - ETH_SWAPS_TOKEN_OBJECT, ]; +export const TOKENS = [...BASE_TOKENS, ETH_SWAPS_TOKEN_OBJECT]; + +export const EXPECTED_TOKENS_RESULT = [ETH_SWAPS_TOKEN_OBJECT, ...BASE_TOKENS]; + export const MOCK_TRADE_RESPONSE_1 = [ { trade: { diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js index aba17fc58..85c8a5cdf 100644 --- a/ui/app/pages/swaps/swaps.util.js +++ b/ui/app/pages/swaps/swaps.util.js @@ -279,13 +279,18 @@ export async function fetchTokens() { { method: 'GET' }, { cacheRefreshTime: CACHE_REFRESH_ONE_HOUR }, ); - const filteredTokens = tokens.filter((token) => { - return ( - validateData(TOKEN_VALIDATORS, token, tokenUrl) && - token.address !== ETH_SWAPS_TOKEN_OBJECT.address - ); - }); - filteredTokens.push(ETH_SWAPS_TOKEN_OBJECT); + const filteredTokens = [ + ETH_SWAPS_TOKEN_OBJECT, + ...tokens.filter((token) => { + return ( + validateData(TOKEN_VALIDATORS, token, tokenUrl) && + !( + token.symbol === ETH_SWAPS_TOKEN_OBJECT.symbol || + token.address === ETH_SWAPS_TOKEN_OBJECT.address + ) + ); + }), + ]; return filteredTokens; } diff --git a/ui/app/pages/swaps/swaps.util.test.js b/ui/app/pages/swaps/swaps.util.test.js index f3ee2a497..c68cff29b 100644 --- a/ui/app/pages/swaps/swaps.util.test.js +++ b/ui/app/pages/swaps/swaps.util.test.js @@ -6,6 +6,7 @@ import { AGGREGATOR_METADATA_BASE_PROD_URL, TOP_ASSET_BASE_PROD_URL, TOKENS, + EXPECTED_TOKENS_RESULT, MOCK_TRADE_RESPONSE_2, AGGREGATOR_METADATA, TOP_ASSETS, @@ -107,12 +108,12 @@ describe('Swaps Util', function () { describe('fetchTokens', function () { it('should fetch tokens', async function () { const result = await fetchTokens(true); - assert.deepStrictEqual(result, TOKENS); + assert.deepStrictEqual(result, EXPECTED_TOKENS_RESULT); }); it('should fetch tokens on prod', async function () { const result = await fetchTokens(false); - assert.deepStrictEqual(result, TOKENS); + assert.deepStrictEqual(result, EXPECTED_TOKENS_RESULT); }); });