Skip to content

Commit dbbd252

Browse files
DannyDelottDannyDelott
authored
Make CTAs link to respective pool details sections (#1835)
* Make CTAs link to respective pool details sections * update captial exposure -> yield exposure
1 parent 03b9633 commit dbbd252

File tree

4 files changed

+138
-58
lines changed

4 files changed

+138
-58
lines changed

‎apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -244,9 +244,9 @@ export function OpenShortForm({
244244
amountOfBondsToShortAsBigInt && traderDeposit
245245
? fixed(amountOfBondsToShortAsBigInt, activeToken.decimals)
246246
.div(traderDeposit, activeToken.decimals)
247-
.format({ decimals: 2, rounding: "trunc" })
247+
.format({ decimals: 1, rounding: "trunc" })
248248
: calculateMarketYieldMultiplier(longPrice ?? 0n).format({
249-
decimals: 2,
249+
decimals: 1,
250250
rounding: "trunc",
251251
});
252252

@@ -430,7 +430,7 @@ export function OpenShortForm({
430430
<span className="font-bold">
431431
≈ {`${exposureMultiplier}x`}
432432
</span>{" "}
433-
capital exposure
433+
yield exposure
434434
</span>
435435
}
436436
valueLoading={longPriceStatus === "loading"}

‎apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx‎

Lines changed: 43 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1+
import { fixed } from "@delvtech/fixed-point-wasm";
12
import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
3+
import { Link } from "@tanstack/react-router";
24
import { ReactElement } from "react";
35
import { formatRate } from "src/base/formatRate";
46
import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate";
57
import { PercentLabel } from "src/ui/markets/PoolRow/PercentLabel";
68
import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
9+
import { useAccount } from "wagmi";
710

811
interface FixedAprCtaProps {
912
hyperdrive: HyperdriveConfig;
1013
}
1114

1215
export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
16+
const { address: account } = useAccount();
1317
const { fixedApr, fixedRateStatus } = useFixedRate({
1418
chainId: hyperdrive.chainId,
1519
hyperdriveAddress: hyperdrive.address,
@@ -18,22 +22,44 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
1822
const label = "Fixed APR";
1923

2024
return (
21-
<PoolStat
22-
label={label}
23-
value={
24-
fixedApr ? (
25-
<PercentLabel
26-
value={formatRate({
27-
rate: fixedApr.apr,
28-
includePercentSign: false,
29-
})}
30-
className="text-h4"
31-
/>
32-
) : (
33-
"-"
34-
)
35-
}
36-
isLoading={fixedRateStatus === "loading"}
37-
/>
25+
<Link
26+
to="/market/$chainId/$address"
27+
params={{
28+
address: hyperdrive.address,
29+
chainId: hyperdrive.chainId.toString(),
30+
}}
31+
search={{ position: "long" }}
32+
onClick={(e) => {
33+
e.stopPropagation();
34+
window.plausible("positionCtaClick", {
35+
props: {
36+
chainId: hyperdrive.chainId,
37+
poolAddress: hyperdrive.address,
38+
positionType: "long",
39+
statName: label,
40+
statValue: fixedApr ? fixed(fixedApr.apr, 18).toString() : "",
41+
connectedWallet: account,
42+
},
43+
});
44+
}}
45+
>
46+
<PoolStat
47+
label={label}
48+
value={
49+
fixedApr ? (
50+
<PercentLabel
51+
value={formatRate({
52+
rate: fixedApr.apr,
53+
includePercentSign: false,
54+
})}
55+
className="text-h4"
56+
/>
57+
) : (
58+
"-"
59+
)
60+
}
61+
isLoading={fixedRateStatus === "loading"}
62+
/>
63+
</Link>
3864
);
3965
}

‎apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx‎

Lines changed: 46 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,19 @@
1+
import { fixed } from "@delvtech/fixed-point-wasm";
12
import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
3+
import { Link } from "@tanstack/react-router";
24
import { ReactElement } from "react";
35
import { useLpApy } from "src/ui/hyperdrive/lp/hooks/useLpApy";
46
import { LpApyStat } from "src/ui/markets/PoolRow/LpApyStat";
57
import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
68
import { RewardsTooltipContent } from "src/ui/rewards/RewardsTooltip/RewardsTooltipContent";
9+
import { useAccount } from "wagmi";
710

811
interface LpApyCtaProps {
912
hyperdrive: HyperdriveConfig;
1013
}
1114

1215
export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
16+
const { address: account } = useAccount();
1317
const { lpApy, lpApyStatus } = useLpApy({
1418
hyperdriveAddress: hyperdrive.address,
1519
chainId: hyperdrive.chainId,
@@ -18,25 +22,47 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
1822
const label = lpApy ? `LP APY (${lpApy.ratePeriodDays}d)` : "LP APY";
1923

2024
return (
21-
<PoolStat
22-
label={label}
23-
overlay={
24-
<RewardsTooltipContent
25-
chainId={hyperdrive.chainId}
26-
hyperdriveAddress={hyperdrive.address}
27-
position="addLiquidity"
28-
baseRate={lpApy?.lpApy}
29-
netRate={lpApy?.netLpApy}
30-
/>
31-
}
32-
isLoading={lpApyStatus === "loading"}
33-
isNew={lpApy?.isNew}
34-
value={
35-
<LpApyStat
36-
chainId={hyperdrive.chainId}
37-
hyperdriveAddress={hyperdrive.address}
38-
/>
39-
}
40-
/>
25+
<Link
26+
to="/market/$chainId/$address"
27+
params={{
28+
address: hyperdrive.address,
29+
chainId: hyperdrive.chainId.toString(),
30+
}}
31+
search={{ position: "lp" }}
32+
onClick={(e) => {
33+
e.stopPropagation();
34+
window.plausible("positionCtaClick", {
35+
props: {
36+
chainId: hyperdrive.chainId,
37+
poolAddress: hyperdrive.address,
38+
positionType: "lp",
39+
statName: label,
40+
statValue: lpApy?.netLpApy ? fixed(lpApy.netLpApy).toString() : "",
41+
connectedWallet: account,
42+
},
43+
});
44+
}}
45+
>
46+
<PoolStat
47+
label={label}
48+
overlay={
49+
<RewardsTooltipContent
50+
chainId={hyperdrive.chainId}
51+
hyperdriveAddress={hyperdrive.address}
52+
position="addLiquidity"
53+
baseRate={lpApy?.lpApy}
54+
netRate={lpApy?.netLpApy}
55+
/>
56+
}
57+
isLoading={lpApyStatus === "loading"}
58+
isNew={lpApy?.isNew}
59+
value={
60+
<LpApyStat
61+
chainId={hyperdrive.chainId}
62+
hyperdriveAddress={hyperdrive.address}
63+
/>
64+
}
65+
/>
66+
</Link>
4167
);
4268
}

‎apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyCta.tsx‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
import { fixed } from "@delvtech/fixed-point-wasm";
12
import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
3+
import { Link } from "@tanstack/react-router";
24
import { ReactElement } from "react";
35
import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
46
import { VariableApyStat } from "src/ui/markets/PoolRow/VariableApyStat";
57
import { useOpenShortRewards } from "src/ui/rewards/hooks/useOpenShortRewards";
68
import { RewardsTooltipContent } from "src/ui/rewards/RewardsTooltip/RewardsTooltipContent";
79
import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
10+
import { useAccount } from "wagmi";
811

912
interface YieldMultiplierCtaProps {
1013
hyperdrive: HyperdriveConfig;
@@ -13,6 +16,7 @@ interface YieldMultiplierCtaProps {
1316
export function VariableApyCta({
1417
hyperdrive,
1518
}: YieldMultiplierCtaProps): ReactElement {
19+
const { address: account } = useAccount();
1620
const { vaultRate: yieldSourceRate } = useYieldSourceRate({
1721
chainId: hyperdrive.chainId,
1822
hyperdriveAddress: hyperdrive.address,
@@ -24,25 +28,49 @@ export function VariableApyCta({
2428
: "Variable APY";
2529

2630
return (
27-
<PoolStat
28-
label={label}
29-
overlay={
30-
rewards?.length ? (
31-
<RewardsTooltipContent
32-
chainId={hyperdrive.chainId}
33-
position="openShort"
31+
<Link
32+
to="/market/$chainId/$address"
33+
params={{
34+
address: hyperdrive.address,
35+
chainId: hyperdrive.chainId.toString(),
36+
}}
37+
search={{ position: "short" }}
38+
onClick={(e) => {
39+
e.stopPropagation();
40+
window.plausible("positionCtaClick", {
41+
props: {
42+
chainId: hyperdrive.chainId,
43+
poolAddress: hyperdrive.address,
44+
positionType: "short",
45+
statName: label,
46+
statValue: yieldSourceRate?.netVaultRate
47+
? fixed(yieldSourceRate.netVaultRate).toString()
48+
: "",
49+
connectedWallet: account,
50+
},
51+
});
52+
}}
53+
>
54+
<PoolStat
55+
label={label}
56+
overlay={
57+
rewards?.length ? (
58+
<RewardsTooltipContent
59+
chainId={hyperdrive.chainId}
60+
position="openShort"
61+
hyperdriveAddress={hyperdrive.address}
62+
baseRate={yieldSourceRate?.vaultRate}
63+
netRate={yieldSourceRate?.netVaultRate}
64+
/>
65+
) : null
66+
}
67+
value={
68+
<VariableApyStat
3469
hyperdriveAddress={hyperdrive.address}
35-
baseRate={yieldSourceRate?.vaultRate}
36-
netRate={yieldSourceRate?.netVaultRate}
70+
chainId={hyperdrive.chainId}
3771
/>
38-
) : null
39-
}
40-
value={
41-
<VariableApyStat
42-
hyperdriveAddress={hyperdrive.address}
43-
chainId={hyperdrive.chainId}
44-
/>
45-
}
46-
/>
72+
}
73+
/>
74+
</Link>
4775
);
4876
}

0 commit comments

Comments
 (0)