Merge branch 'main' into ogp/22207

Author: OGPoyraz

app/components/Views/confirmations/components/confirm/confirm-component.styles.ts

@@ -16,11 +16,7 @@ const styleSheet = (params: {
       maxHeight: '100%',
     },
     flatContainer: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      flex: 1,
       zIndex: 9999,
       backgroundColor: theme.colors.background.alternative,
       justifyContent: 'space-between',

app/components/Views/confirmations/components/confirm/confirm-component.tsx

@@ -1,10 +1,5 @@
 import React, { useEffect } from 'react';
-import {
-  BackHandler,
-  StyleSheet,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
+import { BackHandler, TouchableWithoutFeedback, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 
@@ -31,6 +26,7 @@ import { TransactionType } from '@metamask/transaction-controller';
 import { useParams } from '../../../../../util/navigation/navUtils';
 import AnimatedSpinner, { SpinnerSize } from '../../../../UI/AnimatedSpinner';
 import { CustomAmountInfoSkeleton } from '../info/custom-amount-info';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
 export enum ConfirmationLoader {
   Default = 'default',
@@ -46,7 +42,7 @@ const ConfirmWrapped = ({
   styles,
   route,
 }: {
-  styles: StyleSheet.NamedStyles<Record<string, unknown>>;
+  styles: ReturnType<typeof styleSheet>;
   route?: UnstakeConfirmationViewProps['route'];
 }) => {
   const alerts = useConfirmationAlerts();
@@ -59,11 +55,7 @@ const ConfirmWrapped = ({
             <LedgerContextProvider>
               <Title />
               <ScrollView
-                // @ts-expect-error - React Native style type mismatch due to outdated @types/react-native
-                // See: https://github.com/MetaMask/metamask-mobile/pull/18956#discussion_r2316407382
                 style={styles.scrollView}
-                // @ts-expect-error - React Native style type mismatch due to outdated @types/react-native
-                // See: https://github.com/MetaMask/metamask-mobile/pull/18956#discussion_r2316407382
                 contentContainerStyle={styles.scrollViewContent}
                 nestedScrollEnabled
               >
@@ -133,9 +125,13 @@ export const Confirm = ({ route }: ConfirmProps) => {
   // Show confirmation in a flat container if the confirmation is full screen
   if (isFullScreenConfirmation) {
     return (
-      <View style={styles.flatContainer} testID={ConfirmationUIType.FLAT}>
+      <SafeAreaView
+        edges={['right', 'bottom', 'left']}
+        style={styles.flatContainer}
+        testID={ConfirmationUIType.FLAT}
+      >
         <ConfirmWrapped styles={styles} route={route} />
-      </View>
+      </SafeAreaView>
     );
   }
 
@@ -160,14 +156,18 @@ function Loader() {
 
   if (loader === ConfirmationLoader.CustomAmount) {
     return (
-      <View style={styles.flatContainer} testID="confirm-loader-custom-amount">
+      <SafeAreaView
+        edges={['right', 'bottom', 'left']}
+        style={styles.flatContainer}
+        testID="confirm-loader-custom-amount"
+      >
         <ScrollView
           style={styles.scrollView}
           contentContainerStyle={styles.scrollViewContent}
         >
           <CustomAmountInfoSkeleton />
         </ScrollView>
-      </View>
+      </SafeAreaView>
     );
   }
 

app/components/Views/confirmations/components/rows/transactions/gas-fee-details-row/gas-fee-details-row.tsx

@@ -23,6 +23,7 @@ import useBalanceChanges from '../../../../../../UI/SimulationDetails/useBalance
 import { useFeeCalculations } from '../../../../hooks/gas/useFeeCalculations';
 import { useFeeCalculationsTransactionBatch } from '../../../../hooks/gas/useFeeCalculationsTransactionBatch';
 import { useSelectedGasFeeToken } from '../../../../hooks/gas/useGasFeeToken';
+import { useIsGaslessSupported } from '../../../../hooks/gas/useIsGaslessSupported';
 import { useConfirmationMetricEvents } from '../../../../hooks/metrics/useConfirmationMetricEvents';
 import { useTransactionBatchesMetadata } from '../../../../hooks/transactions/useTransactionBatchesMetadata';
 import { useTransactionMetadataRequest } from '../../../../hooks/transactions/useTransactionMetadataRequest';
@@ -228,14 +229,20 @@ const GasFeesDetailsRow = ({
   const transactionBatchesMetadata = useTransactionBatchesMetadata();
   const gasFeeToken = useSelectedGasFeeToken();
   const metamaskFeeFiat = gasFeeToken?.metamaskFeeFiat;
+  const {
+    userFeeLevel: isUserFeeLevelExists,
+    isGasFeeSponsored: doesSentinelAllowSponsorship,
+  } = transactionMetadata ?? {};
 
   const hideFiatForTestnet = useHideFiatForTestnet(
     transactionMetadata?.chainId,
   );
   const { trackTooltipClickedEvent } = useConfirmationMetricEvents();
 
-  const isUserFeeLevelExists = transactionMetadata?.userFeeLevel;
-  const isGasFeeSponsored = transactionMetadata?.isGasFeeSponsored;
+  // This prevents the gas fee row from showing as sponsored if stx is disabled
+  // by the user and 7702 is not supported in the chain.
+  const { isSupported: isGaslessSupported } = useIsGaslessSupported();
+  const isGasFeeSponsored = isGaslessSupported && doesSentinelAllowSponsorship;
 
   const handleNetworkFeeTooltipClickedEvent = () => {
     trackTooltipClickedEvent({

app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.test.ts

@@ -12,6 +12,7 @@ import { useConfirmActions } from '../useConfirmActions';
 import { useTransactionPayToken } from '../pay/useTransactionPayToken';
 import { noop } from 'lodash';
 import { useConfirmationContext } from '../../context/confirmation-context';
+import { useIsGaslessSupported } from '../gas/useIsGaslessSupported';
 
 jest.mock('../../../../../util/navigation/navUtils', () => ({
   useParams: jest.fn().mockReturnValue({
@@ -44,6 +45,7 @@ jest.mock('../../../../../reducers/transaction', () => ({
   selectTransactionState: jest.fn(),
 }));
 jest.mock('../../context/confirmation-context');
+jest.mock('../gas/useIsGaslessSupported');
 
 describe('useInsufficientBalanceAlert', () => {
   const mockUseTransactionMetadataRequest = jest.mocked(
@@ -56,6 +58,8 @@ describe('useInsufficientBalanceAlert', () => {
   );
   const mockUseTransactionPayToken = jest.mocked(useTransactionPayToken);
   const mockUseConfirmationContext = jest.mocked(useConfirmationContext);
+  const useIsGaslessSupportedMock = jest.mocked(useIsGaslessSupported);
+
   const mockChainId = '0x1';
   const mockFromAddress = '0x123';
   const mockNativeCurrency = 'ETH';
@@ -72,6 +76,10 @@ describe('useInsufficientBalanceAlert', () => {
   beforeEach(() => {
     jest.clearAllMocks();
 
+    useIsGaslessSupportedMock.mockReturnValue({
+      isSmartTransaction: false,
+      isSupported: false,
+    });
     mockUseAccountNativeBalance.mockReturnValue({
       balanceWeiInHex: '0x8', // 8 wei
     } as unknown as ReturnType<typeof useAccountNativeBalance>);

app/components/Views/confirmations/hooks/alerts/useInsufficientBalanceAlert.ts

@@ -19,6 +19,7 @@ import { useAccountNativeBalance } from '../useAccountNativeBalance';
 import { useConfirmActions } from '../useConfirmActions';
 import { useTransactionPayToken } from '../pay/useTransactionPayToken';
 import { useConfirmationContext } from '../../context/confirmation-context';
+import { useIsGaslessSupported } from '../gas/useIsGaslessSupported';
 
 const HEX_ZERO = '0x0';
 
@@ -37,6 +38,7 @@ export const useInsufficientBalanceAlert = ({
   const { isTransactionValueUpdating } = useConfirmationContext();
   const { onReject } = useConfirmActions();
   const { payToken } = useTransactionPayToken();
+  const { isSupported: isGaslessSupported } = useIsGaslessSupported();
 
   return useMemo(() => {
     if (!transactionMetadata || isTransactionValueUpdating) {
@@ -65,11 +67,13 @@ export const useInsufficientBalanceAlert = ({
       totalTransactionValueBN,
     );
 
+    const isSponsoredTransaction = isGasFeeSponsored && isGaslessSupported;
+
     const showAlert =
       hasInsufficientBalance &&
       (ignoreGasFeeToken || !selectedGasFeeToken) &&
       !payToken &&
-      !isGasFeeSponsored;
+      !isSponsoredTransaction;
 
     if (!showAlert) {
       return [];
@@ -100,6 +104,7 @@ export const useInsufficientBalanceAlert = ({
   }, [
     balanceWeiInHex,
     ignoreGasFeeToken,
+    isGaslessSupported,
     isTransactionValueUpdating,
     navigation,
     networkConfigurations,

app/components/Views/confirmations/hooks/gas/useGaslessSupportedSmartTransactions.test.ts

@@ -0,0 +1,176 @@
+import { waitFor } from '@testing-library/react-native';
+import { merge } from 'lodash';
+import { useGaslessSupportedSmartTransactions } from './useGaslessSupportedSmartTransactions';
+import { isSendBundleSupported } from '../../../../../util/transactions/sentinel-api';
+import { selectShouldUseSmartTransaction } from '../../../../../selectors/smartTransactionsController';
+import { useTransactionMetadataRequest } from '../transactions/useTransactionMetadataRequest';
+import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
+import { transferConfirmationState } from '../../../../../util/test/confirm-data-helpers';
+import { transferTransactionStateMock } from '../../__mocks__/transfer-transaction-mock';
+import { TransactionMeta } from '@metamask/transaction-controller';
+
+jest.mock('../../../../../util/transactions/sentinel-api');
+jest.mock('../../../../../selectors/smartTransactionsController');
+jest.mock('../transactions/useTransactionMetadataRequest');
+
+const CHAIN_ID_MOCK = '0x1';
+
+describe('useGaslessSupportedSmartTransactions (mobile)', () => {
+  const isSendBundleSupportedMock = jest.mocked(isSendBundleSupported);
+  const selectShouldUseSmartTransactionMock = jest.mocked(
+    selectShouldUseSmartTransaction,
+  );
+  const useTransactionMetadataRequestMock = jest.mocked(
+    useTransactionMetadataRequest,
+  );
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    useTransactionMetadataRequestMock.mockReturnValue({
+      chainId: CHAIN_ID_MOCK,
+    } as unknown as TransactionMeta);
+
+    isSendBundleSupportedMock.mockResolvedValue(false);
+    selectShouldUseSmartTransactionMock.mockReturnValue(false);
+  });
+
+  it('returns isSupported = true when both smart transaction and bundle supported', async () => {
+    isSendBundleSupportedMock.mockResolvedValue(true);
+    selectShouldUseSmartTransactionMock.mockReturnValue(true);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      {
+        state: merge({}, transferConfirmationState),
+      },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: true,
+        isSupported: true,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns isSupported = false when smart transaction enabled but bundle not supported', async () => {
+    isSendBundleSupportedMock.mockResolvedValue(false);
+    selectShouldUseSmartTransactionMock.mockReturnValue(true);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      {
+        state: merge({}, transferConfirmationState),
+      },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: true,
+        isSupported: false,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns isSupported = false when bundle supported but not a smart transaction', async () => {
+    isSendBundleSupportedMock.mockResolvedValue(true);
+    selectShouldUseSmartTransactionMock.mockReturnValue(false);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      {
+        state: merge({}, transferConfirmationState),
+      },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: false,
+        isSupported: false,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns isSupported = false when neither smart transaction nor bundle is supported', async () => {
+    isSendBundleSupportedMock.mockResolvedValue(false);
+    selectShouldUseSmartTransactionMock.mockReturnValue(false);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      {
+        state: merge({}, transferConfirmationState),
+      },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: false,
+        isSupported: false,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns pending = true while sendBundleSupported is still pending', async () => {
+    let resolvePromise: (value: boolean) => void = () => {
+      // no-op
+    };
+    const pendingPromise = new Promise<boolean>((resolve) => {
+      resolvePromise = resolve;
+    });
+    isSendBundleSupportedMock.mockReturnValue(
+      pendingPromise as Promise<boolean>,
+    );
+    selectShouldUseSmartTransactionMock.mockReturnValue(true);
+
+    const { result, rerender } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      { state: merge({}, transferConfirmationState) },
+    );
+    expect(result.current.pending).toBe(true);
+
+    // Resolve and trigger update
+    resolvePromise(true);
+    rerender(transferConfirmationState);
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: true,
+        isSupported: true,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns false if chainId is missing', async () => {
+    useTransactionMetadataRequestMock.mockReturnValue({
+      chainId: undefined,
+    } as unknown as TransactionMeta);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      { state: transferTransactionStateMock },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: false,
+        isSupported: false,
+        pending: false,
+      }),
+    );
+  });
+
+  it('returns false if transactionMeta is null', async () => {
+    useTransactionMetadataRequestMock.mockReturnValue(undefined);
+
+    const { result } = renderHookWithProvider(
+      () => useGaslessSupportedSmartTransactions(),
+      { state: transferTransactionStateMock },
+    );
+    await waitFor(() =>
+      expect(result.current).toStrictEqual({
+        isSmartTransaction: false,
+        isSupported: false,
+        pending: false,
+      }),
+    );
+  });
+});