extract to a function

skip-mev · Aug 30, 2024 · 80fb5ce · 80fb5ce
1 parent ab2fd93
commit 80fb5ce
Showing 1 changed file with 76 additions and 54 deletions.
diff --git a/packages/widget-v2/src/components/AssetChainInput.tsx b/packages/widget-v2/src/components/AssetChainInput.tsx
@@ -41,6 +41,80 @@ export const AssetChainInput = ({
 
   const usdValue = useUsdValue({ ...selectedAsset, value });
 
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!onChangeValue) return;
+    let latest = e.target.value;
+
+    if (latest.match(/^[.,]/)) latest = `0.${latest}`; // Handle first character being a period or comma
+    latest = latest.replace(/^[0]{2,}/, "0"); // Remove leading zeros
+    latest = latest.replace(/[^\d.,]/g, ""); // Remove non-numeric and non-decimal characters
+    latest = latest.replace(/[.]{2,}/g, "."); // Remove multiple decimals
+    latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas
+    onChangeValue?.(formatNumberWithoutCommas(latest));
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!onChangeValue) return;
+
+    let value: BigNumber;
+
+    switch (event.key) {
+      case "Escape":
+        if (
+          event.currentTarget.selectionStart ===
+          event.currentTarget.selectionEnd
+        ) {
+          event.currentTarget.select();
+        }
+        return;
+
+      case "ArrowUp":
+        event.preventDefault();
+        value = new BigNumber(
+          formatNumberWithoutCommas(event.currentTarget.value) || "0"
+        );
+
+        if (event.shiftKey) {
+          value = value.plus(10);
+        } else if (event.altKey || event.ctrlKey || event.metaKey) {
+          value = value.plus(0.1);
+        } else {
+          value = value.plus(1);
+        }
+
+        if (value.isNegative()) {
+          value = new BigNumber(0);
+        }
+
+        onChangeValue(value.toString());
+        break;
+
+      case "ArrowDown":
+        event.preventDefault();
+        value = new BigNumber(
+          formatNumberWithoutCommas(event.currentTarget.value) || "0"
+        );
+
+        if (event.shiftKey) {
+          value = value.minus(10);
+        } else if (event.altKey || event.ctrlKey || event.metaKey) {
+          value = value.minus(0.1);
+        } else {
+          value = value.minus(1);
+        }
+
+        if (value.isNegative()) {
+          value = new BigNumber(0);
+        }
+
+        onChangeValue(value.toString());
+        break;
+
+      default:
+        return;
+    }
+  };
+
   return (
     <StyledAssetChainInputWrapper
       justify="space-between"
@@ -53,60 +127,8 @@ export const AssetChainInput = ({
           value={formatNumberWithCommas(value || "")}
           placeholder="0"
           inputMode="numeric"
-          onChange={(e) => {
-            if (!onChangeValue) return;
-            let latest = e.target.value;
-
-            if (latest.match(/^[.,]/)) latest = `0.${latest}`; // Handle first character being a period or comma
-            latest = latest.replace(/^[0]{2,}/, "0"); // Remove leading zeros
-            latest = latest.replace(/[^\d.,]/g, ""); // Remove non-numeric and non-decimal characters
-            latest = latest.replace(/[.]{2,}/g, "."); // Remove multiple decimals
-            latest = latest.replace(/[,]{2,}/g, ","); // Remove multiple commas
-            onChangeValue?.(formatNumberWithoutCommas(latest))
-          }} onKeyDown={(event) => {
-            if (!onChangeValue) return;
-
-            if (event.key === "Escape") {
-              if (
-                event.currentTarget.selectionStart ===
-                event.currentTarget.selectionEnd
-              ) {
-                event.currentTarget.select();
-              }
-              return;
-            }
-
-            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
-              let value = new BigNumber(
-                formatNumberWithoutCommas(event.currentTarget.value) || "0"
-              );
-              if (event.key === "ArrowUp") {
-                event.preventDefault();
-                if (event.shiftKey) {
-                  value = value.plus(10);
-                } else if (event.altKey || event.ctrlKey || event.metaKey) {
-                  value = value.plus(0.1);
-                } else {
-                  value = value.plus(1);
-                }
-              }
-              if (event.key === "ArrowDown") {
-                event.preventDefault();
-                if (event.shiftKey) {
-                  value = value.minus(10);
-                } else if (event.altKey || event.ctrlKey || event.metaKey) {
-                  value = value.minus(0.1);
-                } else {
-                  value = value.minus(1);
-                }
-              }
-              if (value.isNegative()) {
-                value = new BigNumber(0);
-              }
-              onChangeValue(value.toString());
-            }
-          }
-          }
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
         />
         <Button onClick={handleChangeAsset} gap={5}>
           {selectedAsset ? (