wip

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.test.ts

@@ -0,0 +1,120 @@
+import { TransactionMeta } from '@metamask/transaction-controller';
+import { genUnapprovedTokenTransferConfirmation } from '../../../../../../../test/data/confirmations/token-transfer';
+import mockState from '../../../../../../../test/data/mock-state.json';
+import { renderHookWithProvider } from '../../../../../../../test/lib/render-helpers';
+// import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
+import { Numeric } from '../../../../../../../shared/modules/Numeric';
+import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
+import { useTokenTracker } from '../../../../../../hooks/useTokenTracker';
+import { useTokenValues } from './use-token-values';
+
+jest.mock(
+  '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate',
+  () => jest.fn(),
+);
+
+jest.mock('../../../../../../hooks/useTokenTracker', () => ({
+  ...jest.requireActual('../../../../../../hooks/useTokenTracker'),
+  useTokenTracker: jest.fn(),
+}));
+
+describe('useTokenValues', () => {
+  const useTokenExchangeRateMock = jest.mocked(useTokenExchangeRate);
+  const useTokenTrackerMock = jest.mocked(useTokenTracker);
+
+  const TEST_SELECTED_TOKEN = {
+    address: 'address',
+    decimals: 18,
+    symbol: 'symbol',
+    iconUrl: 'iconUrl',
+    image: 'image',
+  };
+
+  it('returns native and fiat balances', async () => {
+    (useTokenTrackerMock as jest.Mock).mockResolvedValue({
+      tokensWithBalances: [
+        {
+          address: '0x076146c765189d51be3160a2140cf80bfc73ad68',
+          balance: '1000000000000000000',
+          decimals: 18,
+        },
+      ],
+    });
+
+    (useTokenExchangeRateMock as jest.Mock).mockResolvedValue(
+      new Numeric(1, 10),
+    );
+
+    const transactionMeta = genUnapprovedTokenTransferConfirmation(
+      {},
+    ) as TransactionMeta;
+
+    const { result, waitForNextUpdate } = renderHookWithProvider(
+      () => useTokenValues(transactionMeta, TEST_SELECTED_TOKEN),
+      mockState,
+    );
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      fiatDisplayValue: '$1.00',
+      tokenBalance: '1',
+    });
+  });
+
+  it('returns undefined native and fiat balances if no token with balances is returned', async () => {
+    (useTokenTrackerMock as jest.Mock).mockResolvedValue({
+      tokensWithBalances: [],
+    });
+
+    (useTokenExchangeRateMock as jest.Mock).mockResolvedValue(
+      new Numeric(1, 10),
+    );
+
+    const transactionMeta = genUnapprovedTokenTransferConfirmation(
+      {},
+    ) as TransactionMeta;
+
+    const { result, waitForNextUpdate } = renderHookWithProvider(
+      () => useTokenValues(transactionMeta, TEST_SELECTED_TOKEN),
+      mockState,
+    );
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      fiatDisplayValue: undefined,
+      tokenBalance: undefined,
+    });
+  });
+
+  it('returns undefined fiat balance if no token rate is returned', async () => {
+    (useTokenTrackerMock as jest.Mock).mockResolvedValue({
+      tokensWithBalances: [
+        {
+          address: '0x076146c765189d51be3160a2140cf80bfc73ad68',
+          balance: '1000000000000000000',
+          decimals: 18,
+        },
+      ],
+    });
+
+    (useTokenExchangeRateMock as jest.Mock).mockResolvedValue(null);
+
+    const transactionMeta = genUnapprovedTokenTransferConfirmation(
+      {},
+    ) as TransactionMeta;
+
+    const { result, waitForNextUpdate } = renderHookWithProvider(
+      () => useTokenValues(transactionMeta, TEST_SELECTED_TOKEN),
+      mockState,
+    );
+
+    await waitForNextUpdate();
+
+    expect(result.current).toEqual({
+      fiatDisplayValue: undefined,
+      tokenBalance: '1',
+    });
+  });
+});

ui/pages/confirmations/components/confirm/info/hooks/use-token-values.ts

@@ -1,5 +1,5 @@
 import { TransactionMeta } from '@metamask/transaction-controller';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { calcTokenAmount } from '../../../../../../../shared/lib/transactions-controller-utils';
 import { toChecksumHexAddress } from '../../../../../../../shared/modules/hexstring-utils';
 import useTokenExchangeRate from '../../../../../../components/app/currency-input/hooks/useTokenExchangeRate';
@@ -11,44 +11,66 @@ export const useTokenValues = (
   transactionMeta: TransactionMeta,
   selectedToken: SelectedToken,
 ) => {
-  const {
-    tokensWithBalances,
-  }: {
-    tokensWithBalances: {
-      balance: string;
-      address: string;
-      decimals: number;
-      string: string;
-    }[];
-  } = useTokenTracker({ tokens: [selectedToken], address: undefined });
+  const [tokensWithBalances, setTokensWithBalances] = useState<
+    { 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,
+    });
+
+    setTokensWithBalances(result.tokensWithBalances);
+  };
+
+  fetchTokenBalances();
+
+  const [exchangeRate, setExchangeRate] = useState<any>();
+  const fetchExchangeRate = async () => {
+    const result = await useTokenExchangeRate(transactionMeta?.txParams?.to);
+
+    setExchangeRate(result);
+  };
+
+  fetchExchangeRate();
 
   const tokenBalance = useMemo(() => {
     const tokenWithBalance = tokensWithBalances.find(
-      (token) =>
+      (token: {
+        balance: string;
+        address: string;
+        decimals: number;
+        string: string;
+      }) =>
         toChecksumHexAddress(token.address) ===
         toChecksumHexAddress(transactionMeta?.txParams?.to as string),
     );
 
     if (!tokenWithBalance) {
-      return '';
+      return undefined;
     }
 
     return calcTokenAmount(tokenWithBalance.balance, tokenWithBalance.decimals);
   }, [tokensWithBalances]);
 
-  const exchangeRate = useTokenExchangeRate(transactionMeta?.txParams?.to);
-
-  const fiatValue = useMemo(() => {
-    if (exchangeRate && tokenBalance !== '') {
-      return exchangeRate.times(tokenBalance).toNumber();
-    }
-    return undefined;
-  }, [exchangeRate, tokenBalance]);
+  const fiatValue =
+    exchangeRate && tokenBalance && exchangeRate.times(tokenBalance).toNumber();
 
   const fiatFormatter = useFiatFormatter();
 
   const fiatDisplayValue =
     fiatValue && fiatFormatter(fiatValue, { shorten: true });
 
-  return { fiatDisplayValue, tokenBalance };
+  return {
+    fiatDisplayValue,
+    tokenBalance: tokenBalance && String(tokenBalance.toNumber()),
+  };
 };