feat: sync staging → main

Signed-off-by: Griko Nibras <griko@nibras.co>
skip-mev · Jan 24, 2024 · 25d1329 · 25d1329 · vercel · Jan 24, 2024
2 parents 9a66923 + ee8a2bc
commit 25d1329
Show file tree

Hide file tree

Showing 15 changed files with 180 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@react-stately/table": "^3.11.4",
-    "@skip-router/core": "1.2.3",
+    "@skip-router/core": "1.2.7",
     "@sentry/nextjs": "^7.94.1",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/query-sync-storage-persister": "^5.17.19",

diff --git a/src/components/AssetInput.tsx b/src/components/AssetInput.tsx
@@ -133,7 +133,9 @@ function AssetInput({
             if (!onAmountChange) return;
 
             if (event.key === "Escape") {
-              onAmountChange?.("");
+              if (event.currentTarget.selectionStart === event.currentTarget.selectionEnd) {
+                event.currentTarget.select();
+              }
               return;
             }
 

diff --git a/src/components/RouteDisplay.tsx b/src/components/RouteDisplay.tsx
@@ -456,7 +456,12 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
         return;
       }
 
-      const sourceChain = operation.transfer.chainID;
+      let sourceChain = "";
+      if ("cctpTransfer" in operation) {
+        sourceChain = operation.cctpTransfer.fromChainID;
+      } else {
+        sourceChain = operation.transfer.chainID;
+      }
 
       let destinationChain = "";
       if (i === route.operations.length - 1) {
@@ -473,6 +478,8 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
           }
         } else if ("axelarTransfer" in nextOperation) {
           destinationChain = nextOperation.axelarTransfer.toChainID;
+        } else if ("cctpTransfer" in nextOperation) {
+          destinationChain = nextOperation.cctpTransfer.toChainID;
         } else {
           destinationChain = nextOperation.transfer.chainID;
         }
@@ -486,7 +493,11 @@ function RouteDisplay({ route, isRouteExpanded, setIsRouteExpanded, broadcastedT
         id: `transfer-${transferCount}-${i}`,
       });
 
-      asset = operation.transfer.destDenom;
+      if ("cctpTransfer" in operation) {
+        asset = operation.cctpTransfer.burnToken;
+      } else {
+        asset = operation.transfer.destDenom;
+      }
       transferCount++;
     });
 

diff --git a/src/components/SettingsDialog/GasSetting.tsx b/src/components/SettingsDialog/GasSetting.tsx
@@ -1,3 +1,5 @@
+import { BigNumber } from "bignumber.js";
+
 import { useSettingsStore } from "@/context/settings";
 import { formatNumberWithCommas, formatNumberWithoutCommas } from "@/utils/number";
 
@@ -6,7 +8,7 @@ export const GasSetting = () => {
 
   return (
     <div className="flex items-center space-x-2 p-2">
-      <h3>Gas Multiplier</h3>
+      <h3>Gas Amount</h3>
       <div className="flex-grow" />
       <div className="flex w-full max-w-32 flex-col items-stretch gap-1">
         <div className="relative text-sm">
@@ -25,6 +27,36 @@ export const GasSetting = () => {
               const value = Math.max(0, +latest);
               useSettingsStore.setState({ gasAmount: value.toString() });
             }}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.currentTarget.select();
+                return;
+              }
+
+              let value = BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0");
+
+              if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                if (event.key === "ArrowUp") {
+                  if (event.shiftKey) {
+                    value = value.plus(1_000);
+                  } else {
+                    value = value.plus(1);
+                  }
+                }
+                if (event.key === "ArrowDown") {
+                  if (event.shiftKey) {
+                    value = value.minus(1_000);
+                  } else {
+                    value = value.minus(1);
+                  }
+                }
+                if (value.isNegative()) {
+                  value = BigNumber(0);
+                }
+                useSettingsStore.setState({ gasAmount: value.toString() });
+              }
+            }}
           />
         </div>
       </div>

