[SPE-315] Add setting slippage to ibc.fun

package.json

@@ -40,6 +40,7 @@
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-toast": "^1.1.4",
+    "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@skip-router/core": "^0.1.0-rc20",
     "@tanstack/react-query": "^4.29.5",

src/components/HistoryButton.tsx

@@ -1,3 +1,4 @@
+import * as Tooltip from "@radix-ui/react-tooltip";
 import { clsx } from "clsx";
 import { ComponentProps } from "react";
 
@@ -10,17 +11,33 @@ export const HistoryButton = ({
   ...props
 }: ComponentProps<"button">) => {
   return (
-    <button
-      className={clsx(
-        "p-2 rounded text-black/80 hover:text-black/100",
-        "focus:outline-none transition-colors",
-        className,
-      )}
-      onClick={() => disclosure.open("historyDialog")}
-      role="group"
-      {...props}
-    >
-      <HistoryIcon className="w-4 h-4" />
-    </button>
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          className={clsx(
+            "p-2 rounded-full text-black/80 hover:text-black/100 hover:bg-gray-100",
+            "focus:outline-none transition-colors",
+            className,
+          )}
+          onClick={() => disclosure.open("historyDialog")}
+          role="group"
+          {...props}
+        >
+          <HistoryIcon className="w-4 h-4" />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className={clsx(
+            "rounded-md bg-white px-4 py-2 leading-none",
+            "select-none shadow z-[9999]",
+            "text-sm",
+          )}
+        >
+          Transaction History
+          <Tooltip.Arrow className="fill-white" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
   );
 };

src/components/HistoryClearButton.tsx → src/components/HistoryDialog/HistoryClearButton.tsx

@@ -13,7 +13,7 @@ export const HistoryClearButton = ({ className, ...props }: Props) => {
   if (!hasHistory) return null;
 
   return (
-    <Tooltip.Provider delayDuration={0}>
+    <>
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           <button
@@ -44,6 +44,6 @@ export const HistoryClearButton = ({ className, ...props }: Props) => {
           </Tooltip.Content>
         </Tooltip.Portal>
       </Tooltip.Root>
-    </Tooltip.Provider>
+    </>
   );
 };

src/components/HistoryDialog/index.tsx

@@ -5,7 +5,7 @@ import { useAssets } from "@/context/assets";
 import { useDisclosureKey } from "@/context/disclosures";
 import { useTxHistory } from "@/context/tx-history";
 
-import { HistoryClearButton } from "../HistoryClearButton";
+import { HistoryClearButton } from "./HistoryClearButton";
 import * as HistoryList from "./HistoryList";
 
 export const HistoryDialog = () => {

src/components/SettingsButton.tsx

@@ -0,0 +1,42 @@
+import { Cog6ToothIcon } from "@heroicons/react/20/solid";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { clsx } from "clsx";
+import { ComponentProps } from "react";
+
+import { disclosure } from "@/context/disclosures";
+
+export const SettingsButton = ({
+  className,
+  ...props
+}: ComponentProps<"button">) => {
+  return (
+    <Tooltip.Root>
+      <Tooltip.Trigger asChild>
+        <button
+          className={clsx(
+            "p-2 rounded-full text-black/80 hover:text-black/100 hover:bg-gray-100",
+            "focus:outline-none transition-colors",
+            className,
+          )}
+          onClick={() => disclosure.open("settingsDialog")}
+          role="group"
+          {...props}
+        >
+          <Cog6ToothIcon className="w-4 h-4" />
+        </button>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content
+          className={clsx(
+            "rounded-md bg-white px-4 py-2 leading-none",
+            "select-none shadow z-[9999]",
+            "text-sm",
+          )}
+        >
+          Swap Settings
+          <Tooltip.Arrow className="fill-white" />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};

src/components/SettingsDialog/SaveIndicator.tsx

@@ -0,0 +1,29 @@
+import { CheckIcon } from "@heroicons/react/20/solid";
+import { clsx } from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+import { useSettingsStore } from "@/context/settings";
+
+export const SaveIndicator = () => {
+  const timeoutRef = useRef<number | null>(null);
+  const [show, setShow] = useState(() => false);
+
+  useEffect(() => {
+    return useSettingsStore.subscribe(() => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setShow(true);
+      timeoutRef.current = window.setTimeout(() => setShow(false), 2000);
+    });
+  }, []);
+
+  return (
+    <div
+      className={clsx(
+        "text-green-500 text-sm font-medium flex items-center space-x-1 transition pointer-events-none",
+        show ? "opacity-100" : "opacity-0",
+      )}
+    >
+      <span>Settings saved!</span> <CheckIcon className="w-4 h-4" />
+    </div>
+  );
+};

src/components/SettingsDialog/SlippageSetting.tsx

@@ -0,0 +1,50 @@
+import { clsx } from "clsx";
+
+import { useSettingsStore } from "@/context/settings";
+
+const OPTION_VALUES = ["1", "3", "5"];
+
+export const SlippageSetting = () => {
+  const currentValue = useSettingsStore((state) => state.slippage);
+
+  return (
+    <div className="flex items-center p-2 space-x-2">
+      <h3>Slippage</h3>
+      <div className="flex-grow" />
+      <div className="flex flex-col items-stretch space-y-1">
+        <div className="relative text-sm">
+          <input
+            className={clsx(
+              "border rounded-lg px-2 py-1 tabular-nums transition text-end",
+              "number-input-arrows-hide pe-5 w-full",
+            )}
+            type="number"
+            value={currentValue}
+            min={0}
+            max={100}
+            onChange={(event) => {
+              useSettingsStore.setState({ slippage: event.target.value });
+            }}
+          />
+          <div className="absolute right-2 inset-y-0 flex items-center pointer-events-none">
+            %
+          </div>
+        </div>
+        <div className="flex items-center space-x-1">
+          {OPTION_VALUES.map((value, i) => (
+            <button
+              key={i}
+              className={clsx(
+                "border rounded-lg px-2 py-px tabular-nums text-xs transition",
+                "text-neutral-600 hover:bg-neutral-100",
+              )}
+              onClick={() => useSettingsStore.setState({ slippage: value })}
+            >
+              {value}%
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};