diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index 9be635eb6..56f300803 100644 --- 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; @@ -113,8 +119,8 @@ export interface PlausibleFunction { q?: unknown[][]; } -// Augment the global `window` object to include the `plausible` function. declare global { + // Augment the global `window` object to include the `plausible` function. interface Window { plausible: PlausibleFunction; } diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx index 29da119fa..a10334400 100644 --- 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 index b88701318..1a6c9db4c 100644 --- 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>