mirror of https://github.com/certusone/oyster.git
added risk slider to borrow input
This commit is contained in:
parent
8c0ff7b54d
commit
6b03bf31a1
|
@ -152,7 +152,6 @@ export const borrow = async (
|
|||
fromLamports = amountLamports;
|
||||
}
|
||||
|
||||
|
||||
const fromAccount = ensureSplAccount(
|
||||
instructions,
|
||||
finalCleanupInstructions,
|
||||
|
@ -202,7 +201,7 @@ export const borrow = async (
|
|||
fromAccount,
|
||||
wallet.publicKey,
|
||||
fromLamports,
|
||||
false,
|
||||
false
|
||||
);
|
||||
signers.push(transferAuthority);
|
||||
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { useUserBalance, useUserObligationByReserve } from "../../hooks";
|
||||
import {
|
||||
useSliderInput,
|
||||
useUserBalance,
|
||||
useUserDeposits,
|
||||
useUserObligationByReserve,
|
||||
} from "../../hooks";
|
||||
import {
|
||||
BorrowAmountType,
|
||||
LendingReserve,
|
||||
|
@ -16,8 +21,8 @@ import { ActionConfirmation } from "./../ActionConfirmation";
|
|||
import { BackButton } from "./../BackButton";
|
||||
import { ConnectButton } from "../ConnectButton";
|
||||
import CollateralInput from "../CollateralInput";
|
||||
import { ArrowDownOutlined } from "@ant-design/icons";
|
||||
import { useMidPriceInUSD } from "../../contexts/market";
|
||||
import { RiskSlider } from "../RiskSlider";
|
||||
|
||||
export const BorrowInput = (props: {
|
||||
className?: string;
|
||||
|
@ -25,7 +30,6 @@ export const BorrowInput = (props: {
|
|||
}) => {
|
||||
const connection = useConnection();
|
||||
const { wallet } = useWallet();
|
||||
const [value, setValue] = useState("");
|
||||
const [collateralValue, setCollateralValue] = useState("");
|
||||
const [lastTyped, setLastTyped] = useState("collateral");
|
||||
const [pendingTx, setPendingTx] = useState(false);
|
||||
|
@ -43,7 +47,6 @@ export const BorrowInput = (props: {
|
|||
|
||||
return cache.get(id) as ParsedAccount<LendingReserve>;
|
||||
}, [collateralReserveKey]);
|
||||
|
||||
const borrowPrice = useMidPriceInUSD(
|
||||
borrowReserve.info.liquidityMint.toBase58()
|
||||
).price;
|
||||
|
@ -51,6 +54,30 @@ export const BorrowInput = (props: {
|
|||
collateralReserve?.info.liquidityMint.toBase58()
|
||||
)?.price;
|
||||
|
||||
const include = useMemo(
|
||||
() => new Set([collateralReserve?.pubkey.toBase58()]),
|
||||
[collateralReserve]
|
||||
);
|
||||
|
||||
const exclude = useMemo(() => new Set([]), []);
|
||||
|
||||
const { userDeposits: accountBalance } = useUserDeposits(exclude, include);
|
||||
const tokenBalance = accountBalance[0]?.info.amount || 0;
|
||||
|
||||
const convert = useCallback(
|
||||
(val: string | number) => {
|
||||
const minAmount = Math.min(tokenBalance, Infinity);
|
||||
if (typeof val === "string") {
|
||||
return (parseFloat(val) / minAmount) * 100;
|
||||
} else {
|
||||
return (val * minAmount) / 100;
|
||||
}
|
||||
},
|
||||
[tokenBalance]
|
||||
);
|
||||
|
||||
const { value, setValue, pct } = useSliderInput(convert);
|
||||
|
||||
useEffect(() => {
|
||||
if (collateralReserve && lastTyped === "collateral") {
|
||||
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
||||
|
@ -71,6 +98,7 @@ export const BorrowInput = (props: {
|
|||
borrowPrice,
|
||||
borrowReserve,
|
||||
collateralValue,
|
||||
setValue,
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -95,15 +123,13 @@ export const BorrowInput = (props: {
|
|||
value,
|
||||
]);
|
||||
|
||||
const { accounts: fromAccounts } = useUserBalance(
|
||||
collateralReserve?.info.collateralMint
|
||||
);
|
||||
|
||||
const { userObligationsByReserve } = useUserObligationByReserve(
|
||||
borrowReserve?.pubkey,
|
||||
collateralReserve?.pubkey
|
||||
);
|
||||
|
||||
const { accounts: fromAccounts } = useUserBalance(
|
||||
collateralReserve?.info.collateralMint
|
||||
);
|
||||
const onBorrow = useCallback(() => {
|
||||
if (!collateralReserve) {
|
||||
return;
|
||||
|
@ -198,7 +224,7 @@ export const BorrowInput = (props: {
|
|||
useFirstReserve={true}
|
||||
/>
|
||||
</div>
|
||||
<ArrowDownOutlined />
|
||||
<RiskSlider value={pct} />
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
|
|
|
@ -0,0 +1,15 @@
|
|||
import { riskMarks } from "../../constants";
|
||||
import { Slider } from "antd";
|
||||
import React from "react";
|
||||
import "./style.less";
|
||||
|
||||
export const RiskSlider = (props: { value: number }) => {
|
||||
return (
|
||||
<Slider
|
||||
className="risk-slider"
|
||||
marks={riskMarks}
|
||||
value={props.value}
|
||||
included={false}
|
||||
/>
|
||||
);
|
||||
};
|
|
@ -0,0 +1,9 @@
|
|||
@import "~antd/dist/antd.dark.less";
|
||||
|
||||
.risk-slider {
|
||||
color: @text-color-secondary;
|
||||
|
||||
.ant-slider-rail {
|
||||
background-image: linear-gradient(to right, darkgreen, darkred) !important;
|
||||
}
|
||||
}
|
|
@ -91,4 +91,6 @@ export const LABELS = {
|
|||
NO_DEPOSIT_MESSAGE:
|
||||
"You need to deposit coin of this type into oyster before trading with it on margin.",
|
||||
NO_COLL_TYPE_MESSAGE: "Choose Collateral CCY",
|
||||
SAFER: "Safer",
|
||||
RISKIER: "Riskier",
|
||||
};
|
||||
|
|
|
@ -1,3 +1,5 @@
|
|||
import { LABELS } from "./labels";
|
||||
|
||||
export const marks = {
|
||||
0: "0%",
|
||||
25: "25%",
|
||||
|
@ -5,3 +7,17 @@ export const marks = {
|
|||
75: "75%",
|
||||
100: "100%",
|
||||
};
|
||||
export const riskMarks = {
|
||||
0: {
|
||||
style: {
|
||||
color: "darkgreen",
|
||||
},
|
||||
label: LABELS.SAFER,
|
||||
},
|
||||
100: {
|
||||
style: {
|
||||
color: "darkred",
|
||||
},
|
||||
label: LABELS.RISKIER,
|
||||
},
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue