fix(TokenAmountInput): fixed auto-formatting issue

DXgovernance · Nov 23, 2022 · 764b6f3 · 764b6f3
1 parent dbd3447
commit 764b6f3
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/...s/StakeTokensModal/components/StakeTokensForm/__snapshots__/StakeTokensForm.test.tsx.snap b/...s/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
@@ -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);
   };