From 2b31d796540c897abce5cae4fe482876cee3f359 Mon Sep 17 00:00:00 2001
From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com>
Date: Mon, 14 Dec 2020 13:33:13 -0600
Subject: [PATCH] feat: add exchnage rate

---
 src/components/DepositInfoLine/index.tsx |  4 ++--
 src/components/DepositInput/index.tsx    | 10 +++++-----
 src/components/RepayInput/index.tsx      | 12 ++++++------
 src/components/UserLendingCard/index.tsx |  4 ++--
 src/components/WithdrawInput/index.tsx   | 14 +++++++-------
 src/hooks/useCollateralBalance.ts        |  2 +-
 src/hooks/useSliderInput.ts              | 24 ++++++++++++------------
 src/models/lending/reserve.ts            |  4 ++++
 src/views/borrow/item.tsx                |  4 ++--
 src/views/dashboard/depositItem.tsx      |  4 ++--
 src/views/dashboard/obligationItem.tsx   | 10 +++++++++-
 src/views/deposit/view/item.tsx          |  4 ++--
 12 files changed, 54 insertions(+), 42 deletions(-)

diff --git a/src/components/DepositInfoLine/index.tsx b/src/components/DepositInfoLine/index.tsx
index e282efd..f526313 100644
--- a/src/components/DepositInfoLine/index.tsx
+++ b/src/components/DepositInfoLine/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {
   useTokenName,
   useUserBalance,
-  useCollateralBalance,
+  useUserCollateralBalance,
 } from "./../../hooks";
 import { LendingReserve } from "../../models/lending";
 import { formatNumber } from "../../utils/utils";
