From 97305a737db6e7daf10de7b2cdd72a1d378ea6fd Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Fri, 1 Nov 2024 15:29:53 -0500 Subject: [PATCH 01/14] Add `chainId` to `"positionCtaClick"` --- apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx | 1 + apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx | 1 + apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx | 1 + .../src/ui/markets/PoolRow/YieldMultiplierCta.tsx | 1 + 4 files changed, 4 insertions(+) diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index e1840597b..48d18771a 100644 --- a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx +++ b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx @@ -67,6 +67,7 @@ export interface PlausibleEventParamsMap { }; positionCtaClick: { props: { + chainId: number; poolAddress: string; positionType: PositionType; /** diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx index d95932c90..4b746a454 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx @@ -44,6 +44,7 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement { e.stopPropagation(); window.plausible("positionCtaClick", { props: { + chainId: hyperdrive.chainId, poolAddress: hyperdrive.address, positionType: "long", statName: label, diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx index 8967358e0..b150c7aa2 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx @@ -73,6 +73,7 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement { e.stopPropagation(); window.plausible("positionCtaClick", { props: { + chainId: hyperdrive.chainId, poolAddress: hyperdrive.address, positionType: "lp", statName: label, diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/YieldMultiplierCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/YieldMultiplierCta.tsx index c0d277240..2b1bb4fc9 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/YieldMultiplierCta.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/YieldMultiplierCta.tsx @@ -55,6 +55,7 @@ export function YieldMultiplierCta({ e.stopPropagation(); window.plausible("positionCtaClick", { props: { + chainId: hyperdrive.chainId, poolAddress: hyperdrive.address, positionType: "short", statName: label, From 33b36fc6ddb6629079219209e1555111c071585e Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Fri, 1 Nov 2024 18:42:06 -0500 Subject: [PATCH 02/14] Re-org events --- .../src/ui/analytics/Plausible.tsx | 39 +++++++++++-------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index 48d18771a..fc015b047 100644 --- a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx +++ b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx @@ -43,16 +43,19 @@ 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: { /** @@ -65,6 +68,7 @@ export interface PlausibleEventParamsMap { value: string; }; }; + positionCtaClick: { props: { chainId: number; @@ -83,14 +87,23 @@ 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; }; }; + + slippageChange: { + props: { + value: string; + // TODO: Should we add change/delta? + }; + }; + transactionDetailsOpen: { props: { chainId: number; @@ -100,12 +113,6 @@ export interface PlausibleEventParamsMap { feeAmount: string; }; }; - slippageChange: { - props: { - value: string; - // TODO: Should we add change/delta? - }; - }; } export type PlausibleEvent = keyof PlausibleEventParamsMap; From 7bedcccc7aef0f3f6a19cd225d2ed9f870ce4758 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Fri, 1 Nov 2024 18:44:53 -0500 Subject: [PATCH 03/14] Add formChange event --- .../src/ui/analytics/Plausible.tsx | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index fc015b047..d84c34f16 100644 --- a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx +++ b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx @@ -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 `` and the `plausible` @@ -46,6 +47,7 @@ export interface PlausibleEventParamsMap { termsAndPrivacyView: void; termsAndPrivacyAccept: void; + walletConnect: void; walletDisconnect: void; @@ -72,7 +74,7 @@ export interface PlausibleEventParamsMap { positionCtaClick: { props: { chainId: number; - poolAddress: string; + poolAddress: Address; positionType: PositionType; /** * The name of the stat being shown with the CTA, as it appears in the UI. @@ -104,10 +106,39 @@ export interface PlausibleEventParamsMap { }; }; + 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: string; + /** + * The address of the pool associated with the form. + */ + poolAddress: Address; + /** + * The position type associated with the form. + */ + positionType: PositionType; + }; + }; + transactionDetailsOpen: { props: { chainId: number; - poolAddress: string; + poolAddress: Address; positionType: PositionType; positionSize: string; feeAmount: string; From 9037d80487cf6de0cefa2a0e33212cd0794dc503 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Fri, 1 Nov 2024 22:22:17 -0500 Subject: [PATCH 04/14] Tag OpenLongForm, remove slippageChange event --- .../src/ui/analytics/Plausible.tsx | 13 +----- .../longs/OpenLongForm/OpenLongForm.tsx | 44 ++++++++++++++++++- .../src/ui/token/SlippageSettings.tsx | 13 ++---- .../src/ui/token/SlippageSettingsTwo.tsx | 13 ++---- 4 files changed, 49 insertions(+), 34 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx index d84c34f16..835def20f 100644 --- a/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx +++ b/apps/hyperdrive-trading/src/ui/analytics/Plausible.tsx @@ -99,13 +99,6 @@ export interface PlausibleEventParamsMap { }; }; - slippageChange: { - props: { - value: string; - // TODO: Should we add change/delta? - }; - }; - formChange: { props: { /** @@ -123,15 +116,11 @@ export interface PlausibleEventParamsMap { /** * The chain ID associated with the form. */ - chainId: string; + chainId: number; /** * The address of the pool associated with the form. */ poolAddress: Address; - /** - * The position type associated with the form. - */ - positionType: PositionType; }; }; diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx index ada789307..0d2a7d4b6 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx @@ -251,7 +251,18 @@ export function OpenLongForm({
{ + window.plausible("formChange", { + props: { + formName: "Open Long", + inputName: "slippage", + inputValue: slippage, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setSlippage(slippage); + }} slippage={slippage} activeOption={activeSlippageOption} onActiveOptionChange={setActiveSlippageOption} @@ -266,6 +277,15 @@ export function OpenLongForm({ tokens={tokenChoices} activeTokenAddress={activeToken.address} onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Open Long", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setActiveToken(tokenAddress); setAmount("0"); }} @@ -275,6 +295,15 @@ export function OpenLongForm({ tokens={tokenChoices} activeTokenAddress={activeToken.address} onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Open Long", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setActiveToken(tokenAddress); setAmount("0"); }} @@ -317,7 +346,18 @@ export function OpenLongForm({
} - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Open Long", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} /> } primaryStats={ diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx index a10334400..c8a4ef7fe 100644 --- a/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx +++ b/apps/hyperdrive-trading/src/ui/token/SlippageSettings.tsx @@ -17,13 +17,6 @@ export function SlippageSettings({ onActiveOptionChange: (activeTab: "auto" | "custom") => void; tooltip?: string; }): JSX.Element { - function handleSlippageChange(value: string) { - window.plausible("slippageChange", { - props: { value }, - }); - onSlippageChange(value); - } - return ( <>
@@ -41,7 +34,7 @@ export function SlippageSettings({ onClick={(e) => { e.preventDefault(); onActiveOptionChange("auto"); - handleSlippageChange(DEFAULT_SLIPPAGE_AMOUNT); + onSlippageChange(DEFAULT_SLIPPAGE_AMOUNT); }} className={classNames("daisy-tab text-sm", { "font-bold": activeOption === "auto", @@ -63,9 +56,9 @@ export function SlippageSettings({
{ + onChange={(value) => { onActiveOptionChange("custom"); - handleSlippageChange(e); + onSlippageChange(value); }} /> diff --git a/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx b/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx index 1a6c9db4c..7f4de3af1 100644 --- a/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx +++ b/apps/hyperdrive-trading/src/ui/token/SlippageSettingsTwo.tsx @@ -23,13 +23,6 @@ export function SlippageSettingsTwo({ }): ReactElement { const [isDropdownOpen, setIsDropdownOpen] = useState(false); - function handleSlippageChange(value: string) { - window.plausible("slippageChange", { - props: { value }, - }); - onSlippageChange(value); - } - return (
{ + onChange={(value) => { onActiveOptionChange("custom"); - handleSlippageChange(e); + onSlippageChange(value); }} /> From b960a799b82722fb91ace90ae72c460ea74c48c0 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Fri, 1 Nov 2024 22:36:29 -0500 Subject: [PATCH 05/14] Remove unused variables --- .../src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx index 1a543bae6..efb5ec94d 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx @@ -150,8 +150,6 @@ export function CloseLongForm({ const isAmountLargerThanPositionSize = !!( bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount ); - const maturityMilliseconds = Number(long.maturity * 1000n); - const isMature = Date.now() > maturityMilliseconds; return ( Date: Sat, 2 Nov 2024 12:47:44 -0500 Subject: [PATCH 06/14] Remove unused props --- .../src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx | 4 ---- apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx | 6 +++--- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx index efb5ec94d..6ca2b5e17 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx @@ -191,9 +191,6 @@ export function CloseLongForm({ ? 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. @@ -216,7 +213,6 @@ export function CloseLongForm({ ) : null } - onChange={(newAmount) => setAmount(newAmount)} /> ) : null diff --git a/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx b/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx index fafab6e1c..3cdec54a8 100644 --- a/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx +++ b/apps/hyperdrive-trading/src/ui/token/TokenInputTwo.tsx @@ -7,7 +7,7 @@ interface TokenInputProps { variant?: "default" | "lighter"; name: string; value: string; - onChange: (newAmount: string) => void; + onChange?: (newAmount: string) => void; /** * If provided, the MAX button will be shown */ @@ -91,7 +91,7 @@ export function TokenInputTwo({ } }} onChange={(event) => { - onChange(event.target.value); + onChange?.(event.target.value); }} /> {typeof token === "string" ? ( @@ -129,7 +129,7 @@ export function TokenInputTwo({ type="button" onClick={(e) => { e.preventDefault(); - onChange(maxValue); + onChange?.(maxValue); }} > Max From 927784fe070a9c5623a474e0c8149bb8cd6cfce6 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 12:47:56 -0500 Subject: [PATCH 07/14] Tag CloseLongForm --- .../longs/CloseLongForm/CloseLongForm.tsx | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx index 6ca2b5e17..587b0f4b8 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx @@ -163,7 +163,18 @@ export function CloseLongForm({ maxValue={ long ? formatUnits(long.bondAmount, hyperdrive.decimals) : "" } - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Close Long", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} bottomRightElement={
{`Balance: ${formatBalance({ @@ -181,9 +192,18 @@ export function CloseLongForm({ - setActiveWithdrawToken(tokenAddress) - } + onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Close Long", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setActiveWithdrawToken(tokenAddress); + }} /> } value={ From 1e5789210f69d4dab1c1462a155cb35829d3fedc Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:13:34 -0500 Subject: [PATCH 08/14] Tag AddLiquidityForm --- .../lp/AddLiquidityForm/AddLiquidityForm.tsx | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx index 3b004bb41..5c7d2f703 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx @@ -278,6 +278,15 @@ export function AddLiquidityForm({ tokens={tokenOptions} activeTokenAddress={activeToken.address} onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setActiveToken(tokenAddress); setAmount("0"); }} @@ -285,7 +294,18 @@ export function AddLiquidityForm({ } settings={ { + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "slippage", + inputValue: slippage, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setSlippage(slippage); + }} slippage={slippage} activeOption={activeSlippageOption} onActiveOptionChange={setActiveSlippageOption} @@ -305,7 +325,18 @@ export function AddLiquidityForm({
} - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} /> } primaryStats={ From dcd5f5ee052ec88d81f769c179044e473b0bc57a Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:15:27 -0500 Subject: [PATCH 09/14] Tag AddLiquidityForm2 --- .../lp/AddLiquidityForm/AddLiquidityForm2.tsx | 35 +++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx index 30d9c3177..47bc90a0a 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx @@ -267,6 +267,15 @@ export function AddLiquidityForm2({ tokens={tokenOptions} activeTokenAddress={activeToken.address} onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setActiveToken(tokenAddress); setAmount("0"); }} @@ -276,7 +285,18 @@ export function AddLiquidityForm2({
{ + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "slippage", + inputValue: slippage, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setSlippage(slippage); + }} slippage={slippage} activeOption={activeSlippageOption} onActiveOptionChange={setActiveSlippageOption} @@ -297,7 +317,18 @@ export function AddLiquidityForm2({
} - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Add Liquidity", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} /> } primaryStats={ From fbe80885c2efa0f2514e6321cba611d0fb1c239b Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:35:00 -0500 Subject: [PATCH 10/14] Tag RemoveLiquidityForm --- .../RemoveLiquidityForm.tsx | 48 ++++++++++++++----- 1 file changed, 37 insertions(+), 11 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 4dbb491e2..9099af371 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -34,6 +34,7 @@ import { TokenChoice } from "src/ui/token/TokenPicker"; import { TokenPickerTwo } from "src/ui/token/TokenPickerTwo"; import { formatUnits } from "viem"; import { useAccount, useChainId } from "wagmi"; + interface RemoveLiquidityFormProps { hyperdrive: HyperdriveConfig; lpShares: bigint; @@ -236,7 +237,18 @@ export function RemoveLiquidityForm({ token={`${baseToken.symbol}-LP`} settings={ { + window.plausible("formChange", { + props: { + formName: "Remove Liquidity", + inputName: "slippage", + inputValue: slippage, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setSlippage(slippage); + }} slippage={slippage} activeOption={activeSlippageOption} onActiveOptionChange={setActiveSlippageOption} @@ -254,7 +266,18 @@ export function RemoveLiquidityForm({ })}`} } - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Remove Liquidity", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} /> - setActiveWithdrawToken(tokenAddress) - } + onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Remove Liquidity", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setActiveWithdrawToken(tokenAddress); + }} /> } value={ @@ -273,11 +305,6 @@ export function RemoveLiquidityForm({ ? fixed(actualValueOut, hyperdrive.decimals).toString() : "0" } - maxValue={ - actualValueOut - ? fixed(actualValueOut, hyperdrive.decimals).toString() - : "" - } disabled bottomLeftElement={ // Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, price display is disabled there. @@ -300,7 +327,6 @@ export function RemoveLiquidityForm({ ) : null } - onChange={(newAmount) => setAmount(newAmount)} /> } From a6575e10fc9abeb09e8fa9c8331fc983782852df Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:45:41 -0500 Subject: [PATCH 11/14] Tag OpenShortForm --- .../shorts/OpenShortForm/OpenShortForm.tsx | 48 +++++++++++++++---- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx index 868123723..e9004b625 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx @@ -303,6 +303,7 @@ export function OpenShortForm({ const maturesOnLabel = formatDate( Date.now() + Number(hyperdrive.poolConfig.positionDuration * 1000n), ); + return ( { + window.plausible("formChange", { + props: { + formName: "Open Short", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setActiveToken(tokenAddress); - // TODO: Determin if there is a bug here. + // TODO: Determine if there is a bug here. setPaymentAmount("0"); }} /> @@ -339,7 +349,18 @@ export function OpenShortForm({
{ + window.plausible("formChange", { + props: { + formName: "Open Short", + inputName: "slippage", + inputValue: slippage, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setSlippage(slippage); + }} slippage={slippage} activeOption={activeSlippageOption} onActiveOptionChange={setActiveSlippageOption} @@ -348,6 +369,15 @@ export function OpenShortForm({
} onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Open Short", + inputName: "size", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); setShortAmount(newAmount); setActiveInput("bonds"); }} @@ -398,8 +428,6 @@ export function OpenShortForm({ { - setActiveInput("budget"); - setPaymentAmount(newAmount); - }} + // This input is disabled until the getMaxShort is fixed on the sdk. + disabled + // maxValue={maxButtonValue} + // onChange={(newAmount) => { + // setActiveInput("budget"); + // setPaymentAmount(newAmount); + // }} bottomLeftElement={ // Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, price display is disabled there. !isTestnetChain(hyperdrive.chainId) ? ( From 2d5173823276c65465e24238c4d689200ffe41e4 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:47:42 -0500 Subject: [PATCH 12/14] Comment out unused variable --- .../shorts/OpenShortForm/OpenShortForm.tsx | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx index e9004b625..3514f684f 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx @@ -278,17 +278,18 @@ export function OpenShortForm({ }, }); + // TODO: Implement the two way input switch once getMaxShort is fixed on the sdk // Max button is wired up to the user's balance, or the pool's max long. // Whichever is smallest. - let maxButtonValue = "0"; - if (activeTokenBalance && maxBondsOut) { - maxButtonValue = formatUnits( - activeTokenBalance.value > maxBondsOut - ? maxBondsOut - : activeTokenBalance?.value, - activeToken.decimals, - ); - } + // let maxButtonValue = "0"; + // if (activeTokenBalance && maxBondsOut) { + // maxButtonValue = formatUnits( + // activeTokenBalance.value > maxBondsOut + // ? maxBondsOut + // : activeTokenBalance?.value, + // activeToken.decimals, + // ); + // } const exposureMultiplier = amountOfBondsToShortAsBigInt && traderDeposit From 925f7e2f3d6a05624aa8e81ef21a9a976a4d7c4f Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 13:52:51 -0500 Subject: [PATCH 13/14] Tag CloseShortForm --- .../shorts/CloseShortForm/CloseShortForm.tsx | 36 +++++++++++++------ 1 file changed, 26 insertions(+), 10 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx index d9c24a44f..147558699 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx @@ -120,10 +120,10 @@ export function CloseShortForm({ asBase: hyperdrive.withdrawOptions.isBaseTokenWithdrawalEnabled && activeWithdrawToken.address === hyperdrive.poolConfig.baseToken, - onSubmitted: (hash) => { + onSubmitted: () => { (window as any)[`${short.assetId}`]?.close(); }, - onExecuted: (hash) => { + onExecuted: () => { setAmount(""); }, }); @@ -154,7 +154,18 @@ export function CloseShortForm({ maxValue={ short ? formatUnits(short.bondAmount, hyperdrive.decimals) : "" } - onChange={(newAmount) => setAmount(newAmount)} + onChange={(newAmount) => { + window.plausible("formChange", { + props: { + formName: "Close Short", + inputName: "amount", + inputValue: newAmount, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setAmount(newAmount); + }} bottomRightElement={
{short @@ -174,17 +185,23 @@ export function CloseShortForm({ - setActiveWithdrawToken(tokenAddress) - } + onChange={(tokenAddress) => { + window.plausible("formChange", { + props: { + formName: "Close Short", + inputName: "token", + inputValue: tokenAddress, + chainId: hyperdrive.chainId, + poolAddress: hyperdrive.address, + }, + }); + setActiveWithdrawToken(tokenAddress); + }} /> } value={ amountOut ? fixed(amountOut, hyperdrive.decimals).toString() : "0" } - maxValue={ - short ? formatUnits(short.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. @@ -207,7 +224,6 @@ export function CloseShortForm({ ) : null } - onChange={(newAmount) => setAmount(newAmount)} />
} From a4facf294da9a1ae3cd3e961677e44959f6ac080 Mon Sep 17 00:00:00 2001 From: Ryan Goree Date: Sat, 2 Nov 2024 14:53:43 -0500 Subject: [PATCH 14/14] Use variables for common formChange props --- .../longs/CloseLongForm/CloseLongForm.tsx | 18 +++++++---- .../longs/OpenLongForm/OpenLongForm.tsx | 31 +++++++++++-------- .../lp/AddLiquidityForm/AddLiquidityForm.tsx | 23 ++++++++------ .../lp/AddLiquidityForm/AddLiquidityForm2.tsx | 23 ++++++++------ .../RemoveLiquidityForm.tsx | 23 ++++++++------ .../shorts/CloseShortForm/CloseShortForm.tsx | 17 ++++++---- .../shorts/OpenShortForm/OpenShortForm.tsx | 23 ++++++++------ 7 files changed, 97 insertions(+), 61 deletions(-) diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx index 587b0f4b8..6ce53c1fb 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx @@ -150,6 +150,12 @@ export function CloseLongForm({ const isAmountLargerThanPositionSize = !!( bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount ); + + // Plausible event props + const formName = "Close Long"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Close Long", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); @@ -195,11 +201,11 @@ export function CloseLongForm({ onChange={(tokenAddress) => { window.plausible("formChange", { props: { - formName: "Close Long", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveWithdrawToken(tokenAddress); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx index 0d2a7d4b6..a66e85952 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx @@ -242,6 +242,11 @@ export function OpenLongForm({ ); } + // Plausible event props + const formName = "Open Long"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Open Long", inputName: "slippage", - inputValue: slippage, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + inputValue: slippage.toString(), + formName, + chainId, + poolAddress, }, }); setSlippage(slippage); @@ -279,11 +284,11 @@ export function OpenLongForm({ onChange={(tokenAddress) => { window.plausible("formChange", { props: { - formName: "Open Long", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveToken(tokenAddress); @@ -297,11 +302,11 @@ export function OpenLongForm({ onChange={(tokenAddress) => { window.plausible("formChange", { props: { - formName: "Open Long", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveToken(tokenAddress); @@ -349,11 +354,11 @@ export function OpenLongForm({ onChange={(newAmount) => { window.plausible("formChange", { props: { - formName: "Open Long", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx index 5c7d2f703..c5ce026d1 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx @@ -248,6 +248,11 @@ export function AddLiquidityForm({ }, }); + // Plausible event props + const formName = "Add Liquidity"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveToken(tokenAddress); @@ -297,11 +302,11 @@ export function AddLiquidityForm({ onSlippageChange={(slippage) => { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "slippage", inputValue: slippage, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setSlippage(slippage); @@ -328,11 +333,11 @@ export function AddLiquidityForm({ onChange={(newAmount) => { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx index 47bc90a0a..9fe9a2ea8 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx @@ -236,6 +236,11 @@ export function AddLiquidityForm2({ }, }); + // Plausible event props + const formName = "Add Liquidity"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveToken(tokenAddress); @@ -288,11 +293,11 @@ export function AddLiquidityForm2({ onSlippageChange={(slippage) => { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "slippage", inputValue: slippage, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setSlippage(slippage); @@ -320,11 +325,11 @@ export function AddLiquidityForm2({ onChange={(newAmount) => { window.plausible("formChange", { props: { - formName: "Add Liquidity", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx index 9099af371..3593e4af1 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx @@ -228,6 +228,11 @@ export function RemoveLiquidityForm({ })() : 0n; + // Plausible event props + const formName = "Remove Liquidity"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Remove Liquidity", inputName: "slippage", inputValue: slippage, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setSlippage(slippage); @@ -269,11 +274,11 @@ export function RemoveLiquidityForm({ onChange={(newAmount) => { window.plausible("formChange", { props: { - formName: "Remove Liquidity", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); @@ -289,11 +294,11 @@ export function RemoveLiquidityForm({ onChange={(tokenAddress) => { window.plausible("formChange", { props: { - formName: "Remove Liquidity", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveWithdrawToken(tokenAddress); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx index 147558699..584102cbe 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx @@ -142,6 +142,11 @@ export function CloseShortForm({ }); } + // Plausible event props + const formName = "Close Short"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Close Short", inputName: "amount", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setAmount(newAmount); @@ -188,11 +193,11 @@ export function CloseShortForm({ onChange={(tokenAddress) => { window.plausible("formChange", { props: { - formName: "Close Short", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveWithdrawToken(tokenAddress); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx index 3514f684f..fe4fba468 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx @@ -305,6 +305,11 @@ export function OpenShortForm({ Date.now() + Number(hyperdrive.poolConfig.positionDuration * 1000n), ); + // Plausible event props + const formName = "Open Short"; + const chainId = hyperdrive.chainId; + const poolAddress = hyperdrive.address; + return ( { window.plausible("formChange", { props: { - formName: "Open Short", inputName: "token", inputValue: tokenAddress, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setActiveToken(tokenAddress); @@ -353,11 +358,11 @@ export function OpenShortForm({ onSlippageChange={(slippage) => { window.plausible("formChange", { props: { - formName: "Open Short", inputName: "slippage", inputValue: slippage, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setSlippage(slippage); @@ -372,11 +377,11 @@ export function OpenShortForm({ onChange={(newAmount) => { window.plausible("formChange", { props: { - formName: "Open Short", inputName: "size", inputValue: newAmount, - chainId: hyperdrive.chainId, - poolAddress: hyperdrive.address, + formName, + chainId, + poolAddress, }, }); setShortAmount(newAmount);