Cleanup formatRate util (#1631)

* Refactor to options object

* Fix tests

Author: DannyDelott

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"