fix: Change to available fiat value text when fiat mode is enabled (#37749)

ode is enabled

<!--
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?
-->

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

This PR adds the total available fiat value when user switch to fiat
mode.

## **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: Change available value text to total fiat value when
fiat mode is enabled

## **Related issues**

Fixes: MetaMask/MetaMask-planning#6203

## **Manual testing steps**

1. Go to send
2. Switching from fiat to token should also change the available balance
text

## **Screenshots/Recordings**

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

### **Before**

<img width="409" height="621" alt="Screenshot 2025-11-12 at 15 21 29"
src="https://github.com/user-attachments/assets/b9326698-326c-4359-bdbc-f7536bd35e69"
/>


### **After**

<img width="408" height="618" alt="Screenshot 2025-11-12 at 15 16 11"
src="https://github.com/user-attachments/assets/f8d2a54e-dbd0-42ad-a8c6-5eff22004ef5"
/>


## **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]
> Displays available balance in fiat when fiat mode is on (and token
otherwise), updating tests accordingly.
> 
> - **Send Amount UI (`ui/pages/.../amount.tsx`)**:
> - Add memoized `balanceDisplayValue` to render available balance in
fiat (`getFiatDisplayValue(...) available`) when in fiat mode, and token
balance otherwise.
> - Replace inline balance text with `balanceDisplayValue`; utilizes
`t('available')`.
> - **Tests (`amount.test.tsx`)**:
> - Update assertions to expect `"$ 20.00 available"` in fiat mode and
`"10.023 NEU available"` by default.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
dd0b4b5. 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/amount.test.tsx

@@ -120,6 +120,7 @@ describe('Amount', () => {
     fireEvent.change(getByRole('textbox'), { target: { value: 100 } });
     expect(getByText('$ 20.00')).toBeInTheDocument();
     fireEvent.click(getByTestId('toggle-fiat-mode'));
+    expect(getByText('$ 20.00 available')).toBeInTheDocument();
     expect(getByRole('textbox')).toHaveValue('20');
     expect(getByText('USD')).toBeInTheDocument();
     fireEvent.change(getByRole('textbox'), { target: { value: 100 } });

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

@@ -121,6 +121,12 @@ export const Amount = ({
     updateValue,
   ]);
 
+  const balanceDisplayValue = useMemo(() => {
+    return fiatMode
+      ? `${getFiatDisplayValue(String(balance))} ${t('available')}`
+      : `${balance} ${asset?.symbol} ${t('available')}`;
+  }, [fiatMode, getFiatDisplayValue, balance, asset?.symbol, t]);
+
   if (asset?.standard === ERC721) {
     return null;
   }
@@ -173,7 +179,7 @@ export const Amount = ({
         </Text>
         <Box display={Display.Flex}>
           <Text color={TextColor.textAlternative} variant={TextVariant.bodySm}>
-            {balance} {asset?.symbol} {t('available')}
+            {balanceDisplayValue}
           </Text>
           {!isNonEvmNativeSendType && (
             <ButtonLink