mirror of https://github.com/certusone/oyster.git
Added loan information on liquidation page
This commit is contained in:
parent
dcb1e6c9a1
commit
129a025d5f
|
@ -0,0 +1,88 @@
|
||||||
|
import { Card, Statistic } from "antd";
|
||||||
|
import {
|
||||||
|
formatNumber,
|
||||||
|
formatPct,
|
||||||
|
fromLamports,
|
||||||
|
wadToLamports,
|
||||||
|
} from "../../utils/utils";
|
||||||
|
import React, { useMemo } from "react";
|
||||||
|
import {
|
||||||
|
EnrichedLendingObligation,
|
||||||
|
useLendingReserve,
|
||||||
|
useTokenName,
|
||||||
|
} from "../../hooks";
|
||||||
|
import { useMint } from "../../contexts/accounts";
|
||||||
|
import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
|
||||||
|
|
||||||
|
export const LoanInfoLine = (props: {
|
||||||
|
className?: string;
|
||||||
|
obligation: EnrichedLendingObligation;
|
||||||
|
}) => {
|
||||||
|
const obligation = props.obligation;
|
||||||
|
|
||||||
|
const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
|
||||||
|
const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
|
||||||
|
|
||||||
|
const liquidityMint = useMint(repayReserve?.info.liquidityMint);
|
||||||
|
const collateralMint = useMint(withdrawReserve?.info.liquidityMint);
|
||||||
|
const repayName = useTokenName(repayReserve?.info.liquidityMint);
|
||||||
|
const withdrawName = useTokenName(withdrawReserve?.info.liquidityMint);
|
||||||
|
|
||||||
|
const borrowAPY = useMemo(
|
||||||
|
() => (repayReserve ? calculateBorrowAPY(repayReserve?.info) : 0),
|
||||||
|
[repayReserve]
|
||||||
|
);
|
||||||
|
if (!obligation || !repayReserve) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const borrowAmount = fromLamports(
|
||||||
|
wadToLamports(obligation?.info.borrowAmountWad),
|
||||||
|
liquidityMint
|
||||||
|
);
|
||||||
|
const collateralLamports = collateralToLiquidity(
|
||||||
|
obligation?.info.depositedCollateral,
|
||||||
|
repayReserve.info
|
||||||
|
);
|
||||||
|
const collateral = fromLamports(collateralLamports, collateralMint);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={props.className}
|
||||||
|
bodyStyle={{ display: "flex", justifyContent: "space-between" }}
|
||||||
|
>
|
||||||
|
<Statistic
|
||||||
|
title="Loan Balance"
|
||||||
|
value={obligation.info.borrowedInQuote}
|
||||||
|
formatter={(val) => (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<em>{formatNumber.format(borrowAmount)}</em> {repayName}
|
||||||
|
</div>
|
||||||
|
<div className="dashboard-amount-quote">
|
||||||
|
${formatNumber.format(parseFloat(val.toString()))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Statistic
|
||||||
|
title="Collateral"
|
||||||
|
value={obligation.info.borrowedInQuote}
|
||||||
|
formatter={(val) => (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<em>{formatNumber.format(collateral)}</em> {withdrawName}
|
||||||
|
</div>
|
||||||
|
<div className="dashboard-amount-quote">
|
||||||
|
${formatNumber.format(parseFloat(val.toString()))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<Statistic title="APY" value={formatPct.format(borrowAPY)} />
|
||||||
|
<Statistic
|
||||||
|
title="Health Factor"
|
||||||
|
value={obligation.info.health.toFixed(2)}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
|
@ -107,7 +107,7 @@ export const LiquidateView = () => {
|
||||||
<LiquidateItem
|
<LiquidateItem
|
||||||
key={item.account.pubkey.toBase58()}
|
key={item.account.pubkey.toBase58()}
|
||||||
item={item}
|
item={item}
|
||||||
></LiquidateItem>
|
/>
|
||||||
))}
|
))}
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
|
@ -6,6 +6,8 @@ import {
|
||||||
SideReserveOverviewMode,
|
SideReserveOverviewMode,
|
||||||
} from "../../components/SideReserveOverview";
|
} from "../../components/SideReserveOverview";
|
||||||
|
|
||||||
|
import { LoanInfoLine } from "../../components/LoanInfoLine";
|
||||||
|
|
||||||
import { LiquidateInput } from "../../components/LiquidateInput";
|
import { LiquidateInput } from "../../components/LiquidateInput";
|
||||||
|
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
|
@ -14,6 +16,7 @@ export const LiquidateReserveView = () => {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
|
|
||||||
const obligation = useEnrichedLendingObligation(id);
|
const obligation = useEnrichedLendingObligation(id);
|
||||||
|
|
||||||
const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
|
const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
|
||||||
const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
|
const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
|
||||||
|
|
||||||
|
@ -23,6 +26,10 @@ export const LiquidateReserveView = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="liquidate-reserve">
|
<div className="liquidate-reserve">
|
||||||
|
<LoanInfoLine
|
||||||
|
className="liquidate-reserve-item"
|
||||||
|
obligation={obligation}
|
||||||
|
/>
|
||||||
<div className="liquidate-reserve-container">
|
<div className="liquidate-reserve-container">
|
||||||
<LiquidateInput
|
<LiquidateInput
|
||||||
className="liquidate-reserve-item liquidate-reserve-item-left"
|
className="liquidate-reserve-item liquidate-reserve-item-left"
|
||||||
|
|
Loading…
Reference in New Issue