feat: repay overview
This commit is contained in:
parent
16d6cd60a8
commit
383a4a245d
|
@ -8,8 +8,8 @@ import { useUserObligations } from "./useUserObligations";
|
|||
|
||||
// TODO: add option to decrease buying power by overcollateralization factor
|
||||
// TODO: add support for balance in the wallet
|
||||
export function useBorrowingPower(reserveAddress: string | PublicKey, includeWallet = false, overcollateralize = true) {
|
||||
const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress.toBase58(), [reserveAddress]);
|
||||
export function useBorrowingPower(reserveAddress: string | PublicKey | undefined, includeWallet = false, overcollateralize = true) {
|
||||
const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress?.toBase58() || '', [reserveAddress]);
|
||||
|
||||
const reserve = useLendingReserve(key);
|
||||
|
||||
|
|
|
@ -67,14 +67,14 @@ export const BorrowReserveView = () => {
|
|||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={GUTTER} className="flexColumn">
|
||||
<Row gutter={GUTTER} style={{ flex: 1 }}>
|
||||
<Col xs={24} xl={15}>
|
||||
<BorrowInput
|
||||
className="card-fill"
|
||||
reserve={lendingReserve}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} xl={8}>
|
||||
<Col xs={24} xl={9}>
|
||||
<SideReserveOverview
|
||||
className="card-fill"
|
||||
reserve={lendingReserve}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { useEnrichedLendingObligation, useLendingReserve } from "../../hooks";
|
||||
import { useBorrowingPower, useEnrichedLendingObligation, useLendingReserve, useUserObligations } from "../../hooks";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import { RepayInput } from "../../components/RepayInput";
|
||||
|
@ -9,6 +9,9 @@ import {
|
|||
} from "../../components/SideReserveOverview";
|
||||
|
||||
import "./style.less";
|
||||
import { Card, Col, Row, Statistic } from "antd";
|
||||
import { BarChartStatistic } from "../../components/BarChartStatistic";
|
||||
import { GUTTER, LABELS } from "../../constants";
|
||||
|
||||
export const RepayReserveView = () => {
|
||||
const { reserve: reserveId, obligation: obligationId } = useParams<{
|
||||
|
@ -17,35 +20,83 @@ export const RepayReserveView = () => {
|
|||
}>();
|
||||
|
||||
const lendingObligation = useEnrichedLendingObligation(obligationId);
|
||||
const lendingReserve = useLendingReserve(
|
||||
obligationId ? lendingObligation?.info.borrowReserve : reserveId
|
||||
);
|
||||
const id = obligationId ? lendingObligation?.info.borrowReserve : reserveId;
|
||||
const lendingReserve = useLendingReserve(id);
|
||||
|
||||
const repayReserve = useLendingReserve(
|
||||
obligationId ? lendingObligation?.info.collateralReserve : reserveId
|
||||
);
|
||||
|
||||
const { userObligations, totalInQuote: loansValue } = useUserObligations();
|
||||
const { totalInQuote: borrowingPower, utilization } = useBorrowingPower(id);
|
||||
|
||||
const reserve = lendingReserve?.info;
|
||||
|
||||
if (!reserve || !lendingReserve || !lendingObligation) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="repay-reserve">
|
||||
<div className="repay-reserve-container">
|
||||
<RepayInput
|
||||
className="repay-reserve-item repay-reserve-item-left"
|
||||
borrowReserve={lendingReserve}
|
||||
collateralReserve={repayReserve}
|
||||
obligation={lendingObligation}
|
||||
/>
|
||||
<SideReserveOverview
|
||||
className="repay-reserve-item repay-reserve-item-right"
|
||||
reserve={lendingReserve}
|
||||
mode={SideReserveOverviewMode.Borrow}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
<Row gutter={GUTTER}>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title={LABELS.BORROWED_VALUE}
|
||||
value={loansValue}
|
||||
precision={2}
|
||||
prefix="$"
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title={LABELS.BORROWING_POWER_USED}
|
||||
value={utilization * 100}
|
||||
precision={2}
|
||||
suffix="%"
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={5}>
|
||||
<Card>
|
||||
<Statistic
|
||||
title={LABELS.BORROWING_POWER_VALUE}
|
||||
value={borrowingPower}
|
||||
valueStyle={{ color: "#3f8600" }}
|
||||
precision={2}
|
||||
prefix="$"
|
||||
/>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs={24} xl={9}>
|
||||
<Card>
|
||||
<BarChartStatistic
|
||||
title="Your Loans"
|
||||
items={userObligations}
|
||||
getPct={(item) => item.obligation.info.borrowedInQuote / loansValue}
|
||||
name={(item) => item.obligation.info.repayName} />
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row gutter={GUTTER} style={{ flex: 1 }}>
|
||||
<Col xs={24} xl={15}>
|
||||
<RepayInput
|
||||
className="card-fill"
|
||||
borrowReserve={lendingReserve}
|
||||
collateralReserve={repayReserve}
|
||||
obligation={lendingObligation}
|
||||
/>
|
||||
</Col>
|
||||
<Col xs={24} xl={9}>
|
||||
<SideReserveOverview
|
||||
className="card-fill"
|
||||
reserve={lendingReserve}
|
||||
mode={SideReserveOverviewMode.Borrow}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>);
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue