[NO CHANGELOG] [Add Tokens Widget] Fix input amount syncing (#2412)

immutable · Nov 25, 2024 · d9f5755 · d9f5755
1 parent c890f20
commit d9f5755
Showing 1 changed file with 23 additions and 10 deletions.
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/AddTokens.tsx
@@ -137,24 +137,35 @@ export function AddTokens({
   );
   const [fetchingRoutes, setFetchingRoutes] = useState(false);
   const [insufficientBalance, setInsufficientBalance] = useState(false);
+  const [isAmountInputSynced, setIsAmountInputSynced] = useState(false);
 
-  const selectedAmountUsd = useMemo(
-    () => convertToUsd(tokens, inputValue, selectedToken),
-    [tokens, inputValue, selectedToken],
-  );
-
-  const setSelectedAmount = useMemo(
-    () => debounce((value: string) => {
+  const debouncedSetSelectedAmount = useRef(
+    debounce((value: string) => {
       addTokensDispatch({
         payload: {
           type: AddTokensActions.SET_SELECTED_AMOUNT,
           selectedAmount: value,
         },
       });
     }, 2500),
-    [],
   );
 
+  const selectedAmountUsd = useMemo(
+    () => convertToUsd(tokens, inputValue, selectedToken),
+    [tokens, inputValue, selectedToken],
+  );
+
+  const setSelectedAmount = (value: string) => {
+    setIsAmountInputSynced(false);
+    debouncedSetSelectedAmount.current(value);
+  };
+
+  useEffect(() => {
+    if (selectedAmount === inputValue) {
+      setIsAmountInputSynced(true);
+    }
+  }, [selectedAmount, inputValue]);
+
   const setSelectedRouteData = (route: RouteData | undefined) => {
     if (route) {
       track({
@@ -478,10 +489,12 @@ export function AddTokens({
   }, [showInitialEmptyState]);
 
   const shouldShowBackButton = showBackButton && onBackButtonClick;
+
   const routeInputsReady = !!selectedToken
     && !!fromAddress
     && validateToAmount(selectedAmount).isValid
-    && validateToAmount(inputValue).isValid;
+    && validateToAmount(inputValue).isValid
+    && isAmountInputSynced;
 
   const loading = (routeInputsReady || fetchingRoutes)
     && !(selectedRouteData || insufficientBalance);
@@ -624,7 +637,7 @@ export function AddTokens({
                 setShowPayWithDrawer(true);
               }}
             >
-              {selectedToken && fromAddress && selectedAmount && (
+              {selectedToken && fromAddress && selectedAmount && isAmountInputSynced && (
               <>
                 <MenuItem.BottomSlot.Divider
                   sx={fromAddress ? { ml: 'base.spacing.x4' } : undefined}