Tooltips

[#127]

package.json

@@ -33,6 +33,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-query": "^3.39.3",
+    "react-tooltip": "^5.28.0",
     "viem": "^1.15.4",
     "wagmi": "^1.4.12"
   },

src/app/core/components/Icons/TooltipIcon.tsx

@@ -0,0 +1,24 @@
+export default function TooltipIcon() {
+  return (
+    <div className="inline-block ">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="17"
+        height="16"
+        viewBox="0 0 17 16"
+        fill="none"
+      >
+        <circle
+          cx="8.5"
+          cy="8"
+          r="8"
+          className="fill-breadgray-grey dark:fill-breadgray-rye"
+        />
+        <path
+          d="M7.65597 9.57004C7.64087 9.25304 7.65597 8.98133 7.70125 8.75491C7.74654 8.52094 7.83333 8.31338 7.96164 8.13224C8.08995 7.94356 8.27109 7.76242 8.50506 7.58882L9.02583 7.19258C9.28245 6.99635 9.46359 6.81521 9.56925 6.64916C9.68246 6.48312 9.73907 6.30198 9.73907 6.10575C9.73907 5.90951 9.68246 5.73592 9.56925 5.58497C9.45604 5.43402 9.30132 5.31326 9.10508 5.22269C8.90885 5.13212 8.6862 5.08684 8.43713 5.08684C8.10504 5.08684 7.7956 5.17363 7.50879 5.34722C7.22953 5.52082 6.99934 5.76611 6.8182 6.0831L5.83325 5.59629C6.08987 5.09816 6.45214 4.70946 6.92009 4.43021C7.39558 4.1434 7.92013 4 8.49374 4C8.96168 4 9.38056 4.09057 9.75039 4.27171C10.1202 4.4453 10.4108 4.68682 10.6221 4.99627C10.841 5.30571 10.9504 5.65667 10.9504 6.04914C10.9504 6.3133 10.9089 6.55482 10.8259 6.7737C10.7429 6.98503 10.607 7.19258 10.4183 7.39636C10.2372 7.5926 9.97682 7.81147 9.63718 8.05299L9.32018 8.29074C9.08621 8.46433 8.92017 8.64924 8.82205 8.84548C8.73148 9.03417 8.69374 9.27568 8.70884 9.57004H7.65597ZM8.19939 12.1286C7.98051 12.1286 7.79182 12.0532 7.63332 11.9022C7.48238 11.7437 7.4069 11.555 7.4069 11.3361C7.4069 11.1097 7.48238 10.921 7.63332 10.7701C7.79182 10.6191 7.98051 10.5437 8.19939 10.5437C8.41071 10.5437 8.59185 10.6191 8.7428 10.7701C8.89375 10.921 8.96923 11.1097 8.96923 11.3361C8.96923 11.555 8.89375 11.7437 8.7428 11.9022C8.59185 12.0532 8.41071 12.1286 8.19939 12.1286Z"
+          fill="#F8F8F8"
+        />
+      </svg>
+    </div>
+  );
+}

src/app/core/components/Icons/index.tsx

@@ -1,3 +1,4 @@
-export * from './IconContainer';
-export * from './NetworkIcon';
-export * from './WalletIcon';
+export * from "./IconContainer";
+export * from "./NetworkIcon";
+export * from "./TooltipIcon";
+export * from "./WalletIcon";

src/app/core/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,34 @@
+import { forwardRef, Ref, useId, type ReactNode } from "react";
+import { Tooltip as ReactTooltip } from "react-tooltip";
+import TooltipIcon from "@/app/core/components/Icons/TooltipIcon";
+
+interface IProps {
+  children: ReactNode;
+}
+
+const Tooltip = forwardRef(
+  ({ children }: IProps, ref: Ref<HTMLButtonElement>) => {
+    const id = useId();
+
+    return (
+      <div>
+        <ReactTooltip anchorSelect=".my-tooltip" place="top"></ReactTooltip>
+        <a data-tooltip-id={id}>
+          {" "}
+          <TooltipIcon />
+        </a>
+        <ReactTooltip
+          id={id}
+          className="!bg-breadgray-white/80 dark:!bg-breadgray-burnt/80 !rounded-[15px] !text-breadgray-grey100 dark:!text-breadgray-ultra-white !p-5 !backdrop-blur-sm"
+          opacity={1}
+        >
+          <div className="max-w-[210px] text-base font-normal">{children}</div>
+        </ReactTooltip>
+      </div>
+    );
+  }
+);
+
+Tooltip.displayName = "Tooltip";
+
+export default Tooltip;

src/app/core/components/Tooltip/index.tsx

@@ -0,0 +1,3 @@
+import Tooltip from "./Tooltip";
+
+export default Tooltip;

src/app/governance/components/DistributionOverview.tsx

@@ -3,8 +3,10 @@ import { formatBalance } from "@/app/core/util/formatter";
 import { CycleDatesState } from "../useCycleDates";
 import { useClaimableYield } from "../useClaimableYield";
 import { LinkIcon } from "@/app/core/components/Icons/LinkIcon";
+import Tooltip from "@/app/core/components/Tooltip";
 import { CardBox } from "@/app/core/components/CardBox";
 import { useContractRead, useNetwork } from "wagmi";
+
 import { ERC20_ABI, SDAI_ADAPTOR_ABI } from "@/abi";
 import { useEffect, useMemo, useState } from "react";
 import {
@@ -140,8 +142,12 @@ export function DistributionOverview({
                 <div className="text-3xl opacity-0">.</div>
               )}
 
-              <p className=" text-center pt-1 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
-                Current accumulated yield
+              <p className="flex justify-center pt-1 font-medium text-xs text-breadgray-rye dark:text-breadgray-grey">
+                <span className="me-1">Current accumulated yield</span>
+                <Tooltip>
+                  Based on the current DAI savings rate of {dsrAPY + "% "}
+                  applied on the total baked $BREAD on Gnosis chain.
+                </Tooltip>
               </p>
             </div>
             <div className="w-full flex flex-col gap-3 py-3 border-1 border-t border-b border-t-breadgray-light-grey border-b-breadgray-light-grey dark:border-t-breadgray-rye dark:border-b-breadgray-rye">