Add and tag slippageChange event

delvtech · Nov 1, 2024 · 9cea266 · 9cea266
1 parent ab6ae16
commit 9cea266
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 4 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx
@@ -99,6 +99,12 @@ export interface PlausibleEventParamsMap {
       feeAmount: string;
     };
   };
+  slippageChange: {
+    props: {
+      value: string;
+      // TODO: Should we add change/delta?
+    };
+  };
 }
 
 export type PlausibleEvent = keyof PlausibleEventParamsMap;

diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx
@@ -17,6 +17,13 @@ export function SlippageSettings({
   onActiveOptionChange: (activeTab: "auto" | "custom") => void;
   tooltip?: string;
 }): JSX.Element {
+  function handleSlippageChange(value: string) {
+    window.plausible("slippageChange", {
+      props: { value },
+    });
+    onSlippageChange(value);
+  }
+
   return (
     <>
       <div className="flex items-center">
@@ -34,7 +41,7 @@ export function SlippageSettings({
             onClick={(e) => {
               e.preventDefault();
               onActiveOptionChange("auto");
-              onSlippageChange(DEFAULT_SLIPPAGE_AMOUNT);
+              handleSlippageChange(DEFAULT_SLIPPAGE_AMOUNT);
             }}
             className={classNames("daisy-tab text-sm", {
               "font-bold": activeOption === "auto",
@@ -58,7 +65,7 @@ export function SlippageSettings({
           value={slippage}
           onChange={(e) => {
             onActiveOptionChange("custom");
-            onSlippageChange(e);
+            handleSlippageChange(e);
           }}
         />
       </div>

diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx
@@ -23,6 +23,13 @@ export function SlippageSettingsTwo({
 }): ReactElement {
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 
+  function handleSlippageChange(value: string) {
+    window.plausible("slippageChange", {
+      props: { value },
+    });
+    onSlippageChange(value);
+  }
+
   return (
     <div className="daisy-dropdown daisy-dropdown-bottom flex justify-end">
       <button
@@ -59,7 +66,7 @@ export function SlippageSettingsTwo({
                 onClick={(e) => {
                   e.preventDefault();
                   onActiveOptionChange("auto");
-                  onSlippageChange(DEFAULT_SLIPPAGE_AMOUNT);
+                  handleSlippageChange(DEFAULT_SLIPPAGE_AMOUNT);
                 }}
                 className={classNames("daisy-tab text-sm", {
                   "font-bold": activeOption === "auto",
@@ -84,7 +91,7 @@ export function SlippageSettingsTwo({
               value={slippage}
               onChange={(e) => {
                 onActiveOptionChange("custom");
-                onSlippageChange(e);
+                handleSlippageChange(e);
               }}
             />
           </div>