diff --git a/src/components/BorrowInput/index.tsx b/src/components/BorrowInput/index.tsx
index fcba12b..ca559ca 100644
--- a/src/components/BorrowInput/index.tsx
+++ b/src/components/BorrowInput/index.tsx
@@ -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: {
>
{
diff --git a/src/components/RepayInput/index.tsx b/src/components/RepayInput/index.tsx
index 192679b..d116fca 100644
--- a/src/components/RepayInput/index.tsx
+++ b/src/components/RepayInput/index.tsx
@@ -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;
- collateralReserve?: ParsedAccount;
+ collateralReserve: ParsedAccount;
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",
}}
>
- {LABELS.REPAY_QUESTION}
-
-
-
+ {
+ setValue(val?.toString() || "")
+ setLastTyped("repay")
}}
- placeholder="0.00"
+ disabled={true}
+ hideBalance={true}
/>
- {name}
- {LABELS.COLLATERAL}
-
-
+
+ {
+ setCollateralValue(val?.toString() || "")
+ setLastTyped("collateral")
+ }}
+ disabled={true}
+ hideBalance={true}
+ />
+
{
};
// Do not add pools here, causes a really bad infinite rendering loop. Use poolKeys instead.
}, [
+ pools,
tokenMap,
dailyVolume,
poolKeys,
diff --git a/src/views/repayReserve/index.tsx b/src/views/repayReserve/index.tsx
index ca2d003..8a07493 100644
--- a/src/views/repayReserve/index.tsx
+++ b/src/views/repayReserve/index.tsx
@@ -37,7 +37,7 @@ export const RepayReserveView = () => {
const reserve = lendingReserve?.info;
- if (!reserve || !lendingReserve || !lendingObligation) {
+ if (!reserve || !lendingReserve || !lendingObligation || !repayReserve) {
return null;
}