tooltip improvement suggestion from matt

foilxyz · Feb 5, 2025 · 46c663e · 46c663e
1 parent 31d2ff7
commit 46c663e
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/app/src/components/stats.tsx b/packages/app/src/components/stats.tsx
@@ -10,6 +10,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '~/components/ui/tooltip';
+import type { Market } from '~/lib/context/FoilProvider';
 import { useFoil } from '~/lib/context/FoilProvider';
 import { PeriodContext } from '~/lib/context/PeriodProvider';
 import { useLatestIndexPrice } from '~/lib/hooks/useResources';
@@ -33,7 +34,7 @@ const StatBox = ({ title, tooltipContent, value, docsLink }: StatBoxProps) => (
           <TooltipTrigger className="cursor-default">
             <InfoIcon className="md:ml-1 -translate-y-0.5 inline-block h-3 md:h-4 opacity-60 hover:opacity-80" />
           </TooltipTrigger>
-          <TooltipContent className="max-w-[225px] text-center p-3">
+          <TooltipContent className="max-w-[240px] text-center p-3">
             {tooltipContent}
             {docsLink && (
               <a
@@ -98,7 +99,7 @@ const IndexPriceDisplay = ({
 const Stats = () => {
   const { endTime, startTime, pool, liquidity, useMarketUnits, market } =
     useContext(PeriodContext);
-  const { stEthPerToken } = useFoil();
+  const { stEthPerToken, markets } = useFoil();
   const { data: latestIndexPrice, isLoading: isLoadingIndexPrice } =
     useLatestIndexPrice(
       market
@@ -114,6 +115,13 @@ const Stats = () => {
           }
     );
 
+  const resourceName =
+    markets
+      .find(
+        (m: Market) => m.address.toLowerCase() === market?.address.toLowerCase()
+      )
+      ?.resource?.name?.toLowerCase() || 'resource';
+
   const currentTime = Math.floor(Date.now() / 1000);
   const isBeforeStart = startTime > currentTime;
 
@@ -135,7 +143,7 @@ const Stats = () => {
         <div className="grid w-full grid-cols-2 gap-4 lg:grid-cols-4">
           <StatBox
             title="Index Price"
-            tooltipContent="The estimated settlement price based on the average resource price for this period"
+            tooltipContent={`The estimated settlement price based on the average ${resourceName} price for this period`}
             docsLink
             value={
               <IndexPriceDisplay