Skip to content

Commit

Permalink
refetch short data on new block
Browse files Browse the repository at this point in the history
  • Loading branch information
@jackburrus
jackburrus committed May 31, 2024
1 parent 4c42c0a commit 9e3c743
Show file tree
Hide file tree
Showing 4 changed files with 120 additions and 82 deletions.
13 changes: 6 additions & 7 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 @@ -49,7 +49,6 @@ export function OpenLongPreview({
tokens: appConfig.tokens,
});
const { fixedAPR } = useCurrentFixedAPR(hyperdrive.address);

const termLengthMS = Number(hyperdrive.poolConfig.positionDuration * 1000n);
const numDays = convertMillisecondsToDays(termLengthMS);
return (
Expand All @@ -68,7 +67,7 @@ export function OpenLongPreview({
<LabelValue
label="You receive"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<span className="font-bold">{`${formatBalance({
Expand All @@ -82,7 +81,7 @@ export function OpenLongPreview({
<LabelValue
label="Pool fee"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<span
Expand All @@ -106,7 +105,7 @@ export function OpenLongPreview({
<LabelValue
label="Net fixed rate"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<span
Expand Down Expand Up @@ -140,7 +139,7 @@ export function OpenLongPreview({
<LabelValue
label="Market rate after open"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<span
Expand All @@ -162,7 +161,7 @@ export function OpenLongPreview({
<LabelValue
label="Fixed APR impact"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<span
Expand Down Expand Up @@ -190,7 +189,7 @@ export function OpenLongPreview({
<LabelValue
label="Yield at maturity"
value={
openLongPreviewStatus === "loading" ? (
openLongPreviewStatus === "loading" && long.bondAmount ? (
<Skeleton width={100} />
) : (
<div
Expand Down
69 changes: 42 additions & 27 deletions apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
HyperdriveConfig,
} from "@hyperdrive/appconfig";
import { MouseEvent, ReactElement } from "react";
import Skeleton from "react-loading-skeleton";
import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
import { getIsValidTradeSize } from "src/hyperdrive/getIsValidTradeSize";
import { getHasEnoughAllowance } from "src/token/getHasEnoughAllowance";
Expand Down Expand Up @@ -236,36 +237,62 @@ export function OpenShortForm({
shortSize={amountOfBondsToShortAsBigInt}
spotRateAfterOpen={spotRateAfterOpen}
curveFee={curveFee}
openShortPreviewStatus={openShortPreviewStatus}
/>
}
disclaimer={(() => {
if (traderDeposit && !!amountOfBondsToShortAsBigInt) {
if (!amountOfBondsToShortAsBigInt) {
return null;
} else if (!!amountOfBondsToShortAsBigInt && !hasEnoughLiquidity) {
return (
<p className="text-center text-sm text-error">
Pool limit exceeded. Max short size is{" "}
{formatBalance({
balance: maxBondsOut || 0n,
decimals: hyperdrive.decimals,
})}{" "}
hy{baseToken.symbol}
</p>
);
} else {
return (
<div className="flex flex-col gap-4">
{!hasEnoughBalance ? (
{!hasEnoughBalance && openShortPreviewStatus !== "loading" ? (
<p className="text-center text-sm text-error">
Insufficient balance
</p>
) : null}
<p className="text-center text-sm text-neutral-content">
You pay{" "}
<strong>
{formatBalance({
balance: traderDeposit || 0n,
decimals: activeToken.decimals,
includeCommas: true,
places: activeToken.places,
})}{" "}
{activeToken.symbol}
{openShortPreviewStatus === "loading" ? (
// make this an inline skeleton
<span className="inline-block">
<Skeleton width={50} />
</span>
) : (
formatBalance({
balance: traderDeposit || 0n,
decimals: activeToken.decimals,
includeCommas: true,
places: activeToken.places,
})
)}{" "}
</strong>{" "}
in exchange for the yield on{" "}
<strong>
{formatBalance({
balance: amountOfBondsToShortAsBigInt,
decimals: activeToken.decimals,
includeCommas: true,
places: activeToken.places,
})}{" "}
{openShortPreviewStatus === "loading" ? (
<span className="inline-block">
<Skeleton width={50} />
</span>
) : (
formatBalance({
balance: amountOfBondsToShortAsBigInt,
decimals: activeToken.decimals,
includeCommas: true,
places: activeToken.places,
})
)}{" "}
{baseToken.symbol}
</strong>{" "}
deposited into{" "}
Expand All @@ -285,18 +312,6 @@ export function OpenShortForm({
</div>
);
}
if (!!amountOfBondsToShortAsBigInt && !hasEnoughLiquidity) {
return (
<p className="text-center text-sm text-error">
Pool limit exceeded. Max short size is{" "}
{formatBalance({
balance: maxBondsOut || 0n,
decimals: hyperdrive.decimals,
})}{" "}
hy{baseToken.symbol}
</p>
);
}
})()}
actionButton={(() => {
if (!account) {
Expand Down
116 changes: 68 additions & 48 deletions apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortPreview/OpenShortPreview.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import {
import classNames from "classnames";
import * as dnum from "dnum";
import { ReactElement } from "react";
import Skeleton from "react-loading-skeleton";
import { convertMillisecondsToDays } from "src/base/convertMillisecondsToDays";
import { formatRate } from "src/base/formatRate";
import { useAppConfig } from "src/ui/appconfig/useAppConfig";
Expand All @@ -20,6 +21,7 @@ interface OpenShortPreviewProps {
shortSize: bigint | undefined;
spotRateAfterOpen: bigint | undefined;
curveFee: bigint | undefined;
openShortPreviewStatus: "error" | "idle" | "loading" | "success";
}

export function OpenShortPreview({
Expand All @@ -29,14 +31,14 @@ export function OpenShortPreview({
shortSize,
spotRateAfterOpen,
curveFee,
openShortPreviewStatus,
}: OpenShortPreviewProps): ReactElement {
const appConfig = useAppConfig();
const baseToken = findBaseToken({
baseTokenAddress: hyperdrive.baseToken,
tokens: appConfig.tokens,
});
const { fixedAPR } = useCurrentFixedAPR(hyperdrive.address);

const termLengthMS = Number(hyperdrive.poolConfig.positionDuration * 1000n);
return (
<div className="flex flex-col gap-3">
Expand All @@ -60,70 +62,88 @@ export function OpenShortPreview({
<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 short."
>
{curveFee
? `${formatBalance({
balance: curveFee,
decimals: tokenIn.decimals,
places: tokenIn.places,
})} ${tokenIn.symbol}`
: `0 ${tokenIn.symbol}`}
</span>
openShortPreviewStatus === "loading" && shortSize ? (
<Skeleton width={100} />
) : (
<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 short."
>
{curveFee
? `${formatBalance({
balance: curveFee,
decimals: tokenIn.decimals,
places: tokenIn.places,
})} ${tokenIn.symbol}`
: `0 ${tokenIn.symbol}`}
</span>
)
}
/>
<LabelValue
label="You pay"
value={
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="The upfront cost to open a short."
>
{costBasis
? `${formatBalance({
balance: costBasis,
decimals: tokenIn.decimals,
places: tokenIn.places,
})} ${tokenIn.symbol}`
: `0 ${tokenIn.symbol}`}
</span>
openShortPreviewStatus === "loading" && shortSize ? (
<Skeleton width={100} />
) : (
<span
className="daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help border-b border-dashed border-current before:border"
data-tip="The upfront cost to open a short."
>
{costBasis
? `${formatBalance({
balance: costBasis,
decimals: tokenIn.decimals,
places: tokenIn.places,
})} ${tokenIn.symbol}`
: `0 ${tokenIn.symbol}`}
</span>
)
}
/>
<div className="flex flex-col gap-3">
<h6 className="font-medium">Market Impact</h6>
<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 short."
>
{spotRateAfterOpen
? `${formatRate(spotRateAfterOpen)}% APR`
: "-"}
</span>
openShortPreviewStatus === "loading" && shortSize ? (
<Skeleton width={100} />
) : (
<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 short."
>
{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-success text-success":
spotRateAfterOpen,
},
)}
data-tip={`The net market impact on the fixed rate after opening the short.`}
>
{getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
</span>
openShortPreviewStatus === "loading" && shortSize ? (
<Skeleton width={100} />
) : (
<span
className={classNames(
"daisy-tooltip daisy-tooltip-top daisy-tooltip-left cursor-help before:border",
{
"border-b border-dashed border-success text-success":
spotRateAfterOpen,
},
)}
data-tip={`The net market impact on the fixed rate after opening the short.`}
>
{getMarketImpactLabel(fixedAPR?.apr, spotRateAfterOpen)}
</span>
)
}
/>
</div>
Expand Down
4 changes: 4 additions & 0 deletions apps/hyperdrive-trading/src/ui/hyperdrive/shorts/hooks/usePreviewOpenShort.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { MutationStatus, useQuery } from "@tanstack/react-query";
import { makeQueryKey } from "src/base/makeQueryKey";
import { useReadHyperdrive } from "src/ui/hyperdrive/hooks/useReadHyperdrive";
import { Address } from "viem";
import { useBlockNumber } from "wagmi";

interface UsePreviewOpenShortOptions {
hyperdriveAddress: Address;
Expand All @@ -23,13 +24,16 @@ export function usePreviewOpenShort({
asBase,
}: UsePreviewOpenShortOptions): UsePreviewOpenShortResult {
const readHyperdrive = useReadHyperdrive(hyperdriveAddress);

const { data: blockNumber } = useBlockNumber({ watch: true });
const queryEnabled = !!readHyperdrive && !!amountOfBondsToShort;

const { data, status } = useQuery({
queryKey: makeQueryKey("previewOpenShort", {
hyperdrive: hyperdriveAddress,
amountBondShorts: amountOfBondsToShort?.toString(),
asBase,
blockNumber: blockNumber?.toString(),
}),
enabled: queryEnabled,
queryFn: queryEnabled
Expand Down

0 comments on commit 9e3c743

Please sign in to comment.