chore(runway): cherry-pick fix: cp-7.56.0 metamask pay alert button flicker (#20238)

- fix: cp-7.56.0 metamask pay alert button flicker (#20103)

## **Description**

Prevent confirm button showing alert state during initial page and
quotes loading.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:
[#5851](MetaMask/MetaMask-planning#5851)

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/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-mobile/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.
[4232322](4232322)

Author: weitingsun

app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx

@@ -1,19 +1,28 @@
 import React from 'react';
 import { merge } from 'lodash';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
-import { simpleSendTransactionControllerMock } from '../../__mocks__/controllers/transaction-controller-mock';
+import {
+  simpleSendTransactionControllerMock,
+  transactionIdMock,
+} from '../../__mocks__/controllers/transaction-controller-mock';
 import { EditAmount, EditAmountProps } from './edit-amount';
 import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
 import { useTokenAmount } from '../../hooks/useTokenAmount';
 import { act, fireEvent } from '@testing-library/react-native';
 import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
 import { useTokenFiatRate } from '../../hooks/tokens/useTokenFiatRates';
 import { otherControllersMock } from '../../__mocks__/controllers/other-controllers-mock';
+import { setTransactionBridgeQuotesLoading } from '../../../../../core/redux/slices/confirmationMetrics';
 
 jest.mock('../../hooks/useTokenAmount');
 jest.mock('../../hooks/pay/useTransactionPayToken');
 jest.mock('../../hooks/tokens/useTokenFiatRates');
 
+jest.mock('../../../../../core/redux/slices/confirmationMetrics', () => ({
+  ...jest.requireActual('../../../../../core/redux/slices/confirmationMetrics'),
+  setTransactionBridgeQuotesLoading: jest.fn(),
+}));
+
 jest.useFakeTimers();
 
 const FIAT_RATE_MOCK = 2;
@@ -35,6 +44,10 @@ describe('EditAmount', () => {
   const useTokenFiatRateMock = jest.mocked(useTokenFiatRate);
   const updateTokenAmountMock = jest.fn();
 
+  const setTransactionBridgeQuotesLoadingMock = jest.mocked(
+    setTransactionBridgeQuotesLoading,
+  );
+
   beforeEach(() => {
     jest.resetAllMocks();
 
@@ -48,6 +61,10 @@ describe('EditAmount', () => {
     } as ReturnType<typeof useTransactionPayToken>);
 
     useTokenFiatRateMock.mockReturnValue(FIAT_RATE_MOCK);
+
+    setTransactionBridgeQuotesLoadingMock.mockReturnValue({
+      type: 'test',
+    } as never);
   });
 
   it('calls updateTokenAmount with token amount when done button pressed', async () => {
@@ -74,6 +91,33 @@ describe('EditAmount', () => {
     expect(updateTokenAmountMock).toHaveBeenCalledWith('26.5');
   });
 
+  it('sets quotes loading when done button pressed', async () => {
+    const { getByTestId, getByText } = render();
+
+    await act(async () => {
+      fireEvent.press(getByTestId('edit-amount-input'));
+    });
+
+    await act(async () => {
+      fireEvent.press(getByText('5'));
+    });
+
+    await act(async () => {
+      fireEvent.press(getByText('3'));
+    });
+
+    await act(async () => {
+      fireEvent.press(getByTestId('deposit-keyboard-done-button'));
+    });
+
+    await jest.runAllTimersAsync();
+
+    expect(setTransactionBridgeQuotesLoadingMock).toHaveBeenCalledWith({
+      transactionId: transactionIdMock,
+      isLoading: true,
+    });
+  });
+
   it('updates amount when input changes', async () => {
     const { getByTestId, getByText } = render();
 

app/components/Views/confirmations/components/edit-amount/edit-amount.tsx

@@ -18,6 +18,8 @@ import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
+import { useDispatch } from 'react-redux';
+import { setTransactionBridgeQuotesLoading } from '../../../../../core/redux/slices/confirmationMetrics';
 
 const MAX_LENGTH = 28;
 
@@ -46,8 +48,9 @@ export function EditAmount({
   onKeyboardShow,
   onKeyboardHide,
   onKeyboardDone,
-}: EditAmountProps) {
+}: Readonly<EditAmountProps>) {
   const fiatCurrency = PERPS_CURRENCY;
+  const dispatch = useDispatch();
   const [showKeyboard, setShowKeyboard] = useState<boolean>(false);
   const [inputChanged, setInputChanged] = useState<boolean>(false);
   const { setIsFooterVisible } = useConfirmationContext();
@@ -56,6 +59,7 @@ export function EditAmount({
   const transactionMeta = useTransactionMetadataRequest();
   const [amountFiat, setAmountFiat] = useState<string>('0');
 
+  const transactionId = transactionMeta?.id as string;
   const tokenAddress = transactionMeta?.txParams?.to as Hex;
   const chainId = transactionMeta?.chainId as Hex;
   const fiatRate = useTokenFiatRate(tokenAddress, chainId, fiatCurrency);
@@ -128,6 +132,10 @@ export function EditAmount({
   }, [amountHuman, inputChanged, onChange]);
 
   const handleKeyboardDone = useCallback(() => {
+    dispatch(
+      setTransactionBridgeQuotesLoading({ transactionId, isLoading: true }),
+    );
+
     updateTokenAmount(amountHuman);
     inputRef.current?.blur();
     setShowKeyboard(false);
@@ -136,10 +144,12 @@ export function EditAmount({
     onKeyboardDone?.();
   }, [
     amountHuman,
+    dispatch,
     inputRef,
     onKeyboardDone,
     onKeyboardHide,
     setIsFooterVisible,
+    transactionId,
     updateTokenAmount,
   ]);
 
@@ -207,9 +217,9 @@ export function EditAmount({
 
 export function EditAmountSkeleton({
   children,
-}: {
+}: Readonly<{
   children: React.ReactNode;
-}) {
+}>) {
   const { styles } = useStyles(styleSheet, {
     amountLength: 1,
     hasAlert: false,

app/components/Views/confirmations/components/footer/footer.test.tsx

@@ -357,5 +357,29 @@ describe('Footer', () => {
       });
       expect(mockTrackAlertMetrics).toHaveBeenCalledTimes(1);
     });
+
+    it('renders standard button label even if alerts if quotes loading', async () => {
+      (useAlerts as jest.Mock).mockReturnValue({
+        ...baseMockUseAlerts,
+        hasUnconfirmedDangerAlerts: true,
+      });
+
+      const { getByText } = renderWithProvider(<Footer />, {
+        state: merge(
+          {},
+          simpleSendTransactionControllerMock,
+          transactionApprovalControllerMock,
+          {
+            confirmationMetrics: {
+              isTransactionBridgeQuotesLoadingById: {
+                [transactionIdMock]: true,
+              },
+            },
+          },
+        ),
+      });
+
+      expect(getByText('Confirm')).toBeDefined();
+    });
   });
 });

app/components/Views/confirmations/components/footer/footer.tsx

@@ -33,6 +33,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 import { selectIsTransactionBridgeQuotesLoadingById } from '../../../../../core/redux/slices/confirmationMetrics';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../../reducers';
+import { TransactionType } from '@metamask/transaction-controller';
 
 export const Footer = () => {
   const {
@@ -52,12 +53,10 @@ export const Footer = () => {
   const transactionMetadata = useTransactionMetadataRequest();
   const { trackAlertMetrics } = useConfirmationAlertMetrics();
   const { isFullScreenConfirmation } = useFullScreenConfirmation();
+  const transactionType = transactionMetadata?.type as TransactionType;
+  const isStakingConfirmationBool = isStakingConfirmation(transactionType);
 
-  const isStakingConfirmationBool = isStakingConfirmation(
-    transactionMetadata?.type as string,
-  );
-
-  const { isFooterVisible, isTransactionValueUpdating } =
+  const { isFooterVisible: isFooterVisibleFlag, isTransactionValueUpdating } =
     useConfirmationContext();
 
   const navigation = useNavigation();
@@ -89,7 +88,7 @@ export const Footer = () => {
     hideConfirmAlertModal();
     try {
       await onConfirm();
-    } catch (error) {
+    } catch {
       navigation.navigate(Routes.TRANSACTIONS_VIEW);
     }
   }, [hideConfirmAlertModal, onConfirm, navigation]);
@@ -116,18 +115,29 @@ export const Footer = () => {
     if (isQRSigningInProgress) {
       return strings('confirm.qr_get_sign');
     }
+
+    if (isQuotesLoading) {
+      return strings('confirm.confirm');
+    }
+
     if (hasUnconfirmedDangerAlerts) {
       return fieldAlerts.length > 1
         ? strings('alert_system.review_alerts')
         : strings('alert_system.review_alert');
     }
+
     if (hasBlockingAlerts) {
       return strings('alert_system.review_alerts');
     }
+
     return strings('confirm.confirm');
   };
 
   const getStartIcon = () => {
+    if (isQuotesLoading) {
+      return undefined;
+    }
+
     if (hasUnconfirmedDangerAlerts) {
       return IconName.SecuritySearch;
     }
@@ -153,8 +163,9 @@ export const Footer = () => {
     {
       variant: ButtonVariants.Primary,
       isDanger:
-        securityAlertResponse?.result_type === ResultType.Malicious ||
-        hasDangerAlerts,
+        !isQuotesLoading &&
+        (securityAlertResponse?.result_type === ResultType.Malicious ||
+          hasDangerAlerts),
       isDisabled: isConfirmDisabled,
       label: confirmButtonLabel(),
       size: ButtonSize.Lg,
@@ -164,6 +175,9 @@ export const Footer = () => {
     },
   ];
 
+  const isFooterVisible =
+    isFooterVisibleFlag ?? transactionType !== TransactionType.perpsDeposit;
+
   if (!isFooterVisible) {
     return null;
   }

app/components/Views/confirmations/context/confirmation-context/confirmation-context.test.tsx

@@ -14,7 +14,7 @@ describe('ConfirmationContext', () => {
     const { result } = renderHook(() => useConfirmationContext(), { wrapper });
 
     expect(result.current).toStrictEqual({
-      isFooterVisible: true,
+      isFooterVisible: undefined,
       isTransactionValueUpdating: false,
       setIsFooterVisible: expect.any(Function),
       setIsTransactionValueUpdating: expect.any(Function),

app/components/Views/confirmations/context/confirmation-context/confirmation-context.tsx

@@ -27,7 +27,7 @@ export const ConfirmationContextProvider: React.FC<
   const [isTransactionValueUpdating, setIsTransactionValueUpdating] =
     useState(false);
 
-  const [isFooterVisible, setIsFooterVisible] = useState(true);
+  const [isFooterVisible, setIsFooterVisible] = useState<boolean>();
 
   const contextValue = useMemo(
     () => ({

app/components/Views/confirmations/external/perps-temp/hooks/usePerpsDepositView.test.ts

@@ -110,23 +110,6 @@ describe('usePerpsDepositView', () => {
     expect(result.current.isFullView).toBe(false);
   });
 
-  it('returns isFullView as false if amount is zero', () => {
-    useTokenAmountMock.mockReturnValue({
-      amountUnformatted: '0',
-    } as ReturnType<typeof useTokenAmount>);
-
-    const { result } = runHook(
-      {
-        isKeyboardVisible: false,
-      },
-      {
-        quotes: [{}],
-      },
-    );
-
-    expect(result.current.isFullView).toBe(false);
-  });
-
   it('returns isFullView as false if quotes are undefined', () => {
     const { result } = runHook(
       {

app/components/Views/confirmations/external/perps-temp/hooks/usePerpsDepositView.ts

@@ -1,14 +1,12 @@
 import { CHAIN_IDS } from '@metamask/transaction-controller';
 import { useAutomaticTransactionPayToken } from '../../../hooks/pay/useAutomaticTransactionPayToken';
-import { useTokenAmount } from '../../../hooks/useTokenAmount';
 import { useTransactionMetadataOrThrow } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../../../reducers';
 import {
   selectIsTransactionBridgeQuotesLoadingById,
   selectTransactionBridgeQuotesById,
 } from '../../../../../../core/redux/slices/confirmationMetrics';
-import { BigNumber } from 'bignumber.js';
 import { usePerpsDepositInit } from './usePerpsDepositInit';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useTransactionPayTokenAmounts } from '../../../hooks/pay/useTransactionPayTokenAmounts';
@@ -25,12 +23,9 @@ export function usePerpsDepositView({
   usePerpsDepositInit();
 
   const { id: transactionId } = useTransactionMetadataOrThrow();
-  const { amountUnformatted } = useTokenAmount();
   const { payToken } = useTransactionPayToken();
   const { amounts: sourceAmounts } = useTransactionPayTokenAmounts();
 
-  const amountValue = new BigNumber(amountUnformatted ?? '0');
-
   const quotes = useSelector((state: RootState) =>
     selectTransactionBridgeQuotesById(state, transactionId),
   );
@@ -41,7 +36,6 @@ export function usePerpsDepositView({
 
   const isFullView =
     !isKeyboardVisible &&
-    !amountValue.isZero() &&
     (isQuotesLoading || Boolean(quotes?.length) || sourceAmounts?.length === 0);
 
   useAutomaticTransactionPayToken({