fix(confirmations): prevent Perps withdraw clipping on Android cp-7.75.0 (#29434)

## **Description**

Fixes an Android layout issue where the Perps Withdraw confirmation
keypad bottom row and the final Withdraw button could be clipped behind
the system navigation area.

The fix keeps the shared full-screen confirmation layout intact, ensures
the confirmation ScrollView fills its safe-area container, and applies
extra Android bottom spacing only to the Perps Withdraw bottom block.

## **Changelog**

CHANGELOG entry: Fixed Perps Withdraw on Android so the keypad and
Withdraw button remain fully visible.

## **Related issues**

Fixes: #29363

## **Manual testing steps**

~~~gherkin
Feature: Perps Withdraw Android layout

  Scenario: Perps Withdraw keypad is fully visible on Android
    Given I am on the Perps Withdraw confirmation
    When the amount keyboard is visible
Then the bottom keypad row is fully visible above the Android navigation
bar

  Scenario: Perps Withdraw button is fully visible on Android
    Given I am on the Perps Withdraw confirmation
    When I enter an amount and continue past the keyboard
    Then the Withdraw button is fully visible with bottom spacing

  Scenario: Other deposit flows are not regressed
    Given I open Perps Deposit and Predict Deposit confirmations
Then their keyboards remain fully visible and keep expected bottom
spacing
~~~

## **Screenshots/Recordings**

### **Before**

Android Perps Withdraw keypad / Withdraw button clipped behind the
system navigation area.

### **After**

Android Perps Withdraw keypad and Withdraw button fully visible.
Verified on Pixel 6 and Pixel 10 Pro XL.

## **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.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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]
> **Low Risk**
> Small, opt-in styling change scoped to Perps Withdraw (and
Android-only) with added unit tests; minimal risk beyond potential minor
layout spacing differences on affected screens.
> 
> **Overview**
> Prevents Perps Withdraw confirmation UI from clipping behind the
Android gesture/navigation bar by adding an opt-in
`hasExtraBottomPadding` prop to `CustomAmountInfo` and applying a 56dp
`paddingBottom` to the bottom block *only on Android*.
> 
> `PerpsWithdrawInfo` now enables this padding, and new test IDs plus
unit tests cover the platform-conditional styling and prop behavior to
avoid iOS/layout regressions.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
dd5c508. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Signed-off-by: dan437 <80175477+dan437@users.noreply.github.com>

Author: dan437

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.styles.test.ts

@@ -0,0 +1,38 @@
+import { Platform } from 'react-native';
+import { Theme } from '../../../../../../util/theme/models';
+import styleSheet from './custom-amount-info.styles';
+
+describe('custom-amount-info.styles', () => {
+  const originalPlatformOS = Platform.OS;
+
+  afterEach(() => {
+    Object.defineProperty(Platform, 'OS', {
+      value: originalPlatformOS,
+      writable: true,
+    });
+  });
+
+  describe('extraBottomPadding', () => {
+    it('applies 56dp paddingBottom on Android', () => {
+      Object.defineProperty(Platform, 'OS', {
+        value: 'android',
+        writable: true,
+      });
+
+      const styles = styleSheet({ theme: {} as Theme });
+
+      expect(styles.extraBottomPadding.paddingBottom).toBe(56);
+    });
+
+    it('applies 0 paddingBottom on iOS so the iOS layout is unchanged', () => {
+      Object.defineProperty(Platform, 'OS', {
+        value: 'ios',
+        writable: true,
+      });
+
+      const styles = styleSheet({ theme: {} as Theme });
+
+      expect(styles.extraBottomPadding.paddingBottom).toBe(0);
+    });
+  });
+});

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.styles.ts

@@ -1,6 +1,8 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import { Theme } from '../../../../../../util/theme/models';
 
+const EXTRA_ANDROID_BOTTOM_PADDING = 56;
+
 const styleSheet = (_params: { theme: Theme }) =>
   StyleSheet.create({
     container: {
@@ -16,6 +18,11 @@ const styleSheet = (_params: { theme: Theme }) =>
       gap: 14,
     },
 
+    extraBottomPadding: {
+      paddingBottom:
+        Platform.OS === 'android' ? EXTRA_ANDROID_BOTTOM_PADDING : 0,
+    },
+
     disabledButton: {
       opacity: 0.5,
     },

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.test.tsx

@@ -32,7 +32,9 @@ import { strings } from '../../../../../../../locales/i18n';
 import { Hex } from '@metamask/utils';
 import { TransactionPayRequiredToken } from '@metamask/transaction-pay-controller';
 import { fireEvent } from '@testing-library/react-native';
+import { Platform } from 'react-native';
 import { TransactionType } from '@metamask/transaction-controller';
+import { CustomAmountInfoTestIds } from './custom-amount-info.testIds';
 import { useTransactionConfirm } from '../../../hooks/transactions/useTransactionConfirm';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import { useTokenFiatRates } from '../../../hooks/tokens/useTokenFiatRates';
@@ -318,6 +320,56 @@ describe('CustomAmountInfo', () => {
     expect(getByTestId('deposit-keyboard')).toBeDefined();
   });
 
+  describe('hasExtraBottomPadding', () => {
+    const originalPlatformOS = Platform.OS;
+
+    afterEach(() => {
+      Object.defineProperty(Platform, 'OS', {
+        value: originalPlatformOS,
+        writable: true,
+      });
+    });
+
+    it('applies 56dp paddingBottom to the bottom block on Android when hasExtraBottomPadding is true', () => {
+      Object.defineProperty(Platform, 'OS', {
+        value: 'android',
+        writable: true,
+      });
+
+      const { getByTestId } = render({ hasExtraBottomPadding: true });
+
+      expect(getByTestId(CustomAmountInfoTestIds.BOTTOM_BLOCK)).toHaveStyle({
+        paddingBottom: 56,
+      });
+    });
+
+    it('does not apply paddingBottom to the bottom block when hasExtraBottomPadding is false (Android)', () => {
+      Object.defineProperty(Platform, 'OS', {
+        value: 'android',
+        writable: true,
+      });
+
+      const { getByTestId } = render({ hasExtraBottomPadding: false });
+
+      expect(getByTestId(CustomAmountInfoTestIds.BOTTOM_BLOCK)).not.toHaveStyle(
+        { paddingBottom: 56 },
+      );
+    });
+
+    it('does not apply paddingBottom to the bottom block on iOS even when hasExtraBottomPadding is true', () => {
+      Object.defineProperty(Platform, 'OS', {
+        value: 'ios',
+        writable: true,
+      });
+
+      const { getByTestId } = render({ hasExtraBottomPadding: true });
+
+      expect(getByTestId(CustomAmountInfoTestIds.BOTTOM_BLOCK)).not.toHaveStyle(
+        { paddingBottom: 56 },
+      );
+    });
+  });
+
   it('renders footerText when passed in', () => {
     const hint = 'Test footer text';
     const { getByText } = render({ footerText: hint });

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.testIds.ts

@@ -0,0 +1,3 @@
+export const CustomAmountInfoTestIds = {
+  BOTTOM_BLOCK: 'custom-amount-info-bottom-block',
+} as const;

app/components/Views/confirmations/components/info/custom-amount-info/custom-amount-info.tsx

@@ -66,6 +66,7 @@ import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToke
 import { getNativeTokenAddress } from '@metamask/assets-controllers';
 import PayAccountSelector from '../../PayAccountSelector';
 import { useTransactionAccountOverride } from '../../../hooks/transactions/useTransactionAccountOverride';
+import { CustomAmountInfoTestIds } from './custom-amount-info.testIds';
 
 export interface CustomAmountInfoProps {
   children?: ReactNode;
@@ -90,6 +91,12 @@ export interface CustomAmountInfoProps {
    * When true, the account selector is shown.
    */
   supportAccountSelection?: boolean;
+  /**
+   * Adds bottom space to the bottom block (rows + keyboard/confirm button).
+   * Used by Perps Withdraw on Android, where this screen has one extra
+   * balance line and otherwise clips behind the system gesture bar.
+   */
+  hasExtraBottomPadding?: boolean;
 }
 
 export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
@@ -99,6 +106,7 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
     disableConfirm,
     disablePay,
     hasMax,
+    hasExtraBottomPadding,
     onAmountSubmit,
     hidePayTokenAmount,
     preferredToken,
@@ -208,7 +216,11 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
           )}
           {!hidePayTokenAmount && children}
         </Box>
-        <Box gap={16}>
+        <Box
+          gap={16}
+          testID={CustomAmountInfoTestIds.BOTTOM_BLOCK}
+          style={hasExtraBottomPadding && styles.extraBottomPadding}
+        >
           <AlertMessage alertMessage={alertMessage} />
           {supportAccountSelection && <PayAccountSelector />}
           {!isResultReady && disablePay !== true && hasTokens && <PayWithRow />}

app/components/Views/confirmations/components/info/perps-withdraw-info/perps-withdraw-info.test.tsx

@@ -80,4 +80,13 @@ describe('PerpsWithdrawInfo', () => {
       expect.anything(),
     );
   });
+
+  it('passes hasExtraBottomPadding=true to CustomAmountInfo to clear the Android gesture bar', () => {
+    render(<PerpsWithdrawInfo />);
+
+    expect(mockCustomAmountInfo).toHaveBeenCalledWith(
+      expect.objectContaining({ hasExtraBottomPadding: true }),
+      expect.anything(),
+    );
+  });
 });

app/components/Views/confirmations/components/info/perps-withdraw-info/perps-withdraw-info.tsx

@@ -26,6 +26,7 @@ export function PerpsWithdrawInfo() {
       currency={PERPS_CURRENCY}
       disablePay={!canSelectWithdrawToken}
       hasMax
+      hasExtraBottomPadding
     >
       <PerpsWithdrawBalance />
     </CustomAmountInfo>