Add variable APY to pool row

apps/hyperdrive-trading/src/ui/base/components/GradientBadge.tsx

@@ -0,0 +1,9 @@
+import { PropsWithChildren, ReactElement } from "react";
+
+export function GradientBadge({ children }: PropsWithChildren): ReactElement {
+  return (
+    <div className="daisy-badge bg-accent/20 py-3">
+      <div className="gradient-text">{children}</div>
+    </div>
+  );
+}

apps/hyperdrive-trading/src/ui/landing/Landing.tsx

@@ -3,16 +3,14 @@ import { PoolsList } from "src/ui/markets/PoolsList";
 
 export function Landing(): ReactElement | null {
   return (
-    <div className="mx-[2vw] mt-4 space-y-8 lg:w-[900px]">
+    <div className="mx-[2vw] mt-4 space-y-8 lg:w-[1064px]">
       <div className="space-y-4">
-        <h1 className="gradient-text text-h3 font-medium md:text-h2">
-          Fixed and variable yields at your control.
+        <h1 className="gradient-text text-h4 font-medium md:text-h4">
+          Hyperdrive Pools
         </h1>
         <p className="font-inter text-lg leading-bodyText text-neutral-content">
-          Lock in a fixed rate with a <strong>Long</strong>, boost your exposure
-          to the yield source with a <strong>Short</strong>, or provide
-          liquidity to gain exposure to the yield source <strong>and</strong>{" "}
-          Hyperdrive trading fees at the same time.
+          Earn predictable fixed rate yield or multiply your capital exposure to
+          DeFi&apos;s top variable rates.
         </p>
       </div>
       <PoolsList />

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

@@ -47,7 +47,7 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
             chainId: hyperdrive.chainId.toString(),
           }}
           search={{ position: "long" }}
-          className="daisy-btn h-10 min-h-10 w-10/12 rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:w-full sm:bg-gray-600"
+          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:bg-gray-600 md:w-28"
           onClick={(e) => {
             e.stopPropagation();
             window.plausible("positionCtaClick", {
@@ -62,7 +62,7 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
             });
           }}
         >
-          Long
+          Open Long
         </Link>
       }
     />

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

@@ -39,7 +39,7 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
             chainId: hyperdrive.chainId.toString(),
           }}
           search={{ position: "lp" }}
-          className="daisy-btn h-10 min-h-10 w-10/12 rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:w-full sm:bg-gray-600"
+          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:bg-gray-600 md:w-32"
           onClick={(e) => {
             e.stopPropagation();
             window.plausible("positionCtaClick", {
@@ -56,7 +56,7 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
             });
           }}
         >
-          Supply
+          Add Liquidity
         </Link>
       }
     />

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

@@ -17,7 +17,7 @@ import { AssetStack } from "src/ui/markets/AssetStack";
 import { formatTermLength2 } from "src/ui/markets/formatTermLength";
 import { FixedAprCta } from "src/ui/markets/PoolRow/FixedAprCta";
 import { LpApyCta } from "src/ui/markets/PoolRow/LpApyCta";
