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;
|
fromLamports = amountLamports;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const fromAccount = ensureSplAccount(
|
const fromAccount = ensureSplAccount(
|
||||||
instructions,
|
instructions,
|
||||||
finalCleanupInstructions,
|
finalCleanupInstructions,
|
||||||
|
@ -202,7 +201,7 @@ export const borrow = async (
|
||||||
fromAccount,
|
fromAccount,
|
||||||
wallet.publicKey,
|
wallet.publicKey,
|
||||||
fromLamports,
|
fromLamports,
|
||||||
false,
|
false
|
||||||
);
|
);
|
||||||
signers.push(transferAuthority);
|
signers.push(transferAuthority);
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,10 @@
|
||||||
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import { useUserBalance, useUserObligationByReserve } from "../../hooks";
|
import {
|
||||||
|
useSliderInput,
|
||||||
|
useUserBalance,
|
||||||
|
useUserDeposits,
|
||||||
|
useUserObligationByReserve,
|
||||||
|
} from "../../hooks";
|
||||||
import {
|
import {
|
||||||
BorrowAmountType,
|
BorrowAmountType,
|
||||||
LendingReserve,
|
LendingReserve,
|
||||||
|
@ -16,8 +21,8 @@ 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 CollateralInput from "../CollateralInput";
|
||||||
import { ArrowDownOutlined } from "@ant-design/icons";
|
|
||||||
import { useMidPriceInUSD } from "../../contexts/market";
|
import { useMidPriceInUSD } from "../../contexts/market";
|
||||||
|
import { RiskSlider } from "../RiskSlider";
|
||||||
|
|
||||||
export const BorrowInput = (props: {
|
export const BorrowInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -25,7 +30,6 @@ export const BorrowInput = (props: {
|
||||||
}) => {
|
}) => {
|
||||||
const connection = useConnection();
|
const connection = useConnection();
|
||||||
const { wallet } = useWallet();
|
const { wallet } = useWallet();
|
||||||
const [value, setValue] = useState("");
|
|
||||||
const [collateralValue, setCollateralValue] = useState("");
|
const [collateralValue, setCollateralValue] = useState("");
|
||||||
const [lastTyped, setLastTyped] = useState("collateral");
|
const [lastTyped, setLastTyped] = useState("collateral");
|
||||||
const [pendingTx, setPendingTx] = useState(false);
|
const [pendingTx, setPendingTx] = useState(false);
|
||||||
|
@ -43,7 +47,6 @@ export const BorrowInput = (props: {
|
||||||
|
|
||||||
return cache.get(id) as ParsedAccount<LendingReserve>;
|
return cache.get(id) as ParsedAccount<LendingReserve>;
|
||||||
}, [collateralReserveKey]);
|
}, [collateralReserveKey]);
|
||||||
|
|
||||||
const borrowPrice = useMidPriceInUSD(
|
const borrowPrice = useMidPriceInUSD(
|
||||||
borrowReserve.info.liquidityMint.toBase58()
|
borrowReserve.info.liquidityMint.toBase58()
|
||||||
).price;
|
).price;
|
||||||
|
@ -51,6 +54,30 @@ export const BorrowInput = (props: {
|
||||||
collateralReserve?.info.liquidityMint.toBase58()
|
collateralReserve?.info.liquidityMint.toBase58()
|
||||||
)?.price;
|
)?.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(() => {
|
useEffect(() => {
|
||||||
if (collateralReserve && lastTyped === "collateral") {
|
if (collateralReserve && lastTyped === "collateral") {
|
||||||
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
||||||
|
@ -71,6 +98,7 @@ export const BorrowInput = (props: {
|
||||||
borrowPrice,
|
borrowPrice,
|
||||||
borrowReserve,
|
borrowReserve,
|
||||||
collateralValue,
|
collateralValue,
|
||||||
|
setValue,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
@ -95,15 +123,13 @@ export const BorrowInput = (props: {
|
||||||
value,
|
value,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const { accounts: fromAccounts } = useUserBalance(
|
|
||||||
collateralReserve?.info.collateralMint
|
|
||||||
);
|
|
||||||
|
|
||||||
const { userObligationsByReserve } = useUserObligationByReserve(
|
const { userObligationsByReserve } = useUserObligationByReserve(
|
||||||
borrowReserve?.pubkey,
|
borrowReserve?.pubkey,
|
||||||
collateralReserve?.pubkey
|
collateralReserve?.pubkey
|
||||||
);
|
);
|
||||||
|
const { accounts: fromAccounts } = useUserBalance(
|
||||||
|
collateralReserve?.info.collateralMint
|
||||||
|
);
|
||||||
const onBorrow = useCallback(() => {
|
const onBorrow = useCallback(() => {
|
||||||
if (!collateralReserve) {
|
if (!collateralReserve) {
|
||||||
return;
|
return;
|
||||||
|
@ -198,7 +224,7 @@ export const BorrowInput = (props: {
|
||||||
useFirstReserve={true}
|
useFirstReserve={true}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ArrowDownOutlined />
|
<RiskSlider value={pct} />
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
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:
|
NO_DEPOSIT_MESSAGE:
|
||||||
"You need to deposit coin of this type into oyster before trading with it on margin.",
|
"You need to deposit coin of this type into oyster before trading with it on margin.",
|
||||||
NO_COLL_TYPE_MESSAGE: "Choose Collateral CCY",
|
NO_COLL_TYPE_MESSAGE: "Choose Collateral CCY",
|
||||||
|
SAFER: "Safer",
|
||||||
|
RISKIER: "Riskier",
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import { LABELS } from "./labels";
|
||||||
|
|
||||||
export const marks = {
|
export const marks = {
|
||||||
0: "0%",
|
0: "0%",
|
||||||
25: "25%",
|
25: "25%",
|
||||||
|
@ -5,3 +7,17 @@ export const marks = {
|
||||||
75: "75%",
|
75: "75%",
|
||||||
100: "100%",
|
100: "100%",
|
||||||
};
|
};
|
||||||
|
export const riskMarks = {
|
||||||
|
0: {
|
||||||
|
style: {
|
||||||
|
color: "darkgreen",
|
||||||
|
},
|
||||||
|
label: LABELS.SAFER,
|
||||||
|
},
|
||||||
|
100: {
|
||||||
|
style: {
|
||||||
|
color: "darkred",
|
||||||
|
},
|
||||||
|
label: LABELS.RISKIER,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
Loading…
Reference in New Issue