refactor: use shared const PE-5161

src/GiftForm.tsx

@@ -23,7 +23,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
   const [isTermsAccepted, setTermsAccepted] = useState<boolean>(false);
 
   const handleUSDChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const amount = Number(e.target.value);
+    const amount = +e.target.value;
     if (amount > maxUSDAmount) {
       setUsdAmount(maxUSDAmount);
       return;
@@ -32,11 +32,11 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
       setUsdAmount(minUSDAmount);
       return;
     }
-    setUsdAmount(Number(Number(e.target.value).toFixed(2)));
+    setUsdAmount(+amount.toFixed(2));
   };
 
   const wincForOneGiB = useWincForOneGiB();
-  const debouncedUsdAmount = useDebounce(usdAmount, 500);
+  const debouncedUsdAmount = useDebounce(usdAmount);
   const [credits, usdWhenCreditsWereLastUpdatedRef] = useCreditsForFiat(
     debouncedUsdAmount,
     errorCallback,
@@ -177,7 +177,7 @@ export function GiftForm({ errorCallback }: GiftFormProps) {
         />
         <span>
           I Agree to the
-          <a href={termsOfServiceUrl}>Terms of Service and Privacy Policy</a>.
+          <a href={termsOfServiceUrl}> Terms of Service and Privacy Policy</a>.
         </span>
       </div>
 

src/constants.ts

@@ -8,3 +8,4 @@ export const turboConfig = {
   paymentServiceConfig: { url: paymentServiceUrl },
 };
 export const wincPerCredit = 1_000_000_000_000;
+export const defaultDebounceMs = 500;

src/hooks/useDebounce.ts

@@ -1,10 +1,14 @@
 import { useEffect, useState } from "react";
+import { defaultDebounceMs } from "../constants";
 
 export function useDebounce<T>(value: T, delay?: number): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
 
   useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+    const timer = setTimeout(
+      () => setDebouncedValue(value),
+      delay || defaultDebounceMs,
+    );
 
     return () => {
       clearTimeout(timer);