feat: new portoflio component, health factor % bar, refactor other le…

…nd page components (wip)
mrgnlabs · Dec 1, 2023 · 4377985 · 4377985
1 parent 4674678
commit 4377985
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 18 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Portfolio/Portfolio.tsx b/apps/marginfi-v2-ui/src/components/common/Portfolio/Portfolio.tsx
@@ -0,0 +1,52 @@
+import React from "react";
+
+import { useMrgnlendStore } from "~/store";
+import { numeralFormatter } from "@mrgnlabs/mrgn-common";
+
+import { IconInfoCircle } from "~/components/ui/icons";
+
+export const Portfolio = () => {
+  const [accountSummary] = useMrgnlendStore((state) => [state.accountSummary]);
+
+  const healthColor = React.useMemo(() => {
+    if (accountSummary.healthFactor) {
+      let color;
+
+      if (accountSummary.healthFactor >= 0.5) {
+        color = "#75BA80"; // green color " : "#",
+      } else if (accountSummary.healthFactor >= 0.25) {
+        color = "#B8B45F"; // yellow color
+      } else {
+        color = "#CF6F6F"; // red color
+      }
+
+      return color;
+    } else {
+      return "#fff";
+    }
+  }, [accountSummary.healthFactor]);
+  return (
+    <div className="bg-background-gray p-6 rounded-xl space-y-3 w-full my-10">
+      <h2 className="font-medium text-3xl">Portfolio</h2>
+      <div className="text-muted-foreground">
+        <dl className="flex justify-between items-center gap-2">
+          <dt className="flex items-center gap-1.5 text-sm">
+            Health factor <IconInfoCircle size={16} />
+          </dt>
+          <dd className="text-2xl font-bold" style={{ color: healthColor }}>
+            {numeralFormatter(accountSummary.healthFactor * 100)}%
+          </dd>
+        </dl>
+        <div className="h-2 bg-background-gray-light">
+          <div
+            className="h-2"
+            style={{
+              backgroundColor: healthColor,
+              width: `${accountSummary.healthFactor * 100}%`,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/marginfi-v2-ui/src/components/common/Portfolio/index.tsx b/apps/marginfi-v2-ui/src/components/common/Portfolio/index.tsx
@@ -0,0 +1 @@
+export * from "./Portfolio";
diff --git a/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx b/apps/marginfi-v2-ui/src/components/desktop/AssetsList/AssetsList.tsx
@@ -23,6 +23,7 @@ import {
   LSTS,
 } from "~/components/common/AssetList";
 import { ActionBox, ActionBoxDialog } from "~/components/common/ActionBox";
+import { Portfolio } from "~/components/common/Portfolio";
 import { MrgnTooltip } from "~/components/common";
 
 import { LendingModes } from "~/types";
@@ -173,10 +174,13 @@ const AssetsList = () => {
 
   return (
     <>
-      <ActionBox />
-      <ActionBoxDialog>
-        <Button>Open Action Box Dialog</Button>
-      </ActionBoxDialog>
+      <div className="flex flex-col justify-center items-center gap-8 mb-16">
+        <ActionBox />
+        <ActionBoxDialog>
+          <Button>Open Action Box Dialog</Button>
+        </ActionBoxDialog>
+      </div>
+
       <AssetListFilters />
 
       <div className="col-span-full">
@@ -656,7 +660,7 @@ const AssetsList = () => {
         </Card>
       </div>
 
-      {walletAddress && <UserPositions />}
+      {walletAddress && <Portfolio />}
 
       <LSTDialog
         variant={lstDialogVariant}

diff --git a/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx b/apps/marginfi-v2-ui/src/components/desktop/DesktopAccountSummary/DesktopAccountSummary.tsx
@@ -34,18 +34,6 @@ const AccountSummary = () => {
           />
         </div>
       </div>
-
-      <div className="w-full">
-        {connected && (
-          <div className="font-[500] h-full rounded-xl">
-            <span className="w-full h-full flex justify-start text-xl text-white">Your account</span>
-            <UserStats
-              accountSummary={isStoreInitialized && selectedAccount ? accountSummary : null}
-              healthFactor={accountSummary.healthFactor}
-            />
-          </div>
-        )}
-      </div>
     </div>
   );
 };

diff --git a/apps/marginfi-v2-ui/src/components/ui/icons.tsx b/apps/marginfi-v2-ui/src/components/ui/icons.tsx
@@ -23,6 +23,7 @@ import {
   IconFilter,
   IconSortAscending,
   IconSortDescending,
+  IconInfoCircle,
 } from "@tabler/icons-react";
 import { cn } from "~/utils/themeUtils";
 
@@ -465,6 +466,7 @@ export {
   IconFilter,
   IconSortAscending,
   IconSortDescending,
+  IconInfoCircle,
 
   // customed icons
   IconBrandGoogle,

diff --git a/apps/marginfi-v2-ui/src/pages/index.tsx b/apps/marginfi-v2-ui/src/pages/index.tsx
@@ -116,7 +116,7 @@ const Home = () => {
           )}
           <DesktopAccountSummary />
         </div>
-        <div className="pt-[16px] pb-[64px] px-4 grid w-full xl:w-4/5 xl:max-w-7xl gap-4 grid-cols-1 xl:grid-cols-2">
+        <div className="pt-[16px] pb-[64px] px-4 w-full xl:w-4/5 xl:max-w-7xl gap-4">
           <AssetsList />
         </div>
         <OverlaySpinner fetching={!isStoreInitialized || isRefreshingStore} />