Merge pull request #46 from yamijuan/swap_input

Swap input style with corresponding calculations

src/components/BorrowInput/index.tsx

@@ -1,27 +1,23 @@
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
-import {
+import { useUserBalance, useUserObligationByReserve } from "../../hooks";
-  useTokenName,
-  useUserBalance,
-  useUserObligationByReserve,
-} from "../../hooks";
 import {
   BorrowAmountType,
   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 +26,8 @@ export const BorrowInput = (props: {
   const connection = useConnection();
   const { wallet } = useWallet();
   const [value, setValue] = useState("");
+  const [collateralValue, setCollateralValue] = useState("");
+  const [lastTyped, setLastTyped] = useState("collateral");
   const [pendingTx, setPendingTx] = useState(false);
   const [showConfirmation, setShowConfirmation] = useState(false);
 
@@ -46,7 +44,57 @@ export const BorrowInput = (props: {
     return cache.get(id) as ParsedAccount<LendingReserve>;
   }, [collateralReserveKey]);
 
-  const name = useTokenName(borrowReserve?.info.liquidityMint);
+  const borrowPrice = useMidPriceInUSD(
+    borrowReserve.info.liquidityMint.toBase58()
+  ).price;
+  const collateralPrice = useMidPriceInUSD(
+    collateralReserve?.info.liquidityMint.toBase58()
+  )?.price;
+
+  useEffect(() => {
+    if (collateralReserve && lastTyped === "collateral") {
+      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("");
+      }
+    }
+  }, [
+    lastTyped,
+    collateralReserve,
+    collateralPrice,
+    borrowPrice,
+    borrowReserve,
+    collateralValue,
+  ]);
+
+  useEffect(() => {
+    if (collateralReserve && lastTyped === "borrow") {
+      const ltv = borrowReserve.info.config.loanToValueRatio / 100;
+
+      if (value) {
+        const nValue = parseFloat(value);
+        const borrowInUSD = nValue * borrowPrice;
+        const collateralAmount = borrowInUSD / ltv / collateralPrice;
+        setCollateralValue(collateralAmount.toString());
+      } else {
+        setCollateralValue("");
+      }
+    }
+  }, [
+    lastTyped,
+    collateralReserve,
+    collateralPrice,
+    borrowPrice,
+    borrowReserve,
+    value,
+  ]);
+
   const { accounts: fromAccounts } = useUserBalance(
     collateralReserve?.info.collateralMint
   );
@@ -87,6 +135,7 @@ export const BorrowInput = (props: {
         );
 
         setValue("");
+        setCollateralValue("");
         setShowConfirmation(true);
       } catch {
         // TODO:
@@ -126,32 +175,50 @@ export const BorrowInput = (props: {
             justifyContent: "space-around",
           }}
         >
-          <div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
+          <div
-          <CollateralSelector
+            style={{
-            reserve={borrowReserve.info}
+              display: "flex",
-            collateralReserve={collateralReserveKey}
+              flexDirection: "row",
-            onCollateralReserve={setCollateralReserveKey}
+              justifyContent: "space-evenly",
-          />
+              alignItems: "center",
-
+            }}
-          <div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
+          >
-          <div className="token-input">
+            <CollateralInput
-            <TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
+              title="Collateral (estimated)"
-            <NumericInput
+              reserve={borrowReserve.info}
-              value={value}
+              amount={parseFloat(collateralValue) || 0}
-              onChange={(val: any) => {
+              onInputChange={(val: number | null) => {
-                setValue(val);
+                setCollateralValue(val?.toString() || "");
+                setLastTyped("collateral");
               }}
-              style={{
+              onCollateralReserve={(key) => {
-                fontSize: 20,
+                setCollateralReserveKey(key);
-                boxShadow: "none",
-                borderColor: "transparent",
-                outline: "transparent",
               }}
-              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() || "");
+                setLastTyped("borrow");
+              }}
+              disabled={true}
+              hideBalance={true}
+            />
           </div>
           <ConnectButton
+            size="large"
             type="primary"
             onClick={onBorrow}
             loading={pendingTx}

src/components/DepositInput/index.tsx

@@ -1,14 +1,7 @@
 import React, { useCallback, useState } from "react";
-import {
+import { InputType, useSliderInput, useUserBalance } from "../../hooks";
-  InputType,
-  useSliderInput,
-  useTokenName,
-  useUserBalance,
-} from "../../hooks";
 import { LendingReserve } from "../../models/lending";
-import { TokenIcon } from "../TokenIcon";
 import { Card, Slider } from "antd";
-import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { deposit } from "../../actions/deposit";
@@ -17,6 +10,7 @@ import "./style.less";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { LABELS, marks } from "../../constants";
 import { ConnectButton } from "../ConnectButton";
+import CollateralInput from "../CollateralInput";
 
 export const DepositInput = (props: {
   className?: string;
@@ -31,7 +25,6 @@ export const DepositInput = (props: {
   const reserve = props.reserve;
   const address = props.address;
 
-  const name = useTokenName(reserve?.liquidityMint);
   const { accounts: fromAccounts, balance, balanceLamports } = useUserBalance(
     reserve?.liquidityMint
   );
@@ -41,7 +34,7 @@ export const DepositInput = (props: {
       if (typeof val === "string") {
         return (parseFloat(val) / balance) * 100;
       } else {
-        return ((val * balance) / 100).toFixed(2);
+        return (val * balance) / 100;
       }
     },
     [balance]
@@ -108,26 +101,30 @@ export const DepositInput = (props: {
           }}
         >
           <div className="deposit-input-title">{LABELS.DEPOSIT_QUESTION}</div>
-          <div className="token-input">
+          <div
-            <TokenIcon mintAddress={reserve?.liquidityMint} />
+            style={{
-            <NumericInput
+              display: "flex",
-              value={value}
+              flexDirection: "row",
-              onChange={setValue}
+              justifyContent: "space-evenly",
-              autoFocus={true}
+              alignItems: "center",
-              style={{
+            }}
-                fontSize: 20,
+          >
-                boxShadow: "none",
+            <CollateralInput
-                borderColor: "transparent",
+              title="Amount"
-                outline: "transparent",
+              reserve={reserve}
+              amount={parseFloat(value) || 0}
+              onInputChange={(val: number | null) => {
+                setValue(val?.toString() || "");
               }}
-              placeholder="0.00"
+              disabled={true}
+              hideBalance={true}
             />
-            <div>{name}</div>
           </div>
 
           <Slider marks={marks} value={pct} onChange={setPct} />
 
           <ConnectButton
+            size="large"
             type="primary"
             onClick={onDeposit}
             loading={pendingTx}

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,53 @@ 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 +192,50 @@ export const RepayInput = (props: {
             justifyContent: "space-around",
           }}
         >
-          <div className="repay-input-title">{LABELS.REPAY_QUESTION}</div>
+          <div
-          <div className="token-input">
+            style={{
-            <TokenIcon mintAddress={repayReserve?.info.liquidityMint} />
+              display: "flex",
-            <NumericInput
+              flexDirection: "row",
-              value={value}
+              justifyContent: "space-evenly",
-              onChange={setValue}
+              alignItems: "center",
-              autoFocus={true}
+            }}
-              style={{
+          >
-                fontSize: 20,
+            <CollateralInput
-                boxShadow: "none",
+              title="Repay Amount"
-                borderColor: "transparent",
+              reserve={repayReserve.info}
-                outline: "transparent",
+              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>
+          <div
-          <CollateralSelector
+            style={{
-            reserve={repayReserve.info}
+              display: "flex",
-            collateralReserve={collateralReserve?.pubkey.toBase58()}
+              flexDirection: "row",
-            disabled={true}
+              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/components/WithdrawInput/index.tsx

@@ -3,13 +3,10 @@ import {
   InputType,
   useUserCollateralBalance,
   useSliderInput,
-  useTokenName,
   useUserBalance,
 } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
-import { TokenIcon } from "../TokenIcon";
 import { Card, Slider } from "antd";
-import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
 import { withdraw } from "../../actions";
@@ -18,6 +15,7 @@ import "./style.less";
 import { LABELS, marks } from "../../constants";
 import { ActionConfirmation } from "./../ActionConfirmation";
 import { ConnectButton } from "../ConnectButton";
+import CollateralInput from "../CollateralInput";
 
 export const WithdrawInput = (props: {
   className?: string;
@@ -32,7 +30,6 @@ export const WithdrawInput = (props: {
   const reserve = props.reserve;
   const address = props.address;
 
-  const name = useTokenName(reserve?.liquidityMint);
   const {
     balanceLamports: collateralBalanceLamports,
     accounts: fromAccounts,
@@ -46,7 +43,7 @@ export const WithdrawInput = (props: {
       if (typeof val === "string") {
         return (parseFloat(val) / collateralBalanceInLiquidity) * 100;
       } else {
-        return ((val * collateralBalanceInLiquidity) / 100).toFixed(2);
+        return (val * collateralBalanceInLiquidity) / 100;
       }
     },
     [collateralBalanceInLiquidity]
@@ -120,26 +117,30 @@ export const WithdrawInput = (props: {
           }}
         >
           <div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
-          <div className="token-input">
+          <div
-            <TokenIcon mintAddress={reserve?.liquidityMint} />
+            style={{
-            <NumericInput
+              display: "flex",
-              value={value}
+              flexDirection: "row",
-              onChange={setValue}
+              justifyContent: "space-evenly",
-              autoFocus={true}
+              alignItems: "center",
-              style={{
+            }}
-                fontSize: 20,
+          >
-                boxShadow: "none",
+            <CollateralInput
-                borderColor: "transparent",
+              title="Amount"
-                outline: "transparent",
+              reserve={reserve}
+              amount={parseFloat(value) || 0}
+              onInputChange={(val: number | null) => {
+                setValue(val?.toString() || "");
               }}
-              placeholder="0.00"
+              disabled={true}
+              hideBalance={true}
             />
-            <div>{name}</div>
           </div>
 
           <Slider marks={marks} value={pct} onChange={setPct} />
 
           <ConnectButton
+            size="large"
             type="primary"
             onClick={onWithdraw}
             loading={pendingTx}

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