mirror of https://github.com/certusone/oyster.git
feat: add exchnage rate
This commit is contained in:
parent
c753d150a1
commit
2b31d79654
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import {
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
useCollateralBalance,
|
||||
useUserCollateralBalance,
|
||||
} from "./../../hooks";
|
||||
import { LendingReserve } from "../../models/lending";
|
||||
import { formatNumber } from "../../utils/utils";
|
||||
|
@ -17,7 +17,7 @@ export const DepositInfoLine = (props: {
|
|||
}) => {
|
||||
const name = useTokenName(props.reserve.liquidityMint);
|
||||
const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
|
||||
const { balance: collateralBalance } = useCollateralBalance(props.reserve);
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
|
||||
|
||||
return (
|
||||
<Card
|
||||
|
|
|
@ -46,7 +46,7 @@ export const DepositInput = (props: {
|
|||
[balance]
|
||||
);
|
||||
|
||||
const { value, setValue, mark, setMark, type } = useSliderInput(convert);
|
||||
const { value, setValue, pct, setPct, type } = useSliderInput(convert);
|
||||
|
||||
const onDeposit = useCallback(() => {
|
||||
setPendingTx(true);
|
||||
|
@ -55,8 +55,8 @@ export const DepositInput = (props: {
|
|||
try {
|
||||
await deposit(
|
||||
fromAccounts[0],
|
||||
type === InputType.Slider
|
||||
? (mark * balanceLamports) / 100
|
||||
type === InputType.Percent
|
||||
? (pct * balanceLamports) / 100
|
||||
: Math.ceil(balanceLamports * (parseFloat(value) / balance)),
|
||||
reserve,
|
||||
address,
|
||||
|
@ -79,7 +79,7 @@ export const DepositInput = (props: {
|
|||
balance,
|
||||
wallet,
|
||||
value,
|
||||
mark,
|
||||
pct,
|
||||
type,
|
||||
reserve,
|
||||
fromAccounts,
|
||||
|
@ -126,7 +126,7 @@ export const DepositInput = (props: {
|
|||
<div>{name}</div>
|
||||
</div>
|
||||
|
||||
<Slider marks={marks} value={mark} onChange={setMark} />
|
||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
|
|
|
@ -69,7 +69,7 @@ export const RepayInput = (props: {
|
|||
[borrowAmount]
|
||||
);
|
||||
|
||||
const { value, setValue, mark, setMark, type } = useSliderInput(convert);
|
||||
const { value, setValue, pct, setPct, type } = useSliderInput(convert);
|
||||
|
||||
const onRepay = useCallback(() => {
|
||||
if (
|
||||
|
@ -85,8 +85,8 @@ export const RepayInput = (props: {
|
|||
|
||||
(async () => {
|
||||
try {
|
||||
const toRepayLamports = type === InputType.Slider
|
||||
? (mark * borrowAmountLamports) / 100
|
||||
const toRepayLamports = type === InputType.Percent
|
||||
? (pct * borrowAmountLamports) / 100
|
||||
: Math.ceil(borrowAmountLamports * (parseFloat(value) / borrowAmount));
|
||||
|
||||
await repay(
|
||||
|
@ -114,7 +114,7 @@ export const RepayInput = (props: {
|
|||
}
|
||||
})();
|
||||
}, [
|
||||
mark,
|
||||
pct,
|
||||
value,
|
||||
borrowAmount,
|
||||
borrowAmountLamports,
|
||||
|
@ -170,8 +170,8 @@ export const RepayInput = (props: {
|
|||
</div>
|
||||
<Slider
|
||||
marks={marks}
|
||||
value={mark}
|
||||
onChange={setMark}
|
||||
value={pct}
|
||||
onChange={setPct}
|
||||
/>
|
||||
<div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
|
||||
<CollateralSelector
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import {
|
||||
useCollateralBalance,
|
||||
useUserCollateralBalance,
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
useBorrowedAmount,
|
||||
|
@ -24,7 +24,7 @@ export const UserLendingCard = (props: {
|
|||
const name = useTokenName(reserve?.liquidityMint);
|
||||
|
||||
const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
|
||||
const { balance: collateralBalance } = useCollateralBalance(props.reserve);
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
|
||||
|
||||
const { borrowed: totalBorrowed } = useBorrowedAmount(address);
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
import {
|
||||
InputType,
|
||||
useCollateralBalance,
|
||||
useUserCollateralBalance,
|
||||
useSliderInput,
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
|
@ -36,7 +36,7 @@ export const WithdrawInput = (props: {
|
|||
balanceLamports: collateralBalanceLamports,
|
||||
accounts: fromAccounts,
|
||||
} = useUserBalance(reserve?.collateralMint);
|
||||
const { balance: collateralBalanceInLiquidity } = useCollateralBalance(
|
||||
const { balance: collateralBalanceInLiquidity } = useUserCollateralBalance(
|
||||
reserve
|
||||
);
|
||||
|
||||
|
@ -51,7 +51,7 @@ export const WithdrawInput = (props: {
|
|||
[collateralBalanceInLiquidity]
|
||||
);
|
||||
|
||||
const { value, setValue, mark, setMark, type } = useSliderInput(convert);
|
||||
const { value, setValue, pct, setPct, type } = useSliderInput(convert);
|
||||
|
||||
const onWithdraw = useCallback(() => {
|
||||
setPendingTx(true);
|
||||
|
@ -60,8 +60,8 @@ export const WithdrawInput = (props: {
|
|||
try {
|
||||
await withdraw(
|
||||
fromAccounts[0],
|
||||
type === InputType.Slider
|
||||
? (mark * collateralBalanceLamports) / 100
|
||||
type === InputType.Percent
|
||||
? (pct * collateralBalanceLamports) / 100
|
||||
: Math.ceil(
|
||||
collateralBalanceLamports *
|
||||
(parseFloat(value) / collateralBalanceInLiquidity)
|
||||
|
@ -86,7 +86,7 @@ export const WithdrawInput = (props: {
|
|||
collateralBalanceLamports,
|
||||
connection,
|
||||
fromAccounts,
|
||||
mark,
|
||||
pct,
|
||||
reserve,
|
||||
setValue,
|
||||
type,
|
||||
|
@ -132,7 +132,7 @@ export const WithdrawInput = (props: {
|
|||
<div>{name}</div>
|
||||
</div>
|
||||
|
||||
<Slider marks={marks} value={mark} onChange={setMark} />
|
||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||
|
||||
<Button
|
||||
type="primary"
|
||||
|
|
|
@ -4,7 +4,7 @@ import { LendingReserve, reserveMarketCap } from "../models/lending";
|
|||
import { fromLamports } from "../utils/utils";
|
||||
import { useUserBalance } from "./useUserBalance";
|
||||
|
||||
export function useCollateralBalance(
|
||||
export function useUserCollateralBalance(
|
||||
reserve?: LendingReserve,
|
||||
account?: PublicKey
|
||||
) {
|
||||
|
|
|
@ -1,36 +1,36 @@
|
|||
import { useCallback, useState } from "react";
|
||||
|
||||
export enum InputType {
|
||||
Input = 0,
|
||||
Slider = 1,
|
||||
AbsoluteValue = 0,
|
||||
Percent = 1,
|
||||
}
|
||||
|
||||
export const useSliderInput = (
|
||||
convert: (val: string | number) => string | number
|
||||
) => {
|
||||
const [value, setValue] = useState("");
|
||||
const [mark, setMark] = useState(0);
|
||||
const [type, setType] = useState(InputType.Slider);
|
||||
const [pct, setPct] = useState(0);
|
||||
const [type, setType] = useState(InputType.Percent);
|
||||
|
||||
return {
|
||||
value,
|
||||
setValue: useCallback(
|
||||
(val: string) => {
|
||||
console.log(val);
|
||||
setType(InputType.Input);
|
||||
setType(InputType.AbsoluteValue);
|
||||
setValue(val);
|
||||
setMark(convert(val) as number);
|
||||
setPct(convert(val) as number);
|
||||
},
|
||||
[setType, setValue, setMark, convert]
|
||||
[setType, setValue, setPct, convert]
|
||||
),
|
||||
mark,
|
||||
setMark: useCallback(
|
||||
pct,
|
||||
setPct: useCallback(
|
||||
(val: number) => {
|
||||
setType(InputType.Input);
|
||||
setMark(val);
|
||||
setType(InputType.AbsoluteValue);
|
||||
setPct(val);
|
||||
setValue(convert(val) as string);
|
||||
},
|
||||
[setType, setValue, setMark, convert]
|
||||
[setType, setValue, setPct, convert]
|
||||
),
|
||||
type,
|
||||
};
|
||||
|
|
|
@ -183,3 +183,7 @@ export const reserveMarketCap = (reserve?: LendingReserve) => {
|
|||
|
||||
return total;
|
||||
};
|
||||
|
||||
export const collateralExchangeRate = (reserve?: LendingReserve) => {
|
||||
return (reserve?.collateralMintSupply.toNumber() || 1) / reserveMarketCap(reserve);
|
||||
}
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React from "react";
|
||||
import { useCollateralBalance, useTokenName } from "../../hooks";
|
||||
import { useUserCollateralBalance, useTokenName } from "../../hooks";
|
||||
import { calculateBorrowAPY, LendingReserve } from "../../models/lending";
|
||||
import { TokenIcon } from "../../components/TokenIcon";
|
||||
import { formatNumber, formatPct } from "../../utils/utils";
|
||||
|
@ -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 } = useCollateralBalance(props.reserve);
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
|
||||
|
||||
const apr = calculateBorrowAPY(props.reserve);
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { useCollateralBalance, useTokenName } from "../../hooks";
|
||||
import { useUserCollateralBalance, useTokenName } from "../../hooks";
|
||||
import { calculateDepositAPY, LendingReserve } from "../../models/lending";
|
||||
import { TokenIcon } from "../../components/TokenIcon";
|
||||
import { formatNumber, formatPct } from "../../utils/utils";
|
||||
|
@ -15,7 +15,7 @@ export const DepositItem = (props: {
|
|||
}) => {
|
||||
const mintAddress = props.reserve.info.liquidityMint;
|
||||
const name = useTokenName(mintAddress);
|
||||
const { balance: collateralBalance } = useCollateralBalance(
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(
|
||||
props.reserve.info,
|
||||
props.account.pubkey
|
||||
);
|
||||
|
|
|
@ -1,9 +1,11 @@
|
|||
import React, { useMemo } from "react";
|
||||
import { useTokenName } from "../../hooks";
|
||||
import { useUserCollateralBalance, useTokenName } from "../../hooks";
|
||||
import {
|
||||
calculateBorrowAPY,
|
||||
collateralExchangeRate,
|
||||
LendingObligation,
|
||||
LendingReserve,
|
||||
reserveMarketCap,
|
||||
} from "../../models/lending";
|
||||
import { TokenIcon } from "../../components/TokenIcon";
|
||||
import {
|
||||
|
@ -28,6 +30,7 @@ export const ObligationItem = (props: {
|
|||
const name = useTokenName(borrowReserve?.info.liquidityMint);
|
||||
|
||||
const liquidityMint = useMint(borrowReserve.info.liquidityMint);
|
||||
const collateralMint = useMint(borrowReserve.info.collateralMint);
|
||||
|
||||
const borrowAmount = fromLamports(
|
||||
wadToLamports(obligation.info.borrowAmountWad),
|
||||
|
@ -38,6 +41,11 @@ export const ObligationItem = (props: {
|
|||
borrowReserve,
|
||||
]);
|
||||
|
||||
|
||||
const rate = collateralExchangeRate(borrowReserve.info) ;
|
||||
|
||||
console.log(`collateral ${fromLamports(obligation.info.collateralAmount.toNumber() / rate, collateralMint)}`);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<div className="dashboard-item">
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import {
|
||||
useCollateralBalance,
|
||||
useUserCollateralBalance,
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
} from "../../../hooks";
|
||||
|
@ -18,7 +18,7 @@ export const ReserveItem = (props: {
|
|||
}) => {
|
||||
const name = useTokenName(props.reserve.liquidityMint);
|
||||
const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
|
||||
const { balance: collateralBalance } = useCollateralBalance(props.reserve);
|
||||
const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
|
||||
|
||||
const apy = calculateDepositAPY(props.reserve);
|
||||
|
||||
|
|
Loading…
Reference in New Issue