feat: Implement onAmountInput in send flow amount for non-EVM validation (#37345)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR aims to implement `onAmountInput` RPC call into amount
validations of send flow.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37345?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: #37188

## **Manual testing steps**
Case 1:
1. Go to send flow
2. Try send Sol
3. Don't type anything in amount input and click "Continue"
4. You should be able to see confirmation (not infinite spinner)

Case 2: 
1. Go to send flow
2. Try send BTC
3. Don't type anything in amount input and click "Continue"
4. You shouldn't be able to proceed confirmation because "0" is not a
valid amount for BTC transaction


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [X] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've completed the PR template to the best of my ability
- [X] I’ve included tests if applicable
- [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [X] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds non-EVM amount validation using snaps, integrates it into the
send flow, refactors amount error handling, and updates tests.
> 
> - **Send Flow UI**:
> - `AmountRecipient`: integrates `useAmountValidation` and
`useSendType`; on Continue, runs `validateNonEvmAmountAsync` for non-EVM
before submit; removes local amount error state; passes `amountError` to
`Amount`; updates button label/disabled logic to use `amountError`.
> - `Amount`: switches prop from `setAmountValueError` to `amountError`;
removes internal validation state/effects; displays error based on prop
only.
> - **Hooks/Validation**:
> - New `useSnapAmountOnInput` hook to call `validateAmountMultichain`
for non-EVM amount checks.
> - Overhauls `useAmountValidation` to async pipeline (positive number,
ERC1155 balance, token balance, non-EVM snap); exposes
`validateNonEvmAmountAsync`; adds snap error mapping.
> - Enhances validators: `validateERC1155Balance` (guards, standards),
`validateTokenBalance` (decimals param), and new
`validatePositiveNumericString`.
> - `useSendActions`: for non-EVM, sends `amount` with
`addLeadingZeroIfNeeded(value || '0')`.
> - **Tests**:
> - Adds tests for non-EVM validation flow in
`amount-recipient.test.tsx` and new hook tests
`useSnapAmountOnInput.test.ts`.
> - Expands `useAmountValidation.test.ts` with edge cases and new
validators.
> - Updates `amount.test.tsx` to reflect new `Amount` API and behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c6eac31. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: OGPoyraz

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

@@ -14,6 +14,7 @@ import * as SendActions from '../../../hooks/send/useSendActions';
 import * as SendContext from '../../../context/send';
 import * as RecipientValidation from '../../../hooks/send/useRecipientValidation';
 import * as RecipientSelectionMetrics from '../../../hooks/send/metrics/useRecipientSelectionMetrics';
+import * as SendType from '../../../hooks/send/useSendType';
 import { AmountRecipient } from './amount-recipient';
 
 const MOCK_ADDRESS = '0xdB055877e6c13b6A6B25aBcAA29B393777dD0a73';
@@ -211,4 +212,156 @@ describe('AmountRecipient', () => {
     fireEvent.click(getByRole('button', { name: 'Invalid hex data' }));
     expect(mockHandleSubmit).not.toHaveBeenCalled();
   });
+
+  it('should call validateNonEvmAmountAsync for non-EVM send type and submit if no error', async () => {
+    const mockHandleSubmit = jest.fn();
+    const mockValidateNonEvmAmountAsync = jest.fn().mockResolvedValue(null);
+    const mockCaptureAmountSelected = jest.fn();
+    const mockCaptureRecipientSelected = jest.fn();
+
+    jest.spyOn(SendActions, 'useSendActions').mockReturnValue({
+      handleSubmit: mockHandleSubmit,
+    } as unknown as ReturnType<typeof SendActions.useSendActions>);
+
+    jest
+      .spyOn(AmountSelectionMetrics, 'useAmountSelectionMetrics')
+      .mockReturnValue({
+        captureAmountSelected: mockCaptureAmountSelected,
+      } as unknown as ReturnType<
+        typeof AmountSelectionMetrics.useAmountSelectionMetrics
+      >);
+
+    jest
+      .spyOn(RecipientSelectionMetrics, 'useRecipientSelectionMetrics')
+      .mockReturnValue({
+        captureRecipientSelected: mockCaptureRecipientSelected,
+        setRecipientInputMethodManual: jest.fn(),
+      } as unknown as ReturnType<
+        typeof RecipientSelectionMetrics.useRecipientSelectionMetrics
+      >);
+
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      toResolved: MOCK_ADDRESS,
+      asset: EVM_ASSET,
+      chainId: '0x1',
+      from: 'from-address',
+      updateAsset: jest.fn(),
+      updateCurrentPage: jest.fn(),
+      updateTo: jest.fn(),
+      updateToResolved: jest.fn(),
+      updateValue: jest.fn(),
+      value: '1',
+    } as unknown as ReturnType<typeof SendContext.useSendContext>);
+
+    jest.spyOn(AmountValidation, 'useAmountValidation').mockReturnValue({
+      amountError: undefined,
+      validateNonEvmAmountAsync: mockValidateNonEvmAmountAsync,
+    } as unknown as ReturnType<typeof AmountValidation.useAmountValidation>);
+
+    jest.spyOn(RecipientValidation, 'useRecipientValidation').mockReturnValue({
+      recipientError: null,
+      recipientWarning: null,
+      recipientResolvedLookup: null,
+      recipientConfusableCharacters: [],
+      validateRecipient: jest.fn(),
+    } as unknown as ReturnType<
+      typeof RecipientValidation.useRecipientValidation
+    >);
+
+    jest.spyOn(SendType, 'useSendType').mockReturnValue({
+      isNonEvmSendType: true,
+    } as unknown as ReturnType<typeof SendType.useSendType>);
+
+    const { getAllByRole, getByText } = render();
+
+    fireEvent.change(getAllByRole('textbox')[0], {
+      target: { value: MOCK_ADDRESS },
+    });
+
+    fireEvent.click(getByText('Continue'));
+
+    await new Promise(process.nextTick);
+
+    expect(mockValidateNonEvmAmountAsync).toHaveBeenCalled();
+    expect(mockHandleSubmit).toHaveBeenCalled();
+    expect(mockCaptureAmountSelected).toHaveBeenCalled();
+    expect(mockCaptureRecipientSelected).toHaveBeenCalled();
+  });
+
+  it('should call validateNonEvmAmountAsync for non-EVM send type and not submit if there is an error', async () => {
+    const mockHandleSubmit = jest.fn();
+    const mockValidateNonEvmAmountAsync = jest
+      .fn()
+      .mockResolvedValue('Amount required');
+    const mockCaptureAmountSelected = jest.fn();
+    const mockCaptureRecipientSelected = jest.fn();
+
+    jest.spyOn(SendActions, 'useSendActions').mockReturnValue({
+      handleSubmit: mockHandleSubmit,
+    } as unknown as ReturnType<typeof SendActions.useSendActions>);
+
+    jest
+      .spyOn(AmountSelectionMetrics, 'useAmountSelectionMetrics')
+      .mockReturnValue({
+        captureAmountSelected: mockCaptureAmountSelected,
+      } as unknown as ReturnType<
+        typeof AmountSelectionMetrics.useAmountSelectionMetrics
+      >);
+
+    jest
+      .spyOn(RecipientSelectionMetrics, 'useRecipientSelectionMetrics')
+      .mockReturnValue({
+        captureRecipientSelected: mockCaptureRecipientSelected,
+        setRecipientInputMethodManual: jest.fn(),
+      } as unknown as ReturnType<
+        typeof RecipientSelectionMetrics.useRecipientSelectionMetrics
+      >);
+
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      toResolved: MOCK_ADDRESS,
+      asset: EVM_ASSET,
+      chainId: '0x1',
+      from: 'from-address',
+      updateAsset: jest.fn(),
+      updateCurrentPage: jest.fn(),
+      updateTo: jest.fn(),
+      updateToResolved: jest.fn(),
+      updateValue: jest.fn(),
+      value: '1',
+    } as unknown as ReturnType<typeof SendContext.useSendContext>);
+
+    jest.spyOn(AmountValidation, 'useAmountValidation').mockReturnValue({
+      amountError: undefined,
+      validateNonEvmAmountAsync: mockValidateNonEvmAmountAsync,
+    } as unknown as ReturnType<typeof AmountValidation.useAmountValidation>);
+
+    jest.spyOn(RecipientValidation, 'useRecipientValidation').mockReturnValue({
+      recipientError: null,
+      recipientWarning: null,
+      recipientResolvedLookup: null,
+      recipientConfusableCharacters: [],
+      validateRecipient: jest.fn(),
+    } as unknown as ReturnType<
+      typeof RecipientValidation.useRecipientValidation
+    >);
+
+    jest.spyOn(SendType, 'useSendType').mockReturnValue({
+      isNonEvmSendType: true,
+    } as unknown as ReturnType<typeof SendType.useSendType>);
+
+    const { getAllByRole, getByText } = render();
+
+    fireEvent.change(getAllByRole('textbox')[0], {
+      target: { value: MOCK_ADDRESS },
+    });
+
+    fireEvent.click(getByText('Continue'));
+
+    await new Promise(process.nextTick);
+
+    expect(mockValidateNonEvmAmountAsync).toHaveBeenCalled();
+    expect(mockHandleSubmit).not.toHaveBeenCalled();
+    expect(mockCaptureAmountSelected).not.toHaveBeenCalled();
+    expect(mockCaptureRecipientSelected).not.toHaveBeenCalled();
+  });
 });

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

