feat: add exchnage rate

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

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
+          type === InputType.Percent
-            ? (mark * balanceLamports) / 100
+            ? (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"

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
+        const toRepayLamports = type === InputType.Percent
-          ? (mark * borrowAmountLamports) / 100
+          ? (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}
+              value={pct}
-              onChange={setMark}
+              onChange={setPct}
             />
           <div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
           <CollateralSelector

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

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
+          type === InputType.Percent
-            ? (mark * collateralBalanceLamports) / 100
+            ? (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"

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

src/hooks/useSliderInput.ts

@@ -1,36 +1,36 @@
 import { useCallback, useState } from "react";
 
 export enum InputType {
-  Input = 0,
+  AbsoluteValue = 0,
-  Slider = 1,
+  Percent = 1,
 }
 
 export const useSliderInput = (
   convert: (val: string | number) => string | number
 ) => {
   const [value, setValue] = useState("");
-  const [mark, setMark] = useState(0);
+  const [pct, setPct] = useState(0);
-  const [type, setType] = useState(InputType.Slider);
+  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,
+    pct,
-    setMark: useCallback(
+    setPct: useCallback(
       (val: number) => {
-        setType(InputType.Input);
+        setType(InputType.AbsoluteValue);
-        setMark(val);
+        setPct(val);
         setValue(convert(val) as string);
       },
-      [setType, setValue, setMark, convert]
+      [setType, setValue, setPct, convert]
     ),
     type,
   };

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

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

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

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

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