extract hook

Author: jorgen

package.json

@@ -58,6 +58,7 @@
     "react-dom": "v18",
     "react-feather": "^2.0.9",
     "react-hotkeys-hook": "^5.1.0",
+    "react-number-format": "^5.4.4",
     "react-pro-sidebar": "^1.1.0",
     "react-router-dom": "v5",
     "react-tooltip": "^5.18.0",

src/views/SwapAndBridge/components/TokenInput/DestinationTokenInput.tsx

@@ -1,14 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { formatUnits } from "ethers/lib/utils";
 import { ReactComponent as ArrowsCross } from "assets/icons/arrows-cross.svg";
-import {
-  convertTokenToUSD,
-  convertUSDToToken,
-  formatAmountForDisplay,
-  formatUSD,
-  isValidNumberInput,
-  parseInputValue,
-} from "utils";
 import { ChangeAccountModal } from "../ChangeAccountModal";
 import SelectorButton from "../ChainTokenSelector/SelectorButton";
 import { BalanceSelector } from "../BalanceSelector";
@@ -23,7 +13,7 @@ import {
   UnitToggleButtonWrapper,
 } from "./styles";
 import { useQuoteRequestContext } from "../../hooks/useQuoteRequest/QuoteRequestContext";
-import { BigNumber } from "ethers";
+import { useTokenAmountInput } from "../../hooks";
 
 export type UnitType = "usd" | "token";
 
@@ -41,158 +31,24 @@ export const DestinationTokenInput = ({
   const { quoteRequest, setUserInput, setOriginToken, setDestinationToken } =
     useQuoteRequestContext();
 
-  const [inputBuffer, setInputBuffer] = useState<string>("");
-  const [isUserTyping, setIsUserTyping] = useState(false);
-
   const { destinationToken, originToken } = quoteRequest;
 
-  const isUserInput = quoteRequest.userInputField === "destination";
-
-  const handleSetInputValue = useCallback(
-    (value: string) => {
-      if (!destinationToken) {
-        setUserInput("destination", null);
-        return;
-      }
-
-      try {
-        const parsed = parseInputValue(value, destinationToken, unit);
-        setUserInput("destination", parsed);
-      } catch (e) {
-        setUserInput("destination", null);
-      }
-    },
-    [setUserInput, destinationToken, unit]
-  );
-
-  const handleBalanceClick = useCallback(
-    (amount: BigNumber) => {
-      if (!destinationToken) return;
-
-      setUserInput("destination", amount);
-      setIsUserTyping(false);
-      setInputBuffer("");
-    },
-    [destinationToken, setUserInput]
-  );
-
-  const displayValue = useMemo(() => {
-    if (isUserTyping) {
-      return inputBuffer;
-    }
-
-    if (!isUserInput && isUpdateLoading) {
-      return "";
-    }
-
-    const amount = isUserInput
-      ? quoteRequest.userInputAmount
-      : quoteRequest.quoteOutputAmount;
-
-    if (!amount || !destinationToken) {
-      return "";
-    }
-
-    return formatAmountForDisplay(amount, destinationToken, unit);
-  }, [
-    isUserTyping,
-    inputBuffer,
-    isUserInput,
-    isUpdateLoading,
-    quoteRequest.userInputAmount,
-    quoteRequest.quoteOutputAmount,
-    destinationToken,
+  const {
+    displayValue,
+    formattedConvertedAmount,
+    inputDisabled,
+    handleInputChange,
+    handleBalanceClick,
+    toggleUnit,
+  } = useTokenAmountInput({
+    token: destinationToken,
+    fieldName: "destination",
     unit,
-  ]);
-
-  const [convertedAmount, setConvertedAmount] = useState<BigNumber>();
-
-  useEffect(() => {
-    const amount = isUserInput
-      ? quoteRequest.userInputAmount
-      : quoteRequest.quoteOutputAmount;
-
-    if (!destinationToken || !amount) {
-      setConvertedAmount(undefined);
-      return;
-    }
-
-    try {
-      const formatted = formatAmountForDisplay(amount, destinationToken, unit);
-      if (unit === "token") {
-        const usdValue = convertTokenToUSD(formatted, destinationToken);
-        setConvertedAmount(usdValue);
-      } else {
-        const tokenValue = convertUSDToToken(formatted, destinationToken);
-        setConvertedAmount(tokenValue);
-      }
-    } catch (e) {
-      setConvertedAmount(undefined);
-    }
-  }, [
-    destinationToken,
-    quoteRequest.userInputAmount,
-    quoteRequest.quoteOutputAmount,
-    unit,
-    isUserInput,
-  ]);
-
-  const toggleUnit = useCallback(() => {
-    if (!destinationToken || !convertedAmount) {
-      setUnit(unit === "token" ? "usd" : "token");
-      return;
-    }
-
-    const newUnit = unit === "token" ? "usd" : "token";
-    setUnit(newUnit);
-
-    if (isUserInput && quoteRequest.userInputAmount) {
-      setUserInput("destination", convertedAmount);
-    }
-
-    setIsUserTyping(false);
-    setInputBuffer("");
-  }, [
-    unit,
-    destinationToken,
-    convertedAmount,
-    isUserInput,
-    quoteRequest.userInputAmount,
     setUnit,
+    isUpdateLoading,
     setUserInput,
-  ]);
-
-  const handleInputChange = useCallback(
-    (value: string) => {
-      if (!isValidNumberInput(value)) {
-        return;
-      }
-
-      setIsUserTyping(true);
-      setInputBuffer(value);
-      handleSetInputValue(value);
-    },
-    [handleSetInputValue]
-  );
-
-  const handleBlur = useCallback(() => {
-    setIsUserTyping(false);
-    setInputBuffer("");
-  }, []);
-
-  const inputDisabled = (() => {
-    if (!quoteRequest.destinationToken) return true;
-    return Boolean(!isUserInput && isUpdateLoading);
-  })();
-
-  const formattedConvertedAmount = useMemo(() => {
-    if (unit === "token") {
-      if (!convertedAmount) return "$0.00";
-      return "$" + formatUSD(convertedAmount);
-    }
-    if (!convertedAmount) return "0.00";
-    return `${formatUnits(convertedAmount, destinationToken?.decimals)} ${destinationToken?.symbol}`;
-  }, [unit, convertedAmount, destinationToken]);
+    quoteRequest,
+  });
 
   return (
     <TokenInputWrapper>
@@ -213,7 +69,6 @@ export const DestinationTokenInput = ({
             placeholder="0.00"
             value={displayValue}
             onChange={(e) => handleInputChange(e.target.value)}
-            onBlur={handleBlur}
             disabled={inputDisabled}
             error={false}
           />