feat: improve xchain swaps slippage settings with decimals and warnings (#29617)

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

The slippage settings for xchain transactions was not allowing users to
input a decimal (i.e. 0.5%), only whole numbers (0, 1, so on...). It
also did not display a warning for low slippage settings. This addresses
both by allowing the user to input decimal numbers, and displaying a
warning when the custom slippage is set to <0.5% in the settings modal.

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

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MMS-1830

## **Manual testing steps**

1. Go to the xchain swaps transaction preparation page.
2. Edit slippage settings.
3. Notice decimals are now allowed, and a warning is displayed with low
slippage.

## **Screenshots/Recordings**

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

### **Before**

<img width="465" alt="Screenshot 2025-01-09 at 4 49 04 PM"
src="https://github.com/user-attachments/assets/b7930dab-166d-4ad9-a622-efa118b6a196"
/>

<!-- [screenshots/recordings] -->

### **After**

<img width="483" alt="Screenshot 2025-01-09 at 2 29 30 PM"
src="https://github.com/user-attachments/assets/2918f0c3-98a6-4b28-ae88-42ea166c4921"
/>
<img width="489" alt="Screenshot 2025-01-09 at 2 29 22 PM"
src="https://github.com/user-attachments/assets/0a7fdcdd-8057-4818-a22c-4ac7e1f3620e"
/>


<!-- [screenshots/recordings] -->

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

Author: ghgoodreau

ui/pages/bridge/prepare/bridge-transaction-settings-modal.tsx

@@ -16,6 +16,9 @@ import {
   Text,
   TextField,
   TextFieldType,
+  BannerAlert,
+  BannerAlertSeverity,
+  Box,
 } from '../../../components/component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
@@ -26,6 +29,7 @@ import {
   JustifyContent,
   TextColor,
   TextVariant,
+  SEVERITIES,
 } from '../../../helpers/constants/design-system';
 import { getSlippage } from '../../../ducks/bridge/selectors';
 import { setSlippage } from '../../../ducks/bridge/actions';
@@ -50,13 +54,32 @@ export const BridgeTransactionSettingsModal = ({
   const [localSlippage, setLocalSlippage] = useState<number | undefined>(
     slippage,
   );
-  const [customSlippage, setCustomSlippage] = useState<number | undefined>(
-    slippage && HARDCODED_SLIPPAGE_OPTIONS.includes(slippage)
-      ? undefined
-      : slippage,
+  const [customSlippage, setCustomSlippage] = useState<string | undefined>(
+    slippage && !HARDCODED_SLIPPAGE_OPTIONS.includes(slippage)
+      ? slippage.toString()
+      : undefined,
   );
   const [showCustomButton, setShowCustomButton] = useState(true);
 
+  const getNotificationConfig = () => {
+    if (!customSlippage) {
+      return null;
+    }
+
+    const slippageValue = Number(customSlippage.replace(',', '.'));
+    if (slippageValue < 0.5) {
+      return {
+        severity: SEVERITIES.WARNING,
+        text: t('swapSlippageLowDescription', [slippageValue]),
+        title: t('swapSlippageLowTitle'),
+      };
+    }
+
+    return null;
+  };
+
+  const notificationConfig = getNotificationConfig();
+
   return (
     <Modal isOpen={isOpen} onClose={onClose} className="bridge-settings-modal">
       <ModalOverlay />
@@ -156,56 +179,59 @@ export const BridgeTransactionSettingsModal = ({
                 type={TextFieldType.Text}
                 value={customSlippage}
                 onChange={(e) => {
-                  // Remove characters that are not numbers or decimal points if rendering a controlled or pasted value
-                  const cleanedValue = e.target.value.replace(/[^0-9.]+/gu, '');
-                  setLocalSlippage(undefined);
-                  setCustomSlippage(
-                    cleanedValue.length > 0 ? Number(cleanedValue) : undefined,
-                  );
+                  const { value } = e.target;
+                  if (value === '' || /^\d*[.,]?\d*$/u.test(value)) {
+                    setLocalSlippage(undefined);
+                    setCustomSlippage(value);
+                  }
                 }}
                 autoFocus={true}
                 onBlur={() => {
-                  console.log('====blur');
                   setShowCustomButton(true);
                 }}
                 onFocus={() => {
-                  console.log('====focus');
                   setShowCustomButton(false);
                 }}
-                onKeyPress={(e?: React.KeyboardEvent<HTMLDivElement>) => {
-                  // Only allow numbers and at most one decimal point
-                  if (
-                    e &&
-                    !/^[0-9]*\.{0,1}[0-9]*$/u.test(
-                      `${customSlippage ?? ''}${e.key}`,
-                    )
-                  ) {
-                    e.preventDefault();
-                  }
-                }}
                 endAccessory={<Text variant={TextVariant.bodyMd}>%</Text>}
               />
             )}
           </Row>
+          {notificationConfig && (
+            <Box marginTop={5}>
+              <BannerAlert
+                severity={notificationConfig.severity as BannerAlertSeverity}
+                title={notificationConfig.title}
+                titleProps={{ 'data-testid': 'swaps-banner-title' }}
+              >
+                <Text>{notificationConfig.text}</Text>
+              </BannerAlert>
+            </Box>
+          )}
         </Column>
         <ModalFooter>
           <ButtonPrimary
             width={BlockSize.Full}
             size={ButtonPrimarySize.Md}
             variant={TextVariant.bodyMd}
-            disabled={(localSlippage || customSlippage) === slippage}
+            disabled={
+              (customSlippage !== undefined &&
+                Number(customSlippage.replace(',', '.')) === slippage) ||
+              (localSlippage !== undefined && localSlippage === slippage)
+            }
             onClick={() => {
-              const newSlippage = localSlippage || customSlippage;
-              newSlippage &&
+              const newSlippage =
+                localSlippage ?? Number(customSlippage?.replace(',', '.'));
+              if (newSlippage) {
                 trackCrossChainSwapsEvent({
                   event: MetaMetricsEventName.InputChanged,
                   properties: {
                     input: 'slippage',
                     value: newSlippage.toString(),
                   },
                 });
-              dispatch(setSlippage(newSlippage));
-              onClose();
+                dispatch(setSlippage(newSlippage));
+                onClose();
+              }
             }}
           >
             {t('submit')}