Cleanup formatRate util

apps/hyperdrive-trading/src/base/formatRate.test.ts

@@ -3,33 +3,37 @@ import { parseUnits } from "viem";
 import { expect, test } from "vitest";
 
 test("formatRate should return positive bigints formatted as a percent", async () => {
-  const value = formatRate(BigInt(1e18), 18);
+  const value = formatRate({ rate: BigInt(1e18) });
   expect(value).toEqual("100.00");
 
-  const valueWithCommas = formatRate(BigInt(10e18), 18);
+  const valueWithCommas = formatRate({ rate: BigInt(10e18) });
   expect(valueWithCommas).toEqual("1,000.00");
 
   // rounds down
-  const value2 = formatRate(parseUnits("0.056721", 18), 18);
+  const value2 = formatRate({ rate: parseUnits("0.056721", 18) });
   expect(value2).toEqual("5.67");
 
   // rounds up
-  const value3 = formatRate(parseUnits("0.056781", 18), 18);
+  const value3 = formatRate({ rate: parseUnits("0.056781", 18) });
   expect(value3).toEqual("5.68");
 });
 
 test("formatRate should return negative bigints formatted as a percent", async () => {
-  const value = formatRate(BigInt(-1e18), 18);
+  const value = formatRate({ rate: BigInt(-1e18) });
   expect(value).toEqual("-100.00");
 
-  const valueWithCommas = formatRate(BigInt(-10e18), 18);
+  const valueWithCommas = formatRate({ rate: BigInt(-10e18) });
   expect(valueWithCommas).toEqual("-1,000.00");
 
   // rounds down
-  const value2 = formatRate(parseUnits("-1.0281219", 18), 18);
+  const value2 = formatRate({
+    rate: parseUnits("-1.0281219", 18),
+  });
   expect(value2).toEqual("-102.81");
 
   // rounds up
-  const value3 = formatRate(parseUnits("-0.0297902", 18), 18);
+  const value3 = formatRate({
+    rate: parseUnits("-0.0297902", 18),
+  });
   expect(value3).toEqual("-2.98");
 });

apps/hyperdrive-trading/src/base/formatRate.ts

@@ -1,11 +1,16 @@
 import { fixed } from "@delvtech/fixed-point-wasm";
 
