diff --git a/src/components/BorrowInput/index.tsx b/src/components/BorrowInput/index.tsx index 0900de4..bb7da04 100644 --- a/src/components/BorrowInput/index.tsx +++ b/src/components/BorrowInput/index.tsx @@ -1,17 +1,56 @@ import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; +import { useCollateralBalance, useLendingReserve, useLendingReserves, useTokenName, useUserAccounts, useUserBalance } from '../../hooks'; +import { LendingReserve, LendingReserveParser } from "../../models"; import { TokenIcon } from "../TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; +import { formatNumber, getTokenName } from "../../utils/utils"; +import { Button, Card, Select } from "antd"; import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; +import { cache, ParsedAccount, useAccount } from "../../contexts/accounts"; import { NumericInput } from "../Input/numeric"; -import { useConnection } from "../../contexts/connection"; +import { useConnection, useConnectionConfig } from "../../contexts/connection"; import { useWallet } from "../../contexts/wallet"; import { borrow } from '../../actions'; import { PublicKey } from "@solana/web3.js"; import './style.less'; +import { Token } from "@solana/spl-token"; + +const { Option } = Select; + +const CollateralSelector = (props: { + mint?: string, + onMintChange: (id: string) => void; +}) => { + const { reserveAccounts } = useLendingReserves(); + const { tokenMap } = useConnectionConfig(); + + return ; +} export const BorrowInput = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => { const connection = useConnection(); @@ -22,32 +61,43 @@ export const BorrowInput = (props: { className?: string, reserve: LendingReserve const borrowReserve = props.reserve; const borrowReserveAddress = props.address; - const [collateralReserve, setCollateralReserve] = useState(); + const [collateralReserveMint, setCollateralReserveMint] = useState(); + - const collateralReserveAddress = useMemo(() => { - return cache.byParser(LendingReserveParser) - .find(acc => cache.get(acc) === collateralReserve); - }, [collateralReserve]) + const collateralReserve = useMemo(() => { + const id: string = cache.byParser(LendingReserveParser) + .find(acc => acc === collateralReserveMint) || ''; + + return cache.get(id) as ParsedAccount; + }, [collateralReserveMint]) + + const collateral = useCollateralBalance(collateralReserve?.info); const name = useTokenName(borrowReserve?.liquidityMint); - const { - balance: tokenBalance, - accounts: fromAccounts - } = useUserBalance(collateralReserve?.liquidityMint); + const { + balance: tokenBalance, + accounts: fromAccounts + } = useUserBalance(collateralReserve?.info.collateralMint); // const collateralBalance = useUserBalance(reserve?.collateralMint); + if(collateral) { + debugger; + } + const onBorrow = useCallback(() => { - if(!collateralReserve || !collateralReserveAddress) { + if (!collateralReserve) { return; } + debugger; + borrow( fromAccounts[0], parseFloat(value), borrowReserve, borrowReserveAddress, - collateralReserve, - new PublicKey(collateralReserveAddress), + collateralReserve.info, + collateralReserve.pubkey, connection, wallet); }, [value, borrowReserve, fromAccounts, borrowReserveAddress]); @@ -83,6 +133,13 @@ export const BorrowInput = (props: { className?: string, reserve: LendingReserve />
{name}
+
+ Select collateral account? +
+ diff --git a/src/components/DepositInfoLine/index.tsx b/src/components/DepositInfoLine/index.tsx index 0d23f7e..ee9f94f 100644 --- a/src/components/DepositInfoLine/index.tsx +++ b/src/components/DepositInfoLine/index.tsx @@ -1,15 +1,8 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance, useCollateralBalance } from './../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; +import React, { } from "react"; +import { useTokenName, useUserBalance, useCollateralBalance } from './../../hooks'; +import { LendingReserve } from "../../models/lending"; import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; -import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; -import { NumericInput } from "../../components/Input/numeric"; -import { useConnection } from "../../contexts/connection"; -import { useWallet } from "../../contexts/wallet"; -import { deposit } from './../../actions/deposit'; +import { Card } from "antd"; import './style.less'; import { PublicKey } from "@solana/web3.js"; diff --git a/src/components/ReserveStatus/index.tsx b/src/components/ReserveStatus/index.tsx index f71afcd..c6b64e4 100644 --- a/src/components/ReserveStatus/index.tsx +++ b/src/components/ReserveStatus/index.tsx @@ -1,30 +1,11 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; -import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; -import { NumericInput } from "../../components/Input/numeric"; -import { useConnection } from "../../contexts/connection"; -import { useWallet } from "../../contexts/wallet"; -import { deposit } from './../../actions/deposit'; +import React, { useState } from "react"; +import { LendingReserve } from "../../models/lending"; +import { Card } from "antd"; import { PublicKey } from "@solana/web3.js"; import './style.less'; export const ReserveStatus = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => { - const connection = useConnection(); - const { wallet } = useWallet(); - const { id } = useParams<{ id: string }>(); - const [value, setValue] = useState(''); - - const reserve = props.reserve; - const address = props.address; - - const name = useTokenName(reserve?.liquidityMint); - const { balance: tokenBalance, accounts: fromAccounts } = useUserBalance(reserve?.liquidityMint); - + const [] = useState(''); const bodyStyle: React.CSSProperties = { display: 'flex', diff --git a/src/components/UserLendingCard/index.tsx b/src/components/UserLendingCard/index.tsx index dcb7896..1329b36 100644 --- a/src/components/UserLendingCard/index.tsx +++ b/src/components/UserLendingCard/index.tsx @@ -1,11 +1,10 @@ -import React, { useMemo } from "react"; -import { useCollateralBalance, useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber, formatPct, fromLamports } from "../../utils/utils"; +import React from "react"; +import { useCollateralBalance, useTokenName, useUserBalance } from './../../hooks'; +import { LendingReserve } from "../../models/lending"; +import { formatNumber, fromLamports } from "../../utils/utils"; import { Button, Card, Typography } from "antd"; -import { Link, useParams } from "react-router-dom"; -import { useAccount, useMint } from "../../contexts/accounts"; +import { Link } from "react-router-dom"; +import { useMint } from "../../contexts/accounts"; import { PublicKey } from "@solana/web3.js"; const { Text } = Typography; @@ -24,7 +23,6 @@ export const UserLendingCard = (props: { const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint); const { balance: collateralBalance } = useCollateralBalance(props.reserve); - const totalLiquidity = fromLamports(props.reserve.totalLiquidity.toNumber(), liquidityMint); // TODO: calculate const borrowed = 0; diff --git a/src/contexts/accounts.tsx b/src/contexts/accounts.tsx index b85181c..828583f 100644 --- a/src/contexts/accounts.tsx +++ b/src/contexts/accounts.tsx @@ -352,13 +352,17 @@ export const getMultipleAccounts = async ( .map( (a) => a.array.map((acc) => { + if(!acc) { + return; + } + const { data, ...rest } = acc; const obj = { ...rest, data: Buffer.from(data[0], "base64"), } as AccountInfo; return obj; - }) as AccountInfo[] + }).filter(_ => _) as AccountInfo[] ) .flat(); return { keys, array }; diff --git a/src/contexts/lending.tsx b/src/contexts/lending.tsx index db892ca..e7ce90e 100644 --- a/src/contexts/lending.tsx +++ b/src/contexts/lending.tsx @@ -1,10 +1,9 @@ -import React, { useCallback, useContext, useEffect, useState } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import { useConnection } from "./connection"; import { LENDING_PROGRAM_ID } from "./../constants/ids"; -import { LendingReserveLayout, LendingMarketLayout, LendingMarket, LendingMarketParser, isLendingReserve, isLendingMarket, LendingReserveParser, LendingReserve } from "./../models/lending"; -import { cache, getMultipleAccounts, ParsedAccount } from "./accounts"; -import { AccountInfo, PublicKey } from "@solana/web3.js"; -import { isForInStatement } from "typescript"; +import { LendingMarketParser, isLendingReserve, isLendingMarket, LendingReserveParser, LendingReserve } from "./../models/lending"; +import { cache, getMultipleAccounts } from "./accounts"; +import { PublicKey } from "@solana/web3.js"; export interface LendingContextState { @@ -64,7 +63,6 @@ export const useLending = () => { await getMultipleAccounts(connection, toQuery, "single").then( ({ keys, array }) => { return array.map((obj, index) => { - const pubKey = new PublicKey(keys[index]); // TODO: add to cache return obj; diff --git a/src/hooks/useCollateralBalance.ts b/src/hooks/useCollateralBalance.ts index a290751..42fb550 100644 --- a/src/hooks/useCollateralBalance.ts +++ b/src/hooks/useCollateralBalance.ts @@ -1,16 +1,19 @@ -import { PublicKey } from "@solana/web3.js"; -import { useMemo } from "react"; -import { useAccount, useMint } from "../contexts/accounts"; +import { useMint } from "../contexts/accounts"; import { LendingReserve } from "../models/lending"; import { fromLamports } from "../utils/utils"; -import { useUserAccounts } from "./useUserAccounts"; import { useUserBalance } from "./useUserBalance"; export function useCollateralBalance(reserve?: LendingReserve) { const mint = useMint(reserve?.collateralMint); - const { balance: nativeBalance, accounts } = useUserBalance(reserve?.collateralMint, true); + const { balanceLamports, accounts } = useUserBalance(reserve?.collateralMint); - const balance = fromLamports((reserve?.totalLiquidity.toNumber() || 0) * (nativeBalance / (reserve?.collateralMintSupply.toNumber() || 1)), mint); + const collateralRatioLamports = + (reserve?.totalLiquidity.toNumber() || 0) * + (balanceLamports / (reserve?.collateralMintSupply.toNumber() || 1)); - return { balance, accounts }; + return { + balance: fromLamports(collateralRatioLamports, mint), + balanceLamports: collateralRatioLamports, + accounts + }; } \ No newline at end of file diff --git a/src/hooks/useUserBalance.ts b/src/hooks/useUserBalance.ts index 01fdadf..af30b92 100644 --- a/src/hooks/useUserBalance.ts +++ b/src/hooks/useUserBalance.ts @@ -4,7 +4,7 @@ import { useMint } from "../contexts/accounts"; import { fromLamports } from "../utils/utils"; import { useUserAccounts } from "./useUserAccounts"; -export function useUserBalance(mint?: PublicKey, inLamports = false) { +export function useUserBalance(mint?: PublicKey) { const { userAccounts } = useUserAccounts(); const mintInfo = useMint(mint); const accounts = useMemo(() => { @@ -13,11 +13,14 @@ export function useUserBalance(mint?: PublicKey, inLamports = false) { .sort((a, b) => b.info.amount.sub(a.info.amount).toNumber()); }, [userAccounts]); - const balance = useMemo(() => { - const result = accounts + const balanceLamports = useMemo(() => { + return accounts .reduce((res, item) => res += item.info.amount.toNumber(), 0); - return inLamports ? result : fromLamports(result , mintInfo); },[accounts, mintInfo]); - return { balance, accounts }; + return { + balance: fromLamports(balanceLamports, mintInfo), + balanceLamports, + accounts, + }; } \ No newline at end of file diff --git a/src/models/lending/reserve.ts b/src/models/lending/reserve.ts index 1ff7ada..12476d4 100644 --- a/src/models/lending/reserve.ts +++ b/src/models/lending/reserve.ts @@ -1,8 +1,6 @@ import { AccountInfo, - Connection, PublicKey, - sendAndConfirmRawTransaction, SYSVAR_CLOCK_PUBKEY, SYSVAR_RENT_PUBKEY, TransactionInstruction, @@ -10,7 +8,6 @@ import { import BN from "bn.js"; import * as BufferLayout from "buffer-layout"; import { LENDING_PROGRAM_ID, TOKEN_PROGRAM_ID } from "../../constants/ids"; -import { sendTransaction } from "../../contexts/connection"; import * as Layout from "./../../utils/layout"; import { LendingInstruction } from './lending'; diff --git a/src/views/borrowReserve/index.tsx b/src/views/borrowReserve/index.tsx index cb06950..7cd147f 100644 --- a/src/views/borrowReserve/index.tsx +++ b/src/views/borrowReserve/index.tsx @@ -1,23 +1,14 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; +import React, { } from "react"; +import { useLendingReserve } from '../../hooks'; import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; -import { NumericInput } from "../../components/Input/numeric"; import { useConnection } from "../../contexts/connection"; import { useWallet } from "../../contexts/wallet"; -import { deposit } from '../../actions/deposit'; import './style.less'; import { BorrowInput } from '../../components/BorrowInput'; import { SideReserveOverview, SideReserveOverviewMode } from '../../components/SideReserveOverview'; export const BorrowReserveView = () => { - const connection = useConnection(); - const { wallet } = useWallet(); const { id } = useParams<{ id: string }>(); const lendingReserve = useLendingReserve(id); const reserve = lendingReserve?.info; diff --git a/src/views/deposit/view/item.tsx b/src/views/deposit/view/item.tsx index 3fdd42e..39805e0 100644 --- a/src/views/deposit/view/item.tsx +++ b/src/views/deposit/view/item.tsx @@ -1,5 +1,5 @@ -import React, { useMemo } from "react"; -import { useCollateralBalance, useTokenName, useUserAccounts, useUserBalance } from '../../../hooks'; +import React from "react"; +import { useCollateralBalance, useTokenName, useUserBalance } from '../../../hooks'; import { LendingReserve } from "../../../models/lending"; import { TokenIcon } from "../../../components/TokenIcon"; import { formatNumber } from "../../../utils/utils"; diff --git a/src/views/depositReserve/index.tsx b/src/views/depositReserve/index.tsx index 403baa2..385af54 100644 --- a/src/views/depositReserve/index.tsx +++ b/src/views/depositReserve/index.tsx @@ -1,15 +1,6 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from '../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; +import React, { } from "react"; +import { useLendingReserve } from '../../hooks'; import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; -import { NumericInput } from "../../components/Input/numeric"; -import { useConnection } from "../../contexts/connection"; -import { useWallet } from "../../contexts/wallet"; -import { deposit } from '../../actions/deposit'; import './style.less'; import { DepositInput } from '../../components/DepositInput'; @@ -17,8 +8,6 @@ import { DepositInfoLine } from '../../components/DepositInfoLine'; import { SideReserveOverview, SideReserveOverviewMode } from '../../components/SideReserveOverview'; export const DepositReserveView = () => { - const connection = useConnection(); - const { wallet } = useWallet(); const { id } = useParams<{ id: string }>(); const lendingReserve = useLendingReserve(id); const reserve = lendingReserve?.info; diff --git a/src/views/home/index.tsx b/src/views/home/index.tsx index cc965ca..415035d 100644 --- a/src/views/home/index.tsx +++ b/src/views/home/index.tsx @@ -1,9 +1,5 @@ -import React, { useMemo } from "react"; -import { useLendingReserves, useTokenName, useUserAccounts, useUserBalance } from '../../hooks'; -import { LendingReserve } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button } from "antd"; +import React from "react"; +import { useLendingReserves } from '../../hooks'; import { LendingReserveItem } from "./item"; import './itemStyle.less'; diff --git a/src/views/reserve/index.tsx b/src/views/reserve/index.tsx index 41ed7ed..d866494 100644 --- a/src/views/reserve/index.tsx +++ b/src/views/reserve/index.tsx @@ -1,24 +1,12 @@ -import React, { useCallback, useEffect, useMemo, useState } from "react"; -import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; -import { LendingReserve, LendingReserveParser } from "../../models/lending"; -import { TokenIcon } from "../../components/TokenIcon"; -import { formatNumber } from "../../utils/utils"; -import { Button, Card } from "antd"; +import React, { } from "react"; +import { useLendingReserve } from './../../hooks'; import { useParams } from "react-router-dom"; -import { cache, useAccount } from "../../contexts/accounts"; -import { NumericInput } from "../../components/Input/numeric"; -import { useConnection } from "../../contexts/connection"; -import { useWallet } from "../../contexts/wallet"; -import { deposit } from './../../actions/deposit'; import './style.less'; -import { DepositInput } from '../../components/DepositInput'; import { UserLendingCard } from './../../components/UserLendingCard'; import { ReserveStatus } from './../../components/ReserveStatus'; export const ReserveView = () => { - const connection = useConnection(); - const { wallet } = useWallet(); const { id } = useParams<{ id: string }>(); const lendingReserve = useLendingReserve(id); const reserve = lendingReserve?.info;