@@ -19,32 +19,49 @@ import { useSendActions } from '../../../hooks/send/useSendActions';
 import { useSendContext } from '../../../context/send';
 import { useRecipientValidation } from '../../../hooks/send/useRecipientValidation';
 import { useRecipientSelectionMetrics } from '../../../hooks/send/metrics/useRecipientSelectionMetrics';
+import { useAmountValidation } from '../../../hooks/send/useAmountValidation';
+import { useSendType } from '../../../hooks/send/useSendType';
 import { SendHero } from '../../UI/send-hero';
 import { Amount } from '../amount/amount';
 import { Recipient } from '../recipient';
 import { HexData } from '../hex-data';
 
 export const AmountRecipient = () => {
   const t = useI18nContext();
-  const [amountValueError, setAmountValueError] = useState<string>();
   const [hexDataError, setHexDataError] = useState<string>();
   const { asset, toResolved } = useSendContext();
+  const { amountError, validateNonEvmAmountAsync } = useAmountValidation();
+  const { isNonEvmSendType } = useSendType();
   const { handleSubmit } = useSendActions();
   const { captureAmountSelected } = useAmountSelectionMetrics();
   const { captureRecipientSelected } = useRecipientSelectionMetrics();
   const recipientValidationResult = useRecipientValidation();
 
   const hasError =
-    Boolean(amountValueError) ||
+    Boolean(amountError) ||
     Boolean(recipientValidationResult.recipientError) ||
     Boolean(hexDataError);
   const isDisabled = hasError || !toResolved;
 
-  const onClick = useCallback(() => {
+  const onClick = useCallback(async () => {
+    if (isNonEvmSendType) {
+      // Non EVM flows need an extra validation because "value" can be empty dependent on the blockchain (e.g it's fine for Solana but not for Bitcoin)
+      // Hence we do a call for `validateNonEvmAmountAsync` here to raise UI validation errors if exists
+      const nonEvmAmountError = await validateNonEvmAmountAsync();
+      if (nonEvmAmountError) {
+        return;
+      }
+    }
     handleSubmit();
     captureAmountSelected();
     captureRecipientSelected();
-  }, [captureAmountSelected, captureRecipientSelected, handleSubmit]);
+  }, [
+    captureAmountSelected,
+    captureRecipientSelected,
+    handleSubmit,
+    isNonEvmSendType,
+    validateNonEvmAmountAsync,
+  ]);
 
   if (!asset) {
     return <LoadingScreen />;
@@ -62,7 +79,7 @@ export const AmountRecipient = () => {
       <Box>
         <SendHero asset={asset as Asset} />
         <Recipient recipientValidationResult={recipientValidationResult} />
-        <Amount setAmountValueError={setAmountValueError} />
+        <Amount amountError={amountError} />
         <HexData setHexDataError={setHexDataError} />
       </Box>
       <Button
@@ -74,7 +91,7 @@ export const AmountRecipient = () => {
         }
         marginBottom={4}
       >
-        {amountValueError ?? hexDataError ?? t('continue')}
+        {amountError ?? hexDataError ?? t('continue')}
       </Button>
     </Box>
   );

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

@@ -21,14 +21,11 @@ import { Amount } from './amount';
 
 const render = (
   args?: Record<string, unknown>,
-  mockSetAmountValueError = jest.fn(),
+  mockAmountError = undefined,
 ) => {
   const store = configureStore(args ?? mockState);
 
-  return renderWithProvider(
-    <Amount setAmountValueError={mockSetAmountValueError} />,
-    store,
-  );
+  return renderWithProvider(<Amount amountError={mockAmountError} />, store);
 };
 
 describe('Amount', () => {
@@ -335,49 +332,4 @@ describe('Amount', () => {
     const { queryByText } = render();
     expect(queryByText('Max')).not.toBeInTheDocument();
   });
-
-  it('call arg mockSetAmountValueError if amount has error', () => {
-    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
-      asset: EVM_ASSET,
-      updateValue: jest.fn(),
-    } as unknown as SendContext.SendContextType);
-    jest.spyOn(BalanceFunctions, 'useBalance').mockReturnValue({
-      balance: '10.023',
-      rawBalanceNumeric: new Numeric('10.023', 10),
-    } as unknown as ReturnType<typeof BalanceFunctions.useBalance>);
-    jest.spyOn(CurrencyConversions, 'useCurrencyConversions').mockReturnValue({
-      conversionSupportedForAsset: true,
-      fiatCurrencySymbol: '$',
-      fiatCurrencyName: 'usd',
-      getFiatValue: () => '20',
-      getFiatDisplayValue: () => '$ 20.00',
-      getNativeValue: () => '20',
-    });
-    const mockSetAmountInputTypeFiat = jest.fn();
-    const mockSetAmountInputTypeToken = jest.fn();
-    jest
-      .spyOn(AmountSelectionMetrics, 'useAmountSelectionMetrics')
-      .mockReturnValue({
-        setAmountInputTypeFiat: mockSetAmountInputTypeFiat,
-        setAmountInputTypeToken: mockSetAmountInputTypeToken,
-      } as unknown as ReturnType<
-        typeof AmountSelectionMetrics.useAmountSelectionMetrics
-      >);
-    const mockSetAmountValueError = jest.fn();
-
-    const { getByRole, getByTestId } = render(
-      undefined,
-      mockSetAmountValueError,
-    );
-
-    expect(mockSetAmountValueError).toHaveBeenLastCalledWith(undefined);
-    fireEvent.change(getByRole('textbox'), { target: { value: 'abc' } });
-    expect(mockSetAmountValueError).toHaveBeenLastCalledWith('Invalid value');
-    fireEvent.click(getByTestId('toggle-fiat-mode'));
-    fireEvent.change(getByRole('textbox'), { target: { value: '' } });
-    expect(mockSetAmountValueError).toHaveBeenLastCalledWith(undefined);
-    fireEvent.change(getByRole('textbox'), { target: { value: 'abc' } });
-    expect(mockSetAmountValueError).toHaveBeenLastCalledWith('Invalid value');
-    expect(mockSetAmountValueError).toHaveBeenCalledTimes(4);
-  });
 });

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { ERC721 } from '@metamask/controller-utils';
 
 import {
@@ -20,7 +20,6 @@ import {
 } from '../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { useAmountSelectionMetrics } from '../../../hooks/send/metrics/useAmountSelectionMetrics';
-import { useAmountValidation } from '../../../hooks/send/useAmountValidation';
 import { useBalance } from '../../../hooks/send/useBalance';
 import { useCurrencyConversions } from '../../../hooks/send/useCurrencyConversions';
 import { useMaxAmount } from '../../../hooks/send/useMaxAmount';
@@ -33,14 +32,13 @@ import {
 } from '../../../utils/send';
 
 export const Amount = ({
-  setAmountValueError,
+  amountError,
 }: {
-  setAmountValueError: (str?: string) => void;
+  amountError: string | undefined;
 }) => {
   const t = useI18nContext();
   const { asset, updateValue, value } = useSendContext();
   const [amount, setAmount] = useState(value ?? '');
-  const [amountValueError, setAmountValueErrorLocal] = useState<string>();
   const { balance } = useBalance();
   const [fiatMode, setFiatMode] = useState(false);
   const {
@@ -66,20 +64,6 @@ export const Amount = ({
         : getFiatDisplayValue(amount),
     [amount, fiatMode, getFiatDisplayValue, value],
   );
-  const { amountError } = useAmountValidation();
-
-  useEffect(() => {
-    let amtError: string | undefined;
-    if (amountError) {
-      amtError = amountError;
-    } else if (amount === undefined || amount === null || amount === '') {
-      amtError = undefined;
-    } else if (!isValidPositiveNumericString(amount)) {
-      amtError = t('invalidValue');
-    }
-    setAmountValueError(amtError);
-    setAmountValueErrorLocal(amtError);
-  }, [amount, amountError, setAmountValueError, setAmountValueErrorLocal, t]);
 
   const onChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -147,7 +131,7 @@ export const Amount = ({
         {t('amount')}
       </Text>
       <TextField
-        error={Boolean(amountValueError)}
+        error={Boolean(amountError)}
         onChange={onChange}
         onPaste={setAmountInputMethodPasted}
         onInput={setAmountInputMethodManual}
@@ -180,13 +164,11 @@ export const Amount = ({
       >
         <Text
           color={
-            amountValueError
-              ? TextColor.errorDefault
-              : TextColor.textAlternative
+            amountError ? TextColor.errorDefault : TextColor.textAlternative
           }
           variant={TextVariant.bodySm}
         >
-          {amountValueError ||
+          {amountError ||
             (conversionSupportedForAsset ? alternateDisplayValue : '')}
         </Text>
         <Box display={Display.Flex}>