refactor: refine asset/token types

MetaMask · Aug 21, 2024 · 1a0288f · 1a0288f
1 parent 4ebb76d
commit 1a0288f
Show file tree

Hide file tree

Showing 11 changed files with 200 additions and 114 deletions.
diff --git a/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.tsx b/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.tsx
@@ -20,7 +20,7 @@ import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
 import { getIsFiatPrimary } from '../utils';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import { hexToDecimal } from '../../../../../shared/modules/conversion.utils';
-import { Token } from '../asset-picker-modal/types';
+import { TokenWithBalance } from '../asset-picker-modal/types';
 
 export type AssetBalanceTextProps = {
   asset: Asset;
@@ -38,7 +38,7 @@ export function AssetBalanceText({
 
   const isFiatPrimary = useSelector(getIsFiatPrimary);
 
-  const { tokensWithBalances }: { tokensWithBalances: Token[] } =
+  const { tokensWithBalances }: { tokensWithBalances: TokenWithBalance[] } =
     useTokenTracker({
       tokens:
         asset.details?.address && !asset.balance

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.test.tsx
@@ -5,6 +5,7 @@ import { getTokenList } from '../../../../selectors';
 import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 import { TokenListItem } from '../../token-list-item';
+import { AssetType } from '../../../../../shared/constants/transaction';
 import Asset from './Asset';
 
 jest.mock('react-redux', () => ({
@@ -60,9 +61,13 @@ describe('Asset', () => {
   it('should render TokenListItem with correct props when address is provided', () => {
     const { getByText } = render(
       <Asset
+        type={AssetType.token}
+        image="token-icon-url"
         address="0x123"
         symbol="WETH"
-        decimalTokenAmount="10"
+        string="10"
+        balance="10000000000000000000"
+        decimals={18}
         tooltipText="tooltip"
       />,
     );
@@ -80,23 +85,4 @@ describe('Asset', () => {
       {},
     );
   });
-
-  it('should render TokenListItem with correct props when address is not provided', () => {
-    const { getByText } = render(
-      <Asset symbol="WETH" decimalTokenAmount="10" tooltipText="tooltip" />,
-    );
-
-    expect(getByText('TokenListItem')).toBeInTheDocument();
-    expect(TokenListItem).toHaveBeenCalledWith(
-      expect.objectContaining({
-        tokenSymbol: 'WETH',
-        tokenImage: undefined,
-        primary: '10',
-        secondary: '$10.10',
-        title: 'WETH',
-        tooltipText: 'tooltip',
-      }),
-      {},
-    );
-  });
 });
diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/Asset.tsx
@@ -7,20 +7,17 @@ import { TokenListItem } from '../../token-list-item';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
 import { formatAmount } from '../../../../pages/confirmations/components/simulation-details/formatAmount';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
+import { AssetWithDisplayData, ERC20Asset } from './types';
 
-type AssetProps = {
-  address?: string | null;
-  image?: string;
-  symbol: string;
-  decimalTokenAmount?: string;
+type AssetProps = AssetWithDisplayData<ERC20Asset> & {
   tooltipText?: string;
 };
 
 export default function Asset({
   address,
   image,
   symbol,
-  decimalTokenAmount,
+  string: decimalTokenAmount,
   tooltipText,
 }: AssetProps) {
   const locale = useSelector(getIntlLocale);

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.test.tsx
@@ -9,7 +9,9 @@ import { getNativeCurrency } from '../../../../ducks/metamask/metamask';
 import { useUserPreferencedCurrency } from '../../../../hooks/useUserPreferencedCurrency';
 import { useCurrencyDisplay } from '../../../../hooks/useCurrencyDisplay';
 import { AssetType } from '../../../../../shared/constants/transaction';
+import { CHAIN_ID_TOKEN_IMAGE_MAP } from '../../../../../shared/constants/network';
 import AssetList from './AssetList';
+import { AssetWithDisplayData, ERC20Asset, NativeAsset } from './types';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
@@ -40,8 +42,11 @@ jest.mock('./Asset', () => jest.fn(() => <div>AssetComponent</div>));
 describe('AssetList', () => {
   const handleAssetChangeMock = jest.fn();
   const nativeCurrency = 'ETH';
-  const balanceValue = '1000000000000000000';
-  const tokenList = [
+  const balanceValue = '0x121';
+  const tokenList: (
+    | AssetWithDisplayData<ERC20Asset>
+    | AssetWithDisplayData<NativeAsset>
+  )[] = [
     {
       address: '0xToken1',
       symbol: 'TOKEN1',
@@ -61,13 +66,13 @@ describe('AssetList', () => {
       balance: '10',
     },
     {
-      address: '0xToken3',
-      symbol: 'TOKEN3',
+      address: null,
+      symbol: 'ETH',
       type: AssetType.native,
-      image: 'image3.png',
+      image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
       string: '30',
       decimals: 18,
-      balance: '20',
+      balance: '0x121',
     },
   ];
   const primaryCurrency = 'USD';
@@ -108,7 +113,11 @@ describe('AssetList', () => {
     render(
       <AssetList
         handleAssetChange={handleAssetChangeMock}
-        asset={{ type: AssetType.native }}
+        asset={{
+          type: AssetType.native,
+          image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+          symbol: 'ETH',
+        }}
         tokenList={tokenList}
       />,
     );
@@ -121,7 +130,11 @@ describe('AssetList', () => {
     render(
       <AssetList
         handleAssetChange={handleAssetChangeMock}
-        asset={{ type: AssetType.native }}
+        asset={{
+          type: AssetType.native,
+          image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+          symbol: 'ETH',
+        }}
         tokenList={tokenList}
       />,
     );
@@ -149,7 +162,11 @@ describe('AssetList', () => {
     render(
       <AssetList
         handleAssetChange={handleAssetChangeMock}
-        asset={{ type: AssetType.native }}
+        asset={{
+          type: AssetType.native,
+          image: CHAIN_ID_TOKEN_IMAGE_MAP['0x1'],
+          symbol: 'ETH',
+        }}
         tokenList={tokenList}
         isTokenDisabled={(token) => token.address === '0xToken1'}
       />,

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/AssetList.tsx
@@ -19,20 +19,21 @@ import {
   FlexWrap,
 } from '../../../../helpers/constants/design-system';
 import { TokenListItem } from '../..';
-import { Token } from './types';
 import AssetComponent from './Asset';
+import { AssetWithDisplayData, ERC20Asset, NativeAsset } from './types';
 
 type AssetListProps = {
-  handleAssetChange: (token: Token) => void;
-  asset?: {
-    type: AssetType;
-    image?: string;
-    address?: string; // native token if undefined or null
-    symbol?: string;
-    tokenId?: number;
-  };
-  tokenList: Token[];
-  isTokenDisabled?: (token: Token) => boolean;
+  handleAssetChange: (
+    token: AssetWithDisplayData<ERC20Asset> | AssetWithDisplayData<NativeAsset>,
+  ) => void;
+  asset?: ERC20Asset | NativeAsset;
+  tokenList: (
+    | AssetWithDisplayData<ERC20Asset>
+    | AssetWithDisplayData<NativeAsset>
+  )[];
+  isTokenDisabled?: (
+    token: AssetWithDisplayData<ERC20Asset> | AssetWithDisplayData<NativeAsset>,
+  ) => boolean;
 };
 
 export default function AssetList({
@@ -133,7 +134,6 @@ export default function AssetList({
                   <AssetComponent
                     key={token.address}
                     {...token}
-                    decimalTokenAmount={token.string}
                     tooltipText={
                       isDisabled ? 'swapTokenNotAvailable' : undefined
                     }

diff --git a/...mponents/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.stories.tsx b/...mponents/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.stories.tsx
@@ -6,6 +6,7 @@ import mockState from '../../../../../test/data/mock-state.json';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import { AssetPickerModal } from './asset-picker-modal';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
+import { ERC20Asset } from './types';
 
 const storybook = {
   title: 'Components/Multichain/AssetPickerModal',
@@ -16,11 +17,11 @@ const props = {
   isOpen: true,
   onClose: () => ({}),
   asset: {
-    balance: null,
-    details: null,
-    error: null,
+    address: '0xAddress',
+    symbol: 'TOKEN',
+    image: 'image.png',
     type: AssetType.token,
-  } as unknown as Asset,
+  } as ERC20Asset,
 };
 export const DefaultStory = () => {
   const t = useI18nContext();

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.test.tsx
@@ -31,8 +31,8 @@ import { getRenderableTokenData } from '../../../../hooks/useTokensToSearch';
 import * as actions from '../../../../store/actions';
 import { getSwapsBlockedTokens } from '../../../../ducks/send';
 import { AssetPickerModal } from './asset-picker-modal';
-import { Asset } from './types';
 import AssetList from './AssetList';
+import { ERC20Asset } from './types';
 
 jest.mock('./AssetList', () => jest.fn(() => <div>AssetList</div>));
 
@@ -73,11 +73,11 @@ describe('AssetPickerModal', () => {
     isOpen: true,
     onClose: onCloseMock,
     asset: {
-      balance: '0x0',
-      details: { address: '0xAddress', decimals: 18, symbol: 'TOKEN' },
-      error: null,
-      type: 'TOKEN',
-    } as unknown as Asset,
+      address: '0xAddress',
+      symbol: 'TOKEN',
+      image: 'image.png',
+      type: AssetType.token,
+    } as ERC20Asset,
     onAssetChange: onAssetChangeMock,
     sendingAsset: {
       image: 'image.png',
@@ -180,6 +180,8 @@ describe('AssetPickerModal', () => {
         {...defaultProps}
         asset={{
           type: AssetType.NFT,
+          tokenId: 5,
+          image: 'nft image',
         }}
         sendingAsset={undefined}
       />,