From 1ab37e16d2a3ac67bf641bc3d069f487b102ae44 Mon Sep 17 00:00:00 2001
From: Kobe Leenders <leenderskobe@gmail.com>
Date: Thu, 7 Dec 2023 04:55:15 +0100
Subject: [PATCH 1/2] feat: improved action box

---
 .../components/common/ActionBox/ActionBox.tsx | 202 +++++++++++-
 .../common/ActionBox/ActionBoxActions.tsx     |  67 ++++
 .../common/ActionBox/ActionBoxTokens.tsx      | 288 ++++++++++++------
 .../src/components/ui/select.tsx              |  10 +-
 4 files changed, 456 insertions(+), 111 deletions(-)
 create mode 100644 apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx

diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
index f8d2ec8cdf..befe03660b 100644
--- a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
@@ -1,27 +1,83 @@
 import React from "react";
 
 import { usdFormatter } from "@mrgnlabs/mrgn-common";
-import { useUiStore } from "~/store";
+import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
+import { WSOL_MINT, numeralFormatter } from "@mrgnlabs/mrgn-common";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { useMrgnlendStore, useUiStore } from "~/store";
+import { MarginfiActionParams, closeBalance, executeLendingAction } from "~/utils";
+import { LendingModes } from "~/types";
+import { useWalletContext } from "~/hooks/useWalletContext";
 
 import { MrgnLabeledSwitch } from "~/components/common/MrgnLabeledSwitch";
 import { ActionBoxTokens } from "~/components/common/ActionBox/ActionBoxTokens";
 
 import { Input } from "~/components/ui/input";
-import { Button } from "~/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "~/components/ui/select";
+import { IconWallet } from "~/components/ui/icons";
 
