borrow calculation on borrow page

src/components/BorrowInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, {useCallback, useEffect, useMemo, useState} from "react";
 import {
   useTokenName,
   useUserBalance,
@@ -9,19 +9,19 @@ import {
   LendingReserve,
   LendingReserveParser,
 } from "../../models";
-import { TokenIcon } from "../TokenIcon";
 import { Card } from "antd";
 import { cache, ParsedAccount } from "../../contexts/accounts";
-import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { borrow } from "../../actions";
-import { CollateralSelector } from "./../CollateralSelector";
 import "./style.less";
 import { LABELS } from "../../constants";
 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";
 
 export const BorrowInput = (props: {
   className?: string;
@@ -30,6 +30,7 @@ export const BorrowInput = (props: {
   const connection = useConnection();
   const { wallet } = useWallet();
   const [value, setValue] = useState("");
+  const [collateralValue, setCollateralValue] = useState("");
   const [pendingTx, setPendingTx] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
 
@@ -46,6 +47,24 @@ export const BorrowInput = (props: {
     return cache.get(id) as ParsedAccount<LendingReserve>;
   }, [collateralReserveKey]);
 
+  const borrowPrice = useMidPriceInUSD(borrowReserve.info.liquidityMint.toBase58()).price;
+  const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price;
+
+  useEffect(() => {
+    if (collateralReserve) {
+      const ltv = borrowReserve.info.config.loanToValueRatio / 100;
+
+      if (collateralValue) {
+        const nCollateralValue = parseFloat(collateralValue);
+        const borrowInUSD = nCollateralValue * collateralPrice * ltv;
+        const borrowAmount = borrowInUSD / borrowPrice;
+        setValue(borrowAmount.toString())
+      } else {
+        setValue("")
+      }
+    }
+  }, [collateralReserve, collateralPrice, borrowPrice, borrowReserve, collateralValue])
+
   const name = useTokenName(borrowReserve?.info.liquidityMint);
   const { accounts: fromAccounts } = useUserBalance(
     collateralReserve?.info.collateralMint
@@ -87,6 +106,7 @@ export const BorrowInput = (props: {
         );
 
         setValue("");
+        setCollateralValue("");
         setShowConfirmation(true);
       } catch {
         // TODO:
@@ -126,32 +146,34 @@ export const BorrowInput = (props: {
             justifyContent: "space-around",
           }}
         >
-          <div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
-          <CollateralSelector
-            reserve={borrowReserve.info}
-            collateralReserve={collateralReserveKey}
-            onCollateralReserve={setCollateralReserveKey}
-          />
-
-          <div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
-          <div className="token-input">
-            <TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
-            <NumericInput
-              value={value}
-              onChange={(val: any) => {
-                setValue(val);
+          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
+            <CollateralInput
+              title='Collateral'
+              reserve={borrowReserve.info}
+              amount={parseFloat(collateralValue) || 0}
+              onInputChange={(val: number | null) => {
+                setCollateralValue(val?.toString() || "")
               }}
-              style={{
-                fontSize: 20,
-                boxShadow: "none",
-                borderColor: "transparent",
-                outline: "transparent",
+              onCollateralReserve={(key) => {
+                setCollateralReserveKey(key);
               }}
-              placeholder="0.00"
             />
-            <div>{name}</div>
+          </div>
+          <ArrowDownOutlined />
+          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}>
+            <CollateralInput
+              title='Borrow Amount'
+              reserve={borrowReserve.info}
+              amount={parseFloat(value) || 0}
+              onInputChange={(val: number | null) => {
+                setValue(val?.toString() || "")
+              }}
+              disabled={true}
+              hideBalance={true}
+            />
           </div>
           <ConnectButton
+            size='large'
             type="primary"
             onClick={onBorrow}
             loading={pendingTx}