-export function formatRate(
-  rate: bigint,
-  decimals = 18,
+/**
+ * Formats a rate represented as an 18 decimal bigint as a percentage string.
+ */
+export function formatRate({
+  rate,
   includePercentSign = true,
-): string {
-  let formatted = fixed(rate, decimals).format({
+}: {
+  rate: bigint;
+  includePercentSign?: boolean;
+}): string {
+  let formatted = fixed(rate).format({
     percent: true,
     decimals: 2,
   });

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx

@@ -140,7 +140,7 @@ export function OpenLongPreview({
                   <span className="flex gap-2">
                     <span className="text-base-content/80">{`${fixedApr?.formatted}`}</span>
                     <ArrowRightIcon className="h-4 text-base-content/80" />
-                    {formatRate(spotRateAfterOpen)}
+                    {formatRate({ rate: spotRateAfterOpen })}
                   </span>
                 ) : (
                   "-"
@@ -220,5 +220,5 @@ function getMarketImpactLabel(
   if (isChangeInFixedAprLessThanOneBasisPoint) {
     return "-<0.01%";
   }
-  return `-${formatRate(changeInFixedApr)}`;
+  return `-${formatRate({ rate: changeInFixedApr })}`;
 }

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx

@@ -73,14 +73,14 @@ export function OpenLongStats({
           ) : (
             <span className="text-h3 font-bold">
               {bondAmount > 0 ? (
-                `${formatRate(
-                  calculateAprFromPrice({
+                `${formatRate({
+                  rate: calculateAprFromPrice({
                     positionDuration:
                       hyperdrive.poolConfig.positionDuration || 0n,
                     baseAmount: amountPaidInBase,
                     bondAmount: bondAmount,
                   }),
-                )}`
+                })}`
               ) : fixedApr?.formatted ? (
                 `${fixedApr.formatted}`
               ) : (

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx

@@ -348,7 +348,7 @@ function getColumns({
 
         return (
           <div className="flex flex-col">
-            <div>{formatRate(fixedRate)} APR</div>
+            <div>{formatRate({ rate: fixedRate })} APR</div>
             <span className="flex font-dmMono text-neutral-content">
               {formatBalance({
                 balance: row.original.details?.bondAmount || 0n,

apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useFixedRate.ts

@@ -48,11 +48,11 @@ export function useFixedRate({
           return {
             fixedApr: {
               apr: fixedApr,
-              formatted: formatRate(fixedApr),
+              formatted: formatRate({ rate: fixedApr }),
             },
             fixedRoi: {
               roi: fixedRoi,
-              formatted: formatRate(fixedRoi),
+              formatted: formatRate({ rate: fixedRoi }),
             },
           };
         }

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

@@ -396,7 +396,7 @@ export function AddLiquidityForm({
               lpApy === undefined || lpApy.isNew ? (
                 <div className="flex gap-2">✨New✨</div>
               ) : (
-                `${formatRate(lpApy.lpApy)}`
+                `${formatRate({ rate: lpApy.lpApy })}`
               )
             }
             tooltipContent="The annual percentage yield projection for providing liquidity."

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

@@ -547,7 +547,7 @@ function LpApyStat({ hyperdrive }: { hyperdrive: HyperdriveConfig }) {
 
         return (
           <span className="text-h3 font-bold">
-            {formatRate(lpApy?.netLpApy)}
+            {formatRate({ rate: lpApy?.netLpApy })}
           </span>
         );
       })()}
@@ -563,7 +563,7 @@ function LpApyStat({ hyperdrive }: { hyperdrive: HyperdriveConfig }) {
             {appConfig.yieldSources[hyperdrive.yieldSource].shortName} @{" "}
             {isNewPool
               ? "✨New✨"
-              : `${formatRate(vaultRate.netVaultRate)} APY`}
+              : `${formatRate({ rate: vaultRate.netVaultRate })} APY`}
           </div>
         ) : (
           <Skeleton className="w-42 h-8" />

apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx

@@ -111,7 +111,7 @@ export function LpCurrentValueCell({
         </>
       </span>
       <span className="text-neutral-content">
-        {`${formatRate(withdrawablePercent.div(parseFixed("100")).bigint)} withdrawable`}
+        {`${formatRate({ rate: withdrawablePercent.div(parseFixed("100")).bigint })} withdrawable`}
       </span>
     </div>
   );

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

@@ -372,7 +372,7 @@ export function OpenShortForm({
                   {appConfig.yieldSources[hyperdrive.yieldSource].shortName} @{" "}
                   {isNewPool
                     ? "✨New✨"
-                    : `${formatRate(vaultRate.netVaultRate)} APY`}
+                    : `${formatRate({ rate: vaultRate.netVaultRate })} APY`}
                 </>
               ) : null
             }
@@ -476,7 +476,7 @@ export function OpenShortForm({
             tooltipContent={`The fixed rate you pay upfront that determines the cost-basis of this short.`}
             value={
               <span className="text-h3 font-bold">
-                {formatRate(fixedRatePaid || 0n)}
+                {formatRate({ rate: fixedRatePaid || 0n })}
               </span>
             }
             valueContainerClassName="flex items-end"

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

@@ -167,7 +167,7 @@ export function OpenShortPreview({
                   <span className="flex gap-2 text-base-content">
                     <span className="text-neutral-content">{`${fixedApr?.formatted} `}</span>
                     <ArrowRightIcon className="h-4 text-neutral-content" />
-                    {formatRate(spotRateAfterOpen)}
+                    {formatRate({ rate: spotRateAfterOpen })}
                   </span>
                 ) : (
                   "-"
@@ -214,5 +214,5 @@ function getMarketImpactLabel(
   if (isChangeInFixedAprLessThanOneBasisPoint) {
     return "+<0.01%";
   }
-  return `+${formatRate(changeInFixedApr)}`;
+  return `+${formatRate({ rate: changeInFixedApr })}`;
 }

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx

@@ -42,7 +42,7 @@ export function ShortRateAndSizeCell({
   return (
     <div className="flex flex-col">
       <div className="flex items-center gap-2 text-md">
-        <p>{`${formatRate(short.fixedRatePaid)} APR`}</p>
+        <p>{`${formatRate({ rate: short.fixedRatePaid })} APR`}</p>
         <div
           data-tip={
             "The difference between the fixed rate you shorted and the current fixed rate."
@@ -58,7 +58,7 @@ export function ShortRateAndSizeCell({
           )}
         >
           <span>{isPositiveChangeInValue ? "+" : ""}</span>
-          {formatRate(rateDifference)}
+          {formatRate({ rate: rateDifference })}
         </div>
       </div>
       <p className="text-neutral-content">{`${formatBalance({

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useShortRate.ts

@@ -79,9 +79,12 @@ export function useShortRate({
           return {
             shortApr: {
               apr: shortApr,
-              formatted: formatRate(shortApr),
+              formatted: formatRate({ rate: shortApr }),
+            },
+            shortRoi: {
+              roi: shortRoi,
+              formatted: formatRate({ rate: shortRoi }),
             },
-            shortRoi: { roi: shortRoi, formatted: formatRate(shortRoi) },
           };
         }
       : undefined,

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

@@ -24,7 +24,12 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement {
       label={label}
       value={
         fixedApr ? (
-          <PercentLabel value={formatRate(fixedApr.apr, 18, false)} />
+          <PercentLabel
+            value={formatRate({
+              rate: fixedApr.apr,
+              includePercentSign: false,
+            })}
+          />
         ) : (
           "-"
         )

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

@@ -29,13 +29,12 @@ export function LpApyStat({
   const { rewards: appConfigRewards } = useRewards(hyperdrive);
   const { lpApy } = useLpApy({ chainId, hyperdriveAddress });
 
-  const baseApyLabel = lpApy?.lpApy
-    ? // LP APY is always 18 decimals. Safe to hardcode this here.
-      formatRate(lpApy.lpApy)
-    : null;
+  const baseApyLabel = lpApy?.lpApy ? formatRate({ rate: lpApy.lpApy }) : null;
   const netApyLabel = lpApy?.netLpApy
-    ? // LP APY is always 18 decimals. Safe to hardcode this here.
-      formatRate(lpApy.netLpApy, 18, false)
+    ? formatRate({
+        rate: lpApy.netLpApy,
+        includePercentSign: false,
+      })
     : null;
 
   if (!appConfigRewards?.length && netApyLabel) {

apps/hyperdrive-trading/src/ui/vaults/useYieldSourceRate.ts

@@ -47,7 +47,7 @@ export function useYieldSourceRate({
           return {
             vaultRate: rate,
             netVaultRate: netRate,
-            formatted: formatRate(rate),
+            formatted: formatRate({ rate }),
             ratePeriodDays,
           };
         }