-import { LendingModes } from "~/types";
+import { ActionBoxActions } from "./ActionBoxActions";
 
 export const ActionBox = () => {
+  const [mfiClient, nativeSolBalance, setIsRefreshingStore, fetchMrgnlendState, selectedAccount] = useMrgnlendStore(
+    (state) => [
+      state.marginfiClient,
+      state.nativeSolBalance,
+      state.setIsRefreshingStore,
+      state.fetchMrgnlendState,
+      state.selectedAccount,
+    ]
+  );
   const [lendingMode, setLendingMode, selectedToken, setSelectedToken] = useUiStore((state) => [
     state.lendingMode,
     state.setLendingMode,
     state.selectedToken,
     state.setSelectedToken,
   ]);
+  const { walletContextState } = useWalletContext();
+  const [selectedMode, setSelectMode] = React.useState<ActionType>();
   const [preview, setPreview] = React.useState<{ key: string; value: string }[]>([]);
   const [amount, setAmount] = React.useState<number | null>(null);
   const amountInputRef = React.useRef<HTMLInputElement>(null);
 
+  const isDust = React.useMemo(() => selectedToken?.isActive && selectedToken?.position.isDust, [selectedToken]);
+  const showCloseBalance = React.useMemo(() => selectedMode === ActionType.Withdraw && isDust, [selectedMode, isDust]);
+  const maxAmount = React.useMemo(() => {
+    switch (selectedMode) {
+      case ActionType.Deposit:
+        return selectedToken?.userInfo.maxDeposit;
+      case ActionType.Withdraw:
+        return selectedToken?.userInfo.maxWithdraw;
+      case ActionType.Borrow:
+        return selectedToken?.userInfo.maxBorrow;
+      case ActionType.Repay:
+        return selectedToken?.userInfo.maxRepay;
+    }
+  }, [selectedToken, selectedMode]);
+  const isInputDisabled = React.useMemo(() => maxAmount === 0 && !showCloseBalance, [maxAmount, showCloseBalance]);
+  const walletAmount = React.useMemo(
+    () =>
+      selectedToken?.info.state.mint.equals(WSOL_MINT)
+        ? selectedToken?.userInfo.tokenAccount.balance + nativeSolBalance
+        : selectedToken?.userInfo.tokenAccount.balance,
+    [selectedToken]
+  );
+  const hasActivePosition = React.useMemo(
+    () =>
+      selectedToken?.isActive &&
+      ((!selectedToken.isLending && lendingMode === LendingModes.LEND) ||
+        (selectedToken.isLending && lendingMode === LendingModes.BORROW)),
+    [selectedToken, lendingMode]
+  );
+
+  React.useEffect(() => {
+    if (lendingMode === LendingModes.LEND) {
+      setSelectMode(ActionType.Deposit);
+    } else if (lendingMode === LendingModes.BORROW) {
+      setSelectMode(ActionType.Borrow);
+    }
+  }, [lendingMode, setSelectMode, selectedToken]);
+
   React.useEffect(() => {
     if (!selectedToken || !amount) {
       setPreview([]);
@@ -38,11 +94,11 @@ export const ActionBox = () => {
         value: usdFormatter.format(amount),
       },
       {
-        key: "Some property",
+        key: "Some propertya",
         value: "--",
       },
       {
-        key: "Some property",
+        key: "Some propertyb",
         value: "--",
       },
     ]);
@@ -50,9 +106,85 @@ export const ActionBox = () => {
 
   React.useEffect(() => {
     if (!selectedToken || !amountInputRef.current) return;
+    setAmount(0);
     amountInputRef.current.focus();
   }, [selectedToken]);
 
+  const executeLendingActionCb = React.useCallback(
+    async ({
+      mfiClient,
+      actionType: currentAction,
+      bank,
+      amount: borrowOrLendAmount,
+      nativeSolBalance,
+      marginfiAccount,
+      walletContextState,
+    }: MarginfiActionParams) => {
+      await executeLendingAction({
+        mfiClient,
+        actionType: currentAction,
+        bank,
+        amount: borrowOrLendAmount,
+        nativeSolBalance,
+        marginfiAccount,
+        walletContextState,
+      });
+
+      setAmount(0);
+
+      // -------- Refresh state
+      try {
+        setIsRefreshingStore(true);
+        await fetchMrgnlendState();
+      } catch (error: any) {
+        console.log("Error while reloading state");
+        console.log(error);
+      }
+    },
+    [fetchMrgnlendState, setIsRefreshingStore]
+  );
+
+  const handleCloseBalance = React.useCallback(async () => {
+    try {
+      await closeBalance({ marginfiAccount: selectedAccount, bank: selectedToken });
+    } catch (error) {
+      return;
+    }
+
+    setAmount(0);
+
+    try {
+      setIsRefreshingStore(true);
+      await fetchMrgnlendState();
+    } catch (error: any) {
+      console.log("Error while reloading state");
+      console.log(error);
+    }
+  }, [selectedToken, selectedAccount, fetchMrgnlendState, setIsRefreshingStore]);
+
+  const handleLendingAction = React.useCallback(async () => {
+    // TODO implement LST dialog
+
+    await executeLendingActionCb({
+      mfiClient,
+      actionType: selectedMode,
+      bank: selectedToken,
+      amount: amount,
+      nativeSolBalance,
+      marginfiAccount: selectedAccount,
+      walletContextState,
+    });
+  }, [
+    selectedMode,
+    selectedToken,
+    executeLendingActionCb,
+    mfiClient,
+    amount,
+    nativeSolBalance,
+    selectedAccount,
+    walletContextState,
+  ]);
+
   return (
     <div className="bg-background p-4 flex flex-col items-center gap-4">
       <div className="space-y-6 text-center w-full flex flex-col items-center">
@@ -69,19 +201,75 @@ export const ActionBox = () => {
         <p className="text-muted-foreground">Supply. Earn interest. Borrow. Repeat.</p>
       </div>
       <div className="p-6 bg-background-gray text-white w-full max-w-[480px] rounded-xl">
-        <p className="text-lg mb-3">You {lendingMode === LendingModes.LEND ? "supply" : "borrow"}</p>
+        <div className="flex flex-row items-baseline justify-between">
+          {hasActivePosition ? (
+            <Select
+              value={selectedMode}
+              disabled={!hasActivePosition}
+              onValueChange={(value) => {
+                setSelectMode(value as ActionType);
+              }}
+            >
+              <SelectTrigger
+                className="w-[160px] h-[35px] rounded-[100px] bg-background-gray-light border-none mb-3"
+                icon={<ChevronDownIcon className="h-5 w-5 opacity-70" />}
+              >
+                <div className="flex items-center gap-2 text-lg">
+                  <SelectValue className="text-lg" defaultValue={LendingModes.LEND} placeholder="Select pools" />
+                </div>
+              </SelectTrigger>
+
+              {lendingMode === LendingModes.LEND ? (
+                <SelectContent>
+                  <SelectItem value={ActionType.Deposit}>You supply</SelectItem>
+                  <SelectItem value={ActionType.Withdraw}>You withdraw</SelectItem>
+                </SelectContent>
+              ) : (
+                <SelectContent>
+                  <SelectItem value={ActionType.Borrow}>You borrow</SelectItem>
+                  <SelectItem value={ActionType.Repay}>You repay</SelectItem>
+                </SelectContent>
+              )}
+            </Select>
+          ) : (
+            <p className="text-lg mb-3">You {lendingMode === LendingModes.LEND ? "supply" : "borrow"}</p>
+          )}
+          {selectedToken && (
+            <div className="inline-flex gap-2 items-baseline">
+              <div className="h-3.5">
+                <IconWallet size={16} />
+              </div>
+              <span className="text-sm font-normal">
+                {(walletAmount > 0.01 ? numeralFormatter(walletAmount) : "< 0.01").concat(
+                  " ",
+                  selectedToken?.meta.tokenSymbol
+                )}
+              </span>
+              <div onClick={() => setAmount(maxAmount)} className="text-base font-bold cursor-pointer">
+                MAX
+              </div>
+            </div>
+          )}
+        </div>
         <div className="bg-background text-3xl rounded-lg flex justify-between items-center p-4 font-medium mb-5">
           <ActionBoxTokens currentToken={selectedToken} setCurrentToken={setSelectedToken} />
           <Input
             type="number"
             ref={amountInputRef}
             value={amount!}
+            disabled={isInputDisabled}
             onChange={(e) => setAmount(Number(e.target.value))}
             placeholder="0"
             className="bg-transparent w-full text-right outline-none focus-visible:outline-none focus-visible:ring-0 border-none text-3xl font-medium"
           />
         </div>
-        <Button className="w-full py-6">Select token and amount</Button>
+        <ActionBoxActions
+          selectedMode={selectedMode}
+          amount={amount}
+          maxAmount={maxAmount}
+          showCloseBalance={showCloseBalance}
+          handleAction={() => (showCloseBalance ? handleCloseBalance() : handleLendingAction())}
+        />
         {selectedToken !== null && amount !== null && preview.length > 0 && (
           <dl className="grid grid-cols-2 text-muted-foreground gap-y-2 mt-4 text-sm">
             {preview.map((item) => (
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx
new file mode 100644
index 0000000000..ff19e707e1
--- /dev/null
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx
@@ -0,0 +1,67 @@
+import React from "react";
+
+import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
+
+import { useUiStore } from "~/store";
+
+import { Button } from "~/components/ui/button";
+
+type ActionBoxActionsProps = {
+  selectedMode: ActionType;
+  amount: number;
+  maxAmount: number;
+  showCloseBalance: boolean;
+  handleAction: () => void;
+};
+
+export const ActionBoxActions = ({
+  selectedMode,
+  amount,
+  maxAmount,
+  showCloseBalance,
+  handleAction,
+}: ActionBoxActionsProps) => {
+  const [selectedToken] = useUiStore((state) => [state.selectedToken]);
+
+  const isActionDisabled = React.useMemo(() => {
+    const isValidInput = amount > 0;
+    return (maxAmount === 0 || !isValidInput) && !showCloseBalance;
+  }, [amount, showCloseBalance, maxAmount]);
+
+  const actionText = React.useMemo(() => {
+    if (!selectedToken) {
+      return "Select token and amount";
+    }
+
+    if (showCloseBalance) {
+      return "Close account";
+    }
+
+    if (maxAmount === 0) {
+      switch (selectedMode) {
+        case ActionType.Deposit:
+          return `Insufficient ${selectedToken.meta.tokenSymbol} in wallet`;
+        case ActionType.Withdraw:
+          return "Nothing to withdraw";
+        case ActionType.Borrow:
+          return "Deposit a collateral first (lend)";
+        case ActionType.Repay:
+          return `Insufficient ${selectedToken.meta.tokenSymbol} in wallet for loan repayment`;
+        default:
+          return "Invalid action";
+      }
+    }
+
+    if (amount <= 0) {
+      return "Add an amount";
+    }
+
+    return selectedMode;
+  }, [selectedMode, amount, selectedToken, maxAmount, showCloseBalance]);
+
+  return (
+    <Button disabled={isActionDisabled} className="w-full py-6" onClick={handleAction}>
+      {actionText}
+    </Button>
+  );
+};
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
index 2f49077d7d..588dd56265 100644
--- a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
@@ -35,16 +35,42 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
   const [searchQuery, setSearchQuery] = React.useState("");
   const [isTokenPopoverOpen, setIsTokenPopoverOpen] = React.useState(false);
 
+  const calculateRate = React.useCallback(
+    (bank: ExtendedBankInfo) =>
+      percentFormatter.format(
+        (lendingMode === LendingModes.LEND ? bank.info.state.lendingRate : bank.info.state.borrowingRate) +
+          (lendingMode === LendingModes.LEND && bank.info.state.emissions == Emissions.Lending
+            ? bank.info.state.emissionsRate
+            : 0) +
+          (lendingMode !== LendingModes.LEND && bank.info.state.emissions == Emissions.Borrowing
+            ? bank.info.state.emissionsRate
+            : 0)
+      ),
+    [lendingMode]
+  );
+
   const filteredBanks = React.useMemo(() => {
     const lowerCaseSearchQuery = searchQuery.toLowerCase();
 
     return extendedBankInfos
-      .filter((bankInfo) => {
-        return bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery);
-      })
-      .filter((bankInfo) => {
-        return lendingMode === LendingModes.LEND ? bankInfo.userInfo.tokenAccount.balance === 0 : true;
-      });
+      .filter((bankInfo) => bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery))
+      .filter((bankInfo) => (lendingMode === LendingModes.LEND ? bankInfo.userInfo.tokenAccount.balance === 0 : true));
+  }, [extendedBankInfos, searchQuery]);
+
+  const filteredBanksActiveLending = React.useMemo(() => {
+    const lowerCaseSearchQuery = searchQuery.toLowerCase();
+    return extendedBankInfos
+      .filter((bankInfo) => bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery))
+      .filter((bankInfo) => bankInfo.isActive && bankInfo.position?.isLending)
+      .sort((a, b) => b.userInfo.position?.amount - a.userInfo.position?.amount);
+  }, [extendedBankInfos, searchQuery]);
+
+  const filteredBanksActiveBorrowing = React.useMemo(() => {
+    const lowerCaseSearchQuery = searchQuery.toLowerCase();
+    return extendedBankInfos
+      .filter((bankInfo) => bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery))
+      .filter((bankInfo) => bankInfo.isActive && !bankInfo.position?.isLending)
+      .sort((a, b) => b.userInfo.position?.amount - a.userInfo.position?.amount);
   }, [extendedBankInfos, searchQuery]);
 
   const filteredBanksUserOwns = React.useMemo(() => {
@@ -59,7 +85,16 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
         return balance > 0 && bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery);
       })
       .sort((a, b) => {
-        return b.userInfo.tokenAccount.balance - a.userInfo.tokenAccount.balance;
+        const isFirstWSOL = a.info.state.mint?.equals ? a.info.state.mint.equals(WSOL_MINT) : false;
+        const isSecondWSOL = b.info.state.mint?.equals ? b.info.state.mint.equals(WSOL_MINT) : false;
+        const firstBalance =
+          (isFirstWSOL ? a.userInfo.tokenAccount.balance + nativeSolBalance : a.userInfo.tokenAccount.balance) *
+          a.info.state.price;
+        const secondBalance =
+          (isSecondWSOL ? b.userInfo.tokenAccount.balance + nativeSolBalance : b.userInfo.tokenAccount.balance) *
+          b.info.state.price;
+
+        return secondBalance - firstBalance;
       });
   }, [extendedBankInfos, searchQuery]);
 
@@ -74,7 +109,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
       <PopoverTrigger asChild>
         <Button
           className={cn(
-            "bg-background-gray-light text-white text-lg p-6 pr-5 gap-2.5 transition-colors hover:bg-background-gray",
+            "bg-background-gray-light text-white text-left text-lg p-6 pr-5 gap-2.5 transition-colors hover:bg-background-gray",
             isTokenPopoverOpen && "bg-background-gray w-[300px]"
           )}
         >
@@ -87,7 +122,18 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
                 height={28}
                 className="rounded-full"
               />
-              <span>{currentToken.meta.tokenSymbol}</span>
+              <div className="">
+                <p className="leading-none">{currentToken.meta.tokenSymbol}</p>
+                <p
+                  className={cn(
+                    "text-sm font-normal leading-none",
+                    lendingMode === LendingModes.LEND && "text-success",
+                    lendingMode === LendingModes.BORROW && "text-error"
+                  )}
+                >
+                  {calculateRate(selectedToken) + ` ${lendingMode === LendingModes.LEND ? "APY" : "APR"}`}
+                </p>
+              </div>
             </>
           )}
           {!currentToken && <>Select token</>}
@@ -106,7 +152,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
           shouldFilter={false}
           value={selectedToken?.address?.toString().toLowerCase() ?? ""}
           onValueChange={(value) =>
-            setSelectedToken(extendedBankInfos.find((bank) => bank.address.toString() === value) || null)
+            setSelectedToken(extendedBankInfos.find((bank) => bank.address.toString() === value) || selectedToken)
           }
         >
           <CommandInput
@@ -133,47 +179,73 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
 
                     setIsTokenPopoverOpen(false);
                   }}
