From 5427213dc66cecda8f21b441025baf40e1c5367e Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Thu, 20 Mar 2025 12:26:26 -0700
Subject: [PATCH 1/8] Remove buttons from Pool rows, Make multiplier label
 match latest design

---
 .../src/ui/markets/PoolRow/FixedAprCta.tsx    | 30 --------------
 .../src/ui/markets/PoolRow/LpApyCta.tsx       | 30 --------------
 .../src/ui/markets/PoolRow/PoolRow.tsx        |  8 ++--
 .../src/ui/markets/PoolRow/PoolStat.tsx       |  3 --
 .../src/ui/markets/PoolRow/VariableApyCta.tsx | 40 -------------------
 .../ui/markets/PoolRow/VariableApyStat.tsx    | 30 ++++----------
 6 files changed, 12 insertions(+), 129 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx
index 0f4a0d61d..2598f7a63 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx
@@ -1,19 +1,15 @@
-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,
@@ -38,32 +34,6 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
         )
       }
       isLoading={fixedRateStatus === "loading"}
-      action={
-        <Link
-          to="/market/$chainId/$address"
-          params={{
-            address: hyperdrive.address,
-            chainId: hyperdrive.chainId.toString(),
-          }}
-          search={{ position: "long" }}
-          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-400 sm:h-8 sm:bg-gray-600 sm:hover:bg-gray-500 md:w-28"
-          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,
-              },
-            });
-          }}
-        >
-          Open Long
-        </Link>
-      }
     />
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
index 2afaa85f1..353903783 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
@@ -1,6 +1,4 @@
-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";
@@ -41,34 +39,6 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
           hyperdriveAddress={hyperdrive.address}
         />
       }
-      action={
-        <Link
-          to="/market/$chainId/$address"
-          params={{
-            address: hyperdrive.address,
-            chainId: hyperdrive.chainId.toString(),
-          }}
-          search={{ position: "lp" }}
-          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-400 sm:h-8 sm:bg-gray-600 sm:hover:bg-gray-500 md:w-32"
-          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,
-              },
-            });
-          }}
-        >
-          Add Liquidity
-        </Link>
-      }
     />
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx
index a41af0f4f..af6e092fa 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx
@@ -174,14 +174,14 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
         </div>
 
         {/* Right side */}
-        <div className="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-12 lg:items-end lg:justify-start">
-          <div className="w-full lg:w-[112px]">
+        <div className="flex flex-col items-center justify-between gap-6 sm:flex-row sm:gap-12 lg:items-start lg:justify-start">
+          <div className="size-full border-r border-gray-500/20 lg:w-[112px]">
             <FixedAprCta hyperdrive={hyperdrive} />
           </div>
-          <div className="w-full lg:w-[181px]">
+          <div className="size-full border-r border-gray-500/20 lg:w-[181px]">
             <VariableApyCta hyperdrive={hyperdrive} />
           </div>
