prefill amount value if tokens amount is only 1

Mintbase · Sep 1, 2023 · 83df091 · 83df091
1 parent 450b667
commit 83df091
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/src/components/inputs/amount-account-input/AmountAccountInput.tsx b/src/components/inputs/amount-account-input/AmountAccountInput.tsx
@@ -13,6 +13,7 @@ export const MbAmountAccountInput = ({
   handleRemoveItem,
   isPercentage,
   isCleared,
+  prefillAmount,
 }: {
   id: string
   validateAmount: (id: any, amount: number) => boolean
@@ -22,20 +23,22 @@ export const MbAmountAccountInput = ({
   handleRemoveItem: (id: string) => void
   isPercentage?: boolean
   isCleared?: boolean
+  prefillAmount: number | null
 }) => {
-
   const [isAccountValid, setIsAccountValid] = useState(false)
   const [isAmountValid, setIsAmountValid] = useState(false)
 
   const [account, setAccount] = useState<string | null>(null)
-  const [amount, setAmount] = useState<string | null>(null)
+  const [amount, setAmount] = useState<string | null>(
+    prefillAmount !== null ? prefillAmount.toString() : null
+  ) // Set the initial value based on prefillAmount
 
   useEffect(() => {
     if (!isCleared) return
     setIsAmountValid(false)
     setIsAccountValid(false)
     setAccount(null)
-    setAmount(null)
+    setAmount(prefillAmount !== null ? prefillAmount.toString() : null)
   }, [isCleared])
 
   const handleDebounceFor500 = debounce(async (e) => {
@@ -50,7 +53,7 @@ export const MbAmountAccountInput = ({
     const value = e.target.value ?? null
     const valid = validateAmount(id, Number(value))
     setIsAmountValid(valid)
-    setAmount(value)
+    setAmount(prefillAmount !== null ? prefillAmount.toString() : value)
     handleChangeAmount(id, Number(value))
   }, 500)
 
@@ -71,6 +74,7 @@ export const MbAmountAccountInput = ({
           }
           onChange={handleAmountDebounceFor500}
           hasPercentageLabel={isPercentage}
+          defaultValue={amount === '1' ? 1 : undefined}
         />
       </div>
       <MbInput

diff --git a/src/components/inputs/input-account/near-amount-account/NearAmountAccount.tsx b/src/components/inputs/input-account/near-amount-account/NearAmountAccount.tsx
@@ -360,6 +360,7 @@ export const MbNearAmountAccount = ({
                       handleRemoveItem={handleRemoveItem}
                       isPercentage={isPercentage}
                       isCleared={state[id].cleared}
+                      prefillAmount={totalAmount === 1 ? 1 : null}
                     />
                   )
                 } else {

diff --git a/src/components/inputs/input-field/inputField.tsx b/src/components/inputs/input-field/inputField.tsx
@@ -22,6 +22,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   hasPercentageLabel?: boolean
   maxChars?: number
   initialCounter?: number
+  defaultValue?: number | undefined
 }
 
 export const MbInput = forwardRef<HTMLInputElement, InputProps>(
@@ -40,6 +41,7 @@ export const MbInput = forwardRef<HTMLInputElement, InputProps>(
       hasIcon,
       maxChars,
       initialCounter = 0,
+      defaultValue,
       inputSize = ESize.MEDIUM,
       onChange,
       ...restProps
@@ -84,6 +86,7 @@ export const MbInput = forwardRef<HTMLInputElement, InputProps>(
               value={value}
               maxLength={maxChars}
               required={required}
+              defaultValue={defaultValue}
               className={`input-field ${getFontType(inputSize)}`}
               onWheel={(e) => {
                 if (type !== 'number') return