diff --git a/package.json b/package.json index c0eb18a..77c76be 100644 --- a/package.json +++ b/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" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3419e8e..fafa67b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ importers: react-query: specifier: ^3.39.3 version: 3.39.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + react-tooltip: + specifier: ^5.28.0 + version: 5.28.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) viem: specifier: ^1.15.4 version: 1.21.4(bufferutil@4.0.8)(typescript@5.4.2)(utf-8-validate@5.0.10) @@ -1090,6 +1093,15 @@ packages: '@fal-works/esbuild-plugin-global-externals@2.1.2': resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==} + '@floating-ui/core@1.6.8': + resolution: {integrity: sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==} + + '@floating-ui/dom@1.6.12': + resolution: {integrity: sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==} + + '@floating-ui/utils@0.2.8': + resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@humanwhocodes/config-array@0.11.14': resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} @@ -2328,6 +2340,7 @@ packages: acorn-import-assertions@1.9.0: resolution: {integrity: sha512-cmMwop9x+8KFhxvKrKfPYmN6/pKTYYHBqLa0DfvVZcKMJWNyWLnaqND7dx/qn66R7ewM1UX5XMaDVP5wlVTaVA==} + deprecated: package has been renamed to acorn-import-attributes peerDependencies: acorn: ^8 @@ -2712,6 +2725,9 @@ packages: citty@0.1.6: resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==} + classnames@2.5.1: + resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==} + clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} engines: {node: '>=6'} @@ -4948,6 +4964,12 @@ packages: '@types/react': optional: true + react-tooltip@5.28.0: + resolution: {integrity: sha512-R5cO3JPPXk6FRbBHMO0rI9nkUG/JKfalBSQfZedZYzmqaZQgq7GLzF8vcCWx6IhUCKg0yPqJhXIzmIO5ff15xg==} + peerDependencies: + react: '>=16.14.0' + react-dom: '>=16.14.0' + react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} engines: {node: '>=0.10.0'} @@ -6968,6 +6990,17 @@ snapshots: '@fal-works/esbuild-plugin-global-externals@2.1.2': {} + '@floating-ui/core@1.6.8': + dependencies: + '@floating-ui/utils': 0.2.8 + + '@floating-ui/dom@1.6.12': + dependencies: + '@floating-ui/core': 1.6.8 + '@floating-ui/utils': 0.2.8 + + '@floating-ui/utils@0.2.8': {} + '@humanwhocodes/config-array@0.11.14': dependencies: '@humanwhocodes/object-schema': 2.0.2 @@ -9405,6 +9438,8 @@ snapshots: dependencies: consola: 3.2.3 + classnames@2.5.1: {} + clean-stack@2.2.0: {} cli-boxes@3.0.0: {} @@ -11857,6 +11892,13 @@ snapshots: optionalDependencies: '@types/react': 18.2.64 + react-tooltip@5.28.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + '@floating-ui/dom': 1.6.12 + classnames: 2.5.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react@18.2.0: dependencies: loose-envify: 1.4.0 diff --git a/src/app/core/components/Icons/TooltipIcon.tsx b/src/app/core/components/Icons/TooltipIcon.tsx new file mode 100644 index 0000000..95063a5 --- /dev/null +++ b/src/app/core/components/Icons/TooltipIcon.tsx @@ -0,0 +1,24 @@ +export default function TooltipIcon() { + return ( +
+ + + + +
+ ); +} diff --git a/src/app/core/components/Icons/index.tsx b/src/app/core/components/Icons/index.tsx index 2421ba6..4e971fe 100644 --- a/src/app/core/components/Icons/index.tsx +++ b/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"; diff --git a/src/app/core/components/Tooltip/Tooltip.tsx b/src/app/core/components/Tooltip/Tooltip.tsx new file mode 100644 index 0000000..9b075d6 --- /dev/null +++ b/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) => { + const id = useId(); + + return ( +
+ + + {" "} + + + +
{children}
+ +
+ ); + } +); + +Tooltip.displayName = "Tooltip"; + +export default Tooltip; diff --git a/src/app/core/components/Tooltip/index.tsx b/src/app/core/components/Tooltip/index.tsx new file mode 100644 index 0000000..ce20f58 --- /dev/null +++ b/src/app/core/components/Tooltip/index.tsx @@ -0,0 +1,3 @@ +import Tooltip from "./Tooltip"; + +export default Tooltip; diff --git a/src/app/governance/components/DistributionOverview.tsx b/src/app/governance/components/DistributionOverview.tsx index 812bca9..cf16af5 100644 --- a/src/app/governance/components/DistributionOverview.tsx +++ b/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({
.
)} -

- Current accumulated yield +

+ Current accumulated yield + + Based on the current DAI savings rate of {dsrAPY + "% "} + applied on the total baked $BREAD on Gnosis chain. +