Skip to content

Commit

Permalink
resolving map collision for token images
Browse files Browse the repository at this point in the history
  • Loading branch information
@vthomas13
vthomas13 committed Dec 15, 2023
1 parent 5c0f6bc commit 181f89c
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 49 deletions.
19 changes: 10 additions & 9 deletions shared/constants/network.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,7 @@ export const CHAIN_IDS = {
CRONOS: '0x19',
GNOSIS: '0x64',
ZKSYNC_ERA: '0x144',
TEST_ETH: '0x539',
} as const;

const CHAINLIST_CHAIN_IDS_MAP = {
Expand Down Expand Up @@ -612,15 +613,15 @@ export const CHAIN_ID_TO_ETHERS_NETWORK_NAME_MAP = {
[CHAIN_IDS.LINEA_MAINNET]: NETWORK_TYPES.LINEA_MAINNET,
} as const;

export const NATIVE_CURRENCY_TOKEN_IMAGE_MAP = {
[CURRENCY_SYMBOLS.ETH]: ETH_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.TEST_ETH]: TEST_ETH_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.BNB]: BNB_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.MATIC]: MATIC_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.AVALANCHE]: AVAX_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.OPTIMISM]: OPTIMISM_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.CELO]: CELO_TOKEN_IMAGE_URL,
[CURRENCY_SYMBOLS.GNOSIS]: GNOSIS_TOKEN_IMAGE_URL,
export const CHAIN_ID_TOKEN_IMAGE_MAP = {
[CHAIN_IDS.MAINNET]: ETH_TOKEN_IMAGE_URL,
[CHAIN_IDS.TEST_ETH]: TEST_ETH_TOKEN_IMAGE_URL,
[CHAIN_IDS.BSC]: BNB_TOKEN_IMAGE_URL,
[CHAIN_IDS.POLYGON]: MATIC_TOKEN_IMAGE_URL,
[CHAIN_IDS.AVALANCHE]: AVAX_TOKEN_IMAGE_URL,
[CHAIN_IDS.OPTIMISM]: OPTIMISM_TOKEN_IMAGE_URL,
[CHAIN_IDS.CELO]: CELO_TOKEN_IMAGE_URL,
[CHAIN_IDS.GNOSIS]: GNOSIS_TOKEN_IMAGE_URL,
} as const;

