From b383e34997d3e0d0f5260e9beda969991b8f05cd Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Tue, 5 Nov 2024 14:28:45 -0800 Subject: [PATCH 1/2] Refactor to options object --- .../src/base/formatRate.test.ts | 22 ++++++++++++------- .../hyperdrive-trading/src/base/formatRate.ts | 15 ++++++++----- .../longs/OpenLongPreview/OpenLongPreview.tsx | 4 ++-- .../longs/OpenLongPreview/OpenLongStats.tsx | 6 ++--- .../OpenLongsTable/OpenLongsTableDesktop.tsx | 2 +- .../ui/hyperdrive/longs/hooks/useFixedRate.ts | 4 ++-- .../lp/AddLiquidityForm/AddLiquidityForm.tsx | 2 +- .../lp/AddLiquidityForm/AddLiquidityForm2.tsx | 4 ++-- .../LpCurrentValueCell.tsx | 2 +- .../shorts/OpenShortForm/OpenShortForm.tsx | 4 ++-- .../OpenShortPreview/OpenShortPreview.tsx | 4 ++-- .../OpenShortsTable/ShortRateAndSizeCell.tsx | 4 ++-- .../hyperdrive/shorts/hooks/useShortRate.ts | 7 ++++-- .../src/ui/markets/PoolRow/FixedAprCta.tsx | 7 +++++- .../src/ui/markets/PoolRow/LpApyStat.tsx | 11 +++++----- .../src/ui/vaults/useYieldSourceRate.ts | 2 +- 16 files changed, 59 insertions(+), 41 deletions(-) diff --git a/apps/hyperdrive-trading/src/base/formatRate.test.ts b/apps/hyperdrive-trading/src/base/formatRate.test.ts index fbe0a4a6e..13325617c 100644 --- a/apps/hyperdrive-trading/src/base/formatRate.test.ts +++ b/apps/hyperdrive-trading/src/base/formatRate.test.ts @@ -3,33 +3,39 @@ 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), + decimals: 18, + }); expect(value2).toEqual("-102.81"); // rounds up - const value3 = formatRate(parseUnits("-0.0297902", 18), 18); + const value3 = formatRate({ + rate: parseUnits("-0.0297902", 18), + decimals: 18, + }); expect(value3).toEqual("-2.98"); }); diff --git a/apps/hyperdrive-trading/src/base/formatRate.ts b/apps/hyperdrive-trading/src/base/formatRate.ts index 78ab9abb2..bf4230c0c 100644 --- a/apps/hyperdrive-trading/src/base/formatRate.ts +++ b/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, }); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx index 8272cb948..22cec7898 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx @@ -140,7 +140,7 @@ export function OpenLongPreview({ {`${fixedApr?.formatted}`} - {formatRate(spotRateAfterOpen)} + {formatRate({ rate: spotRateAfterOpen })} ) : ( "-" @@ -220,5 +220,5 @@ function getMarketImpactLabel( if (isChangeInFixedAprLessThanOneBasisPoint) { return "-<0.01%"; } - return `-${formatRate(changeInFixedApr)}`; + return `-${formatRate({ rate: changeInFixedApr })}`; } diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx index ab0c50a8b..802540e23 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongStats.tsx @@ -73,14 +73,14 @@ export function OpenLongStats({ ) : ( {bondAmount > 0 ? ( - `${formatRate( - calculateAprFromPrice({ + `${formatRate({ + rate: calculateAprFromPrice({ positionDuration: hyperdrive.poolConfig.positionDuration || 0n, baseAmount: amountPaidInBase, bondAmount: bondAmount, }), - )}` + })}` ) : fixedApr?.formatted ? ( `${fixedApr.formatted}` ) : ( diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx index ea0bacd00..dc409c397 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongsTable/OpenLongsTableDesktop.tsx @@ -348,7 +348,7 @@ function getColumns({ return (
-
{formatRate(fixedRate)} APR
+
{formatRate({ rate: fixedRate })} APR
{formatBalance({ balance: row.original.details?.bondAmount || 0n, diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useFixedRate.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useFixedRate.ts index c7bcccee1..05ec95cae 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/hooks/useFixedRate.ts +++ b/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 }), }, }; } diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx index c5ce026d1..be454b3b6 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx @@ -396,7 +396,7 @@ export function AddLiquidityForm({ lpApy === undefined || lpApy.isNew ? (
✨New✨
) : ( - `${formatRate(lpApy.lpApy)}` + `${formatRate({ rate: lpApy.lpApy })}` ) } tooltipContent="The annual percentage yield projection for providing liquidity." diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx index f63d574c8..5bde26501 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx @@ -547,7 +547,7 @@ function LpApyStat({ hyperdrive }: { hyperdrive: HyperdriveConfig }) { return ( - {formatRate(lpApy?.netLpApy)} + {formatRate({ rate: lpApy?.netLpApy })} ); })()} @@ -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`}
) : ( diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx index e66a63966..5fa89de96 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/LpAndWithdrawalSharesTable/LpCurrentValueCell.tsx @@ -111,7 +111,7 @@ export function LpCurrentValueCell({ - {`${formatRate(withdrawablePercent.div(parseFixed("100")).bigint)} withdrawable`} + {`${formatRate({ rate: withdrawablePercent.div(parseFixed("100")).bigint })} withdrawable`} ); diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx index e75bdaa0d..fccae2c42 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx +++ b/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={ - {formatRate(fixedRatePaid || 0n)} + {formatRate({ rate: fixedRatePaid || 0n })} } valueContainerClassName="flex items-end" diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx index e1208ee1d..17e5fff71 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx @@ -167,7 +167,7 @@ export function OpenShortPreview({ {`${fixedApr?.formatted} `} - {formatRate(spotRateAfterOpen)} + {formatRate({ rate: spotRateAfterOpen })} ) : ( "-" @@ -214,5 +214,5 @@ function getMarketImpactLabel( if (isChangeInFixedAprLessThanOneBasisPoint) { return "+<0.01%"; } - return `+${formatRate(changeInFixedApr)}`; + return `+${formatRate({ rate: changeInFixedApr })}`; } diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx index d6ef1b6f8..e5133dba4 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx +++ b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortsTable/ShortRateAndSizeCell.tsx @@ -42,7 +42,7 @@ export function ShortRateAndSizeCell({ return (
-

{`${formatRate(short.fixedRatePaid)} APR`}

+

{`${formatRate({ rate: short.fixedRatePaid })} APR`}

{isPositiveChangeInValue ? "+" : ""} - {formatRate(rateDifference)} + {formatRate({ rate: rateDifference })}

{`${formatBalance({ diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useShortRate.ts b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useShortRate.ts index 87ab427de..80683b3f6 100644 --- a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/useShortRate.ts +++ b/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, diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx index 2065bbd3c..c752e3d54 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx +++ b/apps/hyperdrive-trading/src/ui/markets/PoolRow/FixedAprCta.tsx @@ -24,7 +24,12 @@ export function FixedAprCta({ hyperdrive }: FixedAprCtaProps): ReactElement { label={label} value={ fixedApr ? ( - + ) : ( "-" ) diff --git a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyStat.tsx b/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyStat.tsx index 2df2aa04e..88ead749d 100644 --- a/apps/hyperdrive-trading/src/ui/markets/PoolRow/LpApyStat.tsx +++ b/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) { diff --git a/apps/hyperdrive-trading/src/ui/vaults/useYieldSourceRate.ts b/apps/hyperdrive-trading/src/ui/vaults/useYieldSourceRate.ts index d52dcfb49..ba3a77423 100644 --- a/apps/hyperdrive-trading/src/ui/vaults/useYieldSourceRate.ts +++ b/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, }; } From b71b694f9e5465782afa5d68d327634bf61f1f90 Mon Sep 17 00:00:00 2001 From: Danny Delott Date: Tue, 5 Nov 2024 15:25:17 -0800 Subject: [PATCH 2/2] Fix tests --- apps/hyperdrive-trading/src/base/formatRate.test.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/apps/hyperdrive-trading/src/base/formatRate.test.ts b/apps/hyperdrive-trading/src/base/formatRate.test.ts index 13325617c..5f60c3f70 100644 --- a/apps/hyperdrive-trading/src/base/formatRate.test.ts +++ b/apps/hyperdrive-trading/src/base/formatRate.test.ts @@ -28,14 +28,12 @@ test("formatRate should return negative bigints formatted as a percent", async ( // rounds down const value2 = formatRate({ rate: parseUnits("-1.0281219", 18), - decimals: 18, }); expect(value2).toEqual("-102.81"); // rounds up const value3 = formatRate({ rate: parseUnits("-0.0297902", 18), - decimals: 18, }); expect(value3).toEqual("-2.98"); });