Added swap input style to repay page

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: {
         >
           <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) => {

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<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}

src/contexts/market.tsx

@@ -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,

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;
   }