From 37a22d431c883b0187ba922c46d8e75d290c1563 Mon Sep 17 00:00:00 2001 From: Pedro Figueiredo Date: Tue, 22 Oct 2024 11:18:24 +0100 Subject: [PATCH] fix: Fall back to token list for the token symbol --- ...-image.test.ts => useTokenDetails.test.ts} | 32 +++++++++++++------ ...{use-token-image.ts => useTokenDetails.ts} | 13 ++++++-- .../info/shared/send-heading/send-heading.tsx | 13 ++++---- 3 files changed, 38 insertions(+), 20 deletions(-) rename ui/pages/confirmations/components/confirm/info/hooks/{use-token-image.test.ts => useTokenDetails.test.ts} (73%) rename ui/pages/confirmations/components/confirm/info/hooks/{use-token-image.ts => useTokenDetails.ts} (65%) diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts similarity index 73% rename from ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts rename to ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts index 23e4cc3c1bda..efdf2b66ac56 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.test.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.test.ts @@ -2,9 +2,9 @@ import { TransactionMeta } from '@metamask/transaction-controller'; import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer'; import mockState from '../../../../../../../test/data/mock-state.json'; import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers'; -import { useTokenImage } from './use-token-image'; +import { useTokenDetails } from './useTokenDetails'; -describe('useTokenImage', () => { +describe('useTokenDetails', () => { it('returns iconUrl from selected token if it exists', () => { const transactionMeta = genUnapprovedTokenTransferConfirmation( {}, @@ -19,11 +19,14 @@ describe('useTokenImage', () => { }; const { result } = renderHookWithProvider( - () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN), mockState, ); - expect(result.current).toEqual({ tokenImage: 'iconUrl' }); + expect(result.current).toEqual({ + tokenImage: 'iconUrl', + tokenSymbol: 'symbol', + }); }); it('returns selected token image if no iconUrl is included', () => { @@ -39,11 +42,14 @@ describe('useTokenImage', () => { }; const { result } = renderHookWithProvider( - () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN), mockState, ); - expect(result.current).toEqual({ tokenImage: 'image' }); + expect(result.current).toEqual({ + tokenImage: 'image', + tokenSymbol: 'symbol', + }); }); it('returns token list icon url if no image is included in the token', () => { @@ -58,7 +64,7 @@ describe('useTokenImage', () => { }; const { result } = renderHookWithProvider( - () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN), { ...mockState, metamask: { @@ -72,7 +78,10 @@ describe('useTokenImage', () => { }, ); - expect(result.current).toEqual({ tokenImage: 'tokenListIconUrl' }); + expect(result.current).toEqual({ + tokenImage: 'tokenListIconUrl', + tokenSymbol: 'symbol', + }); }); it('returns undefined if no image is found', () => { @@ -87,10 +96,13 @@ describe('useTokenImage', () => { }; const { result } = renderHookWithProvider( - () => useTokenImage(transactionMeta, TEST_SELECTED_TOKEN), + () => useTokenDetails(transactionMeta, TEST_SELECTED_TOKEN), mockState, ); - expect(result.current).toEqual({ tokenImage: undefined }); + expect(result.current).toEqual({ + tokenImage: undefined, + tokenSymbol: 'symbol', + }); }); }); diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts similarity index 65% rename from ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts rename to ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts index 5817d08028ab..be9578496205 100644 --- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-image.ts +++ b/ui/pages/confirmations/components/confirm/info/hooks/useTokenDetails.ts @@ -1,20 +1,27 @@ import { TokenListMap } from '@metamask/assets-controllers'; import { TransactionMeta } from '@metamask/transaction-controller'; import { useSelector } from 'react-redux'; +import { useI18nContext } from '../../../../../../hooks/useI18nContext'; import { getTokenList } from '../../../../../../selectors'; import { SelectedToken } from '../shared/selected-token'; -export const useTokenImage = ( +export const useTokenDetails = ( transactionMeta: TransactionMeta, selectedToken: SelectedToken, ) => { + const t = useI18nContext(); + const tokenList = useSelector(getTokenList) as TokenListMap; - // TODO: Add support for NFT images in one of the following tasks const tokenImage = selectedToken?.iconUrl || selectedToken?.image || tokenList[transactionMeta?.txParams?.to as string]?.iconUrl; - return { tokenImage }; + const tokenSymbol = + selectedToken?.symbol || + tokenList[transactionMeta?.txParams?.to as string]?.symbol || + t('unknown'); + + return { tokenImage, tokenSymbol }; }; diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx index 2806c33936c0..40c571d4bc75 100644 --- a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx +++ b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.tsx @@ -16,22 +16,23 @@ import { TextColor, TextVariant, } from '../../../../../../../helpers/constants/design-system'; -import { useI18nContext } from '../../../../../../../hooks/useI18nContext'; import { getWatchedToken } from '../../../../../../../selectors'; import { MultichainState } from '../../../../../../../selectors/multichain'; import { useConfirmContext } from '../../../../../context/confirm'; -import { useTokenImage } from '../../hooks/use-token-image'; +import { useTokenDetails } from '../../hooks/useTokenDetails'; import { useTokenValues } from '../../hooks/use-token-values'; import { ConfirmLoader } from '../confirm-loader/confirm-loader'; const SendHeading = () => { - const t = useI18nContext(); const { currentConfirmation: transactionMeta } = useConfirmContext(); const selectedToken = useSelector((state: MultichainState) => getWatchedToken(transactionMeta)(state), ); - const { tokenImage } = useTokenImage(transactionMeta, selectedToken); + const { tokenImage, tokenSymbol } = useTokenDetails( + transactionMeta, + selectedToken, + ); const { decodedTransferValue, fiatDisplayValue, pending } = useTokenValues(transactionMeta); @@ -57,9 +58,7 @@ const SendHeading = () => { variant={TextVariant.headingLg} color={TextColor.inherit} marginTop={3} - >{`${decodedTransferValue || ''} ${ - selectedToken?.symbol || t('unknown') - }`} + >{`${decodedTransferValue || ''} ${tokenSymbol}`} {fiatDisplayValue && ( {fiatDisplayValue}