mirror of https://github.com/certusone/oyster.git
borrow calculation on borrow page
This commit is contained in:
parent
be4545e77b
commit
60a47aa013
|
@ -1,4 +1,4 @@
|
||||||
import React, { useCallback, useMemo, useState } from "react";
|
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||||
import {
|
import {
|
||||||
useTokenName,
|
useTokenName,
|
||||||
useUserBalance,
|
useUserBalance,
|
||||||
|
@ -9,19 +9,19 @@ import {
|
||||||
LendingReserve,
|
LendingReserve,
|
||||||
LendingReserveParser,
|
LendingReserveParser,
|
||||||
} from "../../models";
|
} from "../../models";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
|
||||||
import { Card } from "antd";
|
import { Card } from "antd";
|
||||||
import { cache, ParsedAccount } from "../../contexts/accounts";
|
import { cache, ParsedAccount } from "../../contexts/accounts";
|
||||||
import { NumericInput } from "../Input/numeric";
|
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
import { borrow } from "../../actions";
|
import { borrow } from "../../actions";
|
||||||
import { CollateralSelector } from "./../CollateralSelector";
|
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { BackButton } from "./../BackButton";
|
import { BackButton } from "./../BackButton";
|
||||||
import { ConnectButton } from "../ConnectButton";
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
import CollateralInput from "../CollateralInput";
|
||||||
|
import {ArrowDownOutlined} from "@ant-design/icons";
|
||||||
|
import {useMidPriceInUSD} from "../../contexts/market";
|
||||||
|
|
||||||
export const BorrowInput = (props: {
|
export const BorrowInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -30,6 +30,7 @@ export const BorrowInput = (props: {
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const { wallet } = useWallet();
|
const { wallet } = useWallet();
|
||||||
const [value, setValue] = useState("");
|
const [value, setValue] = useState("");
|
||||||
|
const [collateralValue, setCollateralValue] = useState("");
|
||||||
const [pendingTx, setPendingTx] = useState(false);
|
const [pendingTx, setPendingTx] = useState(false);
|
||||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||||
|
|
||||||
|
@ -46,6 +47,24 @@ export const BorrowInput = (props: {
|
||||||
return cache.get(id) as ParsedAccount<LendingReserve>;
|
return cache.get(id) as ParsedAccount<LendingReserve>;
|
||||||
}, [collateralReserveKey]);
|
}, [collateralReserveKey]);
|
||||||
|
|
||||||
|
const borrowPrice = useMidPriceInUSD(borrowReserve.info.liquidityMint.toBase58()).price;
|
||||||
|
const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (collateralReserve) {
|
||||||
|
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
||||||
|
|
||||||
|
if (collateralValue) {
|
||||||
|
const nCollateralValue = parseFloat(collateralValue);
|
||||||
|
const borrowInUSD = nCollateralValue * collateralPrice * ltv;
|
||||||
|
const borrowAmount = borrowInUSD / borrowPrice;
|
||||||
|
setValue(borrowAmount.toString())
|
||||||
|
} else {
|
||||||
|
setValue("")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [collateralReserve, collateralPrice, borrowPrice, borrowReserve, collateralValue])
|
||||||
|
|
||||||
const name = useTokenName(borrowReserve?.info.liquidityMint);
|
const name = useTokenName(borrowReserve?.info.liquidityMint);
|
||||||
const { accounts: fromAccounts } = useUserBalance(
|
const { accounts: fromAccounts } = useUserBalance(
|
||||||
collateralReserve?.info.collateralMint
|
collateralReserve?.info.collateralMint
|
||||||
|
@ -87,6 +106,7 @@ export const BorrowInput = (props: {
|
||||||
);
|
);
|
||||||
|
|
||||||
setValue("");
|
setValue("");
|
||||||
|
setCollateralValue("");
|
||||||
setShowConfirmation(true);
|
setShowConfirmation(true);
|
||||||
} catch {
|
} catch {
|
||||||
// TODO:
|
// TODO:
|
||||||
|
@ -126,32 +146,34 @@ export const BorrowInput = (props: {
|
||||||
justifyContent: "space-around",
|
justifyContent: "space-around",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
|
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||||
<CollateralSelector
|
<CollateralInput
|
||||||
|
title='Collateral'
|
||||||
reserve={borrowReserve.info}
|
reserve={borrowReserve.info}
|
||||||
collateralReserve={collateralReserveKey}
|
amount={parseFloat(collateralValue) || 0}
|
||||||
onCollateralReserve={setCollateralReserveKey}
|
onInputChange={(val: number | null) => {
|
||||||
/>
|
setCollateralValue(val?.toString() || "")
|
||||||
|
|
||||||
<div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
|
|
||||||
<div className="token-input">
|
|
||||||
<TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
|
|
||||||
<NumericInput
|
|
||||||
value={value}
|
|
||||||
onChange={(val: any) => {
|
|
||||||
setValue(val);
|
|
||||||
}}
|
}}
|
||||||
style={{
|
onCollateralReserve={(key) => {
|
||||||
fontSize: 20,
|
setCollateralReserveKey(key);
|
||||||
boxShadow: "none",
|
|
||||||
borderColor: "transparent",
|
|
||||||
outline: "transparent",
|
|
||||||
}}
|
}}
|
||||||
placeholder="0.00"
|
|
||||||
/>
|
/>
|
||||||
<div>{name}</div>
|
</div>
|
||||||
|
<ArrowDownOutlined />
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||||
|
<CollateralInput
|
||||||
|
title='Borrow Amount'
|
||||||
|
reserve={borrowReserve.info}
|
||||||
|
amount={parseFloat(value) || 0}
|
||||||
|
onInputChange={(val: number | null) => {
|
||||||
|
setValue(val?.toString() || "")
|
||||||
|
}}
|
||||||
|
disabled={true}
|
||||||
|
hideBalance={true}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ConnectButton
|
<ConnectButton
|
||||||
|
size='large'
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onBorrow}
|
onClick={onBorrow}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
|
|
Loading…
Reference in New Issue