Merge branch 'main' into qq-mulitple-tokens-migration

MetaMask · Dec 18, 2024 · 874c128 · 874c128
2 parents 886cf1a + b018c81
commit 874c128
Show file tree

Hide file tree

Showing 18 changed files with 174 additions and 97 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
diff --git a/app/scripts/constants/sentry-state.ts b/app/scripts/constants/sentry-state.ts
@@ -104,10 +104,10 @@ export const SENTRY_BACKGROUND_STATE = {
       },
       destTokens: {},
       destTopAssets: [],
-      destTokensLoadingStatus: false,
+      destTokensLoadingStatus: true,
       srcTokens: {},
       srcTopAssets: [],
-      srcTokensLoadingStatus: false,
+      srcTokensLoadingStatus: true,
       quoteRequest: {
         walletAddress: false,
         srcTokenAddress: true,

diff --git a/shared/constants/network.ts b/shared/constants/network.ts
@@ -867,6 +867,7 @@ export const CHAIN_ID_TOKEN_IMAGE_MAP = {
   [CHAIN_IDS.GRAVITY_ALPHA_MAINNET]: GRAVITY_ALPHA_MAINNET_IMAGE_URL,
   [CHAIN_IDS.GRAVITY_ALPHA_TESTNET_SEPOLIA]:
     GRAVITY_ALPHA_TESTNET_SEPOLIA_IMAGE_URL,
+  [CHAINLIST_CHAIN_IDS_MAP.ZORA_MAINNET]: ETH_TOKEN_IMAGE_URL,
 } as const;
 
 export const INFURA_BLOCKED_KEY = 'countryBlocked';

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -76,8 +76,6 @@
       "srcTokens": {},
       "srcTopAssets": {},
       "destTokens": {},
-      "destTokensLoadingStatus": "undefined",
-      "srcTokensLoadingStatus": "undefined",
       "destTopAssets": {},
       "quoteRequest": {
         "srcTokenAddress": "0x0000000000000000000000000000000000000000",

diff --git a/test/e2e/tests/tokens/nft/send-nft.spec.js b/test/e2e/tests/tokens/nft/send-nft.spec.js
@@ -177,7 +177,7 @@ describe('Send NFT', function () {
         await driver.fill('input[placeholder="0"]', '0');
         assert.ok(
           await driver.findElement({
-            text: '1 token. Cannot send negative or zero amounts of asset.',
+            text: '1 NFT. Cannot send negative or zero amounts of asset.',
             tag: 'p',
           }),
         );

diff --git a/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/row.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`ConfirmInfoRow should match snapshot when copy is enabled 1`] = `
     <button
       aria-label="copy-button"
       class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
-      style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
+      style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
     >
       <span
         class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

diff --git a/ui/components/app/confirm/info/row/row.tsx b/ui/components/app/confirm/info/row/row.tsx
@@ -117,7 +117,7 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
         {copyEnabled && (
           <CopyIcon
             copyText={copyText ?? ''}
-            style={{ right: isCollapsible ? 32 : 4, top: 4 }}
+            style={{ right: isCollapsible ? 32 : 4 }}
             color={IconColor.iconMuted}
           />
         )}
@@ -130,7 +130,6 @@ export const ConfirmInfoRow: React.FC<ConfirmInfoRowProps> = ({
               cursor: 'pointer',
               position: 'absolute',
               right: 8,
-              top: 4,
             }}
             onClick={() => setExpanded(!expanded)}
             data-testid="sectionCollapseButton"

diff --git a/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx b/ui/components/multichain/asset-picker-amount/asset-balance/asset-balance-text.test.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Provider } from 'react-redux';
-import { render } from '@testing-library/react';
 import { AssetType } from '../../../../../shared/constants/transaction';
 import mockSendState from '../../../../../test/data/mock-send-state.json';
 import configureStore from '../../../../store/store';
 import { TextColor } from '../../../../helpers/constants/design-system';
+import { renderWithProvider } from '../../../../../test/jest/rendering';
 import { AssetBalanceText } from './asset-balance-text';
 
 const store = configureStore({
@@ -41,17 +40,22 @@ jest.mock('../utils', () => ({
   getIsFiatPrimary: () => mockGetIsFiatPrimary(),
 }));
 
+const MOCK_TOKEN_WITH_BALANCES_ONE = {
+  tokensWithBalances: [
+    { string: "doesn't matter", symbol: "doesn't matter", address: '0x01' },
+  ],
+};
+const MOCK_TOKEN_WITH_BALANCES_TWO = {
+  tokensWithBalances: [{ string: '100', address: '0x01' }],
+};
+
 describe('AssetBalanceText', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it('matches snapshot', () => {
-    mockUseTokenTracker.mockReturnValue({
-      tokensWithBalances: [
-        { string: "doesn't matter", symbol: "doesn't matter", address: '0x01' },
-      ],
-    });
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_ONE);
     mockUseCurrencyDisplay.mockReturnValue([
       'undefined',
       { value: 'fiat value', suffix: 'suffix', prefix: 'prefix-' },
@@ -64,21 +68,18 @@ describe('AssetBalanceText', () => {
       type: AssetType.native,
       balance: '1000000',
     };
-    const { asFragment } = render(
-      <Provider store={store}>
-        <AssetBalanceText
-          asset={asset}
-          balanceColor={'textColor' as TextColor}
-        />
-      </Provider>,
+    const { asFragment } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+      />,
+      store,
     );
     expect(asFragment()).toMatchSnapshot();
   });
 
   it('renders fiat primary correctly', () => {
-    mockUseTokenTracker.mockReturnValue({
-      tokensWithBalances: [{ string: "doesn't matter", address: '0x01' }],
-    });
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_ONE);
     mockUseCurrencyDisplay.mockReturnValue([
       'title',
       { value: '$1.23', symbol: "doesn't matter" },
@@ -92,20 +93,18 @@ describe('AssetBalanceText', () => {
       details: { address: '0x01', decimals: 2 },
       balance: '100',
     };
-    const { getByText } = render(
-      <Provider store={store}>
-        {/* Replace `any` with type */}
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <AssetBalanceText asset={asset} balanceColor={'textColor' as any} />
-      </Provider>,
+    const { getByText } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+      />,
+      store,
     );
     expect(getByText('$1.23')).toBeInTheDocument();
   });
 
   it('renders native asset type correctly', () => {
-    mockUseTokenTracker.mockReturnValue({
-      tokensWithBalances: [{ string: '100', address: '0x01' }],
-    });
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_TWO);
     mockUseCurrencyDisplay.mockReturnValue([
       'title',
       { value: 'test_balance' },
@@ -119,21 +118,86 @@ describe('AssetBalanceText', () => {
       balance: '10000',
     };
 
-    const { getByText } = render(
-      <Provider store={store}>
-        {/* Replace `any` with type */}
-        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
-        <AssetBalanceText asset={asset} balanceColor={'textColor' as any} />
-      </Provider>,
+    const { getByText } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+      />,
+      store,
     );
 
     expect(getByText('test_balance')).toBeInTheDocument();
   });
 
-  it('renders error correctly', () => {
-    mockUseTokenTracker.mockReturnValue({
-      tokensWithBalances: [{ string: '100', address: '0x01' }],
-    });
+  it('renders a single NFT correctly', () => {
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_TWO);
+    const asset = {
+      type: AssetType.NFT,
+      balance: '0x1',
+    };
+    mockUseCurrencyDisplay.mockReturnValue([
+      'title',
+      { value: 'test_balance' },
+    ]);
+    const { getByTestId } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+      />,
+      store,
+    );
+    expect(
+      getByTestId('asset-balance-nft-display').textContent,
+    ).toMatchInlineSnapshot(`"1 NFT"`);
+  });
+
+  it('renders multiple NFTs correctly', () => {
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_TWO);
+    const asset = {
+      type: AssetType.NFT,
+      balance: '0x3',
+    };
+    mockUseCurrencyDisplay.mockReturnValue([
+      'title',
+      { value: 'test_balance' },
+    ]);
+    const { getByTestId } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+      />,
+      store,
+    );
+    expect(
+      getByTestId('asset-balance-nft-display').textContent,
+    ).toMatchInlineSnapshot(`"3 NFTs"`);
+  });
+
+  it('renders NFT with error message', () => {
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_TWO);
+    const asset = {
+      type: AssetType.NFT,
+      balance: '0x3',
+    };
+    mockUseCurrencyDisplay.mockReturnValue([
+      'title',
+      { value: 'test_balance' },
+    ]);
+    const { getByTestId } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+        error="insufficientFundsForGas"
+      />,
+      store,
+    );
+    expect(
+      getByTestId('asset-balance-nft-display').textContent,
+    ).toMatchInlineSnapshot(`"3 NFTs. Insufficient funds for gas"`);
+  });
+
+  it('renders error message correctly', () => {
+    mockUseTokenTracker.mockReturnValue(MOCK_TOKEN_WITH_BALANCES_TWO);
     mockUseCurrencyDisplay.mockReturnValue([
       'title',
       { value: 'test_balance' },
@@ -147,17 +211,18 @@ describe('AssetBalanceText', () => {
       balance: '10000',
     };
 
-    const { getByText } = render(
-      <Provider store={store}>
-        <AssetBalanceText
-          asset={asset}
-          balanceColor={'textColor' as TextColor}
-          error="errorText"
-        />
-      </Provider>,
+    const { getByText, getByTestId } = renderWithProvider(
+      <AssetBalanceText
+        asset={asset}
+        balanceColor={'textColor' as TextColor}
+        error="insufficientFundsForGas"
+      />,
+      store,
     );
 
     expect(getByText('test_balance')).toBeInTheDocument();
-    expect(getByText('. [errorText]')).toBeInTheDocument();
+    expect(
+      getByTestId('send-page-amount-error').textContent,
+    ).toMatchInlineSnapshot(`". Insufficient funds for gas"`);
   });
 });
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
@@ -82,16 +82,18 @@ export function AssetBalanceText({
       variant: TextVariant.bodySm,
     },
   };
-
   const errorText = error ? `. ${t(error)}` : '';
 
   if (asset.type === AssetType.NFT) {
     const numberOfTokens = hexToDecimal(asset.balance || '0x0');
     return (
-      <Text {...commonProps.textProps}>
-        {`${numberOfTokens} ${t(
-          numberOfTokens === '1' ? 'token' : 'tokens',
-        )?.toLowerCase()}${errorText}`}
+      <Text {...commonProps.textProps} data-testid="asset-balance-nft-display">
+        {`${t(
+          numberOfTokens === '1'
+            ? 'assetSingleNFTBalance'
+            : 'assetMultipleNFTsBalance',
+          [numberOfTokens],
+        )}${errorText}`}
       </Text>
     );
   }

diff --git a/ui/pages/asset/components/asset-page.tsx b/ui/pages/asset/components/asset-page.tsx
@@ -75,7 +75,7 @@ export type Asset = (
       /** The number of decimal places to move left when displaying balances */
       decimals: number;
       /** An array of token list sources the asset appears in, e.g. [1inch,Sushiswap]  */
-      aggregators?: [];
+      aggregators?: string[];
     }
 ) & {
   /** The hexadecimal chain id */
@@ -332,7 +332,13 @@ const AssetPage = ({
                           >
                             {t('tokenList')}
                           </Text>
-                          <Text>{asset.aggregators.join(', ')}</Text>
+                          <Text>
+                            {asset.aggregators
+                              .map((agg) =>
+                                agg.replace(/^metamask$/iu, 'MetaMask'),
+                              )
+                              .join(', ')}
+                          </Text>
                         </Box>
                       )}
                     </Box>

diff --git a/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/__snapshots__/info.test.tsx.snap
@@ -570,7 +570,7 @@ exports[`Info renders info section for personal sign request 1`] = `
       <button
         aria-label="copy-button"
         class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
-        style="cursor: pointer; position: absolute; right: 32px; top: 4px;"
+        style="cursor: pointer; position: absolute; right: 32px; top: 2px;"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -581,7 +581,7 @@ exports[`Info renders info section for personal sign request 1`] = `
         aria-label="collapse-button"
         class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
         data-testid="sectionCollapseButton"
-        style="cursor: pointer; position: absolute; right: 8px; top: 4px;"
+        style="cursor: pointer; position: absolute; right: 8px;"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
@@ -1019,7 +1019,7 @@ exports[`Info renders info section for typed sign request 1`] = `
       <button
         aria-label="copy-button"
         class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
-        style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
+        style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"

diff --git a/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/approve/__snapshots__/approve.test.tsx.snap
@@ -654,7 +654,7 @@ exports[`<ApproveInfo /> renders component for approve request 1`] = `
       <button
         aria-label="copy-button"
         class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-muted mm-box--background-color-transparent mm-box--rounded-lg"
-        style="cursor: pointer; position: absolute; right: 4px; top: 4px;"
+        style="cursor: pointer; position: absolute; right: 4px; top: 2px;"
       >
         <span
           class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"