Add Rewards to Add Liquidity form (#1685)

* Add Rewards to Add Liquidity form

* Only show rewards indicator when rewards exist

* Put yield rate on the left

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx

@@ -34,6 +34,8 @@ import { useLpShares } from "src/ui/hyperdrive/lp/hooks/useLpShares";
 import { useLpSharesTotalSupply } from "src/ui/hyperdrive/lp/hooks/useLpSharesTotalSupply";
 import { usePreviewAddLiquidity } from "src/ui/hyperdrive/lp/hooks/usePreviewAddLiquidity";
 import { PositionPicker } from "src/ui/markets/PositionPicker";
+import { RewardsTooltip } from "src/ui/rewards/RewardsTooltip";
+import { useRewards } from "src/ui/rewards/useRewards";
 import { ApproveTokenChoices } from "src/ui/token/ApproveTokenChoices";
 import { SlippageSettings } from "src/ui/token/SlippageSettings";
 import { TokenInput } from "src/ui/token/TokenInput";
@@ -336,17 +338,17 @@ export function AddLiquidityForm({
       }
       primaryStats={
         <div className="flex flex-row justify-between px-4 py-8">
+          <div className="flex-1">
+            <LpApyStat hyperdrive={hyperdrive} />
+          </div>
+          <div className="daisy-divider daisy-divider-horizontal mx-0" />
           <div className="flex-1">
             <YouReceiveStat
               addLiquidityPreviewStatus={addLiquidityPreviewStatus}
               lpSharesOut={lpSharesOut}
               hyperdrive={hyperdrive}
             />
           </div>
-          <div className="daisy-divider daisy-divider-horizontal mx-0" />
-          <div className="flex-1">
-            <LpApyStat hyperdrive={hyperdrive} />
-          </div>
         </div>
       }
       disclaimer={(() => {
@@ -482,6 +484,7 @@ function YouReceiveStat({
   });
   return (
     <PrimaryStat
+      alignment="right"
       label="You receive"
       subValue={
         addLiquidityPreviewStatus === "loading" ? (
@@ -534,42 +537,49 @@ function LpApyStat({ hyperdrive }: { hyperdrive: HyperdriveConfig }) {
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
+  const { rewards } = useRewards(hyperdrive);
 
   const { vaultRate, vaultRateStatus } = useYieldSourceRate({
     hyperdriveAddress: hyperdrive.address,
     chainId: hyperdrive.chainId,
   });
 
-  const showSkeleton = !lpApy && lpApyStatus === "loading";
   const yieldSource = getYieldSource({
     hyperdriveAddress: hyperdrive.address,
     hyperdriveChainId: hyperdrive.chainId,
     appConfig,
   });
   return (
     <PrimaryStat
-      alignment="right"
+      valueLoading={!lpApy && lpApyStatus === "loading"}
       label="LP APY"
       value={(() => {
-        if (showSkeleton) {
-          return <Skeleton />;
-        }
-        if (lpApy === undefined || lpApy.isNew) {
-          return <div className="flex gap-2 text-h3 font-bold">✨New✨</div>;
-        }
-
         return (
           <span className="text-h3 font-bold">
-            {formatRate({ rate: lpApy?.netLpApy })}
+            {isNewPool ? (
+              "✨New✨"
+            ) : rewards?.length ? (
+              <RewardsTooltip
+                hyperdriveAddress={hyperdrive.address}
+                baseRate={lpApy?.lpApy}
+                netRate={lpApy?.netLpApy}
+                chainId={hyperdrive.chainId}
+              >
+                <span className="gradient-text">
+                  {formatRate({ rate: lpApy?.netLpApy ?? 0n })}
+                </span>
+                ⚡
+              </RewardsTooltip>
+            ) : (
+              <span className="gradient-text">
+                {formatRate({ rate: lpApy?.netLpApy ?? 0n })}
+              </span>
+            )}
           </span>
         );
       })()}
-      tooltipContent="The annual percentage yield projection for providing liquidity."
+      tooltipContent="The projected annual percentage yield for providing liquidity."
       tooltipPosition="left"
-      valueContainerClassName={classNames({
-        "bg-gradient-to-r from-accent to-primary bg-clip-text text-transparent text-h3 font-bold":
-          !isNewPool, // Don't use gradient text when displaying NEW, the emojis give enough emphasis.
-      })}
       subValue={
         vaultRateStatus === "success" && vaultRate ? (
           <div>

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

@@ -38,6 +38,7 @@ import { useOpenShort } from "src/ui/hyperdrive/shorts/hooks/useOpenShort";
 import { usePreviewOpenShort } from "src/ui/hyperdrive/shorts/hooks/usePreviewOpenShort";
 import { PositionPicker } from "src/ui/markets/PositionPicker";
 import { RewardsTooltip } from "src/ui/rewards/RewardsTooltip";
+import { useRewards } from "src/ui/rewards/useRewards";
 import { ApproveTokenChoices } from "src/ui/token/ApproveTokenChoices";
 import { SlippageSettings } from "src/ui/token/SlippageSettings";
 import { TokenInput } from "src/ui/token/TokenInput";
@@ -69,6 +70,7 @@ export function OpenShortForm({
     chainId: hyperdrive.chainId,
   });
 
+  const { rewards } = useRewards(hyperdrive);
   const { poolInfo } = usePoolInfo({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
@@ -78,7 +80,7 @@ export function OpenShortForm({
     hyperdriveAddress: hyperdrive.address,
     appConfig,
   });
-  const { vaultRate, vaultRateStatus } = useYieldSourceRate({
+  const { vaultRate } = useYieldSourceRate({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
   });
@@ -473,7 +475,7 @@ export function OpenShortForm({
               <span className="text-h3 font-bold">
                 {isNewPool ? (
                   "✨New✨"
-                ) : (
+                ) : rewards?.length ? (
                   <RewardsTooltip
                     hyperdriveAddress={hyperdrive.address}
                     baseRate={vaultRate?.vaultRate}
@@ -482,6 +484,8 @@ export function OpenShortForm({
                   >
                     {formatRate({ rate: vaultRate?.netVaultRate ?? 0n })}⚡
                   </RewardsTooltip>
+                ) : (
+                  formatRate({ rate: vaultRate?.netVaultRate ?? 0n })
                 )}
               </span>
             }

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

@@ -45,7 +45,8 @@ export function LpApyStat({
     >
       {netApyLabel ? (
         <>
-          <PercentLabel value={netApyLabel} />⚡
+          <PercentLabel value={netApyLabel} />
+          <span className="mx-1">⚡</span>
         </>
       ) : null}
     </RewardsTooltip>

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 { 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 { RewardsTooltip } from "src/ui/rewards/RewardsTooltip";
@@ -23,13 +22,12 @@ export function VariableApyStat({
     hyperdriveChainId: chainId,
     appConfig,
   });
-  const { rewards: appConfigRewards } = useRewards(hyperdrive);
+  const { rewards } = useRewards(hyperdrive);
   const { vaultRate: yieldSourceRate, vaultRateStatus: yieldSourceRateStatus } =
     useYieldSourceRate({
       chainId,
       hyperdriveAddress,
     });
-  const isNewPool = useIsNewPool({ hyperdrive });
   const { longPrice, longPriceStatus } = useCurrentLongPrice({
     chainId: hyperdrive.chainId,
     hyperdriveAddress: hyperdrive.address,
@@ -40,15 +38,18 @@ export function VariableApyStat({
       ? `${calculateMarketYieldMultiplier(longPrice).format({ decimals: 1 })}x`
       : undefined;
 
-  if (!appConfigRewards?.length && multiplierLabel && yieldSourceRate) {
+  if (yieldSourceRateStatus !== "success") {
+    return <Skeleton width={100} />;
+  }
+  if (!rewards?.length && multiplierLabel && yieldSourceRate) {
     return (
       <div className="flex items-center gap-2 whitespace-nowrap">
         <PercentLabel
           value={formatRate({
             rate: yieldSourceRate.netVaultRate,
             includePercentSign: false,
           })}
-          className="text-h4"
+          className="mr-1 text-h4"
         />
         <GradientBadge>{multiplierLabel}</GradientBadge>
       </div>
@@ -62,18 +63,15 @@ export function VariableApyStat({
       baseRate={yieldSourceRate?.vaultRate}
       netRate={yieldSourceRate?.netVaultRate}
     >
-      {yieldSourceRateStatus === "success" ? (
-        <PercentLabel
-          value={formatRate({
-            rate: yieldSourceRate?.netVaultRate ?? 0n,
-            includePercentSign: false,
-          })}
-          className="text-h4"
-        />
-      ) : (
-        <Skeleton width={100} />
-      )}
-      <GradientBadge>{multiplierLabel}</GradientBadge>⚡
+      <PercentLabel
+        value={formatRate({
+          rate: yieldSourceRate?.netVaultRate ?? 0n,
+          includePercentSign: false,
+        })}
+        className="mr-2 text-h4"
+      />
+      <GradientBadge>{multiplierLabel}</GradientBadge>
+      <span className="mx-1">⚡</span>
     </RewardsTooltip>
   );
 }

apps/hyperdrive-trading/src/ui/rewards/RewardsTooltip.tsx

@@ -44,16 +44,14 @@ export function RewardsTooltip({
 
   if (!appConfigRewards?.length && multiplierLabel && (!netRate || !baseRate)) {
     return (
-      <div className="flex items-center gap-2 whitespace-nowrap">
-        {children}
-      </div>
+      <div className="flex items-center whitespace-nowrap">{children}</div>
     );
   }
 
   return (
     <Tooltip.Provider>
       <Tooltip.Root>
-        <Tooltip.Trigger className="flex items-center gap-2 whitespace-nowrap">
+        <Tooltip.Trigger className="flex items-center whitespace-nowrap">
           {children}
         </Tooltip.Trigger>
         <Tooltip.Portal>