Add isNewDesign feature flag

DannyDelott · DannyDelott · commit cf8870d98c0d · 2025-04-04T08:53:48.000-07:00
diff --git a/apps/hyperdrive-trading/src/ui/app/Navbar/DevtoolsMenu.tsx b/apps/hyperdrive-trading/src/ui/app/Navbar/DevtoolsMenu.tsx
@@ -20,6 +20,9 @@ export function DevtoolsMenu(): ReactElement {
         <FeatureFlagMenuItem flagName="show-paused-pools">
           Show paused pools
         </FeatureFlagMenuItem>
+        <FeatureFlagMenuItem flagName="new-design">
+          New design
+        </FeatureFlagMenuItem>
         <MenuItem
           onClick={() => {
             window.localStorage.clear();
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -49,6 +49,7 @@ export function OpenLongForm({
   onOpenLong,
 }: OpenLongFormProps): ReactElement {
   const { address: account } = useAccount();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const connectedChainId = useChainId();
   const { marketState } = useMarketState({
     hyperdriveAddress: hyperdrive.address,
@@ -450,7 +451,7 @@ export function OpenLongForm({
               onOpenLong?.(e);
             }}
           >
-            Buy Fixed
+            {isNewDesign ? "Buy Fixed" : "Open Long"}
           </button>
         );
       })()}
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx
@@ -3,6 +3,7 @@ import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
 import { formatRate } from "src/base/formatRate";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 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";
@@ -14,6 +15,7 @@ interface FixedAprCtaProps {
 
 export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
   const { address: account } = useAccount();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const { fixedApr, fixedRateStatus } = useFixedRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
@@ -59,6 +61,36 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
           )
         }
         isLoading={fixedRateStatus === "loading"}
+        action={
+          isNewDesign ? null : (
+            <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>
+          )
+        }
       />
     </Link>
   );
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyCta.tsx
@@ -2,6 +2,7 @@ import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 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";
@@ -14,6 +15,7 @@ interface LpApyCtaProps {
 
 export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
   const { address: account } = useAccount();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const { lpApy, lpApyStatus } = useLpApy({
     hyperdriveAddress: hyperdrive.address,
     chainId: hyperdrive.chainId,
@@ -62,6 +64,36 @@ export function LpApyCta({ hyperdrive }: LpApyCtaProps): ReactElement {
             hyperdriveAddress={hyperdrive.address}
           />
         }
+        action={
+          isNewDesign ? null : (
+            <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>
+          )
+        }
       />
     </Link>
   );
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/PoolRow.tsx
@@ -12,6 +12,7 @@ import { isTestnetChain } from "src/chains/isTestnetChain";
 import { getDepositAssets } from "src/hyperdrive/getDepositAssets";
 import { useAppConfigForConnectedChain } from "src/ui/appconfig/useAppConfigForConnectedChain";
 import { Well } from "src/ui/base/components/Well/Well";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 import { formatCompact } from "src/ui/base/formatting/formatCompact";
 import { usePresentValue } from "src/ui/hyperdrive/hooks/usePresentValue";
 import { AssetStack } from "src/ui/markets/AssetStack";
@@ -37,6 +38,7 @@ const pinnedBorderClassNames: Record<number, string> = {
 export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
   const navigate = useNavigate();
   const appConfig = useAppConfigForConnectedChain();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const { chains } = appConfig;
   const chainInfo = chains[hyperdrive.chainId];
 
@@ -175,13 +177,29 @@ export function PoolRow({ hyperdrive }: PoolRowProps): ReactElement {
 
         {/* Right side */}
         <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]">
+          <div
+            className={
+              isNewDesign
+                ? "size-full border-r border-gray-500/20 lg:w-[112px]"
+                : "w-full lg:w-[112px]"
+            }
+          >
             <FixedAprCta hyperdrive={hyperdrive} />
           </div>
-          <div className="size-full border-r border-gray-500/20 lg:w-[181px]">
+          <div
+            className={
+              isNewDesign
+                ? "size-full border-r border-gray-500/20 lg:w-[181px]"
+                : "w-full lg:w-[181px]"
+            }
+          >
             <VariableApyCta hyperdrive={hyperdrive} />
           </div>
-          <div className="size-full lg:w-[122px]">
+          <div
+            className={
+              isNewDesign ? "size-full lg:w-[122px]" : "w-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
@@ -12,6 +12,11 @@ export interface PoolStatProps {
   overlay?: ReactNode;
   value: ReactNode;
   isLoading?: boolean;
+
+  /**
+   * @deprecated
+   */
+  action?: ReactNode;
   isNew?: boolean;
   variant?: "default" | "gradient";
 }
@@ -22,6 +27,7 @@ export function PoolStat({
   overlay,
   isNew = false,
   variant = "default",
+  action,
   isLoading = false,
 }: PoolStatProps): ReactElement {
   let displayValue;
@@ -43,6 +49,7 @@ 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
@@ -2,6 +2,9 @@ import { fixed } from "@delvtech/fixed-point-wasm";
 import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link } from "@tanstack/react-router";
 import { ReactElement } from "react";
+import { calculateMarketYieldMultiplier } from "src/hyperdrive/calculateMarketYieldMultiplier";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
+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";
@@ -17,12 +20,23 @@ export function VariableApyCta({
   hyperdrive,
 }: YieldMultiplierCtaProps): ReactElement {
   const { address: account } = useAccount();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const { vaultRate: yieldSourceRate } = useYieldSourceRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
+
   const { rewards } = useOpenShortRewards({ hyperdriveConfig: hyperdrive });
 
+  const { longPrice, longPriceStatus } = useCurrentLongPrice({
+    chainId: hyperdrive.chainId,
+    hyperdriveAddress: hyperdrive.address,
+  });
+  const multiplier =
+    longPriceStatus === "success" && longPrice
+      ? calculateMarketYieldMultiplier(longPrice)
+      : undefined;
+
   const label = yieldSourceRate
     ? `Variable APY (${yieldSourceRate.ratePeriodDays}d)`
     : "Variable APY";
@@ -70,6 +84,37 @@ export function VariableApyCta({
             chainId={hyperdrive.chainId}
           />
         }
+        action={
+          <div className="flex flex-col gap-2">
+            {isNewDesign ? null : (
+              <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>
+            )}
+            <span className="gradient-text text-left font-inter text-sm font-medium">{`${multiplier?.format({ decimals: 0 })}x yield exposure`}</span>
+          </div>
+        }
       />
     </Link>
   );
diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/VariableApyStat.tsx
@@ -3,9 +3,7 @@ import { getHyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { ReactNode } from "react";
 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 { 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";
@@ -30,10 +28,6 @@ export function VariableApyStat({
       chainId,
       hyperdriveAddress,
     });
-  const { longPrice, longPriceStatus } = useCurrentLongPrice({
-    chainId: hyperdrive.chainId,
-    hyperdriveAddress: hyperdrive.address,
-  });
 
   const { shortApr, shortRateStatus } = useShortRate({
     chainId: hyperdrive.chainId,
@@ -44,11 +38,6 @@ export function VariableApyStat({
     variableApy: yieldSourceRate?.netVaultRate,
   });
 
-  const multiplierLabel =
-    longPriceStatus === "success" && longPrice
-      ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 0 })}x`
-      : undefined;
-
   if (yieldSourceRateStatus !== "success" || shortRateStatus !== "success") {
     return <Skeleton width={100} />;
   }
@@ -64,7 +53,6 @@ export function VariableApyStat({
         />
         {rewards?.length ? <span className="mx-1">⚡</span> : null}
       </div>
-      <span className="gradient-text text-left font-inter text-md font-medium">{`Up to ${multiplierLabel} exposure`}</span>
     </div>
   );
 }
diff --git a/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx b/apps/hyperdrive-trading/src/ui/markets/PositionPicker.tsx
@@ -2,6 +2,7 @@ import { HyperdriveConfig } from "@delvtech/hyperdrive-appconfig";
 import { Link, useSearch } from "@tanstack/react-router";
 import classNames from "classnames";
 import { ReactElement } from "react";
+import { useFeatureFlag } from "src/ui/base/featureFlags/featureFlags";
 import { formatTermLength2 } from "src/ui/markets/formatTermLength";
 import { MARKET_DETAILS_ROUTE } from "src/ui/markets/routes";
 import { useAccount } from "wagmi";
@@ -12,6 +13,7 @@ export function PositionPicker({
   hyperdrive: HyperdriveConfig;
 }): ReactElement {
   const { address: account } = useAccount();
+  const { isFlagEnabled: isNewDesign } = useFeatureFlag("new-design");
   const { position: activePosition = "long" } = useSearch({
     from: MARKET_DETAILS_ROUTE,
   });
@@ -67,7 +69,7 @@ export function PositionPicker({
           });
         }}
       >
-        Fixed
+        {isNewDesign ? "Fixed" : "Long"}
       </Link>
       <Link
         className={classNames(
diff --git a/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx b/apps/hyperdrive-trading/src/ui/onboarding/faqData2.tsx
@@ -1,21 +1,24 @@
 export const faqData2 = [
   {
-    question: "How do fixed rates work?",
+    // This should be revised when the new-design feature flag is lifted
+    //  See https://github.com/delvtech/hyperdrive-frontend/commit/682098738b412ef46b665c76194e481d22632a9d
+    question: "How can I get fixed rates?",
     answer: (
       <>
+        <p>Open a Long and hold it to maturity.</p>
         <p>
-          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.
+          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.
         </p>
         <p>
-          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.
+          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.
         </p>
         <p>
-          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{" "}
+          Users can also take speculative Long 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"
diff --git a/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx b/apps/hyperdrive-trading/src/ui/portfolio/Portfolio.tsx
diff --git a/packages/hyperdrive-js/package.json b/packages/hyperdrive-js/package.json
diff --git a/packages/hyperdrive-js/src/hyperdrive/ReadHyperdrive.ts b/packages/hyperdrive-js/src/hyperdrive/ReadHyperdrive.ts