export const INFURA_BLOCKED_KEY = 'countryBlocked';
Expand Down
6 changes: 1 addition & 5 deletions ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,11 +105,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down
30 changes: 5 additions & 25 deletions ui/components/multichain/pages/send/__snapshots__/send.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -309,11 +309,7 @@ exports[`SendPage render renders correctly 1`] = `
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down Expand Up @@ -441,11 +437,7 @@ exports[`SendPage render renders correctly 1`] = `
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down Expand Up @@ -573,11 +565,7 @@ exports[`SendPage render renders correctly 1`] = `
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down Expand Up @@ -714,11 +702,7 @@ exports[`SendPage render renders correctly 1`] = `
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down Expand Up @@ -855,11 +839,7 @@ exports[`SendPage render renders correctly 1`] = `
<div
class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xs mm-avatar-token mm-text--body-xs mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-border-default box--border-style-solid box--border-width-1"
>
<img
alt="ETH logo"
class="mm-avatar-token__token-image"
src="./images/eth_logo.png"
/>
E
</div>
<div
class="mm-box mm-text mm-text--body-sm mm-text--text-align-end mm-box--color-text-alternative"
Expand Down
44 changes: 38 additions & 6 deletions ui/hooks/useIsOriginalNativeTokenSymbol.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ describe('useNativeTokenFiatAmount', () => {

// Expect the hook to return true when the native symbol matches the ticker
expect(result.result.current).toBe(true);
expect(spyFetch).toHaveBeenCalled();
expect(spyFetch).not.toHaveBeenCalled();
});

it('should return the correct value when the native symbol does not match the ticker', async () => {
Expand All @@ -75,7 +75,7 @@ describe('useNativeTokenFiatAmount', () => {

await act(async () => {
result = renderHook(() =>
useIsOriginalNativeTokenSymbol('0x1', 'ETH', 'mainnet'),
useIsOriginalNativeTokenSymbol('0x13a', 'FIL', 'mainnet'),
);
});

Expand All @@ -97,7 +97,7 @@ describe('useNativeTokenFiatAmount', () => {

await act(async () => {
result = renderHook(() =>
useIsOriginalNativeTokenSymbol('0x1', 'ETH', 'mainnet'),
useIsOriginalNativeTokenSymbol('0x13a', 'FIL', 'mainnet'),
);
});

Expand All @@ -106,7 +106,7 @@ describe('useNativeTokenFiatAmount', () => {
expect(spyFetch).toHaveBeenCalled();
});

it('should return the correct symbol from build Network', async () => {
it('should return the correct value when the chainId is in the CHAIN_ID_TO_CURRENCY_SYMBOL_MAP', async () => {
useSelector.mockImplementation(generateUseSelectorRouter(true));

// Mock the safeChainsList response with a different native symbol
Expand All @@ -128,14 +128,46 @@ describe('useNativeTokenFiatAmount', () => {

await act(async () => {
result = renderHook(() =>
useIsOriginalNativeTokenSymbol('0x1', 'GoerliETH', 'goerli'),
useIsOriginalNativeTokenSymbol('0x5', 'GoerliETH', 'goerli'),
);
});

// expect this to pass because the chainId is in the CHAIN_ID_TO_CURRENCY_SYMBOL_MAP
expect(result.result.current).toBe(true);
// expect that the chainlist API was not called
expect(spyFetch).not.toHaveBeenCalled();
});

it('should return the correct value when the chainId is not in the CHAIN_ID_TO_CURRENCY_SYMBOL_MAP', async () => {
useSelector.mockImplementation(generateUseSelectorRouter(true));
// Mock the safeChainsList response
const safeChainsList = [
{
chainId: 314,
nativeCurrency: {
symbol: 'FIL',
},
},
];

// Mock the fetchWithCache function to return the safeChainsList
const spyFetch = jest
.spyOn(fetchWithCacheModule, 'default')
.mockResolvedValue(safeChainsList);

let result;

await act(async () => {
result = renderHook(() =>
useIsOriginalNativeTokenSymbol('0x13a', 'FIL', 'mainnet'),
);
});

// Expect the hook to return true when the native symbol matches the ticker
expect(result.result.current).toBe(true);
// Expect the chainslist API to have been called
expect(spyFetch).toHaveBeenCalled();
});

it('should return true if chain safe validation is disabled', async () => {
useSelector.mockImplementation(generateUseSelectorRouter(false));
// Mock the safeChainsList response with a different native symbol
Expand Down
7 changes: 3 additions & 4 deletions ui/selectors/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import { TransactionStatus } from '@metamask/transaction-controller';
import { addHexPrefix } from '../../app/scripts/lib/util';
import {
TEST_CHAINS,
NATIVE_CURRENCY_TOKEN_IMAGE_MAP,
BUYABLE_CHAINS_MAP,
MAINNET_DISPLAY_NAME,
BSC_DISPLAY_NAME,
Expand All @@ -33,6 +32,7 @@ import {
LINEA_MAINNET_DISPLAY_NAME,
LINEA_MAINNET_TOKEN_IMAGE_URL,
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
CHAIN_ID_TOKEN_IMAGE_MAP,
} from '../../shared/constants/network';
import {
WebHIDConnectedStatuses,
Expand Down Expand Up @@ -66,7 +66,6 @@ import { STATIC_MAINNET_TOKEN_LIST } from '../../shared/constants/tokens';
import { DAY } from '../../shared/constants/time';
import { TERMS_OF_USE_LAST_UPDATED } from '../../shared/constants/terms';
import {
getNativeCurrency,
getProviderConfig,
getConversionRate,
isNotEIP1559Network,
Expand Down Expand Up @@ -945,8 +944,8 @@ export function getIsBuyableChain(state) {
return Object.keys(BUYABLE_CHAINS_MAP).includes(chainId);
}
export function getNativeCurrencyImage(state) {
const nativeCurrency = getNativeCurrency(state)?.toUpperCase();
return NATIVE_CURRENCY_TOKEN_IMAGE_MAP[nativeCurrency];
const chainId = getCurrentChainId(state);
return CHAIN_ID_TOKEN_IMAGE_MAP[chainId];
}

export function getNextSuggestedNonce(state) {
Expand Down

0 comments on commit 181f89c

Please sign in to comment.