Skip to content

Commit

Permalink
Group sections in Open Long preview (#873)
Browse files Browse the repository at this point in the history 
* Add groupings to open long form

* Add You Spend
  • Loading branch information
@DannyDelott
DannyDelott authored Apr 4, 2024
1 parent 8b166ca commit c0e7906
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 118 deletions.
1 change: 1 addition & 0 deletions apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,6 +176,7 @@ export function OpenLongForm({
hyperdrive={hyperdrive}
spotRateAfterOpen={spotRateAfterOpen}
curveFee={curveFee}
activeToken={activeToken}
long={{
bondAmount: bondsReceived || 0n,
assetId: 0n,
Expand Down
254 changes: 136 additions & 118 deletions apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongPreview/OpenLongPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@ import {
calculateFixedRateFromOpenLong,
Long,
} from "@delvtech/hyperdrive-viem";
import { findBaseToken, HyperdriveConfig } from "@hyperdrive/appconfig";
import {
findBaseToken,
HyperdriveConfig,
TokenConfig,
} from "@hyperdrive/appconfig";
import classNames from "classnames";
import * as dnum from "dnum";
import { ReactElement } from "react";
Expand All @@ -18,13 +22,15 @@ interface OpenLongPreviewProps {
hyperdrive: HyperdriveConfig;
long: Long;
spotRateAfterOpen: bigint | undefined;
activeToken: TokenConfig<any>;
curveFee: bigint | undefined;
}

export function OpenLongPreview({
hyperdrive,
long,
spotRateAfterOpen,
activeToken,
curveFee,
}: OpenLongPreviewProps): ReactElement {
const appConfig = useAppConfig();
Expand All @@ -34,128 +40,140 @@ export function OpenLongPreview({
});
const { fixedAPR } = useCurrentFixedAPR(hyperdrive.address);

let changeInFixedApr = 0n;
if (spotRateAfterOpen && fixedAPR) {
changeInFixedApr = dnum.subtract(
[fixedAPR.apr, 18],
[spotRateAfterOpen, 18],
)[0];
}

const termLengthMS = Number(hyperdrive.poolConfig.positionDuration * 1000n);
const numDays = convertMillisecondsToDays(termLengthMS);
return (
<div className="flex flex-col gap-3">
<LabelValue
label="You receive"
value={
<span className="font-bold">{`${formatBalance({
balance: long.bondAmount,
decimals: baseToken.decimals,
places: 4,
})} hy${baseToken.symbol}`}</span>
}
/>
<LabelValue
label="Pool fee"
value={
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="Total combined fee paid to LPs and governance to open the long."
>
{curveFee
? `${formatBalance({
balance: curveFee,
decimals: baseToken.decimals,
places: 6,
})} hy${baseToken.symbol}`
: `0 hy${baseToken.symbol}`}
</span>
}
/>
<LabelValue
label="Net fixed rate"
value={
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="Your net fixed rate after pool fees and slippage are applied."
>
{long.bondAmount > 0
? `${formatRate(
calculateFixedRateFromOpenLong({
positionDuration:
hyperdrive.poolConfig.positionDuration || 0n,
baseAmount: long.baseAmountPaid,
bondAmount: long.bondAmount,
<div className="flex flex-col gap-4">
<div className="flex flex-col gap-3">
<LabelValue
label="You spend"
value={
<span>{`${formatBalance({
balance: long.baseAmountPaid,
decimals: baseToken.decimals,
places: 4,
})} ${activeToken.symbol}`}</span>
}
/>
<LabelValue
label="You receive"
value={
<span className="font-bold">{`${formatBalance({
balance: long.bondAmount,
decimals: baseToken.decimals,
places: 4,
})} hy${baseToken.symbol}`}</span>
}
/>
<LabelValue
label="Pool fee"
value={
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="Total combined fee paid to LPs and governance to open the long."
>
{curveFee
? `${formatBalance({
balance: curveFee,
decimals: baseToken.decimals,
}),
baseToken.decimals,
)}% APR`
: "0% APR"}
</span>
}
/>
<LabelValue
label="Fixed APR after open"
value={
<span
className={classNames(
"daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
{ "border-b border-dashed border-current": spotRateAfterOpen },
)}
data-tip="The market fixed rate after opening the long."
>
{spotRateAfterOpen ? `${formatRate(spotRateAfterOpen)}% APR` : "-"}
</span>
}
/>
<LabelValue
label="Fixed APR impact"
value={
<span
className={classNames(
"daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
{
"border-b border-dashed border-error text-error":
spotRateAfterOpen,
},
)}
data-tip={`The net market impact on the fixed rate after opening the long.`}
>
{getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
</span>
}
/>
<LabelValue
label="Yield at maturity"
value={
<div
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border"
data-tip={`Total ${baseToken.symbol} expected in return at the end of the term, excluding fees.`}
>
{long.bondAmount > 0 ? (
<span className="cursor-help border-b border-dashed border-success text-success">
{long.bondAmount > long.baseAmountPaid ? "+" : ""}
{long.baseAmountPaid
? `${formatBalance({
balance: long.bondAmount - long.baseAmountPaid,
places: 6,
})} hy${baseToken.symbol}`
: `0 hy${baseToken.symbol}`}
</span>
}
/>
</div>
<div className="flex flex-col gap-3">
<h6 className="font-medium">Fixed Rate</h6>
<LabelValue
label="Net fixed rate"
value={
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="Your net fixed rate after pool fees and slippage are applied."
>
{long.bondAmount > 0
? `${formatRate(
calculateFixedRateFromOpenLong({
positionDuration:
hyperdrive.poolConfig.positionDuration || 0n,
baseAmount: long.baseAmountPaid,
bondAmount: long.bondAmount,
decimals: baseToken.decimals,
places: 4,
})} ${baseToken.symbol}`
: undefined}
</span>
) : (
<span className="cursor-help border-b border-dashed">
0 {baseToken.symbol}
</span>
)}
</div>
}
/>
<LabelValue
label="Matures in"
value={`${numDays} days, ${formatDate(Date.now() + termLengthMS)}`}
/>
}),
baseToken.decimals,
)}% APR`
: "0% APR"}
</span>
}
/>
<LabelValue
label="Market rate after open"
value={
<span
className={classNames(
"daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
{ "border-b border-dashed border-current": spotRateAfterOpen },
)}
data-tip="The market fixed rate after opening the long."
>
{spotRateAfterOpen
? `${formatRate(spotRateAfterOpen)}% APR`
: "-"}
</span>
}
/>
<LabelValue
label="Fixed APR impact"
value={
<span
className={classNames(
"daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
{
"border-b border-dashed border-error text-error":
spotRateAfterOpen,
},
)}
data-tip={`The net market impact on the fixed rate after opening the long.`}
>
{getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
</span>
}
/>
</div>
<div className="flex flex-col gap-3">
<h6 className="font-medium">Term</h6>
<LabelValue
label="Matures in"
value={`${numDays} days, ${formatDate(Date.now() + termLengthMS)}`}
/>
<LabelValue
label="Yield at maturity"
value={
<div
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border"
data-tip={`Total ${baseToken.symbol} expected in return at the end of the term, excluding fees.`}
>
{long.bondAmount > 0 ? (
<span className="cursor-help border-b border-dashed border-success text-success">
{long.bondAmount > long.baseAmountPaid ? "+" : ""}
{long.baseAmountPaid
? `${formatBalance({
balance: long.bondAmount - long.baseAmountPaid,
decimals: baseToken.decimals,
places: 4,
})} ${baseToken.symbol}`
: undefined}
</span>
) : (
<span className="cursor-help border-b border-dashed">
0 {baseToken.symbol}
</span>
)}
</div>
}
/>
</div>
</div>
);
}
Expand Down

0 comments on commit c0e7906

Please sign in to comment.