Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add "formChange" Plausible event, remove "slippageChange" #1616

Merged
merged 14 commits into from
Nov 4, 2024
Merged

Add "formChange" Plausible event, remove "slippageChange" #1616

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
97305a7
Add `chainId` to `"positionCtaClick"`
ryangoree Nov 1, 2024
33b36fc
Re-org events
ryangoree Nov 1, 2024
7bedccc
Add formChange event
ryangoree Nov 1, 2024
9037d80
Tag OpenLongForm, remove slippageChange event
ryangoree Nov 2, 2024
b960a79
Remove unused variables
ryangoree Nov 2, 2024
c896ed7
Remove unused props
ryangoree Nov 2, 2024
927784f
Tag CloseLongForm
ryangoree Nov 2, 2024
1e57892
Tag AddLiquidityForm
ryangoree Nov 2, 2024
dcd5f5e
Tag AddLiquidityForm2
ryangoree Nov 2, 2024
fbe8088
Tag RemoveLiquidityForm
ryangoree Nov 2, 2024
a6575e1
Tag OpenShortForm
ryangoree Nov 2, 2024
2d51738
Comment out unused variable
ryangoree Nov 2, 2024
925f7e2
Tag CloseShortForm
ryangoree Nov 2, 2024
a4facf2
Use variables for common formChange props
ryangoree Nov 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 46 additions & 18 deletions apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { ReactNode, useEffect } from "react";
import Helmet from "react-helmet";
import { Address } from "viem";

/**
* Adds the Plausible analytics script to the `<head>` and the `plausible`
Expand Down Expand Up @@ -43,16 +44,20 @@ export interface PlausibleEventParamsMap {
*/
u?: string;
};

termsAndPrivacyView: void;
termsAndPrivacyAccept: void;

walletConnect: void;
walletDisconnect: void;
faqOpen: {

externalLinkClick: {
props: {
/**
* The name of the FAQ section that was opened.
*/
name: string;
name?: string;
url: string;
};
};

filterChange: {
props: {
/**
Expand All @@ -65,9 +70,11 @@ export interface PlausibleEventParamsMap {
value: string;
};
};

positionCtaClick: {
props: {
poolAddress: string;
chainId: number;
poolAddress: Address;
positionType: PositionType;
/**
* The name of the stat being shown with the CTA, as it appears in the UI.
Expand All @@ -82,29 +89,50 @@ export interface PlausibleEventParamsMap {
statValue: string;
};
};
termsAndPrivacyView: void;
termsAndPrivacyAccept: void;
externalLinkClick: {

faqOpen: {
props: {
name?: string;
url: string;
/**
* The name of the FAQ section that was opened.
*/
name: string;
};
};

formChange: {
props: {
/**
* The name of the form that was changed.
*/
formName: string;
/**
* The name of the input that was changed.
*/
inputName: string;
/**
* The new value of the input.
*/
inputValue: string;
/**
* The chain ID associated with the form.
*/
chainId: number;
/**
* The address of the pool associated with the form.
*/
poolAddress: Address;
};
};

transactionDetailsOpen: {
props: {
chainId: number;
poolAddress: string;
poolAddress: Address;
positionType: PositionType;
positionSize: string;
feeAmount: string;
};
};
slippageChange: {
props: {
value: string;
// TODO: Should we add change/delta?
};
};
}

