1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00

Fix: ETH 'token' now only appears once in the swaps to and from dropdowns. (#10650)

This commit is contained in:
Dan J Miller 2021-03-15 14:21:43 -02:30 committed by GitHub
parent 3e6b2e7f0a
commit 60514c12b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 55 additions and 47 deletions

View File

@ -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,
]);
}

View File

@ -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,

View File

@ -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: {

View File

@ -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;
}

View File

@ -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);
});
});