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 option to decrease buying power by overcollateralization factor
|
||||||
// TODO: add support for balance in the wallet
|
// TODO: add support for balance in the wallet
|
||||||
export function useBorrowingPower(reserveAddress: string | PublicKey, includeWallet = false, overcollateralize = true) {
|
export function useBorrowingPower(reserveAddress: string | PublicKey | undefined, includeWallet = false, overcollateralize = true) {
|
||||||
const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress.toBase58(), [reserveAddress]);
|
const key = useMemo(() => typeof reserveAddress === 'string' ? reserveAddress : reserveAddress?.toBase58() || '', [reserveAddress]);
|
||||||
|
|
||||||
const reserve = useLendingReserve(key);
|
const reserve = useLendingReserve(key);
|
||||||
|
|
||||||
|
|
|
@ -67,14 +67,14 @@ export const BorrowReserveView = () => {
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row gutter={GUTTER} className="flexColumn">
|
<Row gutter={GUTTER} style={{ flex: 1 }}>
|
||||||
<Col xs={24} xl={15}>
|
<Col xs={24} xl={15}>
|
||||||
<BorrowInput
|
<BorrowInput
|
||||||
className="card-fill"
|
className="card-fill"
|
||||||
reserve={lendingReserve}
|
reserve={lendingReserve}
|
||||||
/>
|
/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs={24} xl={8}>
|
<Col xs={24} xl={9}>
|
||||||
<SideReserveOverview
|
<SideReserveOverview
|
||||||
className="card-fill"
|
className="card-fill"
|
||||||
reserve={lendingReserve}
|
reserve={lendingReserve}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useEnrichedLendingObligation, useLendingReserve } from "../../hooks";
|
import { useBorrowingPower, useEnrichedLendingObligation, useLendingReserve, useUserObligations } from "../../hooks";
|
||||||
import { useParams } from "react-router-dom";
|
import { useParams } from "react-router-dom";
|
||||||
|
|
||||||
import { RepayInput } from "../../components/RepayInput";
|
import { RepayInput } from "../../components/RepayInput";
|
||||||
|
@ -9,6 +9,9 @@ import {
|
||||||
} from "../../components/SideReserveOverview";
|
} from "../../components/SideReserveOverview";
|
||||||
|
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
|
import { Card, Col, Row, Statistic } from "antd";
|
||||||
|
import { BarChartStatistic } from "../../components/BarChartStatistic";
|
||||||
|
import { GUTTER, LABELS } from "../../constants";
|
||||||
|
|
||||||
export const RepayReserveView = () => {
|
export const RepayReserveView = () => {
|
||||||
const { reserve: reserveId, obligation: obligationId } = useParams<{
|
const { reserve: reserveId, obligation: obligationId } = useParams<{
|
||||||
|
@ -17,35 +20,83 @@ export const RepayReserveView = () => {
|
||||||
}>();
|
}>();
|
||||||
|
|
||||||
const lendingObligation = useEnrichedLendingObligation(obligationId);
|
const lendingObligation = useEnrichedLendingObligation(obligationId);
|
||||||
const lendingReserve = useLendingReserve(
|
const id = obligationId ? lendingObligation?.info.borrowReserve : reserveId;
|
||||||
obligationId ? lendingObligation?.info.borrowReserve : reserveId
|
const lendingReserve = useLendingReserve(id);
|
||||||
);
|
|
||||||
|
|
||||||
const repayReserve = useLendingReserve(
|
const repayReserve = useLendingReserve(
|
||||||
obligationId ? lendingObligation?.info.collateralReserve : reserveId
|
obligationId ? lendingObligation?.info.collateralReserve : reserveId
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const { userObligations, totalInQuote: loansValue } = useUserObligations();
|
||||||
|
const { totalInQuote: borrowingPower, utilization } = useBorrowingPower(id);
|
||||||
|
|
||||||
const reserve = lendingReserve?.info;
|
const reserve = lendingReserve?.info;
|
||||||
|
|
||||||
if (!reserve || !lendingReserve || !lendingObligation) {
|
if (!reserve || !lendingReserve || !lendingObligation) {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="repay-reserve">
|
<div className="repay-reserve">
|
||||||
<div className="repay-reserve-container">
|
<Row gutter={GUTTER}>
|
||||||
<RepayInput
|
<Col xs={24} xl={5}>
|
||||||
className="repay-reserve-item repay-reserve-item-left"
|
<Card>
|
||||||
borrowReserve={lendingReserve}
|
<Statistic
|
||||||
collateralReserve={repayReserve}
|
title={LABELS.BORROWED_VALUE}
|
||||||
obligation={lendingObligation}
|
value={loansValue}
|
||||||
/>
|
precision={2}
|
||||||
<SideReserveOverview
|
prefix="$"
|
||||||
className="repay-reserve-item repay-reserve-item-right"
|
/>
|
||||||
reserve={lendingReserve}
|
</Card>
|
||||||
mode={SideReserveOverviewMode.Borrow}
|
</Col>
|
||||||
/>
|
<Col xs={24} xl={5}>
|
||||||
</div>
|
<Card>
|
||||||
</div>
|
<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