Add tooltip and footer disclaimer (#210)

NethermindEth · Oct 2, 2024 · a2973ff · a2973ff
1 parent 0f3a2e0
commit a2973ff
Show file tree

Hide file tree

Showing 5 changed files with 178 additions and 46 deletions.
diff --git a/src/avs/charts/TVLTabLineChart.jsx b/src/avs/charts/TVLTabLineChart.jsx
@@ -3,7 +3,8 @@ import { AxisBottom, AxisRight } from '@visx/axis';
 import { formatETH, formatNumber, formatUSD } from '../../shared/formatters';
 import { getGrowthPercentage, reduceState } from '../../shared/helpers';
 import { scaleLinear, scaleUtc } from '@visx/scale';
-import { Tab, Tabs } from '@nextui-org/react';
+import { Tab, Tabs, Tooltip } from '@nextui-org/react';
+import { tabs, tooltip } from '../../shared/slots';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { bisector } from '@visx/vendor/d3-array';
@@ -12,7 +13,6 @@ import { GridRows } from '@visx/grid';
 import { Group } from '@visx/group';
 import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
-import { tabs } from '../../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
 import { useTailwindBreakpoint } from '../../shared/hooks/useTailwindBreakpoint';
 
@@ -146,7 +146,37 @@ export default function TVLTabLineChart({ points, height, width }) {
     <div className="rd-box p-4">
       <div className="mb-6 flex flex-wrap justify-end gap-x-2 gap-y-4 sm:justify-between">
         <div className="flex-1">
-          <span className="text-foreground-1">TVL over time</span>
+          <div className="flex content-center text-base text-foreground-1">
+            TVL over time
+            <Tooltip
+              classNames={tooltip}
+              content={
+                <>
+                  Due to the expanding pool of Liquid Staking Tokens (LST) and
+                  Liquid Restaking Tokens (LRT), the TVL value on this dashboard
+                  may not always match the actual TVL of the entire token pool.
+                  Refer to the dashboard token list for the current LST and LRT
+                  data included in the TVL calculation.
+                </>
+              }
+              isOpen={state.showTVLTooltip}
+              onOpenChange={open => dispatch({ showTVLTooltip: open })}
+              placement="bottom"
+              showArrow="true"
+            >
+              <span
+                className="material-symbols-outlined ms-2 cursor-pointer text-base"
+                onPointerDown={() =>
+                  dispatch({ showTVLTooltip: !state.showTVLTooltip })
+                }
+                style={{
+                  fontVariationSettings: `'FILL' 0`
+                }}
+              >
+                info
+              </span>
+            </Tooltip>
+          </div>
           <div className="flex gap-x-2 text-sm text-foreground-2">
             <span>{getLatestTotals}</span>
             <span

diff --git a/src/lrt/LRTDistribution.jsx b/src/lrt/LRTDistribution.jsx
@@ -2,7 +2,8 @@ import { AreaClosed, AreaStack } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
 import { formatETH, formatNumber, formatUSD } from '../shared/formatters';
 import { scaleLinear, scaleUtc } from '@visx/scale';
-import { Tab, Tabs } from '@nextui-org/react';
+import { Tab, Tabs, Tooltip } from '@nextui-org/react';
+import { tabs, tooltip } from '../shared/slots';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { bisector } from '@visx/vendor/d3-array';
@@ -13,7 +14,6 @@ import HBrush from '../shared/HBrush';
 import { localPoint } from '@visx/event';
 import { protocols } from './helpers';
 import { reduceState } from '../shared/helpers';
-import { tabs } from '../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
 
 export default function LRTDistribution({ data, height }) {
@@ -219,7 +219,38 @@ export default function LRTDistribution({ data, height }) {
     <div className="rd-box basis-full p-4 text-sm" ref={rootRef}>
       <div className="mb-6 flex flex-wrap items-end justify-end gap-2 md:items-start">
         <div className="flex-1">
-          <div className="text-base text-foreground-1">Volume trend</div>
+          <div className="flex content-center text-base text-foreground-1">
+            Volume trend
+            <Tooltip
+              classNames={tooltip}
+              content={
+                <>
+                  Due to the expanding pool of Liquid Staking Tokens (LST) and
+                  Liquid Restaking Tokens (LRT), the TVL value on this dashboard
+                  may not always match the actual TVL of the entire token pool.
+                  Refer to the dashboard token list for the current LST and LRT
+                  data included in the TVL calculation.
+                </>
+              }
+              isOpen={state.showTVLTooltip}
+              onOpenChange={open => dispatch({ showTVLTooltip: open })}
+              placement="bottom"
+              showArrow="true"
+            >
+              <span
+                className="material-symbols-outlined ms-2 cursor-pointer text-base"
+                onPointerDown={() =>
+                  dispatch({ showTVLTooltip: !state.showTVLTooltip })
+                }
+                style={{
+                  fontVariationSettings: `'FILL' 0`
+                }}
+              >
+                info
+              </span>
+            </Tooltip>
+          </div>
+
           <div className="text-foreground-2">{getLatestTotal}</div>
         </div>
         <Tabs

diff --git a/src/lst/LSTDistribution.jsx b/src/lst/LSTDistribution.jsx
@@ -2,7 +2,8 @@ import { AreaClosed, AreaStack } from '@visx/shape';
 import { AxisBottom, AxisRight } from '@visx/axis';
 import { formatETH, formatNumber, formatUSD } from '../shared/formatters';
 import { scaleLinear, scaleUtc } from '@visx/scale';
-import { Tab, Tabs } from '@nextui-org/react';
+import { Tab, Tabs, Tooltip } from '@nextui-org/react';
+import { tabs, tooltip } from '../shared/slots';
 import { useCallback, useEffect, useMemo } from 'react';
 import { allStrategyAssetMapping } from '../shared/strategies';
 import { bisector } from '@visx/vendor/d3-array';
@@ -12,7 +13,6 @@ import { Group } from '@visx/group';
 import HBrush from '../shared/HBrush';
 import { localPoint } from '@visx/event';
 import { reduceState } from '../shared/helpers';
-import { tabs } from '../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
 import { useTooltip } from '@visx/tooltip';
 import { useTooltipInPortal } from '@visx/tooltip';
@@ -200,7 +200,37 @@ export default function LSTDistribution({ rankings, height, width, points }) {
       <div className="rd-box basis-full p-4 text-sm">
         <div className="mb-6 flex flex-wrap items-end justify-end gap-2 md:items-start">
           <div className="flex-1">
-            <div className="text-base text-foreground-1">Volume trend</div>
+            <div className="flex content-center text-base text-foreground-1">
+              Volume trend
+              <Tooltip
+                classNames={tooltip}
+                content={
+                  <>
+                    Due to the expanding pool of Liquid Staking Tokens (LST) and
+                    Liquid Restaking Tokens (LRT), the TVL value on this
+                    dashboard may not always match the actual TVL of the entire
+                    token pool. Refer to the dashboard token list for the
+                    current LST and LRT data included in the TVL calculation.
+                  </>
+                }
+                isOpen={state.showTVLTooltip}
+                onOpenChange={open => dispatch({ showTVLTooltip: open })}
+                placement="bottom"
+                showArrow="true"
+              >
+                <span
+                  className="material-symbols-outlined ms-2 cursor-pointer text-base"
+                  onPointerDown={() =>
+                    dispatch({ showTVLTooltip: !state.showTVLTooltip })
+                  }
+                  style={{
+                    fontVariationSettings: `'FILL' 0`
+                  }}
+                >
+                  info
+                </span>
+              </Tooltip>
+            </div>
             <div className="text-foreground-2">{getLatestTotal}</div>
           </div>
           <Tabs

diff --git a/src/operators/charts/OperatorTVLLineChart.jsx b/src/operators/charts/OperatorTVLLineChart.jsx
@@ -7,7 +7,8 @@ import {
   reduceState
 } from '../../shared/helpers';
 import { scaleLinear, scaleUtc } from '@visx/scale';
-import { Spinner, Tab, Tabs } from '@nextui-org/react';
+import { Spinner, Tab, Tabs, Tooltip } from '@nextui-org/react';
+import { tabs, tooltip } from '../../shared/slots';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTooltip, useTooltipInPortal } from '@visx/tooltip';
 import { bisector } from '@visx/vendor/d3-array';
@@ -18,7 +19,6 @@ import { Group } from '@visx/group';
 import { LinearGradient } from '@visx/gradient';
 import { localPoint } from '@visx/event';
 import { ParentSize } from '@visx/responsive';
-import { tabs } from '../../shared/slots';
 import { useMutativeReducer } from 'use-mutative';
 import { useParams } from 'react-router-dom';
 import { useServices } from '../../@services/ServiceContext';
@@ -232,7 +232,37 @@ function LineChart({ points, height, width }) {
     <div className="rd-box p-4">
       <div className="mb-6 flex flex-wrap justify-end gap-x-2 gap-y-4 sm:justify-between">
         <div className="flex-1">
-          <span className="text-foreground-1">TVL over time</span>
+          <div className="flex content-center text-base text-foreground-1">
+            TVL over time
+            <Tooltip
+              classNames={tooltip}
+              content={
+                <>
+                  Due to the expanding pool of Liquid Staking Tokens (LST) and
+                  Liquid Restaking Tokens (LRT), the TVL value on this dashboard
+                  may not always match the actual TVL of the entire token pool.
+                  Refer to the dashboard token list for the current LST and LRT
+                  data included in the TVL calculation.
+                </>
+              }
+              isOpen={state.showTVLTooltip}
+              onOpenChange={open => dispatch({ showTVLTooltip: open })}
+              placement="bottom"
+              showArrow="true"
+            >
+              <span
+                className="material-symbols-outlined ms-2 cursor-pointer text-base"
+                onPointerDown={() =>
+                  dispatch({ showTVLTooltip: !state.showTVLTooltip })
+                }
+                style={{
+                  fontVariationSettings: `'FILL' 0`
+                }}
+              >
+                info
+              </span>
+            </Tooltip>
+          </div>
           <div className="flex gap-x-2 text-sm text-foreground-2">
             <span>{getLatestTotals}</span>
             <span

diff --git a/src/shared/Footer.jsx b/src/shared/Footer.jsx
@@ -3,42 +3,53 @@ import { Link } from '@nextui-org/react';
 
 export default function Footer() {
   return (
-    <footer className="flex flex-row content-center items-start justify-between gap-5 px-4 py-6 text-foreground-2 md:items-center md:gap-8">
-      <div>
-        <Link href="https://nethermind.io" target="_blank">
-          <img
-            alt="Powered by Nethermind"
-            className="max-h-[61px]"
-            srcSet="/images/powered-by.png 1x, /images/powered-by.png 2x"
-          />
+    <footer className="flex w-full flex-col items-center justify-center">
+      <div className="flex w-full flex-row content-center items-start justify-between gap-5 px-4 py-6 text-foreground-2 md:items-center md:gap-8">
+        <div>
+          <Link href="https://nethermind.io" target="_blank">
+            <img
+              alt="Powered by Nethermind"
+              className="max-h-[61px]"
+              srcSet="/images/powered-by.png 1x, /images/powered-by.png 2x"
+            />
+          </Link>
+          <div className="text-xs">&copy;2024 Nethermind</div>
+        </div>
+        <ul className="flex flex-col gap-2 md:flex-row md:gap-8">
+          {mainLinks.map((item, i) => (
+            <li className="flex h-6 items-center" key={`footer-main-${i}`}>
+              <Link className="text-xs text-foreground-2" href={item.href}>
+                {item.title}
+                <span className="material-symbols-outlined hidden lg:inline">
+                  arrow_right_alt
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <ul className="flex flex-col gap-2 md:flex-row md:gap-8">
+          {socialLinks.map((item, i) => (
+            <li className="flex h-6 items-center" key={`footer-social-${i}`}>
+              <Link
+                className={`${item.className} text-xs text-foreground-2`}
+                href={item.href}
+              >
+                <span className="icon"></span>
+                {item.title}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+      <div className="mb-6 text-xs text-foreground-2">
+        Asset prices provided by{' '}
+        <Link
+          className="text-xs text-foreground-2 underline"
+          href="https://www.coingecko.com/"
+        >
+          CoinGecko
         </Link>
-        <div className="text-xs">&copy;2024 Nethermind</div>
       </div>
-      <ul className="flex flex-col gap-2 md:flex-row md:gap-8">
-        {mainLinks.map((item, i) => (
-          <li className="flex h-6 items-center" key={`footer-main-${i}`}>
-            <Link className="text-xs text-foreground-2" href={item.href}>
-              {item.title}
-              <span className="material-symbols-outlined hidden lg:inline">
-                arrow_right_alt
-              </span>
-            </Link>
-          </li>
-        ))}
-      </ul>
-      <ul className="flex flex-col gap-2 md:flex-row md:gap-8">
-        {socialLinks.map((item, i) => (
-          <li className="flex h-6 items-center" key={`footer-social-${i}`}>
-            <Link
-              className={`${item.className} text-xs text-foreground-2`}
-              href={item.href}
-            >
-              <span className="icon"></span>
-              {item.title}
-            </Link>
-          </li>
-        ))}
-      </ul>
     </footer>
   );
 }