mirror of https://github.com/certusone/oyster.git
Merge pull request #47 from yamijuan/liquidation
Added loan information on liquidation page
This commit is contained in:
commit
127c000e02
|
@ -0,0 +1,102 @@
|
|||
import { Card, Col, Row, 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";
|
||||
import { GUTTER } from "../../constants";
|
||||
|
||||
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 (
|
||||
<Row gutter={GUTTER}>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card className={props.className}>
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card className={props.className}>
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card className={props.className}>
|
||||
<Statistic title="APY" value={formatPct.format(borrowAPY)} />
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={9}>
|
||||
<Card className={props.className}>
|
||||
<Statistic
|
||||
title="Health Factor"
|
||||
value={obligation.info.health.toFixed(2)}
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
|
@ -107,7 +107,7 @@ export const LiquidateView = () => {
|
|||
<LiquidateItem
|
||||
key={item.account.pubkey.toBase58()}
|
||||
item={item}
|
||||
></LiquidateItem>
|
||||
/>
|
||||
))}
|
||||
</Card>
|
||||
</Col>
|
||||
|
|
|
@ -6,14 +6,20 @@ import {
|
|||
SideReserveOverviewMode,
|
||||
} from "../../components/SideReserveOverview";
|
||||
|
||||
import { LoanInfoLine } from "../../components/LoanInfoLine";
|
||||
|
||||
import { LiquidateInput } from "../../components/LiquidateInput";
|
||||
|
||||
import "./style.less";
|
||||
import { Col, Row } from "antd";
|
||||
import { GUTTER } from "../../constants";
|
||||
import { BorrowInput } from "../../components/BorrowInput";
|
||||
|
||||
export const LiquidateReserveView = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const obligation = useEnrichedLendingObligation(id);
|
||||
|
||||
const repayReserve = useLendingReserve(obligation?.info.borrowReserve);
|
||||
const withdrawReserve = useLendingReserve(obligation?.info.collateralReserve);
|
||||
|
||||
|
@ -22,20 +28,25 @@ export const LiquidateReserveView = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="liquidate-reserve">
|
||||
<div className="liquidate-reserve-container">
|
||||
<div className="borrow-reserve">
|
||||
<LoanInfoLine className="card-fill" obligation={obligation} />
|
||||
<Row gutter={GUTTER} style={{ flex: 1 }}>
|
||||
<Col xs={24} xl={15}>
|
||||
<LiquidateInput
|
||||
className="liquidate-reserve-item liquidate-reserve-item-left"
|
||||
className="card-fill"
|
||||
obligation={obligation}
|
||||
withdrawReserve={withdrawReserve}
|
||||
repayReserve={repayReserve}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} xl={9}>
|
||||
<SideReserveOverview
|
||||
className="liquidate-reserve-item liquidate-reserve-item-right"
|
||||
className="card-fill"
|
||||
reserve={repayReserve}
|
||||
mode={SideReserveOverviewMode.Deposit}
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue