mirror of https://github.com/certusone/oyster.git
split deposit info line into separate cards
This commit is contained in:
parent
dff1d6e1c1
commit
8b2687ebf4
|
@ -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>
|
|
||||||
</div>
|
|
||||||
<div className="deposit-info-line-item ">
|
|
||||||
<div>Your wallet balance</div>
|
|
||||||
<div>
|
|
||||||
{formatNumber.format(tokenBalance)} {name}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="deposit-info-line-item ">
|
|
||||||
<div>Health factor</div>
|
|
||||||
<div>--</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={5}>
|
||||||
|
<Card className={props.className}>
|
||||||
|
<Statistic
|
||||||
|
title="Your wallet balance"
|
||||||
|
value={formatNumber.format(tokenBalance)}
|
||||||
|
suffix={name}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={5}>
|
||||||
|
<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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 }}>
|
||||||
|
<Col xs={24} xl={15}>
|
||||||
<DepositInput
|
<DepositInput
|
||||||
className="deposit-reserve-item deposit-reserve-item-left"
|
className="card-fill"
|
||||||
reserve={reserve}
|
reserve={reserve}
|
||||||
address={lendingReserve.pubkey}
|
address={lendingReserve.pubkey}
|
||||||
/>
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col xs={24} xl={9}>
|
||||||
<SideReserveOverview
|
<SideReserveOverview
|
||||||
className="deposit-reserve-item deposit-reserve-item-right"
|
className="card-fill"
|
||||||
reserve={lendingReserve}
|
reserve={lendingReserve}
|
||||||
mode={SideReserveOverviewMode.Deposit}
|
mode={SideReserveOverviewMode.Deposit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</Col>
|
||||||
|
</Row>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue