dashboard head optimization

burrowHQ · Mar 23, 2024 · 0632cf1 · 0632cf1
1 parent 4583c19
commit 0632cf1
Show file tree

Hide file tree

Showing 16 changed files with 659 additions and 239 deletions.
diff --git a/components/Header/stats/apy.tsx b/components/Header/stats/apy.tsx
@@ -12,44 +12,36 @@ import { getAverageBorrowedRewardApy } from "../../../redux/selectors/getAverage
 import { getAverageNetRewardApy } from "../../../redux/selectors/getAverageNetRewardApy";
 import { useNonFarmedAssets } from "../../../hooks/hooks";
 import { DoubtIcon } from "../../Icons/Icons";
+import HtmlTooltip from "../../common/html-tooltip";
+import { format_apy } from "../../../utils/uiNumber";
 
 export const APY = () => {
   const { netAPY, netLiquidityAPY, dailyReturns } = useUserHealth();
   const { weightedNetLiquidity, hasNegativeNetLiquidity, assets } = useNonFarmedAssets();
   const totalApy = netAPY + netLiquidityAPY;
   const amount = `${totalApy.toLocaleString(undefined, APY_FORMAT)}%`;
+  const [showTooltip, setShowTooltip] = useState(false);
   const showLabels = netAPY > 0 || netLiquidityAPY > 0;
   const { averageSupplyApy, averageBorrowedApy } = useAverageAPY();
-  const [showTooltip, setShowTooltip] = useState(false);
-  const userSupplyReward = useAppSelector(getAverageSupplyRewardApy());
-  const userBorrowedReward = useAppSelector(getAverageBorrowedRewardApy());
-  const userNetReward = useAppSelector(getAverageNetRewardApy());
-
   const apyLabels = [
     [
       {
-        value: `${
-          averageSupplyApy === 0
-            ? "0.00%"
-            : averageSupplyApy === 0.01
-            ? "<0.01%"
-            : `${averageSupplyApy.toFixed(2)}%`
-        }`,
+        value: format_apy(averageSupplyApy),
         text: "Avg. Supply APY",
       },
     ],
     [
       {
-        value: `${
-          averageBorrowedApy === 0
-            ? "0.00%"
-            : averageBorrowedApy === 0.01
-            ? "<0.01%"
-            : `${averageBorrowedApy.toFixed(2)}%`
-        }`,
+        value: format_apy(averageBorrowedApy),
         text: "Avg. Borrow APY",
       },
     ],
+    [
+      {
+        type: "component",
+        content: <IncentiveAPY />,
+      },
+    ],
   ];
   const netLiquidityTooltip = hasNegativeNetLiquidity ? (
     <NotFarmingNetLiquidity assets={assets} liquidity={weightedNetLiquidity} />
@@ -59,50 +51,13 @@ export const APY = () => {
   return (
     <div className="relative">
       <div className="flex items-end">
-        <Stat title="Net APY" amount={amount} tooltip={tooltip} labels={apyLabels} />
-        <div className="absolute top-0 left-[52px] cursor-pointer text-gray-300">
-          <CustomTooltips
-            text="Net APY = Daily Total Profit / Your Net Liquidity * 365 days"
-            style={{
-              bottom: -20,
-              left: 20,
-              color: "#C0C4E9",
-            }}
-          >
-            <DoubtIcon />
-          </CustomTooltips>
-        </div>
-        {!(userSupplyReward === 0 && userBorrowedReward === 0 && userNetReward === 0) && (
-          <div
-            className="relative w-6 h-6 rounded-3xl bg-dark-100 flex items-center justify-center -ml-8 cursor-pointer"
-            onMouseEnter={() => setShowTooltip(true)}
-            onMouseLeave={() => setShowTooltip(false)}
-          >
-            <GiftIcon />
-            {showTooltip && (
-              <div className="absolute top-0 left-8 bg-dark-100 px-2.5 pt-2.5 rounded-md border border-dark-300 w-[252px] z-20">
-                {userSupplyReward !== 0 && (
-                  <div className="flex items-center justify-between text-xs text-gray-300 mb-2.5">
-                    <p>Avg. Supply Reward APY</p>
-                    <span className="text-white">{userSupplyReward}%</span>
-                  </div>
-                )}
-                {userBorrowedReward !== 0 && (
-                  <div className="flex items-center justify-between text-xs text-gray-300 mb-2.5">
-                    <p>Avg. Borrow Reward APY</p>
-                    <span className="text-white">{userBorrowedReward}%</span>
-                  </div>
-                )}
-                {userNetReward !== 0 && (
-                  <div className="flex items-center justify-between text-xs text-gray-300 mb-2.5">
-                    <p>Avg. Net Liquidity Reward APY</p>
-                    <span className="text-white">{userNetReward}%</span>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
+        <Stat
+          title="Net APY"
+          titleTooltip="Net APY = Daily Total Profit / Your Net Liquidity * 365 days"
+          amount={amount}
+          tooltip={tooltip}
+          labels={apyLabels}
+        />
       </div>
     </div>
   );
@@ -140,7 +95,46 @@ const NotFarmingNetLiquidity = ({ assets, liquidity }) => (
     </Typography>
   </Stack>
 );
-
+const IncentiveAPY = () => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const userSupplyApy = useAppSelector(getAverageSupplyRewardApy());
+  const userBorrowedApy = useAppSelector(getAverageBorrowedRewardApy());
+  const userNetApy = useAppSelector(getAverageNetRewardApy());
+  return (
+    <HtmlTooltip
+      open={showTooltip}
+      onOpen={() => setShowTooltip(true)}
+      onClose={() => setShowTooltip(false)}
+      title={
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center justify-between text-xs gap-6">
+            <span className="text-gray-300 font-normal">Avg. Supply Reward APY</span>
+            <span className="text-white font-normal">{format_apy(userSupplyApy)}</span>
+          </div>
+          <div className="flex items-center justify-between text-xs gap-6">
+            <span className="text-gray-300 font-normal">Avg. Borrow Reward APY</span>
+            <span className="text-white font-normal">{format_apy(userBorrowedApy)}</span>
+          </div>
+          <div className="flex items-center justify-between text-xs gap-6">
+            <span className="text-gray-300 font-normal">Avg. Net Liquidity Reward APY</span>
+            <span className="text-white font-normal">{format_apy(userNetApy)}</span>
+          </div>
+        </div>
+      }
+    >
+      <span
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowTooltip(!showTooltip);
+        }}
+      >
+        <div className="w-[22px] h-[22px] rounded-3xl bg-dark-100 flex items-center justify-center z-50 cursor-pointer">
+          <GiftIcon />
+        </div>
+      </span>
+    </HtmlTooltip>
+  );
+};
 const GiftIcon = () => {
   return (
     <svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">

diff --git a/components/Header/stats/components.tsx b/components/Header/stats/components.tsx
@@ -1,6 +1,6 @@
-import { isValidElement } from "react";
+import { isValidElement, useState } from "react";
 import { Box, Stack, ButtonGroup, Button, Typography, Tooltip, useTheme } from "@mui/material";
-import ReactToolTip from "../../ToolTip";
+import { TagToolTip } from "../../ToolTip";
 import { useAccountId } from "../../../hooks/hooks";
 import { useStatsToggle } from "../../../hooks/useStatsToggle";
 import TokenIcon from "../../TokenIcon";
@@ -80,7 +80,7 @@ export const Stat = ({
 }: {
   title: string | React.ReactElement;
   titleTooltip?: string;
-  amount: string;
+  amount: string | React.ReactElement;
   tooltip?: string;
   labels?: any;
   onClick?: () => void;
@@ -89,19 +89,22 @@ export const Stat = ({
     <div onClick={() => onClick && onClick()} style={{ minHeight: 81 }} className="md:w-[351px]">
       <div className="flex items-center gap-1">
         {typeof title === "string" ? <div className="h6 text-gray-300">{title}</div> : title}
-        {titleTooltip && <ReactToolTip content={titleTooltip} />}
+        {titleTooltip && <TagToolTip title={titleTooltip} />}
       </div>
-      <Tooltip title={tooltip} placement="top" arrow>
-        <div className="h2 my-1">{amount}</div>
-      </Tooltip>
+      {/* <Tooltip title={tooltip} placement="top" arrow> */}
+      <div className="h2 my-1">{amount}</div>
+      {/* </Tooltip> */}
       {labels && (
-        <Stack direction="row" gap="4px" flexWrap="wrap">
+        <Stack direction="row" gap="4px" flexWrap="wrap" alignItems="center">
           {isValidElement(labels) ? (
             <Label>{labels}</Label>
           ) : (
             labels?.map((row, i) => {
               const firstData = row[0];
               if (!firstData) return null;
+              if (firstData.type === "component") {
+                return firstData.content;
+              }
               return (
                 <div
                   className="flex gap-1 items-start flex-col md:flex-row md:flex-wrap"

diff --git a/components/Header/stats/liquidity.tsx b/components/Header/stats/liquidity.tsx
@@ -54,10 +54,10 @@ export const UserLiquidity = () => {
   const userNetLiquidity = userDeposited - userBorrowed;
   const weightedNetLiquidity = useAppSelector(getWeightedNetLiquidity);
 
-  const userNetLiquidityValue = fullDigits?.user
-    ? userNetLiquidity.toLocaleString(undefined, COMPACT_USD_FORMAT)
-    : `$${m(userNetLiquidity)}`;
-
+  // const userNetLiquidityValue = fullDigits?.user
+  //   ? userNetLiquidity.toLocaleString(undefined, COMPACT_USD_FORMAT)
+  //   : `$${m(userNetLiquidity)}`;
+  const userNetLiquidityValue = userNetLiquidity > 0 ? `$${m(userNetLiquidity)}` : `$0`;
   const userWeightedNetLiquidityValue =
     weightedNetLiquidity > 0 ? `$${m(weightedNetLiquidity)}` : "$0";
 
@@ -96,22 +96,11 @@ export const UserLiquidity = () => {
     <div className="relative">
       <Stat
         title="Net Liquidity"
+        titleTooltip="Net Liquidity = Your total Supplied - Your total Borrowed"
         amount={userNetLiquidityValue}
         labels={showLabels ? netLiquidityLabels : []}
         onClick={toggleValues}
       />
-      <div className="absolute top-0 left-[80px] cursor-pointer text-gray-300">
-        <CustomTooltips
-          text="Net Liquidity = Your total Supplied - Your total Borrowed"
-          style={{
-            bottom: -20,
-            left: 20,
-            color: "#C0C4E9",
-          }}
-        >
-          <DoubtIcon />
-        </CustomTooltips>
-      </div>
     </div>
   );
 };