fix(perps): replace 90% with Max button on Perps Withdraw (#29257)

## **Description**

Wires up the Max button on the Perps Withdraw confirmation (replacing
the `90%` button) and fixes three bugs uncovered while doing so:

- `!isNativePayToken` in `CustomAmountInfo` was inverted for post-quote
withdraws (pay token is the destination, not the source) — picking a
native destination (BNB/ETH) silently fell back to `90%`. Now gated on
`isTransactionPayWithdraw`, which is also synchronous so there's no `90%
→ Max` flicker on mount.
- `useTransactionCustomAmount` was overriding the input fiat with
`totals.targetAmount.usd` while `isMaxAmount=true`. For post-quote
withdraws that's the destination-chain received value (e.g. BNB after
bridge fees, ~$6 for a $50 withdraw), not the withdraw amount — now
skipped for withdraw flows.
- TPC's `calculatePostQuoteSourceAmounts` substitutes `token.balanceRaw`
(the **Arbitrum USDC wallet** balance, not the HyperLiquid balance) when
`isMaxAmount=true`, which stranded most of the HL balance on Max. Don't
set `isMaxAmount=true` for perps withdraw; route the typed amount
through instead.

Also added a shared `formatPerpsBalance` helper that truncates down to 2
decimals before formatting, and used it in both `PerpsWithdrawBalance`
and `PerpsMarketBalanceActions` (Perps home) so the two surfaces never
disagree by a cent.

## **Changelog**

CHANGELOG entry: Fixed Perps Withdraw Max so users actually withdraw
their full HyperLiquid balance; replaced 90% with a Max button; Perps
home and Withdraw now show the same balance.

## **Related issues**

Fixes:
[CONF-1161](https://consensyssoftware.atlassian.net/browse/CONF-1161)

## **Manual testing steps**

~~~gherkin
Feature: Perps Withdraw Max

  Scenario: Max button replaces 90%
    Given user is on the Perps Withdraw confirmation
    Then the percentage row shows 10% / 25% / 50% / Max
    And Max is visible on first render (no 90% flash)

  Scenario: Max withdraws the full HyperLiquid balance
    Given user has $40.40 available on HyperLiquid
    When user taps Max
    Then the input field shows $40.40 (not a BNB-denominated fiat value)
    And "Available balance: $40.40" is shown below the input
    When user taps Withdraw and submits
    Then the HyperLiquid balance after the withdraw is 0
    And no Arbitrum USDC wallet amount is used

  Scenario: Max with a native destination token
    Given user is on the Perps Withdraw confirmation
    And user selects BNB (or ETH) as the Receive token
    Then the percentage row still shows Max (not 90%)

  Scenario: Perps home matches Withdraw page balance
    Given a HyperLiquid balance of $40.489
    Then Perps home shows "$40.48" (total) and "$40.48 available"
    And the Withdraw page shows "Available balance: $40.48"
~~~

## **Screenshots/Recordings**

### **Before**

### **After**

Max button stable, full balance withdrawn, home and Withdraw match.

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

[CONF-1161]:
https://consensyssoftware.atlassian.net/browse/CONF-1161?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches confirmation amount entry and Transaction Pay max-handling for
withdraw flows, which can affect how much users withdraw/send. Changes
are scoped and covered by new unit tests, but regressions could impact
displayed/entered amounts and max behavior.
> 
> **Overview**
> Enables a true **Max** path for Perps Withdraw confirmations by
passing `hasMax` through `PerpsWithdrawInfo`/`CustomAmountInfo` and
allowing Max to render even when the (post-quote) selected token is
native.
> 
> Fixes withdraw amount correctness in `useTransactionCustomAmount` by
skipping the `totals.targetAmount.usd` override for *withdraw* flows and
by **not setting `isMaxAmount`** for `perpsWithdraw` when 100% is
selected (to avoid Transaction Pay using the wrong source balance).
Perps withdraw Max is also truncated down to 2 decimals.
> 
> Adds `formatPerpsBalance` (truncate-then-format) and switches Perps
home (`PerpsMarketBalanceActions`) and withdraw balance display to use
it, ensuring displayed balances never round above what can actually be
withdrawn. Also hardens a Trending hook test by waiting for the state
update to avoid flakiness.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
18e60cf. 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/UI/Perps/components/PerpsMarketBalanceActions/PerpsMarketBalanceActions.test.tsx

@@ -200,6 +200,7 @@ jest.mock('../../../../../images/image-icons', () => ({
 // Mock format utils
 jest.mock('../../utils/formatUtils', () => ({
   formatPerpsFiat: jest.fn((amount) => `$${amount}`),
+  formatPerpsBalance: jest.fn((amount) => `$${amount}`),
 }));
 
 // Mock PerpsBottomSheetTooltip to avoid SafeArea issues

app/components/UI/Perps/components/PerpsMarketBalanceActions/PerpsMarketBalanceActions.tsx

@@ -22,10 +22,7 @@ import { useColorPulseAnimation, useBalanceComparison } from '../../hooks';
 import { usePerpsHomeActions } from '../../hooks/usePerpsHomeActions';
 import PerpsBottomSheetTooltip from '../PerpsBottomSheetTooltip';
 import { usePerpsLiveAccount } from '../../hooks/stream';
-import {
-  formatPerpsFiat,
-  PRICE_RANGES_MINIMAL_VIEW,
-} from '../../utils/formatUtils';
+import { formatPerpsBalance } from '../../utils/formatUtils';
 import { PerpsMarketBalanceActionsSelectorsIDs } from '../../Perps.testIds';
 import { BigNumber } from 'bignumber.js';
 import {
@@ -255,7 +252,7 @@ const PerpsMarketBalanceActions: React.FC<PerpsMarketBalanceActionsProps> = ({
                 isHidden={privacyMode}
                 length={SensitiveTextLength.Medium}
               >
-                {formatPerpsFiat(totalBalance)}
+                {formatPerpsBalance(totalBalance)}
               </SensitiveText>
             </Animated.View>
             <Box
@@ -271,10 +268,7 @@ const PerpsMarketBalanceActions: React.FC<PerpsMarketBalanceActionsProps> = ({
                 isHidden={privacyMode}
                 length={SensitiveTextLength.Short}
               >
-                {formatPerpsFiat(availableBalance, {
-                  ranges: PRICE_RANGES_MINIMAL_VIEW,
-                  stripTrailingZeros: false,
-                })}
+                {formatPerpsBalance(availableBalance)}
               </SensitiveText>
               <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
                 {' '}

app/components/UI/Perps/utils/formatUtils.test.ts

@@ -3,6 +3,7 @@
  */
 
 import {
+  formatPerpsBalance,
   formatPerpsFiat,
   formatPnl,
   formatPercentage,
@@ -967,6 +968,37 @@ describe('formatUtils', () => {
     });
   });
 
+  describe('formatPerpsBalance', () => {
+    it('truncates values that would otherwise round up under halfExpand', () => {
+      // Without truncation, Intl.NumberFormat would render $50.39 for 50.389.
+      // formatPerpsBalance must show $50.38 so the Max button and
+      // insufficient-balance comparisons stay consistent.
+      expect(formatPerpsBalance('50.389')).toBe('$50.38');
+      expect(formatPerpsBalance('50.385')).toBe('$50.38');
+      expect(formatPerpsBalance('50.399')).toBe('$50.39');
+    });
+
+    it('preserves values that already have two decimals', () => {
+      expect(formatPerpsBalance('50.39')).toBe('$50.39');
+    });
+
+    it('accepts numeric input', () => {
+      expect(formatPerpsBalance(50.389)).toBe('$50.38');
+      expect(formatPerpsBalance(0)).toBe('$0');
+    });
+
+    it('strips currency formatting from input strings', () => {
+      expect(formatPerpsBalance('$1,232.39')).toBe('$1,232.39');
+      expect(formatPerpsBalance('$50.389')).toBe('$50.38');
+    });
+
+    it('returns zero for null, undefined, or empty input', () => {
+      expect(formatPerpsBalance(null)).toBe('$0');
+      expect(formatPerpsBalance(undefined)).toBe('$0');
+      expect(formatPerpsBalance('')).toBe('$0');
+    });
+  });
+
   describe('parsePercentageString', () => {
     it('should parse formatted percentage strings', () => {
       expect(parsePercentageString('+2.50%')).toBe(2.5);

app/components/UI/Perps/utils/formatUtils.ts

@@ -334,6 +334,27 @@ export const parseCurrencyString = (formattedValue: string): number => {
   return isNegative ? -parsed : parsed;
 };
 
+/**
+ * Formats a perps balance (availableBalance, totalBalance, etc.) as fiat,
+ * truncating down to 2 decimals first so the displayed value never exceeds
+ * the actual withdrawable amount. Use this for any balance that a user might
+ * try to act on (withdraw Max, insufficient-balance comparisons), so the
+ * display matches what the underlying flow can actually transact.
+ *
+ * Accepts raw numeric strings (e.g. "50.389"), formatted strings
+ * (e.g. "$1,232.39"), or numbers. See `parseCurrencyString`.
+ */
+export const formatPerpsBalance = (
+  balance: string | number | null | undefined,
+): string => {
+  if (balance === null || balance === undefined || balance === '') {
+    return formatPerpsFiat(0);
+  }
+  const numeric =
+    typeof balance === 'string' ? parseCurrencyString(balance) : balance;
+  return formatPerpsFiat(truncateToTwoDecimals(numeric));
+};
+
 /**
  * Parses formatted percentage strings back to numeric values
  * @param formattedValue - Formatted percentage string (handles %, +/- signs)

app/components/UI/Trending/hooks/useTrendingRequest/useTrendingRequest.test.ts

@@ -239,8 +239,15 @@ describe('useTrendingRequest', () => {
           chainIds: ['eip155:1', 'eip155:137'],
         }),
       );
-      expect(result.current.results).toEqual(mockResults);
-      expect(result.current.isLoading).toBe(false);
+
+      // The `waitFor` above only confirms the mock was invoked. Under load
+      // (full suite run) the resolved-promise setState has not yet committed
+      // by the time we check `result.current.results` synchronously — flaky.
+      // Wait on the actual state transition instead.
+      await waitFor(() => {
+        expect(result.current.results).toEqual(mockResults);
+        expect(result.current.isLoading).toBe(false);
+      });
 
       spyGetTrendingTokens.mockRestore();
     },

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

@@ -533,6 +533,94 @@ describe('CustomAmountInfo', () => {
     });
   });
 
+  describe('hasMax percentage button', () => {
+    beforeEach(() => {
+      // Percentage buttons only render when hasInput is false.
+      useTransactionCustomAmountMock.mockReturnValue({
+        amountFiat: '0',
+        amountHuman: '0',
+        amountHumanDebounced: '0',
+        hasInput: false,
+        isInputChanged: false,
+        updatePendingAmount: noop,
+        updatePendingAmountPercentage: noop,
+        updateTokenAmount: noop,
+      });
+    });
+
+    it('renders Max when hasMax=true and pay token is non-native', () => {
+      const { getByText, queryByText } = render({ hasMax: true });
+
+      expect(getByText('Max')).toBeOnTheScreen();
+      expect(queryByText('90%')).not.toBeOnTheScreen();
+    });
+
+    it('falls back to 90% when pay token is native and the flow is not a withdraw (safeguard against sending entire native balance with no gas reserve)', () => {
+      useTransactionPayTokenMock.mockReturnValue({
+        payToken: {
+          address: '0x123',
+          balanceHuman: '0',
+          balanceFiat: '0',
+          balanceRaw: '0',
+          balanceUsd: '0',
+          chainId: '0x1',
+          decimals: 18,
+          symbol: 'TST',
+        },
+        setPayToken: noop as never,
+        isNative: true,
+      });
+
+      const { getByText, queryByText } = render({ hasMax: true });
+
+      expect(getByText('90%')).toBeOnTheScreen();
+      expect(queryByText('Max')).not.toBeOnTheScreen();
+    });
+
+    it.each([
+      TransactionType.perpsWithdraw,
+      TransactionType.predictWithdraw,
+      TransactionType.moneyAccountWithdraw,
+    ])(
+      'renders Max for %s even with a native destination token (pay token is destination in post-quote mode, native-gas-reserve safeguard does not apply)',
+      (transactionType) => {
+        useTransactionMetadataRequestMock.mockReturnValue({
+          type: transactionType,
+          txParams: { from: '0x123' },
+        } as never);
+        useTransactionPayTokenMock.mockReturnValue({
+          payToken: {
+            address: '0x123',
+            balanceHuman: '0',
+            balanceFiat: '0',
+            balanceRaw: '0',
+            balanceUsd: '0',
+            chainId: '0x1',
+            decimals: 18,
+            symbol: 'TST',
+          },
+          setPayToken: noop as never,
+          isNative: true,
+        });
+
+        const { getByText, queryByText } = render({
+          hasMax: true,
+          transactionType,
+        });
+
+        expect(getByText('Max')).toBeOnTheScreen();
+        expect(queryByText('90%')).not.toBeOnTheScreen();
+      },
+    );
+
+    it('renders 90% when hasMax is not provided', () => {
+      const { getByText, queryByText } = render();
+
+      expect(getByText('90%')).toBeOnTheScreen();
+      expect(queryByText('Max')).not.toBeOnTheScreen();
+    });
+  });
+
   describe('showPaymentDetails', () => {
     async function pressDone(
       getByText: ReturnType<typeof render>['getByText'],

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

@@ -46,7 +46,10 @@ import { useRampNavigation } from '../../../../../UI/Ramp/hooks/useRampNavigatio
 import { useAccountTokens } from '../../../hooks/send/useAccountTokens';
 import { AlignItems } from '../../../../../UI/Box/box.types';
 import { strings } from '../../../../../../../locales/i18n';
-import { hasTransactionType } from '../../../utils/transaction';
+import {
+  hasTransactionType,
+  isTransactionPayWithdraw,
+} from '../../../utils/transaction';
 import { useTransactionMetadataRequest } from '../../../hooks/transactions/useTransactionMetadataRequest';
 import {
   Button,
@@ -125,6 +128,7 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
     const isMoneyAccountDeposit = hasTransactionType(transactionMeta, [
       TransactionType.moneyAccountDeposit,
     ]);
+    const isWithdraw = isTransactionPayWithdraw(transactionMeta);
     const [selectedRecipientAddress, setSelectedRecipientAddress] = useState<
       string | undefined
     >(undefined);
@@ -289,7 +293,7 @@ export const CustomAmountInfo: React.FC<CustomAmountInfoProps> = memo(
               onDonePress={handleDone}
               onPercentagePress={updatePendingAmountPercentage}
               hasInput={hasInput}
-              hasMax={hasMax && !isNativePayToken}
+              hasMax={hasMax && (isWithdraw || !isNativePayToken)}
             />
           )}
           {!hasTokens && <BuySection />}

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

@@ -71,4 +71,13 @@ describe('PerpsWithdrawInfo', () => {
       tokenAddress: ARBITRUM_USDC.address,
     });
   });
+
+  it('passes hasMax=true to CustomAmountInfo so the percentage row shows Max instead of 90%', () => {
+    render(<PerpsWithdrawInfo />);
+
+    expect(mockCustomAmountInfo).toHaveBeenCalledWith(
+      expect.objectContaining({ hasMax: true }),
+      expect.anything(),
+    );
+  });
 });

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

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

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

@@ -46,6 +46,22 @@ describe('PerpsWithdrawBalance', () => {
     ).toBeOnTheScreen();
   });
 
+  it('truncates 3+ decimal balances down to 2 decimals so the displayed value matches the Max button', () => {
+    // Without truncation, Intl.NumberFormat rounds half-up and would show
+    // $50.39 for an underlying 50.389 balance, one cent higher than the
+    // Max button computed via BigNumber.ROUND_DOWN.
+    mockUsePerpsLiveAccount.mockReturnValue({
+      account: { availableBalance: '50.389' },
+      isInitialLoading: false,
+    } as never);
+
+    const { getByText } = renderComponent();
+
+    expect(
+      getByText(`${strings('confirm.available_balance')}$50.38`),
+    ).toBeOnTheScreen();
+  });
+
   it('renders a zero balance when the live account has no available balance', () => {
     mockUsePerpsLiveAccount.mockReturnValue({
       account: null,