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
index d3bcf559e5aa..7ac4aa5b5c92 100644
--- 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
index 6d7c16436e20..9515a45515bf 100644
--- a/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts
+++ b/ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts
@@ -1,7 +1,8 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
-import { useEffect, useMemo, useState } from 'react';
+import { 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';
@@ -33,7 +34,7 @@ export const useTokenValues = (
 
   fetchTokenBalances();
 
-  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
index 0208c364e1ec..f4bfb484c107 100644
--- 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
index 6ebcc06b6aac..613930f9901d 100644
--- 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
index 6ae3b9dc975a..d571c61ee93e 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
@@ -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
index 2b392107d6b2..2059c3a4678d 100644
--- 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