diff --git a/src/actions/borrow.tsx b/src/actions/borrow.tsx index 7fbd565..6f6db29 100644 --- a/src/actions/borrow.tsx +++ b/src/actions/borrow.tsx @@ -23,18 +23,21 @@ import { LendingObligationLayout, borrowInstruction, LendingMarket, + BorrowAmountType, + LendingObligation, } from "../models"; import { toLamports } from "../utils/utils"; export const borrow = async ( from: TokenAccount, amount: number, + amountType: BorrowAmountType, - borrowReserve: LendingReserve, - borrowReserveAddress: PublicKey, + borrowReserve: ParsedAccount, - depositReserve: LendingReserve, - depositReserveAddress: PublicKey, + depositReserve: ParsedAccount, + + exsistingObligation: ParsedAccount | undefined, connection: Connection, wallet: any @@ -82,7 +85,7 @@ export const borrow = async ( instructions, cleanupInstructions, accountRentExempt, - borrowReserve.liquidityMint, + borrowReserve.info.liquidityMint, signers ); @@ -108,23 +111,44 @@ export const borrow = async ( cleanupInstructions = []; const [authority] = await PublicKey.findProgramAddress( - [depositReserve.lendingMarket.toBuffer()], + [depositReserve.info.lendingMarket.toBuffer()], LENDING_PROGRAM_ID ); - const mint = (await cache.query( - connection, - depositReserve.collateralMint, - MintParser - )) as ParsedAccount; - const amountLamports = toLamports(amount, mint?.info); + + + let amountLamports: number = 0; + let fromLamports: number = 0; + if(amountType === BorrowAmountType.LiquidityBorrowAmount) { + // approve max transfer + // TODO: improve contrain by using dex market data + const approvedAmount = from.info.amount.toNumber(); + + fromLamports = approvedAmount - accountRentExempt; + + const mint = (await cache.query( + connection, + borrowReserve.info.liquidityMint, + MintParser + )) as ParsedAccount; + + amountLamports = toLamports(amount, mint?.info); + } else if(amountType === BorrowAmountType.CollateralDepositAmount) { + const mint = (await cache.query( + connection, + depositReserve.info.collateralMint, + MintParser + )) as ParsedAccount; + amountLamports = toLamports(amount, mint?.info); + fromLamports = amountLamports; + } const fromAccount = ensureSplAccount( instructions, cleanupInstructions, from, wallet.publicKey, - amountLamports + accountRentExempt, + fromLamports + accountRentExempt, signers ); @@ -136,17 +160,17 @@ export const borrow = async ( authority, wallet.publicKey, [], - amountLamports + fromLamports ) ); - const market = cache.get(depositReserve.lendingMarket) as ParsedAccount< + const market = cache.get(depositReserve.info.lendingMarket) as ParsedAccount< LendingMarket >; - const dexMarketAddress = borrowReserve.dexMarketOption - ? borrowReserve.dexMarket - : depositReserve.dexMarket; + const dexMarketAddress = borrowReserve.info.dexMarketOption + ? borrowReserve.info.dexMarket + : depositReserve.info.dexMarket; const dexMarket = cache.get(dexMarketAddress); if (!dexMarket) { @@ -154,7 +178,7 @@ export const borrow = async ( } const dexOrderBookSide = market.info.quoteMint.equals( - depositReserve.liquidityMint + depositReserve.info.liquidityMint ) ? dexMarket?.info.bids : dexMarket?.info.asks; @@ -169,12 +193,13 @@ export const borrow = async ( instructions.push( borrowInstruction( amountLamports, + amountType, fromAccount, toAccount, - depositReserveAddress, - depositReserve.collateralSupply, - borrowReserveAddress, - borrowReserve.liquiditySupply, + depositReserve.pubkey, + depositReserve.info.collateralSupply, + borrowReserve.pubkey, + borrowReserve.info.liquiditySupply, obligation, obligationMint, diff --git a/src/components/BorrowInput/index.tsx b/src/components/BorrowInput/index.tsx index 078e445..a3551b3 100644 --- a/src/components/BorrowInput/index.tsx +++ b/src/components/BorrowInput/index.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useMemo, useState } from "react"; import { useTokenName, useUserBalance } from "../../hooks"; -import { LendingReserve, LendingReserveParser } from "../../models"; +import { BorrowAmountType, LendingReserve, LendingReserveParser } from "../../models"; import { TokenIcon } from "../TokenIcon"; import { Button, Card } from "antd"; import { cache, ParsedAccount } from "../../contexts/accounts"; @@ -15,15 +15,13 @@ import { LABELS } from "../../constants"; export const BorrowInput = (props: { className?: string; - reserve: LendingReserve; - address: PublicKey; + reserve: ParsedAccount; }) => { const connection = useConnection(); const { wallet } = useWallet(); const [value, setValue] = useState(""); const borrowReserve = props.reserve; - const borrowReserveAddress = props.address; const [collateralReserveMint, setCollateralReserveMint] = useState(); @@ -36,7 +34,7 @@ export const BorrowInput = (props: { return cache.get(id) as ParsedAccount; }, [collateralReserveMint]); - const name = useTokenName(borrowReserve?.liquidityMint); + const name = useTokenName(borrowReserve?.info.liquidityMint); const { accounts: fromAccounts } = useUserBalance( collateralReserve?.info.collateralMint ); @@ -50,10 +48,11 @@ export const BorrowInput = (props: { borrow( fromAccounts[0], parseFloat(value), + // TODO: switch to collateral when user is using slider + BorrowAmountType.LiquidityBorrowAmount, borrowReserve, - borrowReserveAddress, - collateralReserve.info, - collateralReserve.pubkey, + collateralReserve, + undefined, connection, wallet ); @@ -64,7 +63,6 @@ export const BorrowInput = (props: { collateralReserve, borrowReserve, fromAccounts, - borrowReserveAddress, ]); const bodyStyle: React.CSSProperties = { @@ -86,7 +84,7 @@ export const BorrowInput = (props: { >
{LABELS.BORROW_QUESTION}
- + { @@ -105,7 +103,7 @@ export const BorrowInput = (props: {
{LABELS.SELECT_COLLATERAL}
diff --git a/src/components/ReserveUtilizationChart/index.tsx b/src/components/ReserveUtilizationChart/index.tsx index b7ada0a..ea589a4 100644 --- a/src/components/ReserveUtilizationChart/index.tsx +++ b/src/components/ReserveUtilizationChart/index.tsx @@ -20,13 +20,13 @@ export const ReserveUtilizationChart = (props: { const liquidityMint = useMint(props.reserve.liquidityMint); const avilableLiquidity = fromLamports( - props.reserve.totalLiquidity.toNumber(), + props.reserve.availableLiqudity.toNumber(), liquidityMint ); const totalBorrows = useMemo( () => - fromLamports(wadToLamports(props.reserve.totalBorrowsWad), liquidityMint), + fromLamports(wadToLamports(props.reserve.borrowedLiquidityWad), liquidityMint), [props.reserve, liquidityMint] ); diff --git a/src/components/SideReserveOverview/index.tsx b/src/components/SideReserveOverview/index.tsx index fa6a849..45c9ba3 100644 --- a/src/components/SideReserveOverview/index.tsx +++ b/src/components/SideReserveOverview/index.tsx @@ -4,7 +4,7 @@ import { LendingReserve } from "../../models/lending"; import { TokenIcon } from "../../components/TokenIcon"; import { formatNumber, formatPct, fromLamports } from "../../utils/utils"; import { Card, Typography } from "antd"; -import { useMint } from "../../contexts/accounts"; +import { ParsedAccount, useMint } from "../../contexts/accounts"; import { PublicKey } from "@solana/web3.js"; import { Link } from "react-router-dom"; @@ -17,17 +17,16 @@ export enum SideReserveOverviewMode { export const SideReserveOverview = (props: { className?: string; - reserve: LendingReserve; - address: PublicKey; + reserve: ParsedAccount; mode: SideReserveOverviewMode; }) => { - const reserve = props.reserve; + const reserve = props.reserve.info; const mode = props.mode; const name = useTokenName(reserve?.liquidityMint); - const liquidityMint = useMint(props.reserve.liquidityMint); + const liquidityMint = useMint(reserve.liquidityMint); - const totalLiquidity = fromLamports( - props.reserve.totalLiquidity.toNumber(), + const availableLiqudity = fromLamports( + reserve.availableLiqudity.toNumber(), liquidityMint ); @@ -102,7 +101,7 @@ export const SideReserveOverview = (props: { justifyContent: "center", }} > - +
- {formatNumber.format(totalLiquidity)} {name} + {formatNumber.format(availableLiqudity)} {name}
diff --git a/src/constants/labels.ts b/src/constants/labels.ts index 83a4e97..f7ba836 100644 --- a/src/constants/labels.ts +++ b/src/constants/labels.ts @@ -21,9 +21,14 @@ export const LABELS = { BORROW_QUESTION: "How much would you like to borrow?", BORROW_ACTION: "Borrow", TABLE_TITLE_ASSET: "Asset", - TABLE_TITLE_LOAN_BALANCE: "Your loan balan", + TABLE_TITLE_LOAN_BALANCE: "Your loan balance", + TABLE_TITLE_DEPOSIT_BALANCE: "Your deposit balane", TABLE_TITLE_APY: "APY", TABLE_TITLE_APR: "APR", + TABLE_TITLE_BORROW_APR: "Borrow APR", + TABLE_TITLE_DEPOSIT_APR: "Deposit APY", + TABLE_TITLE_TOTAL_BORROWED: "Total Borrowed", + TABLE_TITLE_MARKET_SIZE: "Market Size", TABLE_TITLE_ACTION: "Action", TABLE_TITLE_MAX_BORROW: "Available fro you", DASHBOARD_TITLE_LOANS: "Loans", diff --git a/src/hooks/index.ts b/src/hooks/index.ts index d52ecbb..754553c 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -8,3 +8,4 @@ export * from "./useLendingObligations"; export * from "./useUserObligations"; export * from "./useUserObligationByReserve"; export * from "./useBorrowedAmount"; +export * from "./useUserDeposits"; diff --git a/src/hooks/useCollateralBalance.ts b/src/hooks/useCollateralBalance.ts index 223a43b..2181f04 100644 --- a/src/hooks/useCollateralBalance.ts +++ b/src/hooks/useCollateralBalance.ts @@ -1,14 +1,15 @@ +import { PublicKey } from "@solana/web3.js"; import { useMint } from "../contexts/accounts"; import { LendingReserve } from "../models/lending"; import { fromLamports } from "../utils/utils"; import { useUserBalance } from "./useUserBalance"; -export function useCollateralBalance(reserve?: LendingReserve) { +export function useCollateralBalance(reserve?: LendingReserve, account?: PublicKey) { const mint = useMint(reserve?.collateralMint); - const { balanceLamports, accounts } = useUserBalance(reserve?.collateralMint); + const { balanceLamports, accounts } = useUserBalance(reserve?.collateralMint, account); const collateralRatioLamports = - (reserve?.totalLiquidity.toNumber() || 0) * + (reserve?.availableLiqudity.toNumber() || 0) * (balanceLamports / (reserve?.collateralMintSupply.toNumber() || 1)); return { diff --git a/src/hooks/useUserBalance.ts b/src/hooks/useUserBalance.ts index caabab9..edc3a5e 100644 --- a/src/hooks/useUserBalance.ts +++ b/src/hooks/useUserBalance.ts @@ -4,12 +4,12 @@ import { useMint } from "../contexts/accounts"; import { fromLamports } from "../utils/utils"; import { useUserAccounts } from "./useUserAccounts"; -export function useUserBalance(mint?: PublicKey) { +export function useUserBalance(mint?: PublicKey, account?: PublicKey) { const { userAccounts } = useUserAccounts(); const mintInfo = useMint(mint); const accounts = useMemo(() => { return userAccounts - .filter((acc) => mint?.equals(acc.info.mint)) + .filter((acc) => mint?.equals(acc.info.mint) && (!account || account.equals(acc.pubkey))) .sort((a, b) => b.info.amount.sub(a.info.amount).toNumber()); }, [userAccounts, mint]); diff --git a/src/hooks/useUserDeposits.ts b/src/hooks/useUserDeposits.ts new file mode 100644 index 0000000..b8115c9 --- /dev/null +++ b/src/hooks/useUserDeposits.ts @@ -0,0 +1,31 @@ +import { ParsedAccount } from "../contexts/accounts"; +import { LendingReserve } from "../models/lending"; +import { useUserAccounts } from "./useUserAccounts"; +import { useLendingReserves } from "./useLendingReserves"; +import { useMemo } from "react"; + +export function useUserDeposits() { + const { userAccounts } = useUserAccounts(); + const { reserveAccounts } = useLendingReserves(); + + const reservesByCollateralMint = useMemo(() => { + return reserveAccounts.reduce((result, item) => { + result.set(item.info.collateralMint.toBase58(), item); + return result; + } + , new Map>()) + }, [reserveAccounts]); + + const userDeposits = useMemo(() => { + return userAccounts + .filter((acc) => reservesByCollateralMint.has(acc.info.mint.toBase58())) + .map(item => ({ + account: item, + reserve: reservesByCollateralMint.get(item.info.mint.toBase58()) as ParsedAccount, + })); + }, [userAccounts, reservesByCollateralMint]); + + return { + userDeposits + }; +} diff --git a/src/models/lending/borrow.ts b/src/models/lending/borrow.ts index 163c750..804338d 100644 --- a/src/models/lending/borrow.ts +++ b/src/models/lending/borrow.ts @@ -12,6 +12,11 @@ import * as Layout from "./../../utils/layout"; import { LendingInstruction } from "./lending"; import { LendingReserve } from "./reserve"; +export enum BorrowAmountType { + LiquidityBorrowAmount = 0, + CollateralDepositAmount = 1 +} + /// Borrow tokens from a reserve by depositing collateral tokens. The number of borrowed tokens /// is calculated by market price. The debt obligation is tokenized. /// @@ -33,7 +38,8 @@ import { LendingReserve } from "./reserve"; /// 15 `[]` Rent sysvar /// 16 '[]` Token program id export const borrowInstruction = ( - collateralAmount: number | BN, + amount: number | BN, + amountType: BorrowAmountType, from: PublicKey, // Collateral input SPL Token account. $authority can transfer $collateralAmount to: PublicKey, // Liquidity output SPL Token account, depositReserve: PublicKey, @@ -55,17 +61,20 @@ export const borrowInstruction = ( ): TransactionInstruction => { const dataLayout = BufferLayout.struct([ BufferLayout.u8("instruction"), - Layout.uint64("collateralAmount"), + Layout.uint64("amount"), + BufferLayout.u8("amountType"), ]); const data = Buffer.alloc(dataLayout.span); dataLayout.encode( { instruction: LendingInstruction.BorrowLiquidity, - collateralAmount: new BN(collateralAmount), + amount: new BN(amount), + amountType, }, data ); + debugger; const keys = [ { pubkey: from, isSigner: false, isWritable: true }, @@ -104,9 +113,9 @@ export const borrowInstruction = ( // deposit APY utilization currentUtilizationRate * borrowAPY export const calculateBorrowAPY = (reserve: LendingReserve) => { - const totalBorrows = reserve.totalBorrowsWad.div(WAD).toNumber(); + const totalBorrows = reserve.borrowedLiquidityWad.div(WAD).toNumber(); const currentUtilization = - totalBorrows / (reserve.totalLiquidity.toNumber() + totalBorrows); + totalBorrows / (reserve.availableLiqudity.toNumber() + totalBorrows); const optimalUtilization = reserve.config.optimalUtilizationRate; let borrowAPY; if (currentUtilization < optimalUtilization) { diff --git a/src/models/lending/deposit.ts b/src/models/lending/deposit.ts index 07e45ec..06a8912 100644 --- a/src/models/lending/deposit.ts +++ b/src/models/lending/deposit.ts @@ -64,9 +64,9 @@ export const depositInstruction = ( }; export const calculateDepositAPY = (reserve: LendingReserve) => { - const totalBorrows = reserve.totalBorrowsWad.div(WAD).toNumber(); + const totalBorrows = reserve.borrowedLiquidityWad.div(WAD).toNumber(); const currentUtilization = - totalBorrows / (reserve.totalLiquidity.toNumber() + totalBorrows); + totalBorrows / (reserve.availableLiqudity.toNumber() + totalBorrows); const borrowAPY = calculateBorrowAPY(reserve); return currentUtilization * borrowAPY; diff --git a/src/models/lending/reserve.ts b/src/models/lending/reserve.ts index 662e33c..2e39bcb 100644 --- a/src/models/lending/reserve.ts +++ b/src/models/lending/reserve.ts @@ -45,9 +45,9 @@ export const LendingReserveLayout: typeof BufferLayout.Structure = BufferLayout. ), Layout.uint128("cumulativeBorrowRateWad"), - Layout.uint128("totalBorrowsWad"), + Layout.uint128("borrowedLiquidityWad"), - Layout.uint64("totalLiquidity"), + Layout.uint64("availableLiqudity"), Layout.uint64("collateralMintSupply"), ] ); @@ -83,9 +83,9 @@ export interface LendingReserve { // collateralFactor: number; cumulativeBorrowRateWad: BN; - totalBorrowsWad: BN; + borrowedLiquidityWad: BN; - totalLiquidity: BN; + availableLiqudity: BN; collateralMintSupply: BN; // Layout.uint128("cumulative_borrow_rate"), diff --git a/src/routes.tsx b/src/routes.tsx index 60c3deb..41810da 100644 --- a/src/routes.tsx +++ b/src/routes.tsx @@ -32,6 +32,11 @@ export function Routes() { } /> + } + /> { + const name = useTokenName(props.reserve.liquidityMint); + const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint); + const { balance: collateralBalance } = useCollateralBalance(props.reserve); + + return ( + + +
+ + + {name} + +
+ {formatNumber.format(tokenBalance)} {name} +
+
+ {formatNumber.format(collateralBalance)} {name} +
+
--
+
+ +
+
+ + + ); +}; diff --git a/src/views/borrowDashboard/index.tsx b/src/views/borrowDashboard/index.tsx new file mode 100644 index 0000000..7311db2 --- /dev/null +++ b/src/views/borrowDashboard/index.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { LABELS } from "../../constants"; +import { useUserDeposits, useUserObligations } from "./../../hooks"; +import { ObligationItem } from "./obligationItem"; +import "./style.less"; + +export const DashboardView = () => { + const { userObligations } = useUserObligations(); + const { userDeposits } = useUserDeposits(); + + return ( +
+
+ {LABELS.DASHBOARD_TITLE_DEPOSITS} +
+
+ {LABELS.DASHBOARD_TITLE_LOANS} + {userObligations.length > 0 && ( +
+
{LABELS.TABLE_TITLE_ASSET}
+
{LABELS.TABLE_TITLE_LOAN_BALANCE}
+
{LABELS.TABLE_TITLE_APY}
+
{LABELS.TABLE_TITLE_ACTION}
+
+ )} + {userObligations.map((item) => { + return ; + })} +
+
+ ); +}; diff --git a/src/views/borrowDashboard/obligationItem.tsx b/src/views/borrowDashboard/obligationItem.tsx new file mode 100644 index 0000000..bdc8cee --- /dev/null +++ b/src/views/borrowDashboard/obligationItem.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import { useTokenName } from "../../hooks"; +import { LendingObligation, LendingReserve } from "../../models/lending"; +import { TokenIcon } from "../../components/TokenIcon"; +import { wadToLamports, formatNumber, fromLamports } from "../../utils/utils"; +import { Button, Card } from "antd"; +import { Link } from "react-router-dom"; +import { cache, ParsedAccount, useMint } from "../../contexts/accounts"; + +export const ObligationItem = (props: { + obligation: ParsedAccount; +}) => { + const { obligation } = props; + + const borrowReserve = cache.get( + obligation.info.borrowReserve + ) as ParsedAccount; + + const name = useTokenName(borrowReserve?.info.liquidityMint); + + const liquidityMint = useMint(borrowReserve.info.liquidityMint); + + const borrowAmount = fromLamports( + wadToLamports(obligation.info.borrowAmountWad), + liquidityMint + ); + + return ( + + +
+ + + {name} + +
+ {formatNumber.format(borrowAmount)} {name} +
+
--
+
+ +
+
+ + + ); +}; diff --git a/src/views/borrowDashboard/style.less b/src/views/borrowDashboard/style.less new file mode 100644 index 0000000..93248e9 --- /dev/null +++ b/src/views/borrowDashboard/style.less @@ -0,0 +1,50 @@ +.dashboard-item { + display: flex; + justify-content: space-between; + align-items: center; + + & > div, span { + flex: 20%; + height: 22px; + text-align: right; + } + + & > :first-child { + flex: 80px + } +} + +.dashboard-header { + margin: 0px 30px; + + & > div { + flex: 20%; + text-align: right; + } + + & > :first-child { + text-align: left; + flex: 80px + } +} + +.dashboard-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; +} + +.dashboard-right { + flex: 50%; +} + +.dashboard-left { + flex: 50%; +} + +@media (max-width: 600px) { + .dashboard-right, .dashboard-left { + flex: 100%; + } +} diff --git a/src/views/borrowReserve/index.tsx b/src/views/borrowReserve/index.tsx index a7bcbb9..14efa9c 100644 --- a/src/views/borrowReserve/index.tsx +++ b/src/views/borrowReserve/index.tsx @@ -12,9 +12,8 @@ import { export const BorrowReserveView = () => { const { id } = useParams<{ id: string }>(); const lendingReserve = useLendingReserve(id); - const reserve = lendingReserve?.info; - if (!reserve || !lendingReserve) { + if (!lendingReserve) { return null; } @@ -23,13 +22,11 @@ export const BorrowReserveView = () => {
diff --git a/src/views/dashboard/depositItem.tsx b/src/views/dashboard/depositItem.tsx index 3bfa69d..40b5202 100644 --- a/src/views/dashboard/depositItem.tsx +++ b/src/views/dashboard/depositItem.tsx @@ -10,33 +10,34 @@ import { formatNumber } from "../../utils/utils"; import { Button, Card } from "antd"; import { Link } from "react-router-dom"; import { PublicKey } from "@solana/web3.js"; +import { TokenAccount } from "../../models"; +import { ParsedAccount } from "../../contexts/accounts"; -export const ReserveItem = (props: { - reserve: LendingReserve; - address: PublicKey; +export const DepositItem = (props: { + reserve: ParsedAccount; + account: TokenAccount; }) => { - const name = useTokenName(props.reserve.liquidityMint); - const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint); - const { balance: collateralBalance } = useCollateralBalance(props.reserve); + const account = props.account.info; + + const mintAddress = props.reserve.info.liquidityMint; + const name = useTokenName(mintAddress); + const { balance: collateralBalance } = useCollateralBalance(props.reserve.info, props.account.pubkey); return ( - +
- + {name} -
- {formatNumber.format(tokenBalance)} {name} -
{formatNumber.format(collateralBalance)} {name}
--
diff --git a/src/views/dashboard/index.tsx b/src/views/dashboard/index.tsx index a1752a6..337026a 100644 --- a/src/views/dashboard/index.tsx +++ b/src/views/dashboard/index.tsx @@ -1,24 +1,37 @@ import React from "react"; import { LABELS } from "../../constants"; -import { useUserObligations } from "./../../hooks"; +import { useUserDeposits, useUserObligations } from "./../../hooks"; +import { DepositItem } from "./depositItem"; import { ObligationItem } from "./obligationItem"; import "./style.less"; export const DashboardView = () => { const { userObligations } = useUserObligations(); - + const { userDeposits } = useUserDeposits(); + return (
-
+
{LABELS.DASHBOARD_TITLE_DEPOSITS} + {userDeposits.length > 0 && ( +
+
{LABELS.TABLE_TITLE_DEPOSIT_BALANCE}
+
{LABELS.TABLE_TITLE_LOAN_BALANCE}
+
{LABELS.TABLE_TITLE_APY}
+
{LABELS.TABLE_TITLE_ACTION}
+
+ )} + {userDeposits.map(deposit => ) + + }
-
+
{LABELS.DASHBOARD_TITLE_LOANS} {userObligations.length > 0 && (
{LABELS.TABLE_TITLE_ASSET}
{LABELS.TABLE_TITLE_LOAN_BALANCE}
-
{LABELS.TABLE_TITLE_APY}
+
{LABELS.TABLE_TITLE_APR}
{LABELS.TABLE_TITLE_ACTION}
)} diff --git a/src/views/dashboard/style.less b/src/views/dashboard/style.less index ed46ad7..93248e9 100644 --- a/src/views/dashboard/style.less +++ b/src/views/dashboard/style.less @@ -26,4 +26,25 @@ text-align: left; flex: 80px } -} \ No newline at end of file +} + +.dashboard-container { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1; +} + +.dashboard-right { + flex: 50%; +} + +.dashboard-left { + flex: 50%; +} + +@media (max-width: 600px) { + .dashboard-right, .dashboard-left { + flex: 100%; + } +} diff --git a/src/views/depositReserve/index.tsx b/src/views/depositReserve/index.tsx index 846ce4d..011ec37 100644 --- a/src/views/depositReserve/index.tsx +++ b/src/views/depositReserve/index.tsx @@ -34,8 +34,7 @@ export const DepositReserveView = () => { />
diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index 9fd4712..40e2229 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { LABELS } from "../../constants"; import { useLendingReserves } from "../../hooks"; import { LendingReserveItem } from "./item"; import "./itemStyle.less"; @@ -11,11 +12,11 @@ export const HomeView = () => { return (
-
Asset
-
Market Size
-
Total Borrowed
-
Deposit APY
-
Borrow APY
+
{LABELS.TABLE_TITLE_ASSET}
+
{LABELS.TABLE_TITLE_MARKET_SIZE}
+
{LABELS.TABLE_TITLE_TOTAL_BORROWED}
+
{LABELS.TABLE_TITLE_DEPOSIT_APR}
+
{LABELS.TABLE_TITLE_BORROW_APR}
{reserveAccounts.map((account) => ( diff --git a/src/views/home/item.tsx b/src/views/home/item.tsx index b61cd71..c74e2a8 100644 --- a/src/views/home/item.tsx +++ b/src/views/home/item.tsx @@ -21,14 +21,14 @@ export const LendingReserveItem = (props: { const liquidityMint = useMint(props.reserve.liquidityMint); - const totalLiquidity = fromLamports( - props.reserve.totalLiquidity.toNumber(), + const availableLiqudity = fromLamports( + props.reserve.availableLiqudity.toNumber(), liquidityMint ); const totalBorrows = useMemo( () => - fromLamports(wadToLamports(props.reserve.totalBorrowsWad), liquidityMint), + fromLamports(wadToLamports(props.reserve.borrowedLiquidityWad), liquidityMint), [props.reserve, liquidityMint] ); @@ -40,7 +40,7 @@ export const LendingReserveItem = (props: { props.reserve, ]); - const marketSize = totalLiquidity+totalBorrows; + const marketSize = availableLiqudity+totalBorrows; return ( diff --git a/src/views/repayReserve/index.tsx b/src/views/repayReserve/index.tsx index 29aa820..ffba62b 100644 --- a/src/views/repayReserve/index.tsx +++ b/src/views/repayReserve/index.tsx @@ -38,8 +38,7 @@ export const RepayReserveView = () => { />
diff --git a/src/views/withdraw/index.tsx b/src/views/withdraw/index.tsx index 969aa19..8627903 100644 --- a/src/views/withdraw/index.tsx +++ b/src/views/withdraw/index.tsx @@ -34,8 +34,7 @@ export const WithdrawView = () => { />