fix unit test

MetaMask · Oct 10, 2024 · f873e25 · f873e25
1 parent 0175240
commit f873e25
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 25 deletions.
diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts
@@ -113,7 +113,7 @@ describe('useTokenValues', () => {
     await waitForNextUpdate();
 
     expect(result.current).toEqual({
-      fiatDisplayValue: undefined,
+      fiatDisplayValue: null,
       tokenBalance: '1',
     });
   });

diff --git a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts
@@ -2,6 +2,7 @@ import { TransactionMeta } from '@metamask/transaction-controller';
 import { useEffect, useMemo, useState } from 'react';
 import { calcTokenAmount } from '../../../../../../../shared/lib/transactions-controller-utils';
 import { toChecksumHexAddress } from '../../../../../../../shared/modules/hexstring-utils';
+import { Numeric } from '../../../../../../../shared/modules/Numeric';
 import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
 import { useFiatFormatter } from '../../../../../../hooks/useFiatFormatter';
 import { useTokenTracker } from '../../../../../../hooks/useTokenTracker';
@@ -15,25 +16,27 @@ export const useTokenValues = (
     { balance: string; address: string; decimals: number; string: string }[]
   >([]);
 
-  const fetchTokenBalances = async () => {
-    const result: {
-      tokensWithBalances: {
-        balance: string;
-        address: string;
-        decimals: number;
-        string: string;
-      }[];
-    } = await useTokenTracker({
-      tokens: [selectedToken],
-      address: undefined,
-    });
+  useEffect(() => {
+    const fetchTokenBalances = async () => {
+      const result: {
+        tokensWithBalances: {
+          balance: string;
+          address: string;
+          decimals: number;
+          string: string;
+        }[];
+      } = await useTokenTracker({
+        tokens: [selectedToken],
+        address: undefined,
+      });
 
-    setTokensWithBalances(result.tokensWithBalances);
-  };
+      setTokensWithBalances(result.tokensWithBalances);
+    };
 
-  fetchTokenBalances();
+    fetchTokenBalances();
+  }, [selectedToken]);
 
-  const [exchangeRate, setExchangeRate] = useState<any>();
+  const [exchangeRate, setExchangeRate] = useState<Numeric | undefined>();
   const fetchExchangeRate = async () => {
     const result = await useTokenExchangeRate(transactionMeta?.txParams?.to);
 

diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.stories.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.stories.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { getMockTokenTransferConfirmState } from '../../../../../../../../test/data/confirmations/helper';
 import configureStore from '../../../../../../../store/store';
+import { ConfirmContextProvider } from '../../../../../context/confirm';
 import SendHeading from './send-heading';
 
 const store = configureStore(getMockTokenTransferConfirmState({}));
@@ -19,6 +20,10 @@ const Story = {
 
 export default Story;
 
-export const DefaultStory = () => <SendHeading />;
+export const DefaultStory = () => (
+  <ConfirmContextProvider>
+    <SendHeading />
+  </ConfirmContextProvider>
+);
 
 DefaultStory.storyName = 'Default';
diff --git a/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.test.tsx b/ui/pages/confirmations/components/confirm/info/shared/send-heading/send-heading.test.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import mockState from '../../../../../../../../test/data/mock-state.json';
+import { getMockTokenTransferConfirmState } from '../../../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../../../test/lib/confirmations/render-helpers';
 import SendHeading from './send-heading';
 
 describe('<SendHeading />', () => {
   const middleware = [thunk];
+  const state = getMockTokenTransferConfirmState({});
+  const mockStore = configureMockStore(middleware)(state);
 
   it('renders component', () => {
-    const state = mockState;
-    const mockStore = configureMockStore(middleware)(state);
     const { container } = renderWithConfirmContextProvider(
       <SendHeading />,
       mockStore,

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
@@ -18,6 +18,7 @@ import {
 } 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 { useTokenValues } from '../../hooks/use-token-values';
@@ -26,7 +27,7 @@ const SendHeading = () => {
   const t = useI18nContext();
   const { currentConfirmation: transactionMeta } =
     useConfirmContext<TransactionMeta>();
-  const selectedToken = useSelector((state: any) =>
+  const selectedToken = useSelector((state: MultichainState) =>
     getWatchedToken(transactionMeta)(state),
   );
   const { tokenImage } = useTokenImage(transactionMeta, selectedToken);
@@ -57,7 +58,7 @@ const SendHeading = () => {
         variant={TextVariant.headingLg}
         color={TextColor.inherit}
         marginTop={3}
-      >{`${tokenBalance} ${selectedToken?.symbol || t('unknown')}`}</Text>
+      >{`${tokenBalance || ''} ${selectedToken?.symbol || t('unknown')}`}</Text>
       {fiatDisplayValue && (
         <Text variant={TextVariant.bodyMd} color={TextColor.textAlternative}>
           {fiatDisplayValue}

diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
@@ -108,6 +108,7 @@ import { MultichainNativeAssets } from '../../shared/constants/multichain/assets
 // eslint-disable-next-line import/no-restricted-paths
 import { BridgeFeatureFlagsKey } from '../../app/scripts/controllers/bridge/types';
 import { hasTransactionData } from '../../shared/modules/transaction.utils';
+import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 import {
   getAllUnapprovedTransactions,
   getCurrentNetworkTransactions,
@@ -123,7 +124,6 @@ import {
 } from './permissions';
 import { createDeepEqualSelector } from './util';
 import { getMultichainBalances, getMultichainNetwork } from './multichain';
-import { toChecksumHexAddress } from '../../shared/modules/hexstring-utils';
 
 /**
  * Returns true if the currently selected network is inaccessible or whether no
@@ -542,7 +542,7 @@ export const getWatchedToken = (transactionMeta) =>
   createSelector(
     [getSelectedAccount, getAllTokens],
     (selectedAccount, detectedTokens) => {
-      const chainId = transactionMeta.chainId;
+      const { chainId } = transactionMeta;
 
       const selectedToken = detectedTokens?.[chainId]?.[
         selectedAccount.address