@@ -17,7 +17,7 @@ export const DepositInfoLine = (props: {
 }) => {
   const name = useTokenName(props.reserve.liquidityMint);
   const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
-  const { balance: collateralBalance } = useCollateralBalance(props.reserve);
+  const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
 
   return (
     <Card
diff --git a/src/components/DepositInput/index.tsx b/src/components/DepositInput/index.tsx
index 533d0e8..ce130cf 100644
--- a/src/components/DepositInput/index.tsx
+++ b/src/components/DepositInput/index.tsx
@@ -46,7 +46,7 @@ export const DepositInput = (props: {
     [balance]
   );
 
-  const { value, setValue, mark, setMark, type } = useSliderInput(convert);
+  const { value, setValue, pct, setPct, type } = useSliderInput(convert);
 
   const onDeposit = useCallback(() => {
     setPendingTx(true);
@@ -55,8 +55,8 @@ export const DepositInput = (props: {
       try {
         await deposit(
           fromAccounts[0],
-          type === InputType.Slider
-            ? (mark * balanceLamports) / 100
+          type === InputType.Percent
+            ? (pct * balanceLamports) / 100
             : Math.ceil(balanceLamports * (parseFloat(value) / balance)),
           reserve,
           address,
@@ -79,7 +79,7 @@ export const DepositInput = (props: {
     balance,
     wallet,
     value,
-    mark,
+    pct,
     type,
     reserve,
     fromAccounts,
@@ -126,7 +126,7 @@ export const DepositInput = (props: {
             <div>{name}</div>
           </div>
 
-          <Slider marks={marks} value={mark} onChange={setMark} />
+          <Slider marks={marks} value={pct} onChange={setPct} />
 
           <Button
             type="primary"
diff --git a/src/components/RepayInput/index.tsx b/src/components/RepayInput/index.tsx
index 72b9594..a1b1c64 100644
--- a/src/components/RepayInput/index.tsx
+++ b/src/components/RepayInput/index.tsx
@@ -69,7 +69,7 @@ export const RepayInput = (props: {
     [borrowAmount]
   );
 
-  const { value, setValue, mark, setMark, type } = useSliderInput(convert);
+  const { value, setValue, pct, setPct, type } = useSliderInput(convert);
 
   const onRepay = useCallback(() => {
     if (
@@ -85,8 +85,8 @@ export const RepayInput = (props: {
 
     (async () => {
       try {
-        const toRepayLamports = type === InputType.Slider
-          ? (mark * borrowAmountLamports) / 100
+        const toRepayLamports = type === InputType.Percent
+          ? (pct * borrowAmountLamports) / 100
           : Math.ceil(borrowAmountLamports * (parseFloat(value) / borrowAmount));
 
         await repay(
@@ -114,7 +114,7 @@ export const RepayInput = (props: {
       }
     })();
   }, [
-    mark,
+    pct,
     value,
     borrowAmount,
     borrowAmountLamports,
@@ -170,8 +170,8 @@ export const RepayInput = (props: {
           </div>
           <Slider
               marks={marks}
-              value={mark}
-              onChange={setMark}
+              value={pct}
+              onChange={setPct}
             />
           <div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
           <CollateralSelector
diff --git a/src/components/UserLendingCard/index.tsx b/src/components/UserLendingCard/index.tsx
index f67b866..ee25532 100644
--- a/src/components/UserLendingCard/index.tsx
+++ b/src/components/UserLendingCard/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  useCollateralBalance,
+  useUserCollateralBalance,
   useTokenName,
   useUserBalance,
   useBorrowedAmount,
@@ -24,7 +24,7 @@ export const UserLendingCard = (props: {
   const name = useTokenName(reserve?.liquidityMint);
 
   const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
-  const { balance: collateralBalance } = useCollateralBalance(props.reserve);
+  const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
 
   const { borrowed: totalBorrowed } = useBorrowedAmount(address);
 
diff --git a/src/components/WithdrawInput/index.tsx b/src/components/WithdrawInput/index.tsx
index f00c4a3..52a2664 100644
--- a/src/components/WithdrawInput/index.tsx
+++ b/src/components/WithdrawInput/index.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from "react";
 import {
   InputType,
-  useCollateralBalance,
+  useUserCollateralBalance,
   useSliderInput,
   useTokenName,
   useUserBalance,
@@ -36,7 +36,7 @@ export const WithdrawInput = (props: {
     balanceLamports: collateralBalanceLamports,
     accounts: fromAccounts,
   } = useUserBalance(reserve?.collateralMint);
-  const { balance: collateralBalanceInLiquidity } = useCollateralBalance(
+  const { balance: collateralBalanceInLiquidity } = useUserCollateralBalance(
     reserve
   );
 
@@ -51,7 +51,7 @@ export const WithdrawInput = (props: {
     [collateralBalanceInLiquidity]
   );
 
-  const { value, setValue, mark, setMark, type } = useSliderInput(convert);
+  const { value, setValue, pct, setPct, type } = useSliderInput(convert);
 
   const onWithdraw = useCallback(() => {
     setPendingTx(true);
@@ -60,8 +60,8 @@ export const WithdrawInput = (props: {
       try {
         await withdraw(
           fromAccounts[0],
-          type === InputType.Slider
-            ? (mark * collateralBalanceLamports) / 100
+          type === InputType.Percent
+            ? (pct * collateralBalanceLamports) / 100
             : Math.ceil(
                 collateralBalanceLamports *
                   (parseFloat(value) / collateralBalanceInLiquidity)
@@ -86,7 +86,7 @@ export const WithdrawInput = (props: {
     collateralBalanceLamports,
     connection,
     fromAccounts,
-    mark,
+    pct,
     reserve,
     setValue,
     type,
@@ -132,7 +132,7 @@ export const WithdrawInput = (props: {
             <div>{name}</div>
           </div>
 
-          <Slider marks={marks} value={mark} onChange={setMark} />
+          <Slider marks={marks} value={pct} onChange={setPct} />
 
           <Button
             type="primary"
diff --git a/src/hooks/useCollateralBalance.ts b/src/hooks/useCollateralBalance.ts
index 57c0782..104f426 100644
--- a/src/hooks/useCollateralBalance.ts
+++ b/src/hooks/useCollateralBalance.ts
@@ -4,7 +4,7 @@ import { LendingReserve, reserveMarketCap } from "../models/lending";
 import { fromLamports } from "../utils/utils";
 import { useUserBalance } from "./useUserBalance";
 
-export function useCollateralBalance(
+export function useUserCollateralBalance(
   reserve?: LendingReserve,
   account?: PublicKey
 ) {
diff --git a/src/hooks/useSliderInput.ts b/src/hooks/useSliderInput.ts
index 79bb7bb..aba8017 100644
--- a/src/hooks/useSliderInput.ts
+++ b/src/hooks/useSliderInput.ts
@@ -1,36 +1,36 @@
 import { useCallback, useState } from "react";
 
 export enum InputType {
-  Input = 0,
-  Slider = 1,
+  AbsoluteValue = 0,
+  Percent = 1,
 }
 
 export const useSliderInput = (
   convert: (val: string | number) => string | number
 ) => {
   const [value, setValue] = useState("");
-  const [mark, setMark] = useState(0);
-  const [type, setType] = useState(InputType.Slider);
+  const [pct, setPct] = useState(0);
+  const [type, setType] = useState(InputType.Percent);
 
   return {
     value,
     setValue: useCallback(
       (val: string) => {
         console.log(val);
-        setType(InputType.Input);
+        setType(InputType.AbsoluteValue);
         setValue(val);
-        setMark(convert(val) as number);
+        setPct(convert(val) as number);
       },
-      [setType, setValue, setMark, convert]
+      [setType, setValue, setPct, convert]
     ),
-    mark,
-    setMark: useCallback(
+    pct,
+    setPct: useCallback(
       (val: number) => {
-        setType(InputType.Input);
-        setMark(val);
+        setType(InputType.AbsoluteValue);
+        setPct(val);
         setValue(convert(val) as string);
       },
-      [setType, setValue, setMark, convert]
+      [setType, setValue, setPct, convert]
     ),
     type,
   };
diff --git a/src/models/lending/reserve.ts b/src/models/lending/reserve.ts
index 26a2f63..9fd052d 100644
--- a/src/models/lending/reserve.ts
+++ b/src/models/lending/reserve.ts
@@ -183,3 +183,7 @@ export const reserveMarketCap = (reserve?: LendingReserve) => {
 
   return total;
 };
+
+export const collateralExchangeRate = (reserve?: LendingReserve) => {
+  return (reserve?.collateralMintSupply.toNumber() || 1) / reserveMarketCap(reserve);
+}
diff --git a/src/views/borrow/item.tsx b/src/views/borrow/item.tsx
index e72b5dc..c731c22 100644
--- a/src/views/borrow/item.tsx
+++ b/src/views/borrow/item.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useCollateralBalance, useTokenName } from "../../hooks";
+import { useUserCollateralBalance, useTokenName } from "../../hooks";
 import { calculateBorrowAPY, LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../../components/TokenIcon";
 import { formatNumber, formatPct } from "../../utils/utils";
@@ -17,7 +17,7 @@ export const BorrowItem = (props: {
   const price = useMidPriceInUSD(props.reserve.liquidityMint.toBase58()).price;
 
   // TODO: calculate avilable amount... based on total owned collateral across all the reserves
-  const { balance: collateralBalance } = useCollateralBalance(props.reserve);
+  const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
 
   const apr = calculateBorrowAPY(props.reserve);
 
diff --git a/src/views/dashboard/depositItem.tsx b/src/views/dashboard/depositItem.tsx
index 2e4039e..8c95e86 100644
--- a/src/views/dashboard/depositItem.tsx
+++ b/src/views/dashboard/depositItem.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { useCollateralBalance, useTokenName } from "../../hooks";
+import { useUserCollateralBalance, useTokenName } from "../../hooks";
 import { calculateDepositAPY, LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../../components/TokenIcon";
 import { formatNumber, formatPct } from "../../utils/utils";
@@ -15,7 +15,7 @@ export const DepositItem = (props: {
 }) => {
   const mintAddress = props.reserve.info.liquidityMint;
   const name = useTokenName(mintAddress);
-  const { balance: collateralBalance } = useCollateralBalance(
+  const { balance: collateralBalance } = useUserCollateralBalance(
     props.reserve.info,
     props.account.pubkey
   );
diff --git a/src/views/dashboard/obligationItem.tsx b/src/views/dashboard/obligationItem.tsx
index 30a3a37..c3125ec 100644
--- a/src/views/dashboard/obligationItem.tsx
+++ b/src/views/dashboard/obligationItem.tsx
@@ -1,9 +1,11 @@
 import React, { useMemo } from "react";
-import { useTokenName } from "../../hooks";
+import { useUserCollateralBalance, useTokenName } from "../../hooks";
 import {
   calculateBorrowAPY,
+  collateralExchangeRate,
   LendingObligation,
   LendingReserve,
+  reserveMarketCap,
 } from "../../models/lending";
 import { TokenIcon } from "../../components/TokenIcon";
 import {
@@ -28,6 +30,7 @@ export const ObligationItem = (props: {
   const name = useTokenName(borrowReserve?.info.liquidityMint);
 
   const liquidityMint = useMint(borrowReserve.info.liquidityMint);
+  const collateralMint = useMint(borrowReserve.info.collateralMint);
 
   const borrowAmount = fromLamports(
     wadToLamports(obligation.info.borrowAmountWad),
@@ -38,6 +41,11 @@ export const ObligationItem = (props: {
     borrowReserve,
   ]);
 
+
+  const rate = collateralExchangeRate(borrowReserve.info) ;
+
+  console.log(`collateral ${fromLamports(obligation.info.collateralAmount.toNumber() / rate, collateralMint)}`);
+
   return (
     <Card>
       <div className="dashboard-item">
diff --git a/src/views/deposit/view/item.tsx b/src/views/deposit/view/item.tsx
index a90b880..16240c3 100644
--- a/src/views/deposit/view/item.tsx
+++ b/src/views/deposit/view/item.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  useCollateralBalance,
+  useUserCollateralBalance,
   useTokenName,
   useUserBalance,
 } from "../../../hooks";
@@ -18,7 +18,7 @@ export const ReserveItem = (props: {
 }) => {
   const name = useTokenName(props.reserve.liquidityMint);
   const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint);
-  const { balance: collateralBalance } = useCollateralBalance(props.reserve);
+  const { balance: collateralBalance } = useUserCollateralBalance(props.reserve);
 
   const apy = calculateDepositAPY(props.reserve);