From 764b6f30d8d48badff037fff742b0d89e816c4b5 Mon Sep 17 00:00:00 2001
From: Dino <crescimbenidino@gmail.com>
Date: Wed, 23 Nov 2022 12:48:48 -0300
Subject: [PATCH] fix(TokenAmountInput): fixed auto-formatting issue

---
 .../__snapshots__/StakeTokensForm.test.tsx.snap       |  6 ++----
 src/components/primitives/Forms/TokenAmountInput.tsx  | 11 ++++++-----
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/StakeTokensModal/components/StakeTokensForm/__snapshots__/StakeTokensForm.test.tsx.snap b/src/components/StakeTokensModal/components/StakeTokensForm/__snapshots__/StakeTokensForm.test.tsx.snap
index ea85cbe87..8b9eb44fd 100644
--- a/src/components/StakeTokensModal/components/StakeTokensForm/__snapshots__/StakeTokensForm.test.tsx.snap
+++ b/src/components/StakeTokensModal/components/StakeTokensForm/__snapshots__/StakeTokensForm.test.tsx.snap
@@ -436,14 +436,12 @@ exports[`StakeTokensForm StakeTokensForm renders properly 1`] = `
     </div>
     <button
       class="c17 c18"
-      data-testid="approve-token-spending"
+      data-testid="lock-token-spending"
       disabled=""
     >
-      approve
+      Lock
        
       REP
-       
-      spending
     </button>
   </div>
    
diff --git a/src/components/primitives/Forms/TokenAmountInput.tsx b/src/components/primitives/Forms/TokenAmountInput.tsx
index 8e048b92f..44e0f8369 100644
--- a/src/components/primitives/Forms/TokenAmountInput.tsx
+++ b/src/components/primitives/Forms/TokenAmountInput.tsx
@@ -1,7 +1,6 @@
 import { BigNumber } from 'ethers';
 import useBigNumberToString from 'hooks/Guilds/conversions/useBigNumberToString';
 import useStringToBigNumber from 'hooks/Guilds/conversions/useStringToBigNumber';
-import { useDebounce } from 'hooks/Guilds/useDebounce';
 import { useEffect, useState } from 'react';
 import { InputProps } from 'components/primitives/Forms/Input';
 import { NumericalInput } from 'components/primitives/Forms/NumericalInput';
@@ -19,26 +18,28 @@ export const TokenAmountInput: React.FC<TokenAmountInputProps> = ({
   ...rest
 }) => {
   const [localAmount, setLocalAmount] = useState<string>('');
-  const debouncedLocalAmount = useDebounce(localAmount, 350);
   const localAmountBN = useStringToBigNumber(localAmount, decimals);
 
   const valueAsString = useBigNumberToString(value, decimals);
 
   useEffect(() => {
-    if (localAmount !== valueAsString) {
+    if (localAmount === '' && localAmount !== valueAsString) {
       setLocalAmount(valueAsString);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [valueAsString]);
 
   useEffect(() => {
-    onChange(localAmountBN);
+    if (localAmount && localAmount.endsWith('.')) onChange(null);
+    else onChange(localAmountBN);
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedLocalAmount]);
+  }, [localAmount]);
 
   const setAmountEnforceDecimals = (amount: string) => {
     const fraction = amount?.split('.')?.[1];
     if (fraction && fraction?.length > decimals) return;
+    if (amount?.startsWith('.')) return;
 
     setLocalAmount(amount);
   };