fix: clean up

MetaMask · Apr 24, 2024 · d8a6f0b · d8a6f0b
1 parent ac3bbd8
commit d8a6f0b
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 60 deletions.
diff --git a/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap b/ui/components/app/token-cell/__snapshots__/token-cell.test.js.snap
@@ -53,12 +53,14 @@ exports[`Token Cell should match snapshot 1`] = `
             >
               TEST
             </span>
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-alternative"
-              data-testid="multichain-token-list-item-token-name"
+            <div
+              class="mm-box mm-box--display-flex"
             >
-              TEST
-            </p>
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                data-testid="token-increase-decrease-percentage"
+              />
+            </div>
           </div>
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"

diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js
@@ -2,6 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import classnames from 'classnames';
+import { zeroAddress } from 'ethereumjs-util';
 import {
   useHistory,
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
@@ -104,8 +105,6 @@ const EthOverview = ({ className, showAddress }) => {
   const contractPercentChange1d = tokenPercentChange1d?.[chainId] ?? '';
   const contractPriceChange1d = tokenPriceChange1d?.[chainId] ?? '';
 
-  const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
-
   const account = useSelector(getSelectedInternalAccount);
   const isSwapsChain = useSelector(getIsSwapsChain);
   const isSigningEnabled =
@@ -257,8 +256,8 @@ const EthOverview = ({ className, showAddress }) => {
               />
             )}
             <PercentageChange
-              value={contractPercentChange1d[ZERO_ADDRESS]}
-              valueChange={contractPriceChange1d[ZERO_ADDRESS]}
+              value={contractPercentChange1d[zeroAddress()]}
+              valueChange={contractPriceChange1d[zeroAddress()]}
               includeNumber
             />
           </div>

diff --git a/ui/components/app/wallet-overview/eth-overview.test.js b/ui/components/app/wallet-overview/eth-overview.test.js
@@ -12,6 +12,7 @@ import {
 import { renderWithProvider } from '../../../../test/jest/rendering';
 import { KeyringType } from '../../../../shared/constants/keyring';
 import { useIsOriginalNativeTokenSymbol } from '../../../hooks/useIsOriginalNativeTokenSymbol';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 import EthOverview from './eth-overview';
 
 // Mock BUYABLE_CHAINS_MAP
@@ -37,10 +38,17 @@ jest.mock('../../../hooks/useIsOriginalNativeTokenSymbol', () => {
   };
 });
 
+jest.mock('../../../ducks/locale/locale', () => ({
+  getIntlLocale: jest.fn(),
+}));
+
+const mockGetIntlLocale = getIntlLocale;
+
 let openTabSpy;
 
 describe('EthOverview', () => {
   useIsOriginalNativeTokenSymbol.mockReturnValue(true);
+  mockGetIntlLocale.mockReturnValue('en-US');
 
   const mockStore = {
     metamask: {

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
@@ -3,10 +3,18 @@ import configureStore from 'redux-mock-store';
 import { Asset } from '../../../../ducks/send';
 import mockState from '../../../../../test/data/mock-send-state.json';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { getIntlLocale } from '../../../../ducks/locale/locale';
 import { AssetPickerModal } from './asset-picker-modal';
 
+jest.mock('../../../../ducks/locale/locale', () => ({
+  getIntlLocale: jest.fn(),
+}));
+
+const mockGetIntlLocale = getIntlLocale as unknown as jest.Mock;
+
 describe('AssetPickerModal', () => {
   const store = configureStore()(mockState);
+  mockGetIntlLocale.mockReturnValue('en-US');
 
   const props = {
     isOpen: true,

diff --git a/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap b/ui/components/multichain/token-list-item/__snapshots__/token-list-item.test.js.snap
@@ -46,10 +46,14 @@ exports[`TokenListItem should render correctly 1`] = `
             <span
               class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
             />