diff --git a/src/components/SettingsDialog/SlippageSetting.tsx b/src/components/SettingsDialog/SlippageSetting.tsx
@@ -1,7 +1,8 @@
+import { BigNumber } from "bignumber.js";
 import { clsx } from "clsx";
 
 import { useSettingsStore } from "@/context/settings";
-
+import { formatNumberWithCommas, formatNumberWithoutCommas } from "@/utils/number";
 const OPTION_VALUES = ["1", "3", "5"];
 
 export const SlippageSetting = () => {
@@ -18,13 +19,56 @@ export const SlippageSetting = () => {
               "rounded-lg border px-2 py-1 text-end tabular-nums transition",
               "w-full pe-5 number-input-arrows-hide",
             )}
-            type="number"
-            value={currentValue}
-            min={0}
-            max={100}
+            type="text"
+            inputMode="numeric"
+            value={formatNumberWithCommas(currentValue)}
             onChange={(event) => {
-              const value = Math.max(0, Math.min(100, +event.target.value));
-              useSettingsStore.setState({ slippage: value.toString() });
+              let latest = event.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
+
+              if (!latest.endsWith(".")) {
+                latest = Math.max(0, Math.min(100, +formatNumberWithoutCommas(latest))).toString();
+              }
+              useSettingsStore.setState({ slippage: latest });
+            }}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.currentTarget.select();
+                return;
+              }
+
+              let value = BigNumber(formatNumberWithoutCommas(event.currentTarget.value) || "0");
+
+              if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+                event.preventDefault();
+                if (event.key === "ArrowUp") {
+                  if (event.shiftKey) {
+                    value = value.plus(10);
+                  } else if (event.altKey || event.ctrlKey || event.metaKey || value.lt(1)) {
+                    value = value.plus(0.1);
+                  } else {
+                    value = value.plus(1);
+                  }
+                }
+                if (event.key === "ArrowDown") {
+                  if (event.shiftKey) {
+                    value = value.minus(10);
+                  } else if (event.altKey || event.ctrlKey || event.metaKey || value.lte(1)) {
+                    value = value.minus(0.1);
+                  } else {
+                    value = value.minus(1);
+                  }
+                }
+                if (value.isNegative()) {
+                  value = BigNumber(0);
+                }
+                useSettingsStore.setState({ slippage: value.toString() });
+              }
             }}
           />
           <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center">%</div>

diff --git a/src/components/SwapWidget/SwapWidget.tsx b/src/components/SwapWidget/SwapWidget.tsx
@@ -5,7 +5,6 @@ import { ElementRef, useEffect, useRef } from "react";
 import type {} from "typed-query-selector";
 
 import { disclosure } from "@/context/disclosures";
-import { useSettingsStore } from "@/context/settings";
 import { useAccount } from "@/hooks/useAccount";
 import { useChains as useSkipChains } from "@/hooks/useChains";
 
@@ -50,6 +49,7 @@ export function SwapWidget() {
     onSourceAmountChange,
     onSourceAmountMax,
     onInvertDirection,
+    onAllTransactionComplete,
     priceImpactThresholdReached,
     route,
     routeError,
@@ -78,13 +78,6 @@ export function SwapWidget() {
 
   useEffect(() => {
     document.querySelector("[data-testid='source'] input")?.focus();
-    return useSettingsStore.subscribe((state) => {
-      if (+state.slippage < 0 || +state.slippage > 100) {
-        useSettingsStore.setState({
-          slippage: Math.max(0, Math.min(100, +state.slippage)).toString(),
-        });
-      }
-    });
   }, []);
 
   const invertButtonRef = useRef<ElementRef<"button">>(null);
@@ -283,6 +276,7 @@ export function SwapWidget() {
                 shouldShowPriceImpactWarning={!!routeWarningTitle && !!routeWarningMessage}
                 routeWarningTitle={routeWarningTitle}
                 routeWarningMessage={routeWarningMessage}
+                onAllTransactionComplete={onAllTransactionComplete}
               />
             </div>
           )}