APT-1620-APR-basic-tooltip

Zilliqa · Dec 27, 2024 · 6dd294e · 6dd294e
1 parent 23a6a03
commit 6dd294e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/components/stakingCalculator.tsx b/src/components/stakingCalculator.tsx
@@ -1,6 +1,6 @@
 import { StakingPoolsStorage } from "@/contexts/stakingPoolsStorage";
 import { useEffect, useState } from "react";
-import { Button, Input } from "antd";
+import { Button, Input, Tooltip } from "antd";
 import { WalletConnector } from "@/contexts/walletConnector";
 import { formatPercentage, convertZilValueInToken, getTxExplorerUrl, formatAddress } from "@/misc/formatting";
 import { formatUnits, parseEther } from "viem";
@@ -168,7 +168,9 @@ const StakingCalculator: React.FC = () => {
                   )}
               </div>
               <div className=" regular-base text-aqua1 flex flex-row xl:gap-5">
-               <div>APR:</div>
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
                     ~{formatPercentage(

diff --git a/src/components/stakingPoolCard.tsx b/src/components/stakingPoolCard.tsx
@@ -1,6 +1,7 @@
 import { formatPercentage, formatUnitsToHumanReadable } from '@/misc/formatting';
 import { StakingPool } from '@/misc/stakingPoolsConfig';
 import { UserStakingPoolData } from '@/misc/walletsConfig';
+import { Tooltip } from 'antd';
 import Image from 'next/image';
 
 interface StakingPoolCardProps {
@@ -108,8 +109,13 @@ const StakingPoolCard: React.FC<StakingPoolCardProps> = ({
                   }
                 </div>
               </div>
-              <div className="flex base text-gray2 max-md:order-1 ">
-                APR{' '}
+
+
+              <div className="flex base text-gray2 max-md:order-1 ">  
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
+
                 {
                   stakingPoolData.data ? (
                     <>

diff --git a/src/components/unstakingCalculator.tsx b/src/components/unstakingCalculator.tsx
@@ -1,6 +1,6 @@
 import { StakingPoolsStorage } from '@/contexts/stakingPoolsStorage';
 import { useEffect, useState } from 'react';
-import { Button, Input } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
 import {
   formatPercentage,
   convertTokenToZil,
@@ -186,7 +186,9 @@ const UnstakingCalculator: React.FC = () => {
                 </div>
               </div>
               <div className=" regular-base flex flex-row xl:gap-5">
-                <div>APR:</div>
+              <Tooltip placement='top' arrow={true} color='#686A6C' className=' mr-1' title="Annual Percentage Rate">
+                <span>APR </span>
+              </Tooltip>
                 {stakingPoolForView!.stakingPool.data ? (
                   <>
                     ~