-            <p
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-alternative"
-              data-testid="multichain-token-list-item-token-name"
-            />
+            <div
+              class="mm-box mm-box--display-flex"
+            >
+              <p
+                class="mm-box mm-text mm-text--body-md mm-text--font-weight-normal mm-text--ellipsis mm-box--color-text-default"
+                data-testid="token-increase-decrease-percentage"
+              />
+            </div>
           </div>
           <div
             class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"

diff --git a/ui/components/multichain/token-list-item/price/percentage-change.test.tsx b/ui/components/multichain/token-list-item/price/percentage-change.test.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import { PercentageChange } from '.';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 import { getCurrentCurrency } from '../../../../selectors';
+import { PercentageChange } from './percentage-change';
 
 jest.mock('react-redux', () => ({
   useSelector: jest.fn((selector) => selector()),
@@ -39,7 +39,7 @@ describe('PercentageChange Component', () => {
     mockGetCurrentCurrency.mockReturnValue('USD');
 
     render(<PercentageChange value={5.123} />);
-    const valueElement = screen.getByText(/\+5.12%/i);
+    const valueElement = screen.getByText('+5.12%');
     expect(valueElement).toBeInTheDocument();
   });
 
@@ -48,7 +48,7 @@ describe('PercentageChange Component', () => {
     mockGetCurrentCurrency.mockReturnValue('USD');
 
     render(<PercentageChange value={-2.345} />);
-    const valueElement = screen.getByText(/-2.35%/i);
+    const valueElement = screen.getByText('-2.35%');
     expect(valueElement).toBeInTheDocument();
   });
 
@@ -57,7 +57,7 @@ describe('PercentageChange Component', () => {
     mockGetCurrentCurrency.mockReturnValue('USD');
 
     render(<PercentageChange value={0} />);
-    const valueElement = screen.getByText(/\+0.00%/i);
+    const valueElement = screen.getByText('+0.00%');
     expect(valueElement).toBeInTheDocument();
   });
 
@@ -101,7 +101,7 @@ describe('PercentageChange Component', () => {
     mockGetCurrentCurrency.mockReturnValue('USD');
 
     render(<PercentageChange value={0} />);
-    const valueElement = screen.getByText(/\+0.00%/i);
+    const valueElement = screen.getByText('+0.00%');
     expect(valueElement).toBeInTheDocument();
   });
 

diff --git a/ui/components/multichain/token-list-item/price/percentage-change.tsx b/ui/components/multichain/token-list-item/price/percentage-change.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
-import { Text } from '../../../component-library';
+import { useSelector } from 'react-redux';
+import { Text, Box } from '../../../component-library';
 import {
   Display,
   FontWeight,
   TextColor,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
-import { Box } from '../../../component-library';
-import { useSelector } from 'react-redux';
 import { getCurrentCurrency } from '../../../../selectors';
 import { getIntlLocale } from '../../../../ducks/locale/locale';
 
-const renderPercentage = (value, color) => {
+const renderPercentage = (value: string, color: TextColor) => {
   return (
     <Box display={Display.Flex}>
       <Text
@@ -27,7 +26,11 @@ const renderPercentage = (value, color) => {
   );
 };
 
-const renderPercentageWithNumber = (value, formattedValuePrice, color) => {
+const renderPercentageWithNumber = (
+  value: string,
+  formattedValuePrice: string,
+  color: TextColor,
+) => {
   return (
     <Box display={Display.Flex}>
       <Text
@@ -52,37 +55,46 @@ const renderPercentageWithNumber = (value, formattedValuePrice, color) => {
     </Box>
   );
 };
-const isNotNullOrUndefinedOrNaN = (value) => {
-  return value !== null && value !== undefined && !Number.isNaN(value);
-};
 
 export const PercentageChange = ({
   value,
-  valueChange = null,
+  valueChange,
   includeNumber = false,
+}: {
+  value: number | null | undefined;
+  valueChange?: number | null | undefined;
+  includeNumber?: boolean;
 }) => {
   const fiatCurrency = useSelector(getCurrentCurrency);
   const locale = useSelector(getIntlLocale);
 
-  const color = isNotNullOrUndefinedOrNaN(value)
-    ? value >= 0
-      ? TextColor.successDefault
-      : TextColor.errorDefault
-    : TextColor.textDefault;
+  let color = TextColor.textDefault;
+
+  if (value !== null && value !== undefined && !Number.isNaN(value)) {
+    if (value >= 0) {
+      color = TextColor.successDefault;
+    } else {
+      color = TextColor.errorDefault;
+    }
+  }
 
-  const formattedValue = isNotNullOrUndefinedOrNaN(value)
-    ? `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
-    : '';
+  const formattedValue =
+    value !== null && value !== undefined && !Number.isNaN(value)
+      ? `${value >= 0 ? '+' : ''}${value.toFixed(2)}%`
+      : '';
 
-  const formattedValuePrice = isNotNullOrUndefinedOrNaN(valueChange)
-    ? `${valueChange >= 0 ? '+' : ''}(${Intl.NumberFormat(locale, {
-        notation: 'compact',
-        compactDisplay: 'short',
-        style: 'currency',
-        currency: fiatCurrency,
-        maximumFractionDigits: 2,
-      }).format(valueChange)})  `
-    : '';
+  const formattedValuePrice =
+    valueChange !== null &&
+    valueChange !== undefined &&
+    !Number.isNaN(valueChange)
+      ? `${valueChange >= 0 ? '+' : ''}(${Intl.NumberFormat(locale, {
+          notation: 'compact',
+          compactDisplay: 'short',
+          style: 'currency',
+          currency: fiatCurrency,
+          maximumFractionDigits: 2,
+        }).format(valueChange)}) `
+      : '';
 
   return includeNumber
     ? renderPercentageWithNumber(formattedValue, formattedValuePrice, color)

diff --git a/ui/components/multichain/token-list-item/token-list-item.js b/ui/components/multichain/token-list-item/token-list-item.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
+import { zeroAddress } from 'ethereumjs-util';
 import {
   AlignItems,
   BackgroundColor,
@@ -78,7 +79,6 @@ export const TokenListItem = ({
   const trackEvent = useContext(MetaMetricsContext);
   const metaMetricsId = useSelector(getMetaMetricsId);
   const chainId = useSelector(getCurrentChainId);
-  const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
 
   // Scam warning
   const showScamWarning = isNativeCurrency && !isOriginalTokenSymbol;
@@ -94,7 +94,6 @@ export const TokenListItem = ({
   const tokenPercentChange1d = useSelector(getTokenPercentChange1d);
   const contractPercentChange1d = tokenPercentChange1d?.[chainId] ?? '';
 
-  console.log('HERE +++++++++++++++', contractPercentChange1d[ZERO_ADDRESS]);
   const tokenAddress = address ? address.toLowerCase() : null;
 
   const tokenPercentageChange = contractPercentChange1d[tokenAddress];
@@ -262,7 +261,7 @@ export const TokenListItem = ({
               <PercentageChange
                 value={
                   isNativeCurrency
-                    ? contractPercentChange1d[ZERO_ADDRESS]
+                    ? contractPercentChange1d[zeroAddress()]
                     : tokenPercentageChange
                 }
               />

diff --git a/ui/components/multichain/token-list-item/token-list-item.test.js b/ui/components/multichain/token-list-item/token-list-item.test.js
@@ -8,6 +8,7 @@ import {
   CURRENCY_SYMBOLS,
   NETWORK_TYPES,
 } from '../../../../shared/constants/network';
+import { getIntlLocale } from '../../../ducks/locale/locale';
 import { TokenListItem } from '.';
 
 const state = {
@@ -28,10 +29,17 @@ const state = {
 
 let openTabSpy;
 
+jest.mock('../../../ducks/locale/locale', () => ({
+  getIntlLocale: jest.fn(),
+}));
+
+const mockGetIntlLocale = getIntlLocale;
+
 describe('TokenListItem', () => {
   beforeAll(() => {
     global.platform = { openTab: jest.fn() };
     openTabSpy = jest.spyOn(global.platform, 'openTab');
+    mockGetIntlLocale.mockReturnValue('en-US');
   });
   const props = {
     onClick: jest.fn(),

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -493,17 +493,7 @@ export const getTokenExchangeRates = (state) =>
 export const getTokenPercentChange1d = (state) =>
   state.metamask.contractPercentChange1d;
 
-export const getTokenPriceChange1d = (state) => {
-  console.log(
-    'priceChange1d *********** ---------------',
-    state.metamask.priceChange1d,
-  );
-  console.log(
-    'contractPercentChange1d *********** ---------------',
-    state.metamask.contractPercentChange1d,
-  );
-  return state.metamask.priceChange1d;
-};
+export const getTokenPriceChange1d = (state) => state.metamask.priceChange1d;
 
 export function getAddressBook(state) {
   const chainId = getCurrentChainId(state);

diff --git a/yarn.lock b/yarn.lock
@@ -4142,7 +4142,7 @@ __metadata:
 
 "@metamask/assets-controllers@patch:@metamask/assets-controllers@patch%3A@metamask/assets-controllers@patch%253A@metamask/assets-controllers@npm%25253A26.0.0%2523~/.yarn/patches/@metamask-assets-controllers-npm-26.0.0-17c0e9432c.patch%253A%253Aversion=26.0.0&hash=cf1d54%23~/.yarn/patches/@metamask-assets-controllers-patch-0f46262fea.patch%3A%3Aversion=26.0.0&hash=8a466a#~/.yarn/patches/@metamask-assets-controllers-patch-a36ffc4f15.patch":
   version: 26.0.0
-  resolution: "@metamask/assets-controllers@patch:@metamask/assets-controllers@patch%3A@metamask/assets-controllers@patch%253A@metamask/assets-controllers@npm%25253A26.0.0%2523~/.yarn/patches/@metamask-assets-controllers-npm-26.0.0-17c0e9432c.patch%253A%253Aversion=26.0.0&hash=cf1d54%23~/.yarn/patches/@metamask-assets-controllers-patch-0f46262fea.patch%3A%3Aversion=26.0.0&hash=8a466a#~/.yarn/patches/@metamask-assets-controllers-patch-a36ffc4f15.patch::version=26.0.0&hash=e51182"
+  resolution: "@metamask/assets-controllers@patch:@metamask/assets-controllers@patch%3A@metamask/assets-controllers@patch%253A@metamask/assets-controllers@npm%25253A26.0.0%2523~/.yarn/patches/@metamask-assets-controllers-npm-26.0.0-17c0e9432c.patch%253A%253Aversion=26.0.0&hash=cf1d54%23~/.yarn/patches/@metamask-assets-controllers-patch-0f46262fea.patch%3A%3Aversion=26.0.0&hash=5c145e#~/.yarn/patches/@metamask-assets-controllers-patch-a36ffc4f15.patch::version=26.0.0&hash=e51182"
   dependencies:
     "@ethereumjs/util": "npm:^8.1.0"
     "@ethersproject/address": "npm:^5.7.0"
@@ -4178,7 +4178,7 @@ __metadata:
     "@metamask/keyring-controller": ^13.0.0
     "@metamask/network-controller": ^17.2.0
     "@metamask/preferences-controller": ^8.0.0
-  checksum: 647d0ef3e5aaf11a53e28e9b7ee7b4e5844f62dd9811318867081b138012ef81d794e3cf65bf1ca846fcb8f96c42cba0d0f17eef02298ea9c9d05af41c3e5742
+  checksum: 6ea2de1cb598c40a0e27c0f7b5b2cc76998e751552d8a55d141b2b814d51f76aaeda5fb46cdcf4f3d9cfa68fe3bcb869075cb4a2a7afb340cbe1a9e55333d079
   languageName: node
   linkType: hard