mirror of https://github.com/certusone/oyster.git
changed loaninfoline into small cards
This commit is contained in:
parent
129a025d5f
commit
0be2d169c2
|
@ -1,4 +1,4 @@
|
||||||
import { Card, Statistic } from "antd";
|
import { Card, Col, Row, Statistic } from "antd";
|
||||||
import {
|
import {
|
||||||
formatNumber,
|
formatNumber,
|
||||||
formatPct,
|
formatPct,
|
||||||
|
@ -13,6 +13,7 @@ import {
|
||||||
} from "../../hooks";
|
} from "../../hooks";
|
||||||
import { useMint } from "../../contexts/accounts";
|
import { useMint } from "../../contexts/accounts";
|
||||||
import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
|
import { calculateBorrowAPY, collateralToLiquidity } from "../../models";
|
||||||
|
import { GUTTER } from "../../constants";
|
||||||
|
|
||||||
export const LoanInfoLine = (props: {
|
export const LoanInfoLine = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -46,10 +47,9 @@ export const LoanInfoLine = (props: {
|
||||||
const collateral = fromLamports(collateralLamports, collateralMint);
|
const collateral = fromLamports(collateralLamports, collateralMint);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card
|
<Row gutter={GUTTER}>
|
||||||
className={props.className}
|
<Col xs={24} xl={5}>
|
||||||
bodyStyle={{ display: "flex", justifyContent: "space-between" }}
|
<Card className={props.className}>
|
||||||
>
|
|
||||||
<Statistic
|
<Statistic
|
||||||
title="Loan Balance"
|
title="Loan Balance"
|
||||||
value={obligation.info.borrowedInQuote}
|
value={obligation.info.borrowedInQuote}
|
||||||
|
@ -64,6 +64,10 @@ export const LoanInfoLine = (props: {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={5}>
|
||||||
|
<Card className={props.className}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="Collateral"
|
title="Collateral"
|
||||||
value={obligation.info.borrowedInQuote}
|
value={obligation.info.borrowedInQuote}
|
||||||
|
@ -78,11 +82,21 @@ export const LoanInfoLine = (props: {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={5}>
|
||||||
|
<Card className={props.className}>
|
||||||
<Statistic title="APY" value={formatPct.format(borrowAPY)} />
|
<Statistic title="APY" value={formatPct.format(borrowAPY)} />
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={9}>
|
||||||
|
<Card className={props.className}>
|
||||||
<Statistic
|
<Statistic
|
||||||
title="Health Factor"
|
title="Health Factor"
|
||||||
value={obligation.info.health.toFixed(2)}
|
value={obligation.info.health.toFixed(2)}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -11,6 +11,9 @@ import { LoanInfoLine } from "../../components/LoanInfoLine";
|
||||||
import { LiquidateInput } from "../../components/LiquidateInput";
|
import { LiquidateInput } from "../../components/LiquidateInput";
|
||||||
|
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
|
import { Col, Row } from "antd";
|
||||||
|
import { GUTTER } from "../../constants";
|
||||||
|
import { BorrowInput } from "../../components/BorrowInput";
|
||||||
|
|
||||||
export const LiquidateReserveView = () => {
|
export const LiquidateReserveView = () => {
|
||||||
const { id } = useParams<{ id: string }>();
|
const { id } = useParams<{ id: string }>();
|
||||||
|
@ -25,24 +28,25 @@ export const LiquidateReserveView = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="liquidate-reserve">
|
<div className="borrow-reserve">
|
||||||
<LoanInfoLine
|
<LoanInfoLine className="card-fill" obligation={obligation} />
|
||||||
className="liquidate-reserve-item"
|
<Row gutter={GUTTER} style={{ flex: 1 }}>
|
||||||
obligation={obligation}
|
<Col xs={24} xl={15}>
|
||||||
/>
|
|
||||||
<div className="liquidate-reserve-container">
|
|
||||||
<LiquidateInput
|
<LiquidateInput
|
||||||
className="liquidate-reserve-item liquidate-reserve-item-left"
|
className="card-fill"
|
||||||
obligation={obligation}
|
obligation={obligation}
|
||||||
withdrawReserve={withdrawReserve}
|
withdrawReserve={withdrawReserve}
|
||||||
repayReserve={repayReserve}
|
repayReserve={repayReserve}
|
||||||
/>
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={9}>
|
||||||
<SideReserveOverview
|
<SideReserveOverview
|
||||||
className="liquidate-reserve-item liquidate-reserve-item-right"
|
className="card-fill"
|
||||||
reserve={repayReserve}
|
reserve={repayReserve}
|
||||||
mode={SideReserveOverviewMode.Deposit}
|
mode={SideReserveOverviewMode.Deposit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue