diff --git a/.changeset/big-cooks-ring.md b/.changeset/big-cooks-ring.md new file mode 100644 index 0000000000..ce753eaac6 --- /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 0000000000..549dcbb5b7 --- /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 0000000000..a6530f5e9e --- /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 e4d966154b..ec04d1f8d8 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 0000000000..3c760b70c4 --- /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 b0d5dab9e9..48b8e9ddb6 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 3908bc9614..25319367e3 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';