fix: typos, repay with wrapped sol, withdraw overpay

src/actions/liquidate.tsx

@@ -28,7 +28,7 @@ export const liquidate = async (
   withdrawReserve: ParsedAccount<LendingReserve>
 ) => {
   notify({
-    message: 'Repaing funds...',
+    message: 'Repaying funds...',
     description: 'Please review transactions to approve.',
     type: 'warn',
   });

src/actions/repay.tsx

@@ -8,15 +8,15 @@ import { sendTransaction } from "../contexts/connection";
 import { notify } from "../utils/notifications";
 import { LendingReserve } from "./../models/lending/reserve";
 import { repayInstruction } from "./../models/lending/repay";
-import { AccountLayout } from "@solana/spl-token";
-import { LENDING_PROGRAM_ID } from "../utils/ids";
-import { findOrCreateAccountByMint } from "./account";
+import { AccountLayout, Token, NATIVE_MINT } from "@solana/spl-token";
+import { LENDING_PROGRAM_ID, TOKEN_PROGRAM_ID } from "../utils/ids";
+import { createTokenAccount, findOrCreateAccountByMint } from "./account";
 import { approve, LendingObligation, TokenAccount } from "../models";
 import { ParsedAccount } from "../contexts/accounts";
 
 export const repay = async (
-  from: TokenAccount, // CollateralAccount
-  amountLamports: number, // in collateral token (lamports)
+  from: TokenAccount,
+  repayAmount: number,
 
   // which loan to repay
   obligation: ParsedAccount<LendingObligation>,
@@ -31,7 +31,7 @@ export const repay = async (
   wallet: any
 ) => {
   notify({
-    message: 'Repaing funds...',
+    message: 'Repaying funds...',
     description: 'Please review transactions to approve.',
     type: 'warn',
   });
@@ -48,7 +48,11 @@ export const repay = async (
     LENDING_PROGRAM_ID
   );
 
-  const fromAccount = from.pubkey;
+  let fromAccount = from.pubkey;
+  if (wallet.publicKey.equals(fromAccount) && repayReserve.info.liquidityMint.equals(NATIVE_MINT)) {
+    fromAccount = createTokenAccount(instructions, wallet.publicKey, accountRentExempt + repayAmount, NATIVE_MINT, wallet.publicKey, signers);
+    cleanupInstructions.push(Token.createCloseAccountInstruction(TOKEN_PROGRAM_ID, fromAccount, wallet.publicKey, wallet.publicKey, []));
+  }
 
   // create approval for transfer transactions
   approve(
@@ -57,7 +61,7 @@ export const repay = async (
     fromAccount,
     authority,
     wallet.publicKey,
-    amountLamports
+    repayAmount
   );
 
   // get destination account
@@ -85,7 +89,7 @@ export const repay = async (
 
   instructions.push(
     repayInstruction(
-      amountLamports,
+      repayAmount,
       fromAccount,
       toAccount,
       repayReserve.pubkey,

src/components/ReserveStatus/index.tsx

@@ -106,7 +106,7 @@ export const ReserveStatus = (props: {
           </Col>
           <Col span={6}>
             <Statistic
-              title={LABELS.LIQUIDATION_THREASHOLD}
+              title={LABELS.LIQUIDATION_THRESHOLD}
               className="small-statisitc"
               value={liquidationThreshold}
               precision={2}

src/components/ReserveUtilizationChart/index.tsx

@@ -22,7 +22,8 @@ export const ReserveUtilizationChart = (props: { reserve: LendingReserve }) => {
     [props.reserve, liquidityMint]
   );
 
-  const percent = (availableLiquidity * 100) / (availableLiquidity + totalBorrows);
+  const totalSupply = availableLiquidity + totalBorrows;
+  const percent = 100 * totalBorrows / totalSupply;
 
   return (
     <WaterWave

src/components/WithdrawInput/index.tsx

@@ -59,14 +59,15 @@ export const WithdrawInput = (props: {
 
     (async () => {
       try {
-        await withdraw(
-          fromAccounts[0],
-          type === InputType.Percent
+        const withdrawAmount = Math.min(type === InputType.Percent
             ? (pct * collateralBalanceLamports) / 100
             : Math.ceil(
                 collateralBalanceLamports *
                   (parseFloat(value) / collateralBalanceInLiquidity)
-              ),
+              ), collateralBalanceLamports);
+        await withdraw(
+          fromAccounts[0],
+          withdrawAmount,
           reserve,
           address,
           connection,

src/constants/labels.ts

@@ -53,7 +53,7 @@ export const LABELS = {
   TABLE_TITLE_MARKET_SIZE: "Market Size",
   TABLE_TITLE_ACTION: "Action",
   MAX_LTV: "Maximum LTV",
-  LIQUIDATION_THREASHOLD: "Liquidation threashold",
+  LIQUIDATION_THRESHOLD: "Liquidation threshold",
   LIQUIDATION_PENALTY: "Liquidation penalty",
   TABLE_TITLE_MAX_BORROW: "Available for you",
   DASHBOARD_TITLE_LOANS: "Loans",