certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

changed loaninfoline into small cards

This commit is contained in:
juan 2021-01-26 12:49:44 -05:00
parent 129a025d5f
commit 0be2d169c2
2 changed files with 75 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
src/components/LoanInfoLine/index.tsx
View File

@ -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,43 +47,56 @@ 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} formatter={(val) => (
formatter={(val) => ( <div>
<div> <div>
<div> <em>{formatNumber.format(borrowAmount)}</em> {repayName}
<em>{formatNumber.format(borrowAmount)}</em> {repayName} </div>
</div> <div className="dashboard-amount-quote">
<div className="dashboard-amount-quote"> ${formatNumber.format(parseFloat(val.toString()))}
${formatNumber.format(parseFloat(val.toString()))} </div>
</div> </div>
</div> )}
)} />
/> </Card>
<Statistic </Col>
title="Collateral" <Col xs={24} xl={5}>
value={obligation.info.borrowedInQuote} <Card className={props.className}>
formatter={(val) => ( <Statistic
<div> title="Collateral"
<div> value={obligation.info.borrowedInQuote}
<em>{formatNumber.format(collateral)}</em> {withdrawName} formatter={(val) => (
</div> <div>
<div className="dashboard-amount-quote"> <div>
${formatNumber.format(parseFloat(val.toString()))} <em>{formatNumber.format(collateral)}</em> {withdrawName}
</div> </div>
</div> <div className="dashboard-amount-quote">
)} ${formatNumber.format(parseFloat(val.toString()))}
/> </div>
<Statistic title="APY" value={formatPct.format(borrowAPY)} /> </div>
<Statistic )}
title="Health Factor" />
value={obligation.info.health.toFixed(2)} </Card>
/> </Col>
</Card> <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>
); );
}; };

40
src/views/liquidateReserve/index.tsx
View File

@ -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}>
/> <LiquidateInput
<div className="liquidate-reserve-container"> className="card-fill"
<LiquidateInput obligation={obligation}
className="liquidate-reserve-item liquidate-reserve-item-left" withdrawReserve={withdrawReserve}
obligation={obligation} repayReserve={repayReserve}
withdrawReserve={withdrawReserve} />
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>
); );
}; };