From 926a64f4fda92454bf3d772f18ade021f20e58ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A9lcio=20Franco?= <github@helciofranco.com>
Date: Wed, 18 Sep 2024 12:40:42 -0400
Subject: [PATCH] fix: leading zeros in the inputs (#1481)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Closes https://github.com/FuelLabs/fuels-wallet/issues/1352
- Closes https://github.com/FuelLabs/fuels-wallet/issues/1353
- Closes https://github.com/FuelLabs/fuels-wallet/issues/1355

---

| 📷  Demo |
| --- |
| <video
src="https://github.com/user-attachments/assets/46fda902-9713-4007-b799-00197d6cbe75"
/> |
---
 .changeset/big-cooks-ring.md                  |  5 +++++
 .changeset/cyan-clocks-reflect.md             |  5 +++++
 .changeset/seven-kids-fold.md                 |  5 +++++
 .../components/InputAmount/InputAmount.tsx    |  3 +++
 .../InputAmount/InputAmount.utils.ts          | 17 +++++++++++++++++
 .../components/TxFeeOptions/TxFeeOptions.tsx  | 19 ++++++++++++-------
 .../TxFeeOptions/TxFeeOptions.utils.ts        |  5 +++++
 7 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/big-cooks-ring.md
 create mode 100644 .changeset/cyan-clocks-reflect.md
 create mode 100644 .changeset/seven-kids-fold.md
 create mode 100644 packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts

diff --git a/.changeset/big-cooks-ring.md b/.changeset/big-cooks-ring.md
new file mode 100644
index 000000000..ce753eaac
--- /dev/null
+++ b/.changeset/big-cooks-ring.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the amount field.
diff --git a/.changeset/cyan-clocks-reflect.md b/.changeset/cyan-clocks-reflect.md
new file mode 100644
index 000000000..549dcbb5b
--- /dev/null
+++ b/.changeset/cyan-clocks-reflect.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the Gas Limit input during the fee customization.
diff --git a/.changeset/seven-kids-fold.md b/.changeset/seven-kids-fold.md
new file mode 100644
index 000000000..a6530f5e9
--- /dev/null
+++ b/.changeset/seven-kids-fold.md
@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Blocks leading zeros in the Tip input during the fee customization.
diff --git a/packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx b/packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx
index e4d966154..ec04d1f8d 100644
--- a/packages/app/src/systems/Core/components/InputAmount/InputAmount.tsx
+++ b/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 && (
diff --git a/packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts b/packages/app/src/systems/Core/components/InputAmount/InputAmount.utils.ts
new file mode 100644
index 000000000..3c760b70c
--- /dev/null
+++ b/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;
+};
diff --git a/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx b/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx
index b0d5dab9e..48b8e9ddb 100644
--- a/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.tsx
+++ b/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(
diff --git a/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.utils.ts b/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.utils.ts
index 3908bc961..25319367e 100644
--- a/packages/app/src/systems/Transaction/components/TxFeeOptions/TxFeeOptions.utils.ts
+++ b/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';