-import { YieldMultiplierCta } from "src/ui/markets/PoolRow/YieldMultiplierCta";
+import { VariableApyCta } from "src/ui/markets/PoolRow/VariableApyCta";
 import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";
 import { useTokenFiatPrice } from "src/ui/token/hooks/useTokenFiatPrice";
 export interface PoolRowProps {
@@ -90,7 +90,7 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
     >
       <div className="flex flex-col justify-between gap-6 pt-2 sm:pt-0 lg:flex-row lg:gap-4">
         {/* Left side */}
-        <div className="flex flex-col items-center sm:flex-row sm:gap-6 lg:w-[440px]">
+        <div className="flex shrink-0 flex-col items-center sm:flex-row sm:gap-6 lg:w-[440px]">
           <div
             className={
               // Set a fixed width so pools with one or two asset icons still
@@ -174,10 +174,16 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
         </div>
 
         {/* Right side */}
-        <div className="flex shrink-0 flex-col items-center justify-between gap-6 sm:flex-row sm:gap-10 lg:items-end lg:justify-start">
-          <FixedAprCta hyperdrive={hyperdrive} />
-          <YieldMultiplierCta hyperdrive={hyperdrive} />
-          <LpApyCta hyperdrive={hyperdrive} />
+        <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]">
+            <FixedAprCta hyperdrive={hyperdrive} />
+          </div>
+          <div className="w-full lg:w-[181px]">
+            <VariableApyCta hyperdrive={hyperdrive} />
+          </div>
+          <div className="w-full lg:w-[122px]">
+            <LpApyCta hyperdrive={hyperdrive} />
+          </div>
         </div>
       </div>
     </Well>

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

@@ -31,7 +31,7 @@ export function PoolStat({
   }
 
   return (
-    <div className="flex w-full flex-col items-center gap-1.5 sm:w-28 sm:items-start">
+    <div className="flex shrink-0 flex-col items-center gap-1.5 sm:items-start">
       <p
         data-tip={labelTooltip}
         className={

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

@@ -4,23 +4,31 @@ 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 { YieldMultiplierStat } from "src/ui/markets/PoolRow/YieldMultiplierStat";
+import { VariableApyStat } from "src/ui/markets/PoolRow/VariableApyStat";
+import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
 import { useAccount } from "wagmi";
 
 interface YieldMultiplierCtaProps {
   hyperdrive: HyperdriveConfig;
 }
 
-export function YieldMultiplierCta({
+export function VariableApyCta({
   hyperdrive,
 }: YieldMultiplierCtaProps): ReactElement {
   const { address: account } = useAccount();
+
+  const { vaultRate } = useYieldSourceRate({
+    chainId: hyperdrive.chainId,
+    hyperdriveAddress: hyperdrive.address,
+  });
   const { longPrice, longPriceStatus } = useCurrentLongPrice({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
 
-  const label = "Yield Multiplier";
+  const label = vaultRate
+    ? `Variable APY (${vaultRate.ratePeriodDays}d)`
+    : "Variable APY";
   const multiplier =
     longPriceStatus === "success" && longPrice
       ? calculateMarketYieldMultiplier(longPrice)
@@ -30,14 +38,10 @@ export function YieldMultiplierCta({
     <PoolStat
       label={label}
       value={
-        multiplier ? (
-          <YieldMultiplierStat
-            hyperdriveAddress={hyperdrive.address}
-            chainId={hyperdrive.chainId}
-          />
-        ) : (
-          "-"
-        )
+        <VariableApyStat
+          hyperdriveAddress={hyperdrive.address}
+          chainId={hyperdrive.chainId}
+        />
       }
       action={
         <Link
@@ -47,7 +51,7 @@ export function YieldMultiplierCta({
             chainId: hyperdrive.chainId.toString(),
           }}
           search={{ position: "short" }}
-          className="daisy-btn h-10 min-h-10 w-10/12 rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:w-full sm:bg-gray-600"
+          className="daisy-btn h-10 min-h-10 w-full rounded-full bg-gray-500 sm:daisy-btn-sm hover:bg-gray-500 sm:h-8 sm:bg-gray-600 md:w-28"
           onClick={(e) => {
             e.stopPropagation();
             window.plausible("positionCtaClick", {
@@ -62,7 +66,7 @@ export function YieldMultiplierCta({
             });
           }}
         >
-          Short
+          Open Short
         </Link>
       }
     />

apps/hyperdrive-trading/src/ui/markets/PoolRow/YieldMultiplierStat.tsx → apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx

@@ -8,13 +8,16 @@ import { SparklesIcon } from "@heroicons/react/16/solid";
 import { ChartBarIcon } from "@heroicons/react/24/solid";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { ReactNode } from "react";
+import { formatRate } from "src/base/formatRate";
 import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
+import { GradientBadge } from "src/ui/base/components/GradientBadge";
 import { useIsNewPool } from "src/ui/hyperdrive/hooks/useIsNewPool";
 import { useCurrentLongPrice } from "src/ui/hyperdrive/longs/hooks/useCurrentLongPrice";
+import { PercentLabel } from "src/ui/markets/PoolRow/PercentLabel";
 import { useRewards } from "src/ui/rewards/useRewards";
 import { useYieldSourceRate } from "src/ui/vaults/useYieldSourceRate";
 import { Address } from "viem";
-export function YieldMultiplierStat({
+export function VariableApyStat({
   hyperdriveAddress,
   chainId,
 }: {
@@ -39,18 +42,40 @@ export function YieldMultiplierStat({
 
   const multiplierLabel =
     longPriceStatus === "success" && longPrice
-      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 2, rounding: "trunc" })}x`
+      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 1 })}x`
       : undefined;
 
-  if (!appConfigRewards?.length && multiplierLabel) {
-    return multiplierLabel;
+  if (!appConfigRewards?.length && multiplierLabel && yieldSourceRate) {
+    return (
+      <div className="flex items-center gap-2 whitespace-nowrap">
+        <PercentLabel
+          value={formatRate({
+            rate: yieldSourceRate.netVaultRate,
+            includePercentSign: false,
+          })}
+          className="text-h4"
+        />
+        <GradientBadge>{multiplierLabel}</GradientBadge>
+      </div>
+    );
   }
 
   return (
     <Tooltip.Provider>
       <Tooltip.Root>
-        <Tooltip.Trigger className="flex items-center gap-1 whitespace-nowrap">
-          {multiplierLabel}⚡
+        <Tooltip.Trigger className="flex items-center gap-2 whitespace-nowrap">
+          {yieldSourceRate ? (
+            <PercentLabel
+              value={formatRate({
+                rate: yieldSourceRate.netVaultRate,
+                includePercentSign: false,
+              })}
+              className="text-h4"
+            />
+          ) : (
+            "-"
+          )}
+          <GradientBadge>{multiplierLabel}</GradientBadge>⚡
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content