export type PlausibleEvent = keyof PlausibleEventParamsMap;
Expand Down
40 changes: 30 additions & 10 deletions apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,8 +150,12 @@ export function CloseLongForm({
const isAmountLargerThanPositionSize = !!(
bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount
);
const maturityMilliseconds = Number(long.maturity * 1000n);
const isMature = Date.now() > maturityMilliseconds;

// Plausible event props
const formName = "Close Long";
const chainId = hyperdrive.chainId;
const poolAddress = hyperdrive.address;

return (
<TransactionView
tokenInput={
Expand All @@ -165,7 +169,18 @@ export function CloseLongForm({
maxValue={
long ? formatUnits(long.bondAmount, hyperdrive.decimals) : ""
}
onChange={(newAmount) => setAmount(newAmount)}
onChange={(newAmount) => {
window.plausible("formChange", {
props: {
inputName: "amount",
inputValue: newAmount,
formName,
chainId,
poolAddress,
},
});
setAmount(newAmount);
}}
bottomRightElement={
<div className="flex flex-col gap-1 text-xs text-neutral-content">
{`Balance: ${formatBalance({
Expand All @@ -183,19 +198,25 @@ export function CloseLongForm({
<TokenPickerTwo
tokens={withdrawTokenChoices}
activeTokenAddress={activeWithdrawToken.address}
onChange={(tokenAddress) =>
setActiveWithdrawToken(tokenAddress)
}
onChange={(tokenAddress) => {
window.plausible("formChange", {
props: {
inputName: "token",
inputValue: tokenAddress,
formName,
chainId,
poolAddress,
},
});
setActiveWithdrawToken(tokenAddress);
}}
/>
}
value={
withdrawAmount
? fixed(withdrawAmount, hyperdrive.decimals).toString()
: "0"
}
maxValue={
long ? formatUnits(long.bondAmount, hyperdrive.decimals) : ""
}
disabled
bottomLeftElement={
// Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, price display is disabled there.
Expand All @@ -218,7 +239,6 @@ export function CloseLongForm({
</label>
) : null
}
onChange={(newAmount) => setAmount(newAmount)}
/>
</div>
) : null
Expand Down
49 changes: 47 additions & 2 deletions apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,11 @@ export function OpenLongForm({
);
}

// Plausible event props
const formName = "Open Long";
const chainId = hyperdrive.chainId;
const poolAddress = hyperdrive.address;

return (
<TransactionView
tokenInput={
Expand All @@ -251,7 +256,18 @@ export function OpenLongForm({
<div className="mb-3 flex w-full items-center justify-between">
<PositionPicker hyperdrive={hyperdrive} />
<SlippageSettingsTwo
onSlippageChange={setSlippage}
onSlippageChange={(slippage) => {
window.plausible("formChange", {
props: {
inputName: "slippage",
inputValue: slippage.toString(),
formName,
chainId,
poolAddress,
},
});
setSlippage(slippage);
}}
slippage={slippage}
activeOption={activeSlippageOption}
onActiveOptionChange={setActiveSlippageOption}
Expand All @@ -266,6 +282,15 @@ export function OpenLongForm({
tokens={tokenChoices}
activeTokenAddress={activeToken.address}
onChange={(tokenAddress) => {
window.plausible("formChange", {
props: {
inputName: "token",
inputValue: tokenAddress,
formName,
chainId,
poolAddress,
},
});
setActiveToken(tokenAddress);
setAmount("0");
}}
Expand All @@ -275,6 +300,15 @@ export function OpenLongForm({
tokens={tokenChoices}
activeTokenAddress={activeToken.address}
onChange={(tokenAddress) => {
window.plausible("formChange", {
props: {
inputName: "token",
inputValue: tokenAddress,
formName,
chainId,
poolAddress,
},
});
setActiveToken(tokenAddress);
setAmount("0");
}}
Expand Down Expand Up @@ -317,7 +351,18 @@ export function OpenLongForm({
</span>
</div>
}
onChange={(newAmount) => setAmount(newAmount)}
onChange={(newAmount) => {
window.plausible("formChange", {
props: {
inputName: "amount",
inputValue: newAmount,
formName,
chainId,
poolAddress,
},
});
setAmount(newAmount);
}}
/>
}
primaryStats={
Expand Down
40 changes: 38 additions & 2 deletions apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -248,6 +248,11 @@ export function AddLiquidityForm({
},
});

// Plausible event props
const formName = "Add Liquidity";
const chainId = hyperdrive.chainId;
const poolAddress = hyperdrive.address;

return (
<TransactionView
tokenInput={
Expand Down Expand Up @@ -278,14 +283,34 @@ export function AddLiquidityForm({
tokens={tokenOptions}
activeTokenAddress={activeToken.address}
onChange={(tokenAddress) => {
window.plausible("formChange", {
props: {
inputName: "token",
inputValue: tokenAddress,
formName,
chainId,
poolAddress,
},
});
setActiveToken(tokenAddress);
setAmount("0");
}}
/>
}
settings={
<SlippageSettingsTwo
onSlippageChange={setSlippage}
onSlippageChange={(slippage) => {
window.plausible("formChange", {
props: {
inputName: "slippage",
inputValue: slippage,
formName,
chainId,
poolAddress,
},
});
setSlippage(slippage);
}}
slippage={slippage}
activeOption={activeSlippageOption}
onActiveOptionChange={setActiveSlippageOption}
Expand All @@ -305,7 +330,18 @@ export function AddLiquidityForm({
</span>
</div>
}
onChange={(newAmount) => setAmount(newAmount)}
onChange={(newAmount) => {
window.plausible("formChange", {
props: {
inputName: "amount",
inputValue: newAmount,
formName,
chainId,
poolAddress,
},
});
setAmount(newAmount);
}}
/>
}
primaryStats={
Expand Down
Loading
Loading