fix(mfi-v2-ui): fix merge issues & bugfixes

mrgnlabs · Sep 28, 2023 · 5937386 · 5937386
1 parent e1f9dce
commit 5937386
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 116 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/desktop/PageHeader.tsx b/apps/marginfi-v2-ui/src/components/desktop/PageHeader.tsx
@@ -6,7 +6,7 @@ interface PageHeaderProps {
 
 const PageHeader: FC<PageHeaderProps> = ({ children }) => {
   return (
-    <div className="hidden sm:flex w-full h-[60px] justify-center items-center border-solid border-[#1C2125] border-y-[1px] bg-[url('/WaveBG3.png')]">
+    <div className="flex w-full h-[60px] justify-center items-center border-solid border-[#1C2125] border-y-[1px] bg-[url('/WaveBG3.png')]">
       <div className="w-4/5 max-w-7xl flex-row border-solid font-aeonik font-normal text-3xl">{children}</div>
     </div>
   );

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardPosition.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/AssetCard/AssetCardPosition.tsx
@@ -16,7 +16,7 @@ export const AssetCardPosition: FC<{
       <div className="flex flex-row justify-between ">
         <div className="my-auto">Your position details</div>
         <span className="cursor-pointer" onClick={() => setIsCollapsed(!isCollapsed)}>
-          {isCollapsed ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+          {isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
         </span>
       </div>
       {!isCollapsed && (

diff --git a/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx b/apps/marginfi-v2-ui/src/components/mobile/MobileAssetsList/MobileAssetsList.tsx
@@ -1,8 +1,8 @@
-import React, { FC, useRef, useState } from "react";
+import React, { FC, useMemo, useRef, useState } from "react";
 import Image from "next/image";
 import { Skeleton, Switch, Typography } from "@mui/material";
 
-import { useMrgnlendStore, useUserProfileStore } from "~/store";
+import { useMrgnlendStore } from "~/store";
 import { useWalletContext } from "~/hooks/useWalletContext";
 import { BorrowLendToggle } from "~/components/common/AssetList";
 import { MrgnTooltip } from "~/components/common/MrgnTooltip";
@@ -23,6 +23,19 @@ export const MobileAssetsList: FC = () => {
   const inputRefs = useRef<Record<string, HTMLInputElement | null>>({});
   const [isInLendingMode, setIsInLendingMode] = useState(true);
 
+  const globalBanks = useMemo(
+    () =>
+      sortedBanks &&
+      sortedBanks.filter((b) => !b.info.state.isIsolated).filter((b) => (isFiltered ? b.isActive : true)),
+    [sortedBanks, isFiltered]
+  );
+
+  const isolatedBanks = useMemo(
+    () =>
+      sortedBanks && sortedBanks.filter((b) => b.info.state.isIsolated).filter((b) => (isFiltered ? b.isActive : true)),
+    [sortedBanks, isFiltered]
+  );
+
   return (
     <>
       <div className="col-span-full">
@@ -35,11 +48,9 @@ export const MobileAssetsList: FC = () => {
       <div className="col-span-full">
         <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Global pool</div>
         <div className="flex flew-row flex-wrap gap-4">
-          {sortedBanks
-            .filter((b) => !b.info.state.isIsolated)
-            .filter((b) => (isFiltered ? b.isActive : true))
-            .map((bank, i) =>
-              isStoreInitialized ? (
+          {isStoreInitialized ? (
+            globalBanks.length > 0 ? (
+              globalBanks.map((bank, i) => (
                 <AssetCard
                   key={bank.meta.tokenSymbol}
                   nativeSolBalance={nativeSolBalance}
@@ -49,16 +60,15 @@ export const MobileAssetsList: FC = () => {
                   marginfiAccount={selectedAccount}
                   inputRefs={inputRefs}
                 />
-              ) : (
-                <Skeleton
-                  key={bank.meta.tokenSymbol}
-                  sx={{ bgcolor: "grey.900" }}
-                  variant="rounded"
-                  width={390}
-                  height={215}
-                />
-              )
-            )}
+              ))
+            ) : (
+              <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
+                No {isInLendingMode ? "lending" : "borrowing"} {isFiltered ? "positions" : "pools"} found.
+              </Typography>
+            )
+          ) : (
+            <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
+          )}
         </div>
       </div>
       <div className="col-span-full">
@@ -81,11 +91,9 @@ export const MobileAssetsList: FC = () => {
           </MrgnTooltip>
         </div>
         <div className="flex flew-row flex-wrap gap-4">
-          {sortedBanks
-            .filter((b) => b.info.state.isIsolated)
-            .filter((b) => (isFiltered ? b.isActive : true))
-            .map((bank, i) =>
-              isStoreInitialized ? (
+          {isStoreInitialized ? (
+            isolatedBanks.length > 0 ? (
+              isolatedBanks.map((bank, i) => (
                 <AssetCard
                   key={bank.meta.tokenSymbol}
                   nativeSolBalance={nativeSolBalance}
@@ -95,16 +103,15 @@ export const MobileAssetsList: FC = () => {
                   marginfiAccount={selectedAccount}
                   inputRefs={inputRefs}
                 />
-              ) : (
-                <Skeleton
-                  key={bank.meta.tokenSymbol}
-                  sx={{ bgcolor: "grey.900" }}
-                  variant="rounded"
-                  width={365}
-                  height={215}
-                />
-              )
-            )}
+              ))
+            ) : (
+              <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
+                No {isInLendingMode ? "lending" : "borrowing"} {isFiltered ? "positions" : "pools"} found.
+              </Typography>
+            )
+          ) : (
+            <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
+          )}
         </div>
       </div>
     </>

diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -12,49 +12,28 @@ import { PageHeader } from "~/components/desktop/PageHeader";
 import { OverlaySpinner } from "~/components/desktop/OverlaySpinner";
 import { Desktop, Mobile } from "~/mediaQueries";
 
-const DesktopAccountSummary = () => {
-  const DesktopAccountSummary = dynamic(
-    async () => (await import("~/components/desktop/DesktopAccountSummary")).DesktopAccountSummary,
-    {
-      ssr: false,
-    }
-  );
-
-  return <DesktopAccountSummary />;
-};
-
-const AssetsList = () => {
-  const AssetsList = dynamic(async () => (await import("~/components/desktop/AssetsList")).AssetsList, { ssr: false });
-  return <AssetsList />;
-};
-
-const UserPositions = () => {
-  const UserPositions = dynamic(async () => (await import("~/components/desktop/UserPositions")).UserPositions, {
+const DesktopAccountSummary = dynamic(
+  async () => (await import("~/components/desktop/DesktopAccountSummary")).DesktopAccountSummary,
+  {
     ssr: false,
-  });
+  }
+);
+const AssetsList = dynamic(async () => (await import("~/components/desktop/AssetsList")).AssetsList, { ssr: false });
 
-  return <UserPositions />;
-};
+const UserPositions = dynamic(async () => (await import("~/components/desktop/UserPositions")).UserPositions, {
+  ssr: false,
+});
 
-const MobileAccountSummary = () => {
-  const MobileAccountSummary = dynamic(
-    async () => (await import("~/components/mobile/MobileAccountSummary")).MobileAccountSummary,
-    {
-      ssr: false,
-    }
-  );
-  return <MobileAccountSummary />;
-};
+const MobileAccountSummary = dynamic(
+  async () => (await import("~/components/mobile/MobileAccountSummary")).MobileAccountSummary,
+  {
+    ssr: false,
+  }
+);
 
-const MobileAssetsList = () => {
-  const MobileAssetsList = dynamic(
-    async () => (await import("~/components/mobile/MobileAssetsList")).MobileAssetsList,
-    {
-      ssr: false,
-    }
-  );
-  return <MobileAssetsList />;
-};
+const MobileAssetsList = dynamic(async () => (await import("~/components/mobile/MobileAssetsList")).MobileAssetsList, {
+  ssr: false,
+});
 
 const Home = () => {
   const { walletAddress, wallet, isOverride } = useWalletContext();
@@ -122,7 +101,7 @@ const Home = () => {
         </div>
       </Desktop>
       <Mobile>
-        <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-4 mb-20">
+        <div className="flex flex-col h-full justify-start content-start pt-[16px] mx-7 max-w-7xl gap-4 mb-20">
           <MobileAccountSummary />
           <MobileAssetsList />
         </div>

diff --git a/apps/marginfi-v2-ui/src/pages/portfolio.tsx b/apps/marginfi-v2-ui/src/pages/portfolio.tsx
@@ -18,7 +18,7 @@ import {
   PointsConnectWallet,
 } from "~/components/desktop/Points";
 import { AssetCard } from "~/components/mobile/MobileAssetsList/AssetCard";
-import { Button, Skeleton } from "@mui/material";
+import { Button, Skeleton, Typography } from "@mui/material";
 
 const PortfolioPage = () => {
   const { connected, wallet, isOverride } = useWalletContext();
@@ -41,6 +41,30 @@ const PortfolioPage = () => {
 
   const referralCode = useMemo(() => routerQuery.referralCode as string | undefined, [routerQuery.referralCode]);
 
+  const lendingBanks = useMemo(
+    () =>
+      sortedBanks &&
+      sortedBanks
+        .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
+        .filter((b) => b.isActive && b.position.isLending)
+        .sort(
+          (a, b) => b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
+        ),
+    [sortedBanks]
+  );
+
+  const borrowingBanks = useMemo(
+    () =>
+      sortedBanks &&
+      sortedBanks
+        .filter((b) => b.info.rawBank.config.assetWeightInit.toNumber() > 0)
+        .filter((b) => b.isActive && !b.position.isLending)
+        .sort(
+          (a, b) => b.info.state.totalDeposits * b.info.state.price - a.info.state.totalDeposits * a.info.state.price
+        ),
+    [sortedBanks]
+  );
+
   useEffect(() => {
     setIsRefreshingStore(true);
     fetchMrgnlendState({ marginfiConfig: config.mfiConfig, connection, wallet, isOverride }).catch(console.error);
@@ -56,7 +80,7 @@ const PortfolioPage = () => {
   return (
     <>
       <PageHeader>Portfolio</PageHeader>
-      <div className="flex flex-col h-full justify-start content-start pt-[16px] w-4/5 max-w-7xl gap-7 mb-20">
+      <div className="flex flex-col h-full justify-start content-start pt-[16px] mx-7 sm:mx-0 max-w-7xl sm:w-4/5 gap-7 mb-20">
         <MobileAccountSummary />
         <MobilePortfolioOverview />
         {!connected ? (
@@ -122,59 +146,57 @@ const PortfolioPage = () => {
             </Link>
           </div>
         </div>
-        <div className="col-span-full">
-          <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Lending positions</div>
-          <div className="flex flew-row flex-wrap gap-4">
-            {sortedBanks
-              .filter((b) => b.isActive)
-              .map((bank, i) =>
-                isStoreInitialized ? (
-                  <AssetCard
-                    key={bank.meta.tokenSymbol}
-                    nativeSolBalance={nativeSolBalance}
-                    bank={bank}
-                    isInLendingMode={false}
-                    isConnected={connected}
-                    marginfiAccount={selectedAccount}
-                  />
+        {sortedBanks && (
+          <div className="col-span-full">
+            <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Lending positions</div>
+            <div className="flex flew-row flex-wrap gap-4">
+              {isStoreInitialized ? (
+                lendingBanks.length > 0 ? (
+                  lendingBanks.map((bank) => (
+                    <AssetCard
+                      key={bank.meta.tokenSymbol}
+                      nativeSolBalance={nativeSolBalance}
+                      bank={bank}
+                      isInLendingMode={false}
+                      isConnected={connected}
+                      marginfiAccount={selectedAccount}
+                    />
+                  ))
                 ) : (
-                  <Skeleton
-                    key={bank.meta.tokenSymbol}
-                    sx={{ bgcolor: "grey.900" }}
-                    variant="rounded"
-                    width={390}
-                    height={215}
-                  />
+                  <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
+                    No lending positions found.
+                  </Typography>
                 )
+              ) : (
+                <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
               )}
+            </div>
           </div>
-        </div>
+        )}
 
         <div className="col-span-full">
           <div className="font-aeonik font-normal flex items-center text-2xl text-white pb-2">Borrowing positions</div>
           <div className="flex flew-row flex-wrap gap-4">
-            {sortedBanks
-              .filter((b) => b.isActive)
-              .map((bank, i) =>
-                isStoreInitialized ? (
+            {isStoreInitialized ? (
+              borrowingBanks.length > 0 ? (
+                borrowingBanks.map((bank) => (
                   <AssetCard
                     key={bank.meta.tokenSymbol}
                     nativeSolBalance={nativeSolBalance}
                     bank={bank}
-                    isInLendingMode={true}
+                    isInLendingMode={false}
                     isConnected={connected}
                     marginfiAccount={selectedAccount}
                   />
-                ) : (
-                  <Skeleton
-                    key={bank.meta.tokenSymbol}
-                    sx={{ bgcolor: "grey.900" }}
-                    variant="rounded"
-                    width={390}
-                    height={215}
-                  />
-                )
-              )}
+                ))
+              ) : (
+                <Typography color="#868E95" className="font-aeonik font-[300] text-sm flex gap-1" gutterBottom>
+                  No borrowing positions found.
+                </Typography>
+              )
+            ) : (
+              <Skeleton sx={{ bgcolor: "grey.900" }} variant="rounded" width={390} height={215} />
+            )}
           </div>
         </div>
       </div>

diff --git a/apps/marginfi-v2-ui/src/pages/swap.tsx b/apps/marginfi-v2-ui/src/pages/swap.tsx
@@ -34,13 +34,13 @@ const SwapPage = () => {
           </div>
         </div>
       </PageHeader>
-      <div className="w-full h-full flex flex-col justify-start items-center content-start py-[96px] sm:py-[32px] gap-8 w-4/5 max-w-7xl">
+      <div className="w-full h-full flex flex-col justify-start items-center content-start py-[96px] sm:py-[32px] gap-8 w-4/5">
         <div>
           <div className="text-[#fff] text-3xl min-w-[600px] text-center">
             Zero fees. <span className="text-[#DCE85D]">Always.</span>
           </div>
         </div>
-        <div style={{ width: 420, maxWidth: "80%" }} id="integrated-terminal"></div>
+        <div className="max-w-[420px] px-3" id="integrated-terminal"></div>
       </div>
     </>
   );