Merge branch 'main' into feat/trezor-erc721-e2e

Author: dawnseeker8

app/_locales/en/messages.json

@@ -5,6 +5,7 @@ import mockState from '../../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../../test/jest';
 import configureStore from '../../../../../store/store';
 import * as BalanceFunctions from '../../../hooks/send/useBalance';
+import * as CurrencyConversions from '../../../hooks/send/useCurrencyConversions';
 import * as SendContext from '../../../context/send';
 import { Amount } from './amount';
 
@@ -44,6 +45,34 @@ describe('Amount', () => {
     expect(mockUpdateValue).toHaveBeenCalledWith('1');
   });
 
+  it('amount input is reset when fiatmode is toggled', () => {
+    const { getByRole, getByText } = render();
+
+    fireEvent.change(getByRole('textbox'), { target: { value: 100 } });
+    expect(getByText('Fiat Mode')).toBeInTheDocument();
+    fireEvent.click(getByText('Fiat Mode'));
+    expect(getByText('Native Mode')).toBeInTheDocument();
+    expect(getByRole('textbox')).toHaveValue('');
+  });
+
+  it('if fiatmode is enbled call update value with converted values method when value is changed', () => {
+    const mockUpdateValue = jest.fn();
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      updateValue: mockUpdateValue,
+    } as unknown as SendContext.SendContextType);
+    jest.spyOn(CurrencyConversions, 'useCurrencyConversions').mockReturnValue({
+      fiatCurrencySymbol: 'USD',
+      getFiatValue: () => '20',
+      getNativeValue: () => '20',
+    });
+
+    const { getByRole, getByText } = render();
+
+    fireEvent.click(getByText('Fiat Mode'));
+    fireEvent.change(getByRole('textbox'), { target: { value: 1 } });
+    expect(mockUpdateValue).toHaveBeenCalledWith('20');
+  });
+
   it('go to sendTo page when continue button is clicked', () => {
     const { getByText } = render();
 

app/_locales/en_GB/messages.json

@@ -1,33 +1,52 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 
 import {
   Button,
   Text,
   TextField,
 } from '../../../../../components/component-library';
+import { useAmountValidation } from '../../../hooks/send/useAmountValidation';
 import { useBalance } from '../../../hooks/send/useBalance';
+import { useCurrencyConversions } from '../../../hooks/send/useCurrencyConversions';
 import { useNavigateSendPage } from '../../../hooks/send/useNavigateSendPage';
 import { useSendContext } from '../../../context/send';
 import { Header } from '../header';
 
 export const Amount = () => {
+  const [amount, setAmount] = useState('');
+  const { amountError } = useAmountValidation();
+  const { balance } = useBalance();
+  const [faitMode, setFiatMode] = useState(false);
+  const { getNativeValue } = useCurrencyConversions();
   const { goToSendToPage, goToPreviousPage } = useNavigateSendPage();
   const { updateValue } = useSendContext();
-  const { balance } = useBalance();
 
   const onChange = useCallback(
-    (event) => updateValue(event.target.value),
-    [updateValue],
+    (event) => {
+      const newValue = event.target.value;
+      updateValue(faitMode ? getNativeValue(newValue) : newValue);
+      setAmount(newValue);
+    },
+    [faitMode, getNativeValue, setAmount, updateValue],
   );
 
+  const toggleFiatMode = useCallback(() => {
+    setAmount('');
+    setFiatMode(!faitMode);
+  }, [faitMode, setAmount, setFiatMode]);
+
   return (
     <div className="send__wrapper">
       <div className="send__container">
         <div className="send__content">
           <Header />
           <p>AMOUNTs</p>
-          <TextField onChange={onChange} />
+          <TextField value={amount} onChange={onChange} />
           <Text>Balance: {balance}</Text>
+          <Text>Error: {amountError}</Text>
+          <Button onClick={toggleFiatMode}>
+            {faitMode ? 'Native Mode' : 'Fiat Mode'}
+          </Button>
           <Button onClick={goToPreviousPage}>Previous</Button>
           <Button onClick={goToSendToPage}>Continue</Button>
         </div>

ui/pages/confirmations/components/send/amount/amount.test.tsx

@@ -0,0 +1,140 @@
+import { DefaultRootState } from 'react-redux';
+
+import mockState from '../../../../../../test/data/mock-state.json';
+import {
+  EVM_ASSET,
+  EVM_NATIVE_ASSET,
+} from '../../../../../../test/data/send/assets';
+import { renderHookWithProvider } from '../../../../../../test/lib/render-helpers';
+import * as SendContext from '../../../context/send';
+import { useEvmAmountValidation } from './useEvmAmountValidation';
+
+const MOCK_ADDRESS_1 = '0xdB055877e6c13b6A6B25aBcAA29B393777dD0a73';
+
+const mockHistory = {
+  goBack: jest.fn(),
+  push: jest.fn(),
+};
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => mockHistory,
+}));
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => async (fn: () => Promise<unknown>) => {
+    if (fn) {
+      await fn();
+    }
+  },
+}));
+
+function renderHook(args: DefaultRootState = {}) {
+  const { result } = renderHookWithProvider(useEvmAmountValidation, {
+    ...mockState,
+    metamask: { ...mockState.metamask, ...args },
+  });
+  return result.current;
+}
+
+describe('useEvmAmountValidation', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not return error if amount of native asset is less than balance', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_NATIVE_ASSET,
+      from: MOCK_ADDRESS_1,
+      value: 2,
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      accountsByChainId: { '0x1': { [MOCK_ADDRESS_1]: { balance: '0x5' } } },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toBeUndefined();
+  });
+
+  it('does not return error for undefined amount value', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_NATIVE_ASSET,
+      from: MOCK_ADDRESS_1,
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      accountsByChainId: { '0x1': { [MOCK_ADDRESS_1]: { balance: '0x5' } } },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toBeUndefined();
+  });
+
+  it('return error for invalid amount value', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_NATIVE_ASSET,
+      from: MOCK_ADDRESS_1,
+      value: 'abc',
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      accountsByChainId: { '0x1': { [MOCK_ADDRESS_1]: { balance: '0x5' } } },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toEqual('Invalid value');
+  });
+
+  it('return error if amount of native asset is more than balance', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_NATIVE_ASSET,
+      from: MOCK_ADDRESS_1,
+      value: 10,
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      accountsByChainId: { '0x5': { [MOCK_ADDRESS_1]: { balance: '0x5' } } },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toEqual('Insufficient funds');
+  });
+
+  it('does not return error if amount of ERC20 asset is less than balance', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_ASSET,
+      from: MOCK_ADDRESS_1,
+      value: 2,
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      tokenBalances: {
+        [MOCK_ADDRESS_1]: {
+          '0x5': {
+            [EVM_ASSET.address]: 0x738,
+          },
+        },
+      },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toBeUndefined();
+  });
+
+  it('return error if amount of ERC20 asset is more than balance', () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: EVM_ASSET,
+      from: MOCK_ADDRESS_1,
+      value: 2000,
+    } as unknown as SendContext.SendContextType);
+
+    const result = renderHook({
+      tokenBalances: {
+        [MOCK_ADDRESS_1]: {
+          '0x5': {
+            [EVM_ASSET.address]: '0x738',
+          },
+        },
+      },
+    });
+    const error = result.validateEvmAmount();
+    expect(error).toEqual('Insufficient funds');
+  });
+});