-          <div className="w-full lg:w-[122px]">
+          <div className="size-full lg:w-[122px]">
             <LpApyCta hyperdrive={hyperdrive} />
           </div>
         </div>
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
index 902b7f7f0..69e253bd0 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolStat.tsx
@@ -14,7 +14,6 @@ export interface PoolStatProps {
   isLoading?: boolean;
   isNew?: boolean;
   variant?: "default" | "gradient";
-  action?: ReactNode;
 }
 
 export function PoolStat({
@@ -24,7 +23,6 @@ export function PoolStat({
   isNew = false,
   variant = "default",
   isLoading = false,
-  action,
 }: PoolStatProps): ReactElement {
   let displayValue;
   if (isLoading) {
@@ -45,7 +43,6 @@ export function PoolStat({
       >
         {displayValue}
       </div>
-      {action}
     </div>
   );
 
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyCta.tsx
index 5dca73ed2..2cf8e302b 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyCta.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyCta.tsx
@@ -1,14 +1,10 @@
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
-import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
-import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
-import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice";
 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;
@@ -17,25 +13,15 @@ interface YieldMultiplierCtaProps {
 export function VariableApyCta({
   hyperdrive,
 }: YieldMultiplierCtaProps): ReactElement {
-  const { address: account } = useAccount();
-
   const { vaultRate: yieldSourceRate } = useYieldSourceRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
-  const { longPrice, longPriceStatus } = useCurrentLongPrice({
-    chainId: hyperdrive.chainId,
-    hyperdriveAddress: hyperdrive.address,
-  });
   const { rewards } = useOpenShortRewards({ hyperdriveConfig: hyperdrive });
 
   const label = yieldSourceRate
     ? `Variable APY (${yieldSourceRate.ratePeriodDays}d)`
     : "Variable APY";
-  const multiplier =
-    longPriceStatus === "success" && longPrice
-      ? calculateMarketYieldMultiplier(longPrice)
-      : undefined;
 
   return (
     <PoolStat
@@ -57,32 +43,6 @@ export function VariableApyCta({
           chainId={hyperdrive.chainId}
         />
       }
-      action={
-        <Link
-          to="/market/$chainId/$address"
-          params={{
-            address: hyperdrive.address,
-            chainId: hyperdrive.chainId.toString(),
-          }}
-          search={{ position: "short" }}
-          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-400 sm:h-8 sm:bg-gray-600 sm:hover:bg-gray-500 md:w-28"
-          onClick={(e) => {
-            e.stopPropagation();
-            window.plausible("positionCtaClick", {
-              props: {
-                chainId: hyperdrive.chainId,
-                poolAddress: hyperdrive.address,
-                positionType: "short",
-                statName: label,
-                statValue: multiplier ? multiplier.toString() : "",
-                connectedWallet: account,
-              },
-            });
-          }}
-        >
-          Open Short
-        </Link>
-      }
     />
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
index d3aa98cbe..9ec3fe3e8 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
@@ -4,7 +4,6 @@ import Skeleton from "react-loading-skeleton";
 import { formatRate } from "src/base/formatRate";
 import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
-import { GradientBadge } from "src/ui/base/components/GradientBadge";
 import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice";
 import { PercentLabel } from "src/ui/markets/PoolRow/PercentLabel";
 import { useOpenShortRewards } from "src/ui/rewards/hooks/useOpenShortRewards";
@@ -36,38 +35,25 @@ export function VariableApyStat({
 
   const multiplierLabel =
     longPriceStatus === "success" && longPrice
-      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 1 })}x`
+      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 0 })}x`
       : undefined;
 
   if (yieldSourceRateStatus !== "success") {
     return <Skeleton width={100} />;
   }
-  if (!rewards?.length && multiplierLabel && yieldSourceRate) {
-    return (
-      <div className="flex items-center gap-2 whitespace-nowrap">
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex">
         <PercentLabel
           value={formatRate({
-            rate: yieldSourceRate.netVaultRate,
+            rate: yieldSourceRate?.netVaultRate ?? 0n,
             includePercentSign: false,
           })}
-          className="mr-1 text-h4"
         />
-        <GradientBadge>{multiplierLabel}</GradientBadge>
+        {rewards?.length ? <span className="mx-1">⚡</span> : null}
       </div>
-    );
-  }
-
-  return (
-    <div className="flex">
-      <PercentLabel
-        value={formatRate({
-          rate: yieldSourceRate?.netVaultRate ?? 0n,
-          includePercentSign: false,
-        })}
-        className="mr-2 text-h4"
-      />
-      <GradientBadge>{multiplierLabel}</GradientBadge>
-      <span className="mx-1">⚡</span>
+      <span className="gradient-text text-left font-inter text-md font-medium">{`Up to ${multiplierLabel} exposure`}</span>
     </div>
   );
 }

From a2560464c04ab4288b79593bcd051276b65b976c Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Thu, 20 Mar 2025 13:22:43 -0700
Subject: [PATCH 2/8] Display short rate for variable

---
 .../src/ui/markets/PoolRow/VariableApyStat.tsx    | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
index 9ec3fe3e8..865a5e028 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
@@ -1,3 +1,4 @@
+import { parseFixed } from "@delvtech/fixed-point-wasm";
 import { getHyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { ReactNode } from "react";
 import Skeleton from "react-loading-skeleton";
@@ -5,6 +6,7 @@ import { formatRate } from "src/base/formatRate";
 import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice";
+import { useShortRate } from "src/ui/hyperdrive/shorts/hooks/useShortRate";
 import { PercentLabel } from "src/ui/markets/PoolRow/PercentLabel";
 import { useOpenShortRewards } from "src/ui/rewards/hooks/useOpenShortRewards";
 import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
@@ -33,12 +35,21 @@ export function VariableApyStat({
     hyperdriveAddress: hyperdrive.address,
   });
 
+  const { shortApr, shortRateStatus } = useShortRate({
+    chainId: hyperdrive.chainId,
+    // show the market short rate (aka bond amount of 1)
+    bondAmount: parseFixed("1", hyperdrive.decimals).bigint,
+    hyperdriveAddress: hyperdrive.address,
+    timestamp: BigInt(Math.floor(Date.now() / 1000)),
+    variableApy: yieldSourceRate?.netVaultRate,
+  });
+
   const multiplierLabel =
     longPriceStatus === "success" && longPrice
       ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 0 })}x`
       : undefined;
 
-  if (yieldSourceRateStatus !== "success") {
+  if (yieldSourceRateStatus !== "success" || shortRateStatus !== "success") {
     return <Skeleton width={100} />;
   }
 
@@ -47,7 +58,7 @@ export function VariableApyStat({
       <div className="flex">
         <PercentLabel
           value={formatRate({
-            rate: yieldSourceRate?.netVaultRate ?? 0n,
+            rate: shortApr?.apr || 0n,
             includePercentSign: false,
           })}
         />

From 4bd989a854a7a0ed504098a90a916fefd907cda6 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Thu, 20 Mar 2025 13:27:10 -0700
Subject: [PATCH 3/8] Update labels for position picker

---
 apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx | 2 --
 apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx   | 6 +++---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
index 353903783..cb809ec73 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
@@ -4,14 +4,12 @@ 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,
diff --git a/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx b/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
index 7f2b25544..e56cacc43 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
@@ -26,7 +26,7 @@ export function PositionPicker({
   const poolAddress = hyperdrive.address;
 
   return (
-    <div className="flex gap-4">
+    <div className="flex gap-2.5">
       {/* TODO: Implement the term picker button */}
       <button
         className={classNames(
@@ -67,7 +67,7 @@ export function PositionPicker({
           });
         }}
       >
-        Long
+        Fixed
       </Link>
       <Link
         className={classNames(
@@ -96,7 +96,7 @@ export function PositionPicker({
           });
         }}
       >
-        Short
+        Variable
       </Link>
       <Link
         className={classNames(

From ceed68666122752e60ab82db59040da1ba8b7623 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 08:12:06 -0700
Subject: [PATCH 4/8] Long -> Fixed, show short rate in tx preview

---
 .../longs/OpenLongForm/OpenLongForm.tsx       |  2 +-
 .../shorts/OpenShortForm/OpenShortForm.tsx    | 80 +++++--------------
 .../src/ui/markets/PositionPicker.tsx         |  4 +-
 3 files changed, 23 insertions(+), 63 deletions(-)

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 55b655aa9..5f6c136c6 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -469,7 +469,7 @@ export function OpenLongForm({
               onOpenLong?.(e);
             }}
           >
-            Open Long
+            Buy Fixed
           </button>
         );
       })()}
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 412a299c9..2aec0dc96 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -2,7 +2,7 @@ import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { adjustAmountByPercentage } from "@delvtech/hyperdrive-js";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
-import { MouseEvent, ReactElement, useState } from "react";
+import { MouseEvent, ReactElement } from "react";
 import { MAX_UINT256 } from "src/base/constants";
 import { formatRate } from "src/base/formatRate";
 import { isTestnetChain } from "src/chains/isTestnetChain";
@@ -32,6 +32,7 @@ import { OpenShortPreview } from "src/ui/hyperdrive/shorts/OpenShortPreview/Open
 import { useMaxShort } from "src/ui/hyperdrive/shorts/hooks/useMaxShort";
 import { useOpenShort } from "src/ui/hyperdrive/shorts/hooks/useOpenShort";
 import { usePreviewOpenShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewOpenShort";
+import { useShortRate } from "src/ui/hyperdrive/shorts/hooks/useShortRate";
 import { PositionPicker } from "src/ui/markets/PositionPicker";
 import { RewardsTooltip } from "src/ui/rewards/RewardsTooltip/RewardsTooltip";
 import { useOpenShortRewards } from "src/ui/rewards/hooks/useOpenShortRewards";
@@ -48,8 +49,6 @@ import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
 import { formatUnits } from "viem";
 import { useAccount, useChainId } from "wagmi";
 
-(window as any).fixed = fixed;
-
 interface OpenShortPositionFormProps {
   hyperdrive: HyperdriveConfig;
   onOpenShort?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -122,9 +121,6 @@ export function OpenShortForm({
     tokenChainId: activeToken.chainId,
   });
 
-  // TODO: Implement the two way input switch once getMaxShort is fixed on the sdk
-  const [activeInput, setActiveInput] = useState<"bonds" | "budget">("bonds");
-
   const {
     amount: amountOfBondsToShort,
     amountAsBigInt: amountOfBondsToShortAsBigInt,
@@ -132,13 +128,6 @@ export function OpenShortForm({
   } = useNumericInput({
     decimals: hyperdrive.decimals,
   });
-  const {
-    amount: amountToPay,
-    amountAsBigInt: amountToPayAsBigInt,
-    setAmount: setPaymentAmount,
-  } = useNumericInput({
-    decimals: hyperdrive.decimals,
-  });
 
   const {
     traderDeposit,
@@ -187,17 +176,23 @@ export function OpenShortForm({
     budget: MAX_UINT256,
   });
 
-  const { maxBondsOut: maxBondsOutFromPayment } = useMaxShort({
-    chainId: hyperdrive.chainId,
-    hyperdriveAddress: hyperdrive.address,
-    budget: amountToPayAsBigInt || 0n,
-  });
-
   const hasEnoughLiquidity = getIsValidTradeSize({
     tradeAmount: amountOfBondsToShortAsBigInt,
     maxTradeSize: maxBondsOut,
   });
 
+  const defaultBondAmount =
+    hyperdrive.decimals > 6 ? BigInt(1e15) : BigInt(1e6);
+  const { shortApr, shortRateStatus } = useShortRate({
+    chainId: hyperdrive.chainId,
+    // show the market short rate (aka bond amount of 1) if the user hasn't
+    // already entered a short size
+    bondAmount: amountOfBondsToShortAsBigInt || defaultBondAmount,
+    hyperdriveAddress: hyperdrive.address,
+    timestamp: BigInt(Math.floor(Date.now() / 1000)),
+    variableApy: vaultRate?.netVaultRate,
+  });
+
   const {
     setSlippage,
     slippage,
@@ -232,23 +227,9 @@ export function OpenShortForm({
     },
     onExecuted: () => {
       setShortAmount("");
-      setPaymentAmount("");
     },
   });
 
-  // 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,
-  //   );
-  // }
-
   const exposureMultiplier =
     amountOfBondsToShortAsBigInt && traderDeposit
       ? fixed(amountOfBondsToShortAsBigInt, activeToken.decimals)
@@ -293,19 +274,10 @@ export function OpenShortForm({
                     },
                   });
                   setActiveToken(tokenAddress);
-
-                  // TODO: Determine if there is a bug here.
-                  setPaymentAmount("0");
                 }}
               />
             }
-            value={
-              activeInput === "bonds"
-                ? amountOfBondsToShort || ""
-                : maxBondsOutFromPayment
-                  ? formatUnits(maxBondsOutFromPayment, baseToken.decimals)
-                  : ""
-            }
+            value={amountOfBondsToShort || ""}
             settings={
               <div className="mb-3 flex w-full items-center justify-between">
                 <PositionPicker hyperdrive={hyperdrive} />
@@ -342,7 +314,6 @@ export function OpenShortForm({
                 },
               });
               setShortAmount(newAmount);
-              setActiveInput("bonds");
             }}
             bottomLeftElement={
               // Defillama fetches the token price via {chain}:{tokenAddress}.
@@ -366,6 +337,7 @@ export function OpenShortForm({
             }
           />
           <TokenInput
+            disabled
             variant="lighter"
             name={`${baseToken.symbol}-input`}
             token={
@@ -374,23 +346,11 @@ export function OpenShortForm({
                 activeTokenAddress={activeToken.address}
                 onChange={(tokenAddress) => {
                   setActiveToken(tokenAddress);
-                  setPaymentAmount("0");
                 }}
               />
             }
             inputLabel="You pay"
-            value={
-              activeInput === "budget"
-                ? amountToPay || "0"
-                : formatUnits(traderDeposit || 0n, activeToken.decimals)
-            }
-            // This input is disabled until the getMaxShort is fixed on the sdk.
-            disabled
-            // maxValue={maxButtonValue}
-            // onChange={(newAmount) => {
-            //   setActiveInput("budget");
-            //   setPaymentAmount(newAmount);
-            // }}
+            value={formatUnits(traderDeposit || 0n, activeToken.decimals)}
             bottomLeftElement={
               // Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, price display is disabled there.
               !isTestnetChain(hyperdrive.chainId) ? (
@@ -440,10 +400,10 @@ export function OpenShortForm({
                     netRate={vaultRate?.netVaultRate}
                     chainId={hyperdrive.chainId}
                   >
-                    {formatRate({ rate: vaultRate?.netVaultRate ?? 0n })}⚡
+                    {formatRate({ rate: shortApr?.apr ?? 0n })}⚡
                   </RewardsTooltip>
                 ) : (
-                  formatRate({ rate: vaultRate?.netVaultRate ?? 0n })
+                  `${formatRate({ rate: shortApr?.apr ?? 0n })}`
                 )}
               </span>
             }
@@ -451,7 +411,7 @@ export function OpenShortForm({
             unitClassName="text-h3 font-bold"
             subValue={
               <span className="gradient-text">
-                <span className="font-bold">{`${exposureMultiplier}x`}</span>{" "}
+                <span className="font-bold">≈ {`${exposureMultiplier}x`}</span>{" "}
                 capital exposure
               </span>
             }
diff --git a/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx b/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
index e56cacc43..8c9b5b4b6 100644
--- a/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
+++ b/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
@@ -26,7 +26,7 @@ export function PositionPicker({
   const poolAddress = hyperdrive.address;
 
   return (
-    <div className="flex gap-2.5">
+    <div className="flex gap-4">
       {/* TODO: Implement the term picker button */}
       <button
         className={classNames(
@@ -96,7 +96,7 @@ export function PositionPicker({
           });
         }}
       >
-        Variable
+        Short
       </Link>
       <Link
         className={classNames(

From 63f0eb49c467737af39ec749bb9f5b6f89f4d814 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 08:20:34 -0700
Subject: [PATCH 5/8] Polish open long stats

---
 .../longs/OpenLongPreview/OpenLongStats.tsx          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx
index 6e55333db..1e6729d6a 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx
@@ -16,6 +16,7 @@ import { convertSharesToBase } from "src/hyperdrive/convertSharesToBase";
 import { getDepositAssets } from "src/hyperdrive/getDepositAssets";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { PrimaryStat } from "src/ui/base/components/PrimaryStat";
+import { Tooltip } from "src/ui/base/components/Tooltip/Tooltip";
 import { formatBalance } from "src/ui/base/formatting/formatBalance";
 import { formatDate } from "src/ui/base/formatting/formatDate";
 import { useFixedRate } from "src/ui/hyperdrive/longs/hooks/useFixedRate";
@@ -153,7 +154,15 @@ export function OpenLongStats({
                 "text-base-content/80": !amountPaid,
               })}
             >
-              <img src={baseToken.iconUrl} className="mr-1 h-8 rounded-full" />
+              <Tooltip
+                tooltip={baseToken.symbol}
+                className="self-center font-normal"
+              >
+                <img
+                  src={baseToken.iconUrl}
+                  className="mr-1.5 size-7 rounded-full"
+                />
+              </Tooltip>
               {`${formatBalance({
                 balance: amountPaidInBase + yieldAtMaturity,
                 decimals: baseToken.decimals,
@@ -162,7 +171,6 @@ export function OpenLongStats({
             </span>
           )
         }
-        valueUnit={`${baseToken.symbol}`}
         subValue={
           // Defillama fetches the token price via {chain}:{tokenAddress}. Since the token address differs on testnet, term length is displayed instead.
 

From 2dd7024cdb6bae1f42b337a6c1952248556cb3fc Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 09:01:45 -0700
Subject: [PATCH 6/8] Add banner for short summary in tx preview

---
 .../shorts/OpenShortForm/OpenShortForm.tsx    | 144 +++++++++++-------
 1 file changed, 90 insertions(+), 54 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 2aec0dc96..626e01eee 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -1,7 +1,11 @@
 import { fixed } from "@delvtech/fixed-point-wasm";
-import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
+import {
+  getYieldSource,
+  HyperdriveConfig,
+} from "@delvtech/hyperdrive-appconfig";
 import { adjustAmountByPercentage } from "@delvtech/hyperdrive-js";
 import { InformationCircleIcon } from "@heroicons/react/24/outline";
+import classNames from "classnames";
 import { MouseEvent, ReactElement } from "react";
 import { MAX_UINT256 } from "src/base/constants";
 import { formatRate } from "src/base/formatRate";
@@ -67,6 +71,12 @@ export function OpenShortForm({
     chainId: hyperdrive.chainId,
   });
   const appConfig = useAppConfigForConnectedChain();
+  const yieldSource = getYieldSource({
+    hyperdriveChainId: hyperdrive.chainId,
+    hyperdriveAddress: hyperdrive.address,
+    appConfig,
+  });
+
   const { baseToken, baseTokenDepositEnabled, tokenOptions } =
     useTokenDepositOptions({
       hyperdrive,
@@ -385,59 +395,85 @@ export function OpenShortForm({
         </div>
       }
       primaryStats={
-        <div className="flex justify-between px-4 py-8">
-          <PrimaryStat
-            label="Variable APY"
-            value={
-              <span className="text-h3 font-bold">
-                {isNewPool ? (
-                  "✨New✨"
-                ) : rewards?.length ? (
-                  <RewardsTooltip
-                    hyperdriveAddress={hyperdrive.address}
-                    position="openShort"
-                    baseRate={vaultRate?.vaultRate}
-                    netRate={vaultRate?.netVaultRate}
-                    chainId={hyperdrive.chainId}
-                  >
-                    {formatRate({ rate: shortApr?.apr ?? 0n })}⚡
-                  </RewardsTooltip>
-                ) : (
-                  `${formatRate({ rate: shortApr?.apr ?? 0n })}`
-                )}
-              </span>
-            }
-            valueContainerClassName="flex items-end"
-            unitClassName="text-h3 font-bold"
-            subValue={
-              <span className="gradient-text">
-                <span className="font-bold">≈ {`${exposureMultiplier}x`}</span>{" "}
-                capital exposure
-              </span>
-            }
-            valueLoading={longPriceStatus === "loading"}
-          />
-          <div className="daisy-divider daisy-divider-horizontal" />
-          <PrimaryStat
-            alignment="right"
-            label="Fixed APR Cost"
-            value={
-              <span className="text-h3 font-bold">
-                {formatRate({ rate: fixedRatePaid || fixedApr?.apr || 0n })}
-              </span>
-            }
-            unitClassName="mb-1 font-bold"
-            subValue={
-              <Tooltip
-                position="top"
-                tooltip="Short positions provide the fixed rate yield to Long positions. Opening a Short is a one-time cost."
-                className="gap-1 before:text-left"
-              >
-                What am I paying for?{" "}
-                <InformationCircleIcon className="size-4 text-neutral-content" />
-              </Tooltip>
-            }
-          />
+        // TOOD: Make this it's own component, OpenShortStats
+        <div className="flex flex-col gap-4 py-8">
+          <div className="flex w-full justify-between px-4">
+            <PrimaryStat
+              label="Variable APY"
+              value={
+                <span className="text-h3 font-bold">
+                  {isNewPool ? (
+                    "✨New✨"
+                  ) : rewards?.length ? (
+                    <RewardsTooltip
+                      hyperdriveAddress={hyperdrive.address}
+                      position="openShort"
+                      baseRate={vaultRate?.vaultRate}
+                      netRate={vaultRate?.netVaultRate}
+                      chainId={hyperdrive.chainId}
+                    >
+                      {formatRate({ rate: shortApr?.apr ?? 0n })}⚡
+                    </RewardsTooltip>
+                  ) : (
+                    `${formatRate({ rate: shortApr?.apr ?? 0n })}`
+                  )}
+                </span>
+              }
+              valueContainerClassName="flex items-end"
+              unitClassName="text-h3 font-bold"
+              subValue={
+                <span
+                  className={classNames("gradient-text", {
+                    invisible: !shortApr?.apr,
+                  })}
+                >
+                  <span className="font-bold">
+                    ≈ {`${exposureMultiplier}x`}
+                  </span>{" "}
+                  capital exposure
+                </span>
+              }
+              valueLoading={longPriceStatus === "loading"}
+            />
+            <div className="daisy-divider daisy-divider-horizontal" />
+            <PrimaryStat
+              alignment="right"
+              label="Fixed APR Cost"
+              value={
+                <span className="text-h3 font-bold">
+                  {formatRate({ rate: fixedRatePaid || fixedApr?.apr || 0n })}
+                </span>
+              }
+              unitClassName="mb-1 font-bold"
+              subValue={
+                <Tooltip
+                  position="top"
+                  tooltip="Short positions provide the fixed rate yield to Long positions. Opening a Short is a one-time cost."
+                  className="gap-1 before:text-left"
+                >
+                  What am I paying for?{" "}
+                  <InformationCircleIcon className="size-4 text-neutral-content" />
+                </Tooltip>
+              }
+            />
+          </div>
+          {!!amountOfBondsToShortAsBigInt && hasEnoughLiquidity ? (
+            <div className="flex items-center rounded-md bg-base-200 py-3">
+              <p className="mx-4 text-sm leading-bodyText text-neutral-content">
+                Earn{" "}
+                <span className="font-bold text-white">
+                  {formatRate({ rate: shortApr?.apr ?? 0n })}
+                </span>{" "}
+                if <span className="font-bold">{yieldSource.shortName}</span>{" "}
+                remains constant at{" "}
+                <span className="mx-0.5 font-bold text-white">
+                  {vaultRate?.netVaultRate
+                    ? formatRate({ rate: vaultRate.netVaultRate })
+                    : null}
+                </span>
+              </p>
+            </div>
+          ) : null}
         </div>
       }
       transactionPreview={

From 16b6c2ebb6ded50b7acdbffbc082bcc164b368d8 Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 09:07:40 -0700
Subject: [PATCH 7/8] Update text

---
 .../shorts/OpenShortForm/OpenShortForm.tsx    |  2 +-
 .../src/ui/onboarding/faqData2.tsx            | 19 +++++++++----------
 2 files changed, 10 insertions(+), 11 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 626e01eee..14c5f176b 100644
--- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
+++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -448,7 +448,7 @@ export function OpenShortForm({
               subValue={
                 <Tooltip
                   position="top"
-                  tooltip="Short positions provide the fixed rate yield to Long positions. Opening a Short is a one-time cost."
+                  tooltip="Short positions provide the fixed rate yield in exchange for the variable. Opening a Short is a one-time cost."
                   className="gap-1 before:text-left"
                 >
                   What am I paying for?{" "}
diff --git a/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx b/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx
index b7fdb2817..640ce862c 100644
--- a/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx
+++ b/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx
@@ -1,22 +1,21 @@
 export const faqData2 = [
   {
-    question: "How can I get fixed rates?",
+    question: "How do fixed rates work?",
     answer: (
       <>
-        <p>Open a Long and hold it to maturity.</p>
         <p>
-          When you open a Long in Hyperdrive, you&apos;re buying tokens at a
-          discount. These tokens are redeemable at maturity for their full
-          value, giving you a fixed return.
+          When you open a fixed rate position in Hyperdrive, you&apos;re buying
+          tokens at a discount. These tokens are redeemable at maturity for
+          their full value, giving you a fixed return.
         </p>
         <p>
-          Opening Longs has an immediate impact on the market. If more people
-          open Longs, the fixed rate goes down. If they close Longs, the fixed
-          rate goes up.
+          Opening a fixed rate position has an immediate impact on the market.
+          If more people buy the fixed rate, the fixed rate goes down. If they
+          close their position, the fixed rate goes up.
         </p>
         <p>
-          Users can also take speculative Long positions where they bet on the
-          short-term movement of rates. Read our docs to learn more about{" "}
+          Users can also take speculative fixed rate positions where they bet on
+          the short-term movement of rates. Read our docs to learn more about{" "}
           <a
             className="daisy-link hover:text-white"
             rel="noreferrer"

From e285144fb8e8ca6c674a9e51eeb8782b531d841b Mon Sep 17 00:00:00 2001
From: Danny Delott <dannydelott@gmail.com>
Date: Fri, 21 Mar 2025 09:11:01 -0700
Subject: [PATCH 8/8] Update labels in portfolio

---
 apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx    | 2 +-
 .../longs/OpenLongsTable/OpenLongsTableDesktop.tsx        | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
index 869be0a59..756f0c77e 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
@@ -36,7 +36,7 @@ export function Portfolio(): ReactElement {
       {
         id: "longs",
         content: <OpenLongsContainer account={account} />,
-        label: "Long",
+        label: "Fixed Rates",
         onClick: () => {
           navigate({
             search: (prev) => ({ ...prev, position: "longs" }),
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
index 175f41532..5954a206a 100644
--- a/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
+++ b/apps/hyperdrive-trading/src/ui/portfolio/longs/OpenLongsTable/OpenLongsTableDesktop.tsx
@@ -332,15 +332,15 @@ function getColumns({
         );
       },
     }),
-    columnHelper.accessor("assetId", {
+    columnHelper.display({
       id: "go-to-market",
-      cell: ({ row, getValue }) => {
+      cell: ({ row }) => {
         return (
           <ManageLongsButton
-            assetId={getValue()}
+            assetId={row.original.assetId}
             account={account}
             hyperdrive={row.original.hyperdrive}
-            key={getValue()}
+            key={row.original.assetId}
           />
         );
       },