From 49842299b1cad4a88b62ec9a03d620a548281cbf Mon Sep 17 00:00:00 2001
From: Mimi Tran <80493680+mimi-imtbl@users.noreply.github.com>
Date: Mon, 30 Sep 2024 14:16:14 +1000
Subject: [PATCH] [NO CHANGELOG][Add Funds Widget] Add debounce for input
 (#2245)

---
 .../src/widgets/add-funds/views/AddFunds.tsx  | 42 ++++++++++++-------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
index 6d0c1e7f93..3cdc44feb5 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-funds/views/AddFunds.tsx
@@ -5,15 +5,13 @@ import {
   TokenInfo,
 } from '@imtbl/checkout-sdk';
 import {
-  Body, Box, MenuItem, OverflowPopoverMenu,
+  Body, Box, MenuItem, OverflowPopoverMenu, HeroTextInput,
 } from '@biom3/react';
 import {
-  useCallback, useContext, useEffect, useState,
+  useCallback, useContext, useEffect, useRef, useState,
 } from 'react';
 import { SimpleLayout } from '../../../components/SimpleLayout/SimpleLayout';
 import { HeaderNavigation } from '../../../components/Header/HeaderNavigation';
-import { amountInputValidation } from '../../../lib/validations/amountInputValidations';
-import { TextInputForm } from '../../../components/FormComponents/TextInputForm/TextInputForm';
 import { OptionsDrawer } from '../components/OptionsDrawer';
 import { EventTargetContext } from '../../../context/event-target-context/EventTargetContext';
 import { orchestrationEvents } from '../../../lib/orchestrationEvents';
@@ -64,6 +62,7 @@ export function AddFunds({
     [],
   );
   const [allowedTokens, setAllowedTokens] = useState<TokenInfo[]>([]);
+  const [inputValue, setInputValue] = useState<string>(toAmount || '0');
   const [currentToAmount, setCurrentToAmount] = useState<string>(
     toAmount || '0',
   );
@@ -71,6 +70,24 @@ export function AddFunds({
   TokenInfo | undefined
   >();
 
+  const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const handleAmountChange = (value: string) => {
+    if (debounceTimeoutRef.current) {
+      clearTimeout(debounceTimeoutRef.current);
+    }
+
+    debounceTimeoutRef.current = setTimeout(() => {
+      setCurrentToAmount(value);
+    }, 1500);
+  };
+
+  const updateAmount = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.target;
+    setInputValue(value);
+    handleAmountChange(value);
+  };
+
   const showErrorView = useCallback(
     (error: Error) => {
       viewDispatch({
@@ -148,10 +165,6 @@ export function AddFunds({
     setShowOptionsDrawer(true);
   };
 
-  const updateAmount = (value: string) => {
-    setCurrentToAmount(value);
-  };
-
   const isSelected = (token: TokenInfo) => token.address === currentToTokenAddress;
 
   const isDisabled = !currentToTokenAddress || !currentToAmount || parseFloat(currentToAmount) <= 0;
@@ -234,14 +247,13 @@ export function AddFunds({
         >
           <Box sx={{ width: 'base.spacing.x40' }}>
             <Box sx={{ marginBottom: 'base.spacing.x3' }}>
-              <TextInputForm
-                testId="add-funds-amount"
+              <HeroTextInput
+                testId="add-funds-amount-input"
                 type="number"
-                value={currentToAmount}
-                validator={amountInputValidation}
-                onTextInputChange={(value) => updateAmount(value)}
-                textAlign="right"
-                inputMode="decimal"
+                value={inputValue}
+                onChange={(value) => updateAmount(value)}
+                placeholder="0"
+                weight="bold"
               />
             </Box>