ui/pages/confirmations/components/send/amount/amount.tsx

@@ -0,0 +1,106 @@
+import { Hex } from '@metamask/utils';
+import { toHex } from '@metamask/controller-utils';
+import { isAddress as isEvmAddress } from 'ethers/lib/utils';
+import { isNativeAddress } from '@metamask/bridge-controller';
+import { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
+
+import { Numeric } from '../../../../../../shared/modules/Numeric';
+import { getTokenBalances } from '../../../../../ducks/metamask/metamask';
+import { useI18nContext } from '../../../../../hooks/useI18nContext';
+import { Asset } from '../../../types/send';
+import { fromTokenMinimalUnitsNumeric, isDecimal } from '../../../utils/send';
+import { useSendContext } from '../../../context/send';
+
+type AccountWithBalances = Record<Hex, { balance: Hex }>;
+type TokenBalances = Record<Hex, Record<Hex, Record<Hex, Hex>>>;
+type MetamaskSendState = {
+  metamask: { accountsByChainId: Record<Hex, AccountWithBalances> };
+};
+type ValidateAmountFnArgs = {
+  accountsWithBalances?: AccountWithBalances;
+  amount?: string;
+  asset?: Asset;
+  from: Hex;
+  t: ReturnType<typeof useI18nContext>;
+  tokenBalances: TokenBalances;
+};
+
+const validateAmountFn = ({
+  accountsWithBalances,
+  amount,
+  asset,
+  from,
+  t,
+  tokenBalances,
+}: ValidateAmountFnArgs): string | undefined => {
+  if (!asset || amount === undefined || amount === null || amount === '') {
+    return undefined;
+  }
+  if (!isDecimal(amount) || Number(amount) < 0) {
+    return t('invalidValue');
+  }
+  let weiValue;
+  let weiBalance;
+  if (isNativeAddress(asset.address)) {
+    if (!accountsWithBalances) {
+      return undefined;
+    }
+    const accountAddress = Object.keys(accountsWithBalances).find(
+      (address) => address.toLowerCase() === from.toLowerCase(),
+    ) as Hex;
+    const account = accountsWithBalances[accountAddress];
+    try {
+      weiValue = fromTokenMinimalUnitsNumeric(amount, asset.decimals);
+    } catch (error) {
+      console.log(error);
+      return t('invalidValue');
+    }
+    weiBalance = new Numeric(account?.balance ?? '0', 16);
+  } else {
+    weiValue = fromTokenMinimalUnitsNumeric(amount, asset.decimals ?? 0);
+    weiBalance = new Numeric(
+      (
+        Object.values(tokenBalances[from as Hex]).find(
+          (chainTokenBalances: Record<Hex, Hex>) =>
+            chainTokenBalances?.[asset?.address as Hex],
+        ) as Record<Hex, Hex>
+      )?.[asset?.address as Hex],
+      16,
+    );
+  }
+  if (weiBalance.lessThan(weiValue)) {
+    return t('insufficientFundsSend');
+  }
+  return undefined;
+};
+
+export const useEvmAmountValidation = () => {
+  const t = useI18nContext();
+  const tokenBalances = useSelector(getTokenBalances);
+  const { asset, from, value } = useSendContext();
+  const accountsByChainId = useSelector(
+    (state: MetamaskSendState) => state.metamask.accountsByChainId,
+  ) as AccountWithBalances;
+  const accountsWithBalances = useMemo(() => {
+    if (asset?.chainId && asset?.address && isEvmAddress(asset?.address)) {
+      return accountsByChainId[toHex(asset?.chainId)];
+    }
+    return undefined;
+  }, [accountsByChainId, asset?.address, asset?.chainId]);
+
+  const validateEvmAmount = useCallback(
+    () =>
+      validateAmountFn({
+        accountsWithBalances,
+        amount: value,
+        asset,
+        tokenBalances,
+        from: from as Hex,
+        t,
+      }),
+    [accountsWithBalances, asset, from, t, tokenBalances, value],
+  );
+
+  return { validateEvmAmount };
+};