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

split deposit info line into separate cards

This commit is contained in:
juan 2021-02-01 14:17:44 -05:00
parent dff1d6e1c1
commit 8b2687ebf4
2 changed files with 59 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/DepositInfoLine/index.tsx
View File

@ -1,14 +1,15 @@
import React from "react"; import React, { useMemo } from "react";
import { import {
useTokenName, useTokenName,
useUserBalance, useUserBalance,
useUserCollateralBalance, useUserCollateralBalance,
} from "./../../hooks"; } from "./../../hooks";
import { LendingReserve } from "../../models/lending"; import { calculateDepositAPY, LendingReserve } from "../../models/lending";
import { formatNumber } from "../../utils/utils"; import { formatNumber, formatPct } from "../../utils/utils";
import { Card } from "antd"; import { Card, Col, Row, Statistic } from "antd";
import "./style.less"; import "./style.less";
import { PublicKey } from "@solana/web3.js"; import { PublicKey } from "@solana/web3.js";
import { GUTTER } from "../../constants";
export const DepositInfoLine = (props: { export const DepositInfoLine = (props: {
className?: string; className?: string;
@ -20,28 +21,40 @@ export const DepositInfoLine = (props: {
const { balance: collateralBalance } = useUserCollateralBalance( const { balance: collateralBalance } = useUserCollateralBalance(
props.reserve props.reserve
); );
const depositAPY = useMemo(() => calculateDepositAPY(props.reserve), [
props.reserve,
]);
return ( return (
<Card <Row gutter={GUTTER}>
className={props.className} <Col xs={24} xl={5}>
bodyStyle={{ display: "flex", justifyContent: "space-around" }} <Card className={props.className}>
> <Statistic
<div className="deposit-info-line-item "> title="Your balance in Oyster"
<div>Your balance in Oyster</div> value={formatNumber.format(collateralBalance)}
<div> suffix={name}
{formatNumber.format(collateralBalance)} {name} />
</div> </Card>
</div> </Col>
<div className="deposit-info-line-item "> <Col xs={24} xl={5}>
<div>Your wallet balance</div> <Card className={props.className}>
<div> <Statistic
{formatNumber.format(tokenBalance)} {name} title="Your wallet balance"
</div> value={formatNumber.format(tokenBalance)}
</div> suffix={name}
<div className="deposit-info-line-item "> />
<div>Health factor</div> </Card>
<div>--</div> </Col>
</div> <Col xs={24} xl={5}>
</Card> <Card className={props.className}>
<Statistic title="Health Factor" value="--" />
</Card>
</Col>
<Col xs={24} xl={9}>
<Card className={props.className}>
<Statistic title="APY" value={formatPct.format(depositAPY)} />
</Card>
</Col>
</Row>
); );
}; };

35
src/views/depositReserve/index.tsx
View File

@ -9,6 +9,9 @@ import {
SideReserveOverview, SideReserveOverview,
SideReserveOverviewMode, SideReserveOverviewMode,
} from "../../components/SideReserveOverview"; } from "../../components/SideReserveOverview";
import { Col, Row } from "antd";
import { GUTTER } from "../../constants";
import { LiquidateInput } from "../../components/LiquidateInput";
export const DepositReserveView = () => { export const DepositReserveView = () => {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@ -20,24 +23,28 @@ export const DepositReserveView = () => {
} }
return ( return (
<div className="deposit-reserve"> <div className="borrow-reserve">
<DepositInfoLine <DepositInfoLine
className="deposit-reserve-item" className="card-fill"
reserve={reserve} reserve={reserve}
address={lendingReserve.pubkey} address={lendingReserve.pubkey}
/> />
<div className="deposit-reserve-container"> <Row gutter={GUTTER} style={{ flex: 1 }}>
<DepositInput <Col xs={24} xl={15}>
className="deposit-reserve-item deposit-reserve-item-left" <DepositInput
reserve={reserve} className="card-fill"
address={lendingReserve.pubkey} reserve={reserve}
/> address={lendingReserve.pubkey}
<SideReserveOverview />
className="deposit-reserve-item deposit-reserve-item-right" </Col>
reserve={lendingReserve} <Col xs={24} xl={9}>
mode={SideReserveOverviewMode.Deposit} <SideReserveOverview
/> className="card-fill"
</div> reserve={lendingReserve}
mode={SideReserveOverviewMode.Deposit}
/>
</Col>
</Row>
</div> </div>
); );
}; };