feat: cleanup & improvements

mrgnlabs · Feb 10, 2025 · a149e54 · a149e54
1 parent c485eac
commit a149e54
Show file tree

Hide file tree

Showing 9 changed files with 37 additions and 278 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Navbar/Navbar.tsx b/apps/marginfi-v2-ui/src/components/common/Navbar/Navbar.tsx
@@ -16,7 +16,6 @@ import { useConnection } from "~/hooks/use-connection";
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
 import { Button } from "~/components/ui/button";
 import { IconMrgn } from "~/components/ui/icons";
-import { Input } from "~/components/ui/input";
 
 // @todo implement second pretty navbar row
 export const Navbar: FC = () => {
@@ -185,9 +184,8 @@ export const Navbar: FC = () => {
                 }}
                 className="hidden sm:flex py-2 px-4 border border-background-gray-hover flex-row items-center justify-between w-48 text-muted-foreground cursor-pointer "
               >
-                <div className="">Search pools...</div>
-
-                <div className={cn("")}>⌘ K</div>
+                <span>Search pools...</span>
+                <span>⌘ K</span>
               </Button>
 
               <Popover>

diff --git a/apps/marginfi-v2-ui/src/components/common/Portfolio/lending-portfolio.tsx b/apps/marginfi-v2-ui/src/components/common/Portfolio/lending-portfolio.tsx
@@ -1,22 +1,21 @@
 import React from "react";
 import Link from "next/link";
-import { useRouter } from "next/router";
 
-import { VersionedTransaction } from "@solana/web3.js";
 import { IconInfoCircle, IconX } from "@tabler/icons-react";
 import { Id, toast } from "react-toastify";
 
 import { numeralFormatter, SolanaTransaction } from "@mrgnlabs/mrgn-common";
 import { usdFormatter, usdFormatterDyn } from "@mrgnlabs/mrgn-common";
 import { ActionType, ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { cn, LendingModes, usePrevious } from "@mrgnlabs/mrgn-utils";
+import { cn, usePrevious } from "@mrgnlabs/mrgn-utils";
 
 import { useMrgnlendStore, useUiStore, useUserProfileStore } from "~/store";
 
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
 import { WalletAuthAccounts, WalletButton } from "~/components/wallet-v2";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 import { Loader } from "~/components/ui/loader";
+
 import { RewardsDialog } from "./components/rewards";
 
 import { PortfolioAssetCard, PortfolioAssetCardSkeleton, PortfolioUserStats } from "./components";
@@ -34,7 +33,6 @@ const initialRewardsState: RewardsType = {
 };
 
 export const LendingPortfolio = () => {
-  const router = useRouter();
   const { connected } = useWallet();
   const [walletConnectionDelay, setWalletConnectionDelay] = React.useState(false);
   const [
@@ -56,23 +54,15 @@ export const LendingPortfolio = () => {
     state.marginfiAccounts,
     state.fetchMrgnlendState,
   ]);
-  const [
-    setLendingMode,
-    priorityFees,
-    broadcastType,
-    accountLabels,
-    fetchAccountLabels,
-    setGlobalActionBoxProps,
-    globalActionBoxProps,
-  ] = useUiStore((state) => [
-    state.setLendingMode,
-    state.priorityFees,
-    state.broadcastType,
-    state.accountLabels,
-    state.fetchAccountLabels,
-    state.setGlobalActionBoxProps,
-    state.globalActionBoxProps,
-  ]);
+  const [priorityFees, broadcastType, accountLabels, setGlobalActionBoxProps, globalActionBoxProps] = useUiStore(
+    (state) => [
+      state.priorityFees,
+      state.broadcastType,
+      state.accountLabels,
+      state.setGlobalActionBoxProps,
+      state.globalActionBoxProps,
+    ]
+  );
   const [userPointsData] = useUserProfileStore((state) => [state.userPointsData]);
 
   // Rewards
@@ -246,9 +236,9 @@ export const LendingPortfolio = () => {
     return <WalletButton />;
   }
 
-  // if (isLoading) {
-  //   return <Loader label={connected ? "Loading positions" : "Loading"} />;
-  // }
+  if (isLoading) {
+    return <Loader label={connected ? "Loading positions" : "Loading"} />;
+  }
 
   if (isStoreInitialized && connected && !hasMultipleAccount) {
     if (!lendingBanks.length && !borrowingBanks.length) {
@@ -409,13 +399,11 @@ export const LendingPortfolio = () => {
                   ))}
                 </div>
               ) : (
-                <div color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1">
+                <div className="text-muted-foreground flex gap-1">
                   No lending positions found.
-                  <button
-                    className="border-b border-primary/50 transition-colors hover:border-primary "
+                  <span
+                    className="border-b border-primary/50 transition-colors hover:border-primary cursor-pointer"
                     onClick={() => {
-                      // setLendingMode(LendingModes.BORROW);
-                      // router.push("/");
                       setGlobalActionBoxProps({
                         ...globalActionBoxProps,
                         isOpen: true,
@@ -424,7 +412,7 @@ export const LendingPortfolio = () => {
                     }}
                   >
                     Search the pools
-                  </button>{" "}
+                  </span>{" "}
                   to lend assets.
                 </div>
               )
@@ -450,18 +438,16 @@ export const LendingPortfolio = () => {
                   ))}
                 </div>
               ) : (
-                <div color="#868E95" className="inline font-aeonik font-[300]  text-sm">
+                <div className="text-muted-foreground flex gap-1">
                   No borrow positions found.{" "}
-                  <button
-                    className="border-b border-primary/50 transition-colors hover:border-primary "
+                  <span
+                    className="border-b border-primary/50 transition-colors hover:border-primary cursor-pointer"
                     onClick={() => {
-                      // setLendingMode(LendingModes.BORROW);
-                      // router.push("/");
                       setGlobalActionBoxProps({ ...globalActionBoxProps, isOpen: true, actionType: ActionType.Borrow });
                     }}
                   >
                     Search the pools
-                  </button>{" "}
+                  </span>{" "}
                   and open a new borrow.
                 </div>
               )

diff --git a/.../marginfi-v2-ui/src/components/common/global-actionbox-portal/global-actionbox-portal.tsx b/.../marginfi-v2-ui/src/components/common/global-actionbox-portal/global-actionbox-portal.tsx
@@ -3,11 +3,9 @@
 import React from "react";
 import * as RadixPortal from "@radix-ui/react-portal";
 import { ActionBox } from "@mrgnlabs/mrgn-ui";
-import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 import { capture } from "@mrgnlabs/mrgn-utils";
 import { useMrgnlendStore, useUiStore } from "~/store";
-import { Button } from "~/components/ui/button";
 
 export const GlobalActionBoxPortal = () => {
   const { connected, walletContextState } = useWallet();
@@ -22,10 +20,7 @@ export const GlobalActionBoxPortal = () => {
 
   return (
     <RadixPortal.Root>
-      <div
-        className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 
-                   opacity-0 animate-fadeIn transition-opacity duration-300 ease-in-out"
-      >
+      <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50 opacity-0 animate-fadeIn transition-opacity duration-300 ease-in-out">
         <div className=" p-6 rounded-lg shadow-lg">
           <ActionBox.BorrowLend
             useProvider={true}

diff --git a/apps/marginfi-v2-ui/src/store/uiStore copy.ts b/apps/marginfi-v2-ui/src/store/uiStore copy.ts