update dashboard ui

burrowHQ · Dec 28, 2023 · f424b3f · f424b3f
1 parent 6f85cfb
commit f424b3f
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 23 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,7 @@
 LICENSE
 yarn.lock
-tsconfig.tsbuildinfo
+tsconfig.tsbuildinfo
+.env
+.gitignore
+.prettierignore
+yarn-error.log
diff --git a/.prettierrc b/.prettierrc
@@ -5,4 +5,4 @@
   "printWidth": 100,
   "useTabs": false,
   "endOfLine": "auto"
-}
+}
diff --git a/components/Header/stats/components.tsx b/components/Header/stats/components.tsx
@@ -132,20 +132,26 @@ const Label = ({ children, tooltip = "", bgcolor = "rgba(172, 255, 255, 0.1)", .
 export const StatLabel = ({
   title,
   row,
+  wrapStyle,
+  titleClass = "",
+  titleWrapClass = "",
 }: {
   title: {
     text: string;
     textStyle?: any;
   };
+  wrapStyle?: any;
+  titleClass?: string;
+  titleWrapClass?: string;
   row?: [{ value: string; icon?: string; valueStyle?: any; valueClass?: string }];
 }) => {
   return (
     <div className="flex gap-1 items-start flex-col md:flex-row md:flex-wrap">
       <div
-        className="flex md:items-center gap-2 h6 rounded md:rounded-[21px] bg-dark-100 truncate"
-        style={{ padding: "3px 6px 5px" }}
+        className={`flex md:items-center gap-2 h6 rounded md:rounded-[21px] bg-dark-100 truncate ${titleWrapClass}`}
+        style={wrapStyle || { padding: "3px 6px 5px" }}
       >
-        <div style={title?.textStyle} className="h6 text-gray-300">
+        <div style={title?.textStyle} className={`h6 text-gray-300 ${titleClass}`}>
           {title.text}
         </div>
         <div className="flex flex-col gap-1 md:flex-row">

diff --git a/components/Modal/index.tsx b/components/Modal/index.tsx
@@ -152,6 +152,7 @@ const Modal = () => {
                 setSelectedCollateralType={setSelectedCollateralType}
               />
             ) : null}
+            add prop here
             {action === "Repay" ? (
               <CollateralTypeSelectorRepay
                 repayPositions={repayPositions}

diff --git a/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx b/components/SemiCircleProgressBar/SemiCircleProgressBar.tsx
@@ -27,7 +27,7 @@ const SemiCircleProgressBar = ({
     }
   }
   // temp
-  rotateDegree = value + rotateDegree;
+  rotateDegree = value ? value + rotateDegree : rotateDegree;
   rotateDegree = Math.min(rotateDegree, MAX_DEGREE);
   let node;
   if (children) {

diff --git a/hooks/useUserHealth.ts b/hooks/useUserHealth.ts
@@ -50,12 +50,33 @@ export function useUserHealth() {
       ? "Medium"
       : "Good";
 
+  let allHealths = [
+    {
+      id: `token${healthFactor}`,
+      type: "Single Token",
+      healthFactor: Math.floor(healthFactor),
+      healthStatus: label.toLowerCase(),
+    },
+  ];
+  if (LPHealthFactor) {
+    Object.entries(LPHealthFactor).forEach(([positionId, value]: [string, any]) => {
+      allHealths.push({
+        id: `lp${positionId}`,
+        type: "LP",
+        positionId,
+        ...value,
+      });
+    });
+  }
+  allHealths = allHealths.sort((a, b) => a.healthFactor - b.healthFactor);
+
   return {
     netAPY,
     netLiquidityAPY,
     dailyReturns,
     healthFactor,
     LPHealthFactor,
+    allHealths,
     lowHealthFactor: LOW_HEALTH_FACTOR,
     dangerHealthFactor: DANGER_HEALTH_FACTOR,
     slimStats,

diff --git a/screens/Dashboard/dashboardOverview.tsx b/screens/Dashboard/dashboardOverview.tsx
@@ -25,6 +25,7 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
     data: null,
   });
   const userHealth = useUserHealth();
+  const [userHealthCur, setUserHealthCur] = useState<any>();
   const rewardsObj = useRewards();
   const { unreadLiquidation, fetchUnreadLiquidation } = useUnreadLiquidation();
   const isMobile = isMobileDevice();
@@ -33,6 +34,12 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
     fetchUnreadLiquidation().then();
   }, []);
 
+  useEffect(() => {
+    if (userHealth?.allHealths && !userHealthCur?.healthFactor) {
+      handleHealthClick(userHealth.allHealths[0]);
+    }
+  }, [userHealth?.allHealths]);
+
   let totalSuppliedUSD = 0;
   suppliedRows?.forEach((d) => {
     const usd = Number(d.supplied) * Number(d.price);
@@ -93,6 +100,20 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
     );
   });
 
+  const handleHealthClick = (o) => {
+    const valueLocale = o.healthFactor;
+    setUserHealthCur({
+      ...userHealth,
+      id: o.id,
+      healthFactor: valueLocale,
+      data: {
+        label: o.healthStatus,
+        valueLabel: `${valueLocale}%`,
+        valueLocale,
+      },
+    });
+  };
+
   return (
     <>
       <div className="flex gap-2 justify-between items-center mb-4 lg3:hidden">
@@ -176,33 +197,49 @@ const DashboardOverview = ({ suppliedRows, borrowedRows }) => {
               {recordsButton}
             </div>
 
-            <div className="relative lg3:mr-10 flex flex-col items-center">
-              <HealthFactor userHealth={userHealth} />
-              {userHealth?.LPHealthFactor ? (
-                <div className="lp-healths flex items-center gap-2 mt-4">
-                  {Object.entries(userHealth.LPHealthFactor).map(([key, value]: [string, any]) => {
+            <div className="relative flex xsm2:flex-col xsm:items-center items-end gap-4">
+              <HealthFactor userHealth={userHealthCur} />
+              {userHealth?.allHealths ? (
+                <div className="lp-healths flex flex-col items-center gap-2 mt-4">
+                  {userHealth.allHealths.map((value: any) => {
+                    const isActive = value.id === userHealthCur?.id;
                     const healthColor = {
                       good: "text-primary",
                       warning: "text-warning",
                       danger: "text-red-100",
                     };
 
-                    let tokensName = "";
+                    let tokensName = value?.type;
                     value?.metadata?.tokens?.forEach((d, i) => {
                       const isLast = i === value.metadata.tokens.length - 1;
                       tokensName += `${d.metadata.symbol}${!isLast ? "-" : ""}`;
                     });
                     return (
-                      <StatLabel
-                        title={{ text: tokensName || key }}
-                        row={[
-                          {
-                            value: `${value?.healthFactor}%`,
-                            valueClass: `${healthColor[value.healthStatus]}`,
-                          },
-                        ]}
-                        key={key}
-                      />
+                      <div
+                        key={value.id}
+                        className={`cursor-pointer relative health-tab ${
+                          isActive && "health-tab-active"
+                        }`}
+                        onClick={() => handleHealthClick(value)}
+                      >
+                        {isActive && <div className="arrow-left" />}
+                        <StatLabel
+                          title={{ text: tokensName }}
+                          wrapStyle={{
+                            background: "none",
+                            border: "1px solid #2E304B",
+                            padding: "7px 8px",
+                          }}
+                          titleWrapClass="w-[158px] rounded-[4px] md:rounded-[4px]"
+                          titleClass="w-[118px] truncate"
+                          row={[
+                            {
+                              value: `${value?.healthFactor}%`,
+                              valueClass: `${healthColor[value.healthStatus]}`,
+                            },
+                          ]}
+                        />
+                      </div>
                     );
                   })}
                 </div>
@@ -265,7 +302,7 @@ const HealthFactor = ({ userHealth }) => {
               <DangerIcon />
             </CustomTooltips>
           )}
-          {data.valueLabel}
+          {data?.valueLabel}
         </div>
         <div className="h5 text-gray-300 flex gap-1 items-center justify-center">
           Health Factor

diff --git a/styles/global.css b/styles/global.css
@@ -777,3 +777,17 @@ options-list::-webkit-scrollbar {
   user-select: none; /* Non-prefixed version, currently
                                   supported by Chrome, Edge, Opera and Firefox */
 }
+
+.health-tab:hover, .health-tab-active{
+  background: #2E304B;
+}
+
+.health-tab .arrow-left{
+  position: absolute;
+  right:100%;
+  width: 0;
+  height: 0;
+  border-top: 16px solid transparent;
+  border-bottom: 15px solid transparent;
+  border-right:10px solid #2E304B;
+}
diff --git a/utils/index.ts b/utils/index.ts
@@ -227,8 +227,15 @@ export function standardizeAsset(asset) {
     serializationAsset.symbol = nearMetadata.symbol;
     serializationAsset.icon = nearMetadata.icon;
   }
+  if (serializationAsset.metadata?.symbol === "wNEAR") {
+    serializationAsset.metadata.symbol = nearMetadata.symbol;
+    serializationAsset.metadata.icon = nearMetadata.icon;
+  }
   if (serializationAsset.symbol === "WOO") {
     serializationAsset.icon = wooMetadata.icon;
   }
+  if (serializationAsset.metadata?.symbol === "WOO") {
+    serializationAsset.metadata.icon = wooMetadata.icon;
+  }
   return serializationAsset;
 }