Make CTAs link to respective pool details sections

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

@@ -244,9 +244,9 @@ export function OpenShortForm({
     amountOfBondsToShortAsBigInt && traderDeposit
       ? fixed(amountOfBondsToShortAsBigInt, activeToken.decimals)
           .div(traderDeposit, activeToken.decimals)
-          .format({ decimals: 2, rounding: "trunc" })
+          .format({ decimals: 1, rounding: "trunc" })
       : calculateMarketYieldMultiplier(longPrice ?? 0n).format({
-          decimals: 2,
+          decimals: 1,
           rounding: "trunc",
         });
 
@@ -430,7 +430,7 @@ export function OpenShortForm({
                   <span className="font-bold">
                     ≈ {`${exposureMultiplier}x`}
                   </span>{" "}
-                  capital exposure
+                  yield exposure
                 </span>
               }
               valueLoading={longPriceStatus === "loading"}

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

@@ -1,15 +1,19 @@
+import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { formatRate } from "src/base/formatRate";
 import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate";
 import { PercentLabel } from "src/ui/markets/PoolRow/PercentLabel";
 import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
+import { useAccount } from "wagmi";
 
 interface FixedAprCtaProps {
   hyperdrive: HyperdriveConfig;
 }
 
 export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
+  const { address: account } = useAccount();
   const { fixedApr, fixedRateStatus } = useFixedRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
@@ -18,22 +22,44 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
   const label = "Fixed APR";
 
   return (
-    <PoolStat
-      label={label}
-      value={
-        fixedApr ? (
-          <PercentLabel
-            value={formatRate({
-              rate: fixedApr.apr,
-              includePercentSign: false,
-            })}
-            className="text-h4"
-          />
-        ) : (
-          "-"
-        )
-      }
-      isLoading={fixedRateStatus === "loading"}
-    />
+    <Link
+      to="/market/$chainId/$address"
+      params={{
+        address: hyperdrive.address,
+        chainId: hyperdrive.chainId.toString(),
+      }}
+      search={{ position: "long" }}
+      onClick={(e) => {
+        e.stopPropagation();
+        window.plausible("positionCtaClick", {
+          props: {
+            chainId: hyperdrive.chainId,
+            poolAddress: hyperdrive.address,
+            positionType: "long",
+            statName: label,
+            statValue: fixedApr ? fixed(fixedApr.apr, 18).toString() : "",
+            connectedWallet: account,
+          },
+        });
+      }}
+    >
+      <PoolStat
+        label={label}
+        value={
+          fixedApr ? (
+            <PercentLabel
+              value={formatRate({
+                rate: fixedApr.apr,
+                includePercentSign: false,
+              })}
+              className="text-h4"
+            />
+          ) : (
+            "-"
+          )
+        }
+        isLoading={fixedRateStatus === "loading"}
+      />
+    </Link>
   );
 }

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

@@ -1,15 +1,19 @@
+import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { useLpApy } from "src/ui/hyperdrive/lp/hooks/useLpApy";
 import { LpApyStat } from "src/ui/markets/PoolRow/LpApyStat";
 import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
 import { RewardsTooltipContent } from "src/ui/rewards/RewardsTooltip/RewardsTooltipContent";
+import { useAccount } from "wagmi";
 
 interface LpApyCtaProps {
   hyperdrive: HyperdriveConfig;
 }
 
 export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
+  const { address: account } = useAccount();
   const { lpApy, lpApyStatus } = useLpApy({
     hyperdriveAddress: hyperdrive.address,
     chainId: hyperdrive.chainId,
@@ -18,25 +22,47 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
   const label = lpApy ? `LP APY (${lpApy.ratePeriodDays}d)` : "LP APY";
 
   return (
-    <PoolStat
-      label={label}
-      overlay={
-        <RewardsTooltipContent
-          chainId={hyperdrive.chainId}
-          hyperdriveAddress={hyperdrive.address}
-          position="addLiquidity"
-          baseRate={lpApy?.lpApy}
-          netRate={lpApy?.netLpApy}
-        />
-      }
-      isLoading={lpApyStatus === "loading"}
-      isNew={lpApy?.isNew}
-      value={
-        <LpApyStat
-          chainId={hyperdrive.chainId}
-          hyperdriveAddress={hyperdrive.address}
-        />
-      }
-    />
+    <Link
+      to="/market/$chainId/$address"
+      params={{
+        address: hyperdrive.address,
+        chainId: hyperdrive.chainId.toString(),
+      }}
+      search={{ position: "lp" }}
+      onClick={(e) => {
+        e.stopPropagation();
+        window.plausible("positionCtaClick", {
+          props: {
+            chainId: hyperdrive.chainId,
+            poolAddress: hyperdrive.address,
+            positionType: "lp",
+            statName: label,
+            statValue: lpApy?.netLpApy ? fixed(lpApy.netLpApy).toString() : "",
+            connectedWallet: account,
+          },
+        });
+      }}
+    >
+      <PoolStat
+        label={label}
+        overlay={
+          <RewardsTooltipContent
+            chainId={hyperdrive.chainId}
+            hyperdriveAddress={hyperdrive.address}
+            position="addLiquidity"
+            baseRate={lpApy?.lpApy}
+            netRate={lpApy?.netLpApy}
+          />
+        }
+        isLoading={lpApyStatus === "loading"}
+        isNew={lpApy?.isNew}
+        value={
+          <LpApyStat
+            chainId={hyperdrive.chainId}
+            hyperdriveAddress={hyperdrive.address}
+          />
+        }
+      />
+    </Link>
   );
 }

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

@@ -1,10 +1,13 @@
+import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { PoolStat } from "src/ui/markets/PoolRow/PoolStat";
 import { VariableApyStat } from "src/ui/markets/PoolRow/VariableApyStat";
 import { useOpenShortRewards } from "src/ui/rewards/hooks/useOpenShortRewards";
 import { RewardsTooltipContent } from "src/ui/rewards/RewardsTooltip/RewardsTooltipContent";
 import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
+import { useAccount } from "wagmi";
 
 interface YieldMultiplierCtaProps {
   hyperdrive: HyperdriveConfig;
@@ -13,6 +16,7 @@ interface YieldMultiplierCtaProps {
 export function VariableApyCta({
   hyperdrive,
 }: YieldMultiplierCtaProps): ReactElement {
+  const { address: account } = useAccount();
   const { vaultRate: yieldSourceRate } = useYieldSourceRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
@@ -24,25 +28,49 @@ export function VariableApyCta({
     : "Variable APY";
 
   return (
-    <PoolStat
-      label={label}
-      overlay={
-        rewards?.length ? (
-          <RewardsTooltipContent
-            chainId={hyperdrive.chainId}
-            position="openShort"
+    <Link
+      to="/market/$chainId/$address"
+      params={{
+        address: hyperdrive.address,
+        chainId: hyperdrive.chainId.toString(),
+      }}
+      search={{ position: "short" }}
+      onClick={(e) => {
+        e.stopPropagation();
+        window.plausible("positionCtaClick", {
+          props: {
+            chainId: hyperdrive.chainId,
+            poolAddress: hyperdrive.address,
+            positionType: "short",
+            statName: label,
+            statValue: yieldSourceRate?.netVaultRate
+              ? fixed(yieldSourceRate.netVaultRate).toString()
+              : "",
+            connectedWallet: account,
+          },
+        });
+      }}
+    >
+      <PoolStat
+        label={label}
+        overlay={
+          rewards?.length ? (
+            <RewardsTooltipContent
+              chainId={hyperdrive.chainId}
+              position="openShort"
+              hyperdriveAddress={hyperdrive.address}
+              baseRate={yieldSourceRate?.vaultRate}
+              netRate={yieldSourceRate?.netVaultRate}
+            />
+          ) : null
+        }
+        value={
+          <VariableApyStat
             hyperdriveAddress={hyperdrive.address}
-            baseRate={yieldSourceRate?.vaultRate}
-            netRate={yieldSourceRate?.netVaultRate}
+            chainId={hyperdrive.chainId}
           />
-        ) : null
-      }
-      value={
-        <VariableApyStat
-          hyperdriveAddress={hyperdrive.address}
-          chainId={hyperdrive.chainId}
-        />
-      }
-    />
+        }
+      />
+    </Link>
   );
 }