fix: leading zeros in the inputs (#1481)

- Closes #1352
- Closes #1353
- Closes #1355

---

| 📷  Demo |
| --- |
| <video
src="https://github.com/user-attachments/assets/46fda902-9713-4007-b799-00197d6cbe75"
/> |

.changeset/big-cooks-ring.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the amount field.

.changeset/cyan-clocks-reflect.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the Gas Limit input during the fee customization.

.changeset/seven-kids-fold.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the Tip input during the fee customization.

packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx

@@ -24,6 +24,7 @@ import {
   Text,
   Tooltip,
 } from '@fuel-ui/react';
+import { isAmountAllowed } from './InputAmount.utils';
 
 export const DECIMAL_UNITS = DEFAULT_DECIMAL_UNITS;
 
@@ -153,11 +154,13 @@ export const InputAmount: InputAmountComponent = ({
           allowedDecimalSeparators={['.', ',']}
           allowNegative={false}
           thousandSeparator={false}
+          allowLeadingZeros={false}
           value={assetAmount}
           onChange={(e) => {
             handleAmountChange(e.target.value);
           }}
           decimalScale={units}
+          isAllowed={isAmountAllowed}
           {...inputProps}
         />
         {initialBalance && (

packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts

@@ -0,0 +1,17 @@
+import type { InputNumberProps } from '@fuel-ui/react';
+
+export const isAmountAllowed: InputNumberProps['isAllowed'] = ({ value }) => {
+  console.log(value);
+  // Allow to clear the input
+  if (!value) {
+    return true;
+  }
+
+  // Allow numbers like "05" because the react-number-format will handle it
+  // but disallow multiple leading zeros like "00" before the decimals
+  if (value.charAt(0) === '0' && value.charAt(1) === '0') {
+    return false;
+  }
+
+  return true;
+};

packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx

@@ -5,9 +5,14 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 import { MotionFlex, MotionStack, animations } from '~/systems/Core';
 import { createAmount } from '~/systems/Core/components/InputAmount/InputAmount';
+import { isAmountAllowed } from '~/systems/Core/components/InputAmount/InputAmount.utils';
 import type { SendFormValues } from '~/systems/Send/hooks';
 import { TxFee } from '../TxFee';
-import { DECIMAL_UNITS, formatTip } from './TxFeeOptions.utils';
+import {
+  DECIMAL_UNITS,
+  formatTip,
+  isGasLimitAllowed,
+} from './TxFeeOptions.utils';
 
 type TxFeeOptionsProps = {
   initialAdvanced: boolean;
@@ -101,12 +106,11 @@ export const TxFeeOptions = ({
                         thousandSeparator={false}
                         placeholder="0"
                         css={{ width: '100%' }}
+                        name={gasLimit.name}
+                        decimalScale={0}
+                        isAllowed={isGasLimitAllowed}
                         onChange={(e) => {
-                          const ignore = /[.,\-+]/g;
-                          const val = (e.target.value || '').replaceAll(
-                            ignore,
-                            ''
-                          );
+                          const val = e.target.value;
 
                           gasLimit.onChange({
                             amount: bn(val),
@@ -125,12 +129,13 @@ export const TxFeeOptions = ({
                         value={tip.value.text}
                         inputMode="decimal"
                         autoComplete="off"
-                        allowedDecimalSeparators={['.', ',']}
+                        allowedDecimalSeparators={['.']}
                         allowNegative={false}
                         thousandSeparator={false}
                         decimalScale={DECIMAL_UNITS}
                         placeholder="0.00"
                         css={{ width: '100%' }}
+                        isAllowed={isAmountAllowed}
                         onChange={(e) => {
                           const text = e.target.value;
                           const { text: newText, amount } = createAmount(

packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.utils.ts

@@ -1,7 +1,12 @@
+import type { InputNumberProps } from '@fuel-ui/react';
 import { type BN, DEFAULT_DECIMAL_UNITS } from 'fuels';
 
 export const DECIMAL_UNITS = DEFAULT_DECIMAL_UNITS;
 
+export const isGasLimitAllowed: InputNumberProps['isAllowed'] = ({ value }) => {
+  return value.charAt(0) !== '0';
+};
+
 export const formatTip = (tip: BN) => {
   if (tip.isZero()) {
     return '0';