mirror of https://github.com/certusone/oyster.git
Added swap input style to repay page
This commit is contained in:
parent
d69762d1b8
commit
1b14c2641b
|
@ -1,6 +1,5 @@
|
|||
import React, {useCallback, useEffect, useMemo, useState} from "react";
|
||||
import {
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
useUserObligationByReserve,
|
||||
} from "../../hooks";
|
||||
|
@ -52,7 +51,7 @@ export const BorrowInput = (props: {
|
|||
const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price;
|
||||
|
||||
useEffect(() => {
|
||||
if (collateralReserve && lastTyped == "collateral") {
|
||||
if (collateralReserve && lastTyped === "collateral") {
|
||||
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
||||
|
||||
if (collateralValue) {
|
||||
|
@ -64,10 +63,10 @@ export const BorrowInput = (props: {
|
|||
setValue("")
|
||||
}
|
||||
}
|
||||
}, [collateralReserve, collateralPrice, borrowPrice, borrowReserve, collateralValue])
|
||||
}, [lastTyped, collateralReserve, collateralPrice, borrowPrice, borrowReserve, collateralValue])
|
||||
|
||||
useEffect(() => {
|
||||
if (collateralReserve && lastTyped == "borrow") {
|
||||
if (collateralReserve && lastTyped === "borrow") {
|
||||
const ltv = borrowReserve.info.config.loanToValueRatio / 100;
|
||||
|
||||
if (value) {
|
||||
|
@ -81,7 +80,6 @@ export const BorrowInput = (props: {
|
|||
}
|
||||
}, [lastTyped, collateralReserve, collateralPrice, borrowPrice, borrowReserve, value])
|
||||
|
||||
const name = useTokenName(borrowReserve?.info.liquidityMint);
|
||||
const { accounts: fromAccounts } = useUserBalance(
|
||||
collateralReserve?.info.collateralMint
|
||||
);
|
||||
|
@ -164,7 +162,7 @@ export const BorrowInput = (props: {
|
|||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||
<CollateralInput
|
||||
title='Collateral'
|
||||
title='Collateral (estimated)'
|
||||
reserve={borrowReserve.info}
|
||||
amount={parseFloat(collateralValue) || 0}
|
||||
onInputChange={(val: number | null) => {
|
||||
|
|
|
@ -1,38 +1,38 @@
|
|||
import React, { useCallback, useState } from "react";
|
||||
import React, {useCallback, useEffect, useState} from "react";
|
||||
import {
|
||||
EnrichedLendingObligation,
|
||||
InputType,
|
||||
useAccountByMint,
|
||||
useSliderInput,
|
||||
useTokenName,
|
||||
useUserBalance,
|
||||
} from "../../hooks";
|
||||
import { LendingReserve } from "../../models";
|
||||
import { TokenIcon } from "../TokenIcon";
|
||||
import { Card, Slider } from "antd";
|
||||
import { ParsedAccount, useMint } from "../../contexts/accounts";
|
||||
import { NumericInput } from "../Input/numeric";
|
||||
import { useConnection } from "../../contexts/connection";
|
||||
import { useWallet } from "../../contexts/wallet";
|
||||
import { repay } from "../../actions";
|
||||
import { CollateralSelector } from "./../CollateralSelector";
|
||||
import "./style.less";
|
||||
import { LABELS, marks } from "../../constants";
|
||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||
import { fromLamports, wadToLamports } from "../../utils/utils";
|
||||
import { notify } from "../../utils/notifications";
|
||||
import { ConnectButton } from "../ConnectButton";
|
||||
import CollateralInput from "../CollateralInput";
|
||||
import {useMidPriceInUSD} from "../../contexts/market";
|
||||
|
||||
export const RepayInput = (props: {
|
||||
className?: string;
|
||||
borrowReserve: ParsedAccount<LendingReserve>;
|
||||
collateralReserve?: ParsedAccount<LendingReserve>;
|
||||
collateralReserve: ParsedAccount<LendingReserve>;
|
||||
obligation: EnrichedLendingObligation;
|
||||
}) => {
|
||||
const connection = useConnection();
|
||||
const { wallet } = useWallet();
|
||||
const [lastTyped, setLastTyped] = useState("repay");
|
||||
const [pendingTx, setPendingTx] = useState(false);
|
||||
const [showConfirmation, setShowConfirmation] = useState(false);
|
||||
const [collateralValue, setCollateralValue] = useState("");
|
||||
|
||||
const repayReserve = props.borrowReserve;
|
||||
const obligation = props.obligation;
|
||||
|
@ -45,7 +45,6 @@ export const RepayInput = (props: {
|
|||
const borrowAmount = fromLamports(borrowAmountLamports, liquidityMint);
|
||||
const collateralReserve = props.collateralReserve;
|
||||
|
||||
const name = useTokenName(repayReserve?.info.liquidityMint);
|
||||
const { accounts: fromAccounts } = useUserBalance(
|
||||
repayReserve.info.liquidityMint
|
||||
);
|
||||
|
@ -54,10 +53,11 @@ export const RepayInput = (props: {
|
|||
|
||||
const convert = useCallback(
|
||||
(val: string | number) => {
|
||||
setLastTyped("repay")
|
||||
if (typeof val === "string") {
|
||||
return (parseFloat(val) / borrowAmount) * 100;
|
||||
} else {
|
||||
return ((val * borrowAmount) / 100).toFixed(2);
|
||||
return ((val * borrowAmount) / 100);
|
||||
}
|
||||
},
|
||||
[borrowAmount]
|
||||
|
@ -85,7 +85,6 @@ export const RepayInput = (props: {
|
|||
: Math.ceil(
|
||||
borrowAmountLamports * (parseFloat(value) / borrowAmount)
|
||||
);
|
||||
|
||||
await repay(
|
||||
fromAccounts[0],
|
||||
toRepayLamports,
|
||||
|
@ -98,6 +97,7 @@ export const RepayInput = (props: {
|
|||
);
|
||||
|
||||
setValue("");
|
||||
setCollateralValue("")
|
||||
setShowConfirmation(true);
|
||||
} catch (error) {
|
||||
notify({
|
||||
|
@ -125,6 +125,36 @@ export const RepayInput = (props: {
|
|||
setValue,
|
||||
]);
|
||||
|
||||
const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price;
|
||||
|
||||
useEffect(() => {
|
||||
if (collateralReserve && lastTyped === "repay") {
|
||||
const collateralInQuote = obligation.info.collateralInQuote;
|
||||
const collateral = collateralInQuote * collateralPrice
|
||||
if (value) {
|
||||
const borrowRatio = (parseFloat(value) / borrowAmount) * 100
|
||||
const collateralAmount = (borrowRatio * collateral) / 100
|
||||
setCollateralValue(collateralAmount.toString())
|
||||
} else {
|
||||
setCollateralValue("")
|
||||
}
|
||||
}
|
||||
}, [lastTyped, collateralReserve, obligation.info.collateralInQuote, collateralPrice, borrowAmount, value])
|
||||
|
||||
useEffect(() => {
|
||||
if (collateralReserve && lastTyped === "collateral") {
|
||||
const collateralInQuote = obligation.info.collateralInQuote;
|
||||
const collateral = collateralInQuote * collateralPrice
|
||||
if (collateralValue) {
|
||||
const collateralRatio = (parseFloat(collateralValue) / collateral) * 100
|
||||
const borrowValue = (collateralRatio * borrowAmount) / 100
|
||||
setValue(borrowValue.toString())
|
||||
} else {
|
||||
setValue("")
|
||||
}
|
||||
}
|
||||
}, [lastTyped, collateralReserve, obligation.info.collateralInQuote, collateralPrice, borrowAmount, collateralValue])
|
||||
|
||||
const bodyStyle: React.CSSProperties = {
|
||||
display: "flex",
|
||||
flex: 1,
|
||||
|
@ -145,33 +175,36 @@ export const RepayInput = (props: {
|
|||
justifyContent: "space-around",
|
||||
}}
|
||||
>
|
||||
<div className="repay-input-title">{LABELS.REPAY_QUESTION}</div>
|
||||
<div className="token-input">
|
||||
<TokenIcon mintAddress={repayReserve?.info.liquidityMint} />
|
||||
<NumericInput
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
autoFocus={true}
|
||||
style={{
|
||||
fontSize: 20,
|
||||
boxShadow: "none",
|
||||
borderColor: "transparent",
|
||||
outline: "transparent",
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||
<CollateralInput
|
||||
title='Repay Amount'
|
||||
reserve={repayReserve.info}
|
||||
amount={parseFloat(value) || 0}
|
||||
onInputChange={(val: number | null) => {
|
||||
setValue(val?.toString() || "")
|
||||
setLastTyped("repay")
|
||||
}}
|
||||
placeholder="0.00"
|
||||
disabled={true}
|
||||
hideBalance={true}
|
||||
/>
|
||||
<div>{name}</div>
|
||||
</div>
|
||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||
<div className="repay-input-title">{LABELS.COLLATERAL}</div>
|
||||
<CollateralSelector
|
||||
reserve={repayReserve.info}
|
||||
collateralReserve={collateralReserve?.pubkey.toBase58()}
|
||||
disabled={true}
|
||||
/>
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
|
||||
<CollateralInput
|
||||
title='Collateral Amount (estimated)'
|
||||
reserve={collateralReserve?.info}
|
||||
amount={parseFloat(collateralValue) || 0}
|
||||
onInputChange={(val: number | null) => {
|
||||
setCollateralValue(val?.toString() || "")
|
||||
setLastTyped("collateral")
|
||||
}}
|
||||
disabled={true}
|
||||
hideBalance={true}
|
||||
/>
|
||||
</div>
|
||||
<ConnectButton
|
||||
type="primary"
|
||||
size="large"
|
||||
onClick={onRepay}
|
||||
loading={pendingTx}
|
||||
disabled={fromAccounts.length === 0}
|
||||
|
|
|
@ -275,6 +275,7 @@ export const useEnrichedPools = (pools: PoolInfo[]) => {
|
|||
};
|
||||
// Do not add pools here, causes a really bad infinite rendering loop. Use poolKeys instead.
|
||||
}, [
|
||||
pools,
|
||||
tokenMap,
|
||||
dailyVolume,
|
||||
poolKeys,
|
||||
|
|
|
@ -37,7 +37,7 @@ export const RepayReserveView = () => {
|
|||
|
||||
const reserve = lendingReserve?.info;
|
||||
|
||||
if (!reserve || !lendingReserve || !lendingObligation) {
|
||||
if (!reserve || !lendingReserve || !lendingObligation || !repayReserve) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue