mirror of https://github.com/certusone/oyster.git
feat: add totals for overview pages
This commit is contained in:
parent
0d0b78d36f
commit
45a6ec6d12
|
@ -87,7 +87,7 @@ export const LiquidateInput = (props: {
|
|||
disabled={true}
|
||||
/>
|
||||
<Button type="primary"
|
||||
onClick={onLiquidate}
|
||||
onClick={onLiquidate}
|
||||
disabled={fromAccounts.length === 0}
|
||||
loading={pendingTx}>
|
||||
{LABELS.LIQUIDATE_ACTION}
|
||||
|
|
|
@ -51,4 +51,5 @@ export const LABELS = {
|
|||
DASHBOARD_ACTION: "Go to dashboard",
|
||||
GO_BACK_ACTION: "Go back",
|
||||
DEPOSIT_ACTION: "Deposit",
|
||||
TOTAL_TITLE: "Total",
|
||||
};
|
||||
|
|
|
@ -29,7 +29,8 @@ export function useUserObligations() {
|
|||
obligation: ob,
|
||||
userAccounts: [...accountsByMint.get(ob.info.tokenMint.toBase58())],
|
||||
};
|
||||
});
|
||||
})
|
||||
.sort((a, b) => b.obligation.info.borrowedInQuote - a.obligation.info.borrowedInQuote);
|
||||
}, [accountsByMint, obligations]);
|
||||
|
||||
return {
|
||||
|
|
|
@ -1,2 +1,3 @@
|
|||
export * from "./account";
|
||||
export * from "./lending";
|
||||
export * from "./totals";
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
export interface TotalItem {
|
||||
key: string;
|
||||
marketSize: number;
|
||||
borrowed: number;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Totals {
|
||||
marketSize: number;
|
||||
borrowed: number;
|
||||
lentOutPct: number;
|
||||
items: TotalItem[];
|
||||
}
|
|
@ -17,7 +17,7 @@ export const BorrowItem = (props: {
|
|||
const price = useMidPriceInUSD(props.reserve.liquidityMint.toBase58()).price;
|
||||
|
||||
// TODO: calculate avilable amount... based on total owned collateral across all the reserves
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(
|
||||
const { balance: collateralBalance, balanceInUSD: collateralBalanceInUSD } = useUserCollateralBalance(
|
||||
props.reserve
|
||||
);
|
||||
|
||||
|
@ -32,7 +32,10 @@ export const BorrowItem = (props: {
|
|||
</span>
|
||||
<div>${formatNumber.format(price)}</div>
|
||||
<div>
|
||||
{formatNumber.format(collateralBalance)} {name}
|
||||
<div>
|
||||
<div><em>{formatNumber.format(collateralBalance)}</em> {name}</div>
|
||||
<div className="dashboard-amount-quote">${formatNumber.format(collateralBalanceInUSD)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>{formatPct.format(apr)}</div>
|
||||
<div>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
& > :nth-child(n) {
|
||||
flex: 20%;
|
||||
text-align: right;
|
||||
margin: 15px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
|
|
|
@ -12,7 +12,7 @@ export const DashboardDeposits = () => {
|
|||
return (<Card title={
|
||||
<div className="dashboard-title">
|
||||
<div>{LABELS.DASHBOARD_TITLE_DEPOSITS}</div>
|
||||
<div><span>Total: </span>${formatNumber.format(totalInQuote)}</div>
|
||||
<div><span>{LABELS.TOTAL_TITLE}: </span>${formatNumber.format(totalInQuote)}</div>
|
||||
</div>}>
|
||||
<BarChartStatistic
|
||||
items={userDeposits}
|
||||
|
|
|
@ -13,7 +13,7 @@ export const DashboardObligations = () => {
|
|||
<Card title={
|
||||
<div className="dashboard-title">
|
||||
<div>{LABELS.DASHBOARD_TITLE_LOANS}</div>
|
||||
<div><span>Total: </span>${formatNumber.format(totalInQuote)}</div>
|
||||
<div><span>{LABELS.TOTAL_TITLE}: </span>${formatNumber.format(totalInQuote)}</div>
|
||||
</div>}>
|
||||
<BarChartStatistic
|
||||
items={userObligations}
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
flex: 15%;
|
||||
text-align: right;
|
||||
white-space: nowrap;
|
||||
margin: 15px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
|
|
|
@ -17,8 +17,8 @@ export const ReserveItem = (props: {
|
|||
address: PublicKey;
|
||||
}) => {
|
||||
const name = useTokenName(props.reserve.liquidityMint);
|
||||
const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(
|
||||
const { balance: tokenBalance, balanceInUSD: tokenBalanceInUSD } = useUserBalance(props.reserve.liquidityMint);
|
||||
const { balance: collateralBalance, balanceInUSD: collateralBalanceInUSD } = useUserCollateralBalance(
|
||||
props.reserve
|
||||
);
|
||||
|
||||
|
@ -32,10 +32,16 @@ export const ReserveItem = (props: {
|
|||
{name}
|
||||
</span>
|
||||
<div>
|
||||
{formatNumber.format(tokenBalance)} {name}
|
||||
<div>
|
||||
<div><em>{formatNumber.format(tokenBalance)}</em> {name}</div>
|
||||
<div className="dashboard-amount-quote">${formatNumber.format(tokenBalanceInUSD)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{formatNumber.format(collateralBalance)} {name}
|
||||
<div>
|
||||
<div><em>{formatNumber.format(collateralBalance)}</em> {name}</div>
|
||||
<div className="dashboard-amount-quote">${formatNumber.format(collateralBalanceInUSD)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>{formatPct.format(apy)}</div>
|
||||
<div>
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
& > :nth-child(n) {
|
||||
flex: 20%;
|
||||
text-align: right;
|
||||
margin: 15px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
|
|
|
@ -6,23 +6,12 @@ import { cache, ParsedAccount } from "../../contexts/accounts";
|
|||
import { useConnectionConfig } from "../../contexts/connection";
|
||||
import { useMarkets } from "../../contexts/market";
|
||||
import { useLendingReserves } from "../../hooks";
|
||||
import { reserveMarketCap } from "../../models";
|
||||
import { reserveMarketCap, Totals } from "../../models";
|
||||
import { fromLamports, getTokenName, wadToLamports } from "../../utils/utils";
|
||||
import { LendingReserveItem } from "./item";
|
||||
import { BarChartStatistic } from "./../../components/BarChartStatistic";
|
||||
import "./itemStyle.less";
|
||||
|
||||
interface Totals {
|
||||
marketSize: number;
|
||||
borrowed: number;
|
||||
lentOutPct: number;
|
||||
items: {
|
||||
marketSize: number;
|
||||
borrowed: number;
|
||||
name: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export const HomeView = () => {
|
||||
const { reserveAccounts } = useLendingReserves();
|
||||
const { marketEmitter, midPriceInUSD } = useMarkets();
|
||||
|
@ -56,6 +45,7 @@ export const HomeView = () => {
|
|||
}
|
||||
|
||||
let leaf = {
|
||||
key: item.pubkey.toBase58(),
|
||||
marketSize: fromLamports(marketCapLamports, liquidityMint?.info) *
|
||||
midPriceInUSD(liquidityMint?.pubkey.toBase58()),
|
||||
borrowed: fromLamports(
|
||||
|
@ -146,7 +136,7 @@ export const HomeView = () => {
|
|||
<div>{LABELS.TABLE_TITLE_BORROW_APY}</div>
|
||||
</div>
|
||||
{reserveAccounts.map((account) => (
|
||||
<LendingReserveItem reserve={account.info} address={account.pubkey} />
|
||||
<LendingReserveItem reserve={account.info} address={account.pubkey} item={totals.items.find(item => item.key === account.pubkey.toBase58())} />
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
@ -15,10 +15,12 @@ import {
|
|||
import { Link } from "react-router-dom";
|
||||
import { PublicKey } from "@solana/web3.js";
|
||||
import { useMint } from "../../contexts/accounts";
|
||||
import { TotalItem } from "../../models";
|
||||
|
||||
export const LendingReserveItem = (props: {
|
||||
reserve: LendingReserve;
|
||||
address: PublicKey;
|
||||
item?: TotalItem;
|
||||
}) => {
|
||||
const name = useTokenName(props.reserve.liquidityMint);
|
||||
|
||||
|
@ -56,10 +58,16 @@ export const LendingReserveItem = (props: {
|
|||
{name}
|
||||
</span>
|
||||
<div title={marketSize.toString()}>
|
||||
{formatNumber.format(marketSize)} {name}
|
||||
<div>
|
||||
<div><em>{formatNumber.format(marketSize)}</em> {name}</div>
|
||||
<div className="dashboard-amount-quote">${formatNumber.format(props.item?.marketSize)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div title={totalBorrows.toString()}>
|
||||
{formatNumber.format(totalBorrows)} {name}
|
||||
<div>
|
||||
<div><em>{formatNumber.format(totalBorrows)}</em> {name}</div>
|
||||
<div className="dashboard-amount-quote">${formatNumber.format(props.item?.borrowed)}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div title={depositAPY.toString()}>
|
||||
{formatPct.format(depositAPY)}
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
& > :nth-child(n) {
|
||||
flex: 20%;
|
||||
text-align: right;
|
||||
margin: 15px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
& > :nth-child(n) {
|
||||
flex: 20%;
|
||||
text-align: right;
|
||||
margin: 15px 0px;
|
||||
margin: 10px 0px;
|
||||
}
|
||||
|
||||
& > :first-child {
|
||||
|
|
Loading…
Reference in New Issue