fix: typos and utilization rate

src/components/BorrowInput/index.tsx

@@ -137,7 +137,7 @@ export const BorrowInput = (props: {
               fontSize: 20,
               boxShadow: "none",
               borderColor: "transparent",
-              outline: "transpaernt",
+              outline: "transparent",
             }}
             placeholder="0.00"
           />

src/components/DepositInput/index.tsx

@@ -89,7 +89,7 @@ export const DepositInput = (props: {
               fontSize: 20,
               boxShadow: "none",
               borderColor: "transparent",
-              outline: "transpaernt",
+              outline: "transparent",
             }}
             placeholder="0.00"
           />

src/components/RepayInput/index.tsx

@@ -128,7 +128,7 @@ export const RepayInput = (props: {
               fontSize: 20,
               boxShadow: "none",
               borderColor: "transparent",
-              outline: "transpaernt",
+              outline: "transparent",
             }}
             placeholder="0.00"
           />

src/components/ReserveUtilizationChart/index.tsx

@@ -22,7 +22,7 @@ export const ReserveUtilizationChart = (props: { reserve: LendingReserve }) => {
   }, []);
 
   const liquidityMint = useMint(props.reserve.liquidityMint);
-  const avilableLiquidity = fromLamports(
+  const availableLiquidity = fromLamports(
     props.reserve.availableLiquidity.toNumber(),
     liquidityMint
   );
@@ -49,8 +49,8 @@ export const ReserveUtilizationChart = (props: { reserve: LendingReserve }) => {
     const data = [
       {
         name: "Available Liquidity",
-        value: avilableLiquidity,
+        value: availableLiquidity,
-        tokens: avilableLiquidity,
+        tokens: availableLiquidity,
       },
       {
         name: "Total Borrowed",
@@ -108,7 +108,7 @@ export const ReserveUtilizationChart = (props: { reserve: LendingReserve }) => {
         },
       ],
     });
-  }, [totalBorrows, avilableLiquidity]);
+  }, [totalBorrows, availableLiquidity]);
 
   return <div ref={chartDiv} style={{ height: 300, width: 400 }} />;
 };

src/components/SideReserveOverview/index.tsx

@@ -34,9 +34,9 @@ export const SideReserveOverview = (props: {
   const borrowApr = calculateBorrowAPY(reserve);
 
   const utilizationRate = calculateUtilizationRatio(reserve);
-  const liquidiationThreshold = reserve.config.optimalUtilizationRate / 100;
+  const liquidationThreshold = reserve.config.optimalUtilizationRate / 100;
-  const liquidiationPenalty = reserve.config.liquidationBonus / 100;
+  const liquidationPenalty = reserve.config.liquidationBonus / 100;
-  const maxLTV = liquidiationThreshold - liquidiationPenalty;
+  const maxLTV = liquidationThreshold - liquidationPenalty;
 
   let extraInfo: JSX.Element | null = null;
   if (mode === SideReserveOverviewMode.Deposit) {
@@ -51,17 +51,17 @@ export const SideReserveOverview = (props: {
 
         <div className="card-row">
           <Text type="secondary" className="card-cell ">
-            Maxiumum LTV:
+            Maximum LTV:
           </Text>
           <div className="card-cell ">{formatPct.format(maxLTV)}</div>
         </div>
 
         <div className="card-row">
           <Text type="secondary" className="card-cell ">
-            Liquidation threashold:
+            Liquidation threshold:
           </Text>
           <div className="card-cell ">
-            {formatPct.format(liquidiationThreshold)}
+            {formatPct.format(liquidationThreshold)}
           </div>
         </div>
 
@@ -70,7 +70,7 @@ export const SideReserveOverview = (props: {
             Liquidation penalty:
           </Text>
           <div className="card-cell ">
-            {formatPct.format(liquidiationPenalty)}
+            {formatPct.format(liquidationPenalty)}
           </div>
         </div>
       </>

src/components/WithdrawInput/index.tsx

@@ -89,7 +89,7 @@ export const WithdrawInput = (props: {
               fontSize: 20,
               boxShadow: "none",
               borderColor: "transparent",
-              outline: "transpaernt",
+              outline: "transparent",
             }}
             placeholder="0.00"
           />

src/models/lending/reserve.ts

@@ -171,6 +171,6 @@ export const initReserveInstruction = (
 };
 
 export const calculateUtilizationRatio = (reserve: LendingReserve) => {
-  return reserve.availableLiquidity.toNumber() /
+  let borrowedLiquidity = wadToLamports(reserve.borrowedLiquidityWad).toNumber();
-    (reserve.availableLiquidity.toNumber() + wadToLamports(reserve.borrowedLiquidityWad).toNumber());
+  return borrowedLiquidity / (reserve.availableLiquidity.toNumber() + borrowedLiquidity);
 }