-                  className="h-[60px] px-3 font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white"
+                  className="cursor-pointer h-[60px] px-3 font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white"
+                >
+                  <ActionBoxItem
+                    rate={calculateRate(bank)}
+                    lendingMode={lendingMode}
+                    bank={bank}
+                    showBalanceOverride={true}
+                    nativeSolBalance={nativeSolBalance}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+          {searchQuery.length > 0 && filteredBanksActiveBorrowing.length > 0 && (
+            <CommandGroup heading="Currently supplying">
+              {filteredBanksActiveBorrowing.slice(0, searchQuery.length === 0 ? 5 : 3).map((bank, index) => (
+                <CommandItem
+                  key={index}
+                  value={bank.address?.toString().toLowerCase()}
+                  onSelect={(currentValue) => {
+                    setCurrentToken(
+                      extendedBankInfos.find(
+                        (bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue
+                      ) ?? null
+                    );
+                  }}
+                  className={cn(
+                    "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white",
+                    lendingMode === LendingModes.LEND && "py-2"
+                  )}
                 >
-                  <div className="flex items-center gap-3">
-                    {bank.meta.tokenLogoUri && (
-                      <Image
-                        src={bank.meta.tokenLogoUri}
-                        alt={bank.meta.tokenName}
-                        width={24}
-                        height={24}
-                        className="rounded-full"
-                      />
-                    )}
-                    <div>
-                      <p>{bank.meta.tokenSymbol}</p>
-                      <p className="text-sm text-success">
-                        {percentFormatter.format(
-                          (lendingMode === LendingModes.LEND
-                            ? bank.info.state.lendingRate
-                            : bank.info.state.borrowingRate) +
-                            (lendingMode === LendingModes.LEND && bank.info.state.emissions == Emissions.Lending
-                              ? bank.info.state.emissionsRate
-                              : 0) +
-                            (lendingMode !== LendingModes.LEND && bank.info.state.emissions == Emissions.Borrowing
-                              ? bank.info.state.emissionsRate
-                              : 0)
-                        )}
-                      </p>
-                    </div>
-                  </div>
-                  <div className="space-y-0.5 text-right">
-                    <p className="font-medium">
-                      {bank.userInfo.tokenAccount.balance > 0.01
-                        ? numeralFormatter(bank.userInfo.tokenAccount.balance)
-                        : "< 0.01"}
-                    </p>
-                    <p className="text-sm text-muted-foreground">
-                      {bank.userInfo.tokenAccount.balance * bank.info.state.price > 0.01
-                        ? usdFormatter.format(bank.userInfo.tokenAccount.balance * bank.info.state.price)
-                        : `$${(bank.userInfo.tokenAccount.balance * bank.info.state.price).toExponential(2)}`}
-                    </p>
-                  </div>
+                  <ActionBoxItem
+                    rate={calculateRate(bank)}
+                    lendingMode={lendingMode}
+                    bank={bank}
+                    showBalanceOverride={false}
+                    nativeSolBalance={nativeSolBalance}
+                  />
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          )}
+          {searchQuery.length > 0 && filteredBanksActiveLending.length > 0 && (
+            <CommandGroup heading="Currently supplying">
+              {filteredBanksActiveLending.slice(0, searchQuery.length === 0 ? 5 : 3).map((bank, index) => (
+                <CommandItem
+                  key={index}
+                  value={bank.address?.toString().toLowerCase()}
+                  onSelect={(currentValue) => {
+                    setCurrentToken(
+                      extendedBankInfos.find(
+                        (bankInfo) => bankInfo.address.toString().toLowerCase() === currentValue
+                      ) ?? null
+                    );
+                  }}
+                  className={cn(
+                    "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white",
+                    lendingMode === LendingModes.LEND && "py-2"
+                  )}
+                >
+                  <ActionBoxItem
+                    rate={calculateRate(bank)}
+                    lendingMode={lendingMode}
+                    bank={bank}
+                    showBalanceOverride={false}
+                    nativeSolBalance={nativeSolBalance}
+                  />
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -192,59 +264,18 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
                     );
                   }}
                   className={cn(
-                    "font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white",
+                    "cursor-pointer font-medium flex items-center justify-between gap-2 data-[selected=true]:bg-background-gray-light data-[selected=true]:text-white",
                     lendingMode === LendingModes.LEND && "py-2",
                     lendingMode === LendingModes.BORROW && "h-[60px]"
                   )}
                 >
-                  <div className="flex items-center gap-3">
-                    {bank.meta.tokenLogoUri && (
-                      <Image
-                        src={bank.meta.tokenLogoUri}
-                        alt={bank.meta.tokenName}
-                        width={24}
-                        height={24}
-                        className="rounded-full"
-                      />
-                    )}
-                    <div>
-                      <p>{bank.meta.tokenSymbol}</p>
-                      <p
-                        className={cn(
-                          "text-sm",
-                          lendingMode === LendingModes.LEND && "text-success",
-                          lendingMode === LendingModes.BORROW && "text-error"
-                        )}
-                      >
-                        {percentFormatter.format(
-                          (lendingMode === LendingModes.LEND
-                            ? bank.info.state.lendingRate
-                            : bank.info.state.borrowingRate) +
-                            (lendingMode === LendingModes.LEND && bank.info.state.emissions == Emissions.Lending
-                              ? bank.info.state.emissionsRate
-                              : 0) +
-                            (lendingMode !== LendingModes.LEND && bank.info.state.emissions == Emissions.Borrowing
-                              ? bank.info.state.emissionsRate
-                              : 0)
-                        )}
-                      </p>
-                    </div>
-                  </div>
-
-                  {lendingMode === LendingModes.BORROW && bank.userInfo.tokenAccount.balance > 0 && (
-                    <div className="space-y-0.5 text-right">
-                      <p className="font-medium">
-                        {bank.userInfo.tokenAccount.balance > 0.01
-                          ? numeralFormatter(bank.userInfo.tokenAccount.balance)
-                          : "< 0.01"}
-                      </p>
-                      <p className="text-sm text-muted-foreground">
-                        {bank.userInfo.tokenAccount.balance * bank.info.state.price > 0.01
-                          ? usdFormatter.format(bank.userInfo.tokenAccount.balance * bank.info.state.price)
-                          : `$${(bank.userInfo.tokenAccount.balance * bank.info.state.price).toExponential(2)}`}
-                      </p>
-                    </div>
-                  )}
+                  <ActionBoxItem
+                    rate={calculateRate(bank)}
+                    lendingMode={lendingMode}
+                    bank={bank}
+                    showBalanceOverride={false}
+                    nativeSolBalance={nativeSolBalance}
+                  />
                 </CommandItem>
               ))}
             </CommandGroup>
@@ -254,3 +285,62 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
     </Popover>
   );
 };
+
+type ActionBoxItemProps = {
+  rate: string;
+  lendingMode: LendingModes;
+  bank: ExtendedBankInfo;
+  nativeSolBalance: number;
+  showBalanceOverride: boolean;
+};
+
+const ActionBoxItem = ({ rate, lendingMode, bank, nativeSolBalance, showBalanceOverride }: ActionBoxItemProps) => {
+  const balance = React.useMemo(() => {
+    const isWSOL = bank.info.state.mint?.equals ? bank.info.state.mint.equals(WSOL_MINT) : false;
+
+    return isWSOL ? bank.userInfo.tokenAccount.balance + nativeSolBalance : bank.userInfo.tokenAccount.balance;
+  }, [bank, nativeSolBalance]);
+
+  const balancePrice = React.useMemo(
+    () =>
+      balance * bank.info.state.price > 0.01
+        ? usdFormatter.format(balance * bank.info.state.price)
+        : `$${(balance * bank.info.state.price).toExponential(2)}`,
+    [bank, balance]
+  );
+
+  return (
+    <>
+      <div className="flex items-center gap-3">
+        {bank.meta.tokenLogoUri && (
+          <Image
+            src={bank.meta.tokenLogoUri}
+            alt={bank.meta.tokenName}
+            width={24}
+            height={24}
+            className="rounded-full"
+          />
+        )}
+        <div>
+          <p>{bank.meta.tokenSymbol}</p>
+          <p
+            className={cn(
+              "text-sm",
+              lendingMode === LendingModes.LEND && "text-success",
+              lendingMode === LendingModes.BORROW && "text-error"
+            )}
+          >
+            {rate}
+          </p>
+        </div>
+      </div>
+
+      {((lendingMode === LendingModes.BORROW && balance > 0) || showBalanceOverride) && (
+        <div className="space-y-0.5 text-right">
+          <p className="font-medium">{balance > 0.01 ? numeralFormatter(balance) : "< 0.01"}</p>
+          <p className="text-sm text-muted-foreground">{balancePrice}</p>
+        </div>
+      )}
+    </>
+  );
+};
diff --git a/apps/marginfi-v2-ui/src/components/ui/select.tsx b/apps/marginfi-v2-ui/src/components/ui/select.tsx
index 2ed74db199..3fa87a7a9b 100644
--- a/apps/marginfi-v2-ui/src/components/ui/select.tsx
+++ b/apps/marginfi-v2-ui/src/components/ui/select.tsx
@@ -12,8 +12,10 @@ const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
+    icon?: React.ReactNode;
+  }
+>(({ className, children, icon, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -23,9 +25,7 @@ const SelectTrigger = React.forwardRef<
     {...props}
   >
     {children}
-    <SelectPrimitive.Icon asChild>
-      <CaretSortIcon className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
+    <SelectPrimitive.Icon asChild>{icon ?? <CaretSortIcon className="h-4 w-4 opacity-50" />}</SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;

From 530691a7e643145b0fd608a9e5b25d93c74f4b08 Mon Sep 17 00:00:00 2001
From: Kobe Leenders <leenderskobe@gmail.com>
Date: Thu, 7 Dec 2023 05:17:33 +0100
Subject: [PATCH 2/2] fix: build errors

---
 .../components/common/ActionBox/ActionBox.tsx | 31 ++++++++++++-------
 .../common/ActionBox/ActionBoxActions.tsx     |  2 +-
 .../common/ActionBox/ActionBoxTokens.tsx      | 16 ++++------
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
index befe03660b..a45c4d98ee 100644
--- a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBox.tsx
@@ -45,13 +45,15 @@ export const ActionBox = () => {
   const maxAmount = React.useMemo(() => {
     switch (selectedMode) {
       case ActionType.Deposit:
-        return selectedToken?.userInfo.maxDeposit;
+        return selectedToken?.userInfo.maxDeposit ?? 0;
       case ActionType.Withdraw:
-        return selectedToken?.userInfo.maxWithdraw;
+        return selectedToken?.userInfo.maxWithdraw ?? 0;
       case ActionType.Borrow:
-        return selectedToken?.userInfo.maxBorrow;
+        return selectedToken?.userInfo.maxBorrow ?? 0;
       case ActionType.Repay:
-        return selectedToken?.userInfo.maxRepay;
+        return selectedToken?.userInfo.maxRepay ?? 0;
+      default:
+        return 0;
     }
   }, [selectedToken, selectedMode]);
   const isInputDisabled = React.useMemo(() => maxAmount === 0 && !showCloseBalance, [maxAmount, showCloseBalance]);
@@ -65,18 +67,19 @@ export const ActionBox = () => {
   const hasActivePosition = React.useMemo(
     () =>
       selectedToken?.isActive &&
-      ((!selectedToken.isLending && lendingMode === LendingModes.LEND) ||
-        (selectedToken.isLending && lendingMode === LendingModes.BORROW)),
+      ((!selectedToken.position.isLending && lendingMode === LendingModes.LEND) ||
+        (selectedToken.position.isLending && lendingMode === LendingModes.BORROW)),
     [selectedToken, lendingMode]
   );
 
   React.useEffect(() => {
+    setAmount(0);
     if (lendingMode === LendingModes.LEND) {
       setSelectMode(ActionType.Deposit);
     } else if (lendingMode === LendingModes.BORROW) {
       setSelectMode(ActionType.Borrow);
     }
-  }, [lendingMode, setSelectMode, selectedToken]);
+  }, [lendingMode, setSelectMode, setAmount, selectedToken]);
 
   React.useEffect(() => {
     if (!selectedToken || !amount) {
@@ -108,7 +111,7 @@ export const ActionBox = () => {
     if (!selectedToken || !amountInputRef.current) return;
     setAmount(0);
     amountInputRef.current.focus();
-  }, [selectedToken]);
+  }, [selectedToken, setAmount]);
 
   const executeLendingActionCb = React.useCallback(
     async ({
@@ -146,6 +149,9 @@ export const ActionBox = () => {
 
   const handleCloseBalance = React.useCallback(async () => {
     try {
+      if (!selectedToken || !selectedAccount) {
+        throw new Error();
+      }
       await closeBalance({ marginfiAccount: selectedAccount, bank: selectedToken });
     } catch (error) {
       return;
@@ -164,6 +170,9 @@ export const ActionBox = () => {
 
   const handleLendingAction = React.useCallback(async () => {
     // TODO implement LST dialog
+    if (!selectedMode || !selectedToken || !selectedAccount || !amount) {
+      return;
+    }
 
     await executeLendingActionCb({
       mfiClient,
@@ -240,7 +249,7 @@ export const ActionBox = () => {
                 <IconWallet size={16} />
               </div>
               <span className="text-sm font-normal">
-                {(walletAmount > 0.01 ? numeralFormatter(walletAmount) : "< 0.01").concat(
+                {(walletAmount && walletAmount > 0.01 ? numeralFormatter(walletAmount) : "< 0.01").concat(
                   " ",
                   selectedToken?.meta.tokenSymbol
                 )}
@@ -265,9 +274,9 @@ export const ActionBox = () => {
         </div>
         <ActionBoxActions
           selectedMode={selectedMode}
-          amount={amount}
+          amount={amount ?? 0}
           maxAmount={maxAmount}
-          showCloseBalance={showCloseBalance}
+          showCloseBalance={showCloseBalance ?? false}
           handleAction={() => (showCloseBalance ? handleCloseBalance() : handleLendingAction())}
         />
         {selectedToken !== null && amount !== null && preview.length > 0 && (
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx
index ff19e707e1..a6b57396b7 100644
--- a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxActions.tsx
@@ -7,7 +7,7 @@ import { useUiStore } from "~/store";
 import { Button } from "~/components/ui/button";
 
 type ActionBoxActionsProps = {
-  selectedMode: ActionType;
+  selectedMode?: ActionType;
   amount: number;
   maxAmount: number;
   showCloseBalance: boolean;
diff --git a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
index 588dd56265..c05179a481 100644
--- a/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
+++ b/apps/marginfi-v2-ui/src/components/common/ActionBox/ActionBoxTokens.tsx
@@ -27,11 +27,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
     state.extendedBankInfos,
     state.nativeSolBalance,
   ]);
-  const [lendingMode, selectedToken, setSelectedToken] = useUiStore((state) => [
-    state.lendingMode,
-    state.selectedToken,
-    state.setSelectedToken,
-  ]);
+  const [lendingMode] = useUiStore((state) => [state.lendingMode]);
   const [searchQuery, setSearchQuery] = React.useState("");
   const [isTokenPopoverOpen, setIsTokenPopoverOpen] = React.useState(false);
 
@@ -62,7 +58,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
     return extendedBankInfos
       .filter((bankInfo) => bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery))
       .filter((bankInfo) => bankInfo.isActive && bankInfo.position?.isLending)
-      .sort((a, b) => b.userInfo.position?.amount - a.userInfo.position?.amount);
+      .sort((a, b) => (b.isActive ? b?.position?.amount : 0) - (a.isActive ? a?.position?.amount : 0));
   }, [extendedBankInfos, searchQuery]);
 
   const filteredBanksActiveBorrowing = React.useMemo(() => {
@@ -70,7 +66,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
     return extendedBankInfos
       .filter((bankInfo) => bankInfo.meta.tokenSymbol.toLowerCase().includes(lowerCaseSearchQuery))
       .filter((bankInfo) => bankInfo.isActive && !bankInfo.position?.isLending)
-      .sort((a, b) => b.userInfo.position?.amount - a.userInfo.position?.amount);
+      .sort((a, b) => (b.isActive ? b?.position?.amount : 0) - (a.isActive ? a?.position?.amount : 0));
   }, [extendedBankInfos, searchQuery]);
 
   const filteredBanksUserOwns = React.useMemo(() => {
@@ -131,7 +127,7 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
                     lendingMode === LendingModes.BORROW && "text-error"
                   )}
                 >
-                  {calculateRate(selectedToken) + ` ${lendingMode === LendingModes.LEND ? "APY" : "APR"}`}
+                  {calculateRate(currentToken) + ` ${lendingMode === LendingModes.LEND ? "APY" : "APR"}`}
                 </p>
               </div>
             </>
@@ -150,9 +146,9 @@ export const ActionBoxTokens = ({ currentToken, setCurrentToken }: ActionBoxToke
         <Command
           className="bg-background-gray relative"
           shouldFilter={false}
-          value={selectedToken?.address?.toString().toLowerCase() ?? ""}
+          value={currentToken?.address?.toString().toLowerCase() ?? ""}
           onValueChange={(value) =>
-            setSelectedToken(extendedBankInfos.find((bank) => bank.address.toString() === value) || selectedToken)
+            setCurrentToken(extendedBankInfos.find((bank) => bank.address.toString() === value) || currentToken)
           }
         >
           <CommandInput