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

feat: add totals for overview pages

This commit is contained in:
bartosz-lipinski 2020-12-22 17:30:23 -06:00
parent 0d0b78d36f
commit 45a6ec6d12
16 changed files with 53 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/LiquidateInput/index.tsx
View File

@ -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}

1
src/constants/labels.ts
View File

@ -51,4 +51,5 @@ export const LABELS = {
DASHBOARD_ACTION: "Go to dashboard",
GO_BACK_ACTION: "Go back",
DEPOSIT_ACTION: "Deposit",
TOTAL_TITLE: "Total",
};

3
src/hooks/useUserObligations.ts
View File

@ -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
src/models/index.ts
View File

@ -1,2 +1,3 @@
export * from "./account";
export * from "./lending";
export * from "./totals";

13
src/models/totals.ts Normal file
View File

@ -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[];
}

7
src/views/borrow/item.tsx
View File

@ -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>

2
src/views/borrow/itemStyle.less
View File

@ -9,7 +9,7 @@
& > :nth-child(n) {
flex: 20%;
text-align: right;
margin: 15px 0px;
margin: 10px 0px;
}
& > :first-child {

2
src/views/dashboard/deposit/index.tsx
View File

@ -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}

2
src/views/dashboard/obligation/index.tsx
View File

@ -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}

2
src/views/dashboard/style.less
View File

@ -10,7 +10,7 @@
flex: 15%;
text-align: right;
white-space: nowrap;
margin: 15px 0px;
margin: 10px 0px;
}
& > :first-child {

14
src/views/deposit/view/item.tsx
View File

@ -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>

2
src/views/deposit/view/itemStyle.less
View File

@ -9,7 +9,7 @@
& > :nth-child(n) {
flex: 20%;
text-align: right;
margin: 15px 0px;
margin: 10px 0px;
}
& > :first-child {

16
src/views/home/index.tsx
View File

@ -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>

12
src/views/home/item.tsx
View File

@ -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)}

2
src/views/home/itemStyle.less
View File

@ -9,7 +9,7 @@
& > :nth-child(n) {
flex: 20%;
text-align: right;
margin: 15px 0px;
margin: 10px 0px;
}
& > :first-child {

2
src/views/liquidate/style.less
View File

@ -9,7 +9,7 @@
& > :nth-child(n) {
flex: 20%;
text-align: right;
margin: 15px 0px;
margin: 10px 0px;
}
& > :first-child {