chore: variabilize tooltips

jumperexchange · Dec 31, 2024 · f14c467 · f14c467
1 parent 5154a81
commit f14c467
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 17 deletions.
diff --git a/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx b/src/components/Berachain/components/BerachainMarketCard/BerachainMarketCard.tsx
@@ -22,6 +22,7 @@ import DigitCard from './StatCard/DigitCard';
 import DigitTokenSymbolCard from './StatCard/DigitTokenSymbolCard';
 import TokenIncentivesCard from './StatCard/TokenIncentivesCard';
 import DigitTooltipCard from './StatCard/DigitTooltipCard';
+import { APY_TOOLTIP, TVL_TOOLTIP } from '../../const/title';
 
 interface BerachainMarketCardProps {
   roycoData: EnrichedMarketDataType;
@@ -186,7 +187,7 @@ export const BerachainMarketCard = ({
             />
             <DigitCard
               title={'TVL'}
-              tooltipText="Total value of crypto assets deposited in this market."
+              tooltipText={TVL_TOOLTIP}
               digit={
                 roycoData?.locked_quantity_usd
                   ? t('format.currency', {
@@ -214,7 +215,7 @@ export const BerachainMarketCard = ({
                     })
                   : 'N/A'
               }
-              tooltipText="Expected yearly return rate of the tokens invested"
+              tooltipText={APY_TOOLTIP}
             />
           )}
         </BerchainMarketCardInfos>

diff --git a/src/components/Berachain/components/BerachainWelcome/BerachainWelcome.tsx b/src/components/Berachain/components/BerachainWelcome/BerachainWelcome.tsx
@@ -2,7 +2,6 @@ import type { Breakpoint, Theme } from '@mui/material';
 import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { motion } from 'motion/react';
 import Image from 'next/image';
-import { BerachainProgressCard } from '../BerachainProgressCard/BerachainProgressCard';
 import {
   BerachainButtonWrapperLink,
   BeraChainWelcomeBox,
@@ -15,6 +14,7 @@ import {
 } from './BerachainWelcome.style';
 import { useEnrichedRoycoStats } from 'royco/hooks';
 import { useTranslation } from 'react-i18next';
+import { BerachainProgressCard } from '../BerachainMarketCard/StatCard/BerachainProgressCard';
 
 export const BerachainWelcome = () => {
   const theme = useTheme();

diff --git a/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx b/src/components/Berachain/components/BerachainWidget/InfoBlock.tsx
@@ -25,6 +25,13 @@ import { parseRawAmountToTokenAmount } from 'royco/utils';
 import { BerachainProgressCard } from '../BerachainMarketCard/StatCard/BerachainProgressCard';
 import { BerachainWidgetSelection } from './DepositWidget/WidgetDeposit.style';
 import DigitCard from '../BerachainMarketCard/StatCard/DigitCard';
+import {
+  APY_TOOLTIP,
+  AVAILABLE_TOOLTIP,
+  DEPOSIT_TOOLTIP,
+  INCENTIVES_TOOLTIP,
+  TVL_TOOLTIP,
+} from '../../const/title';
 
 function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
   const { t } = useTranslation();
@@ -90,7 +97,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                   {deposited ? 'Deposited' : 'Deposit'}
                 </Typography>
                 <Tooltip
-                  title={'Deposit amount'}
+                  title={DEPOSIT_TOOLTIP}
                   placement={'top'}
                   enterTouchDelay={0}
                   arrow
@@ -171,7 +178,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                     Lockup
                   </Typography>
                   <Tooltip
-                    title={'lockup'}
+                    title={LOCKUP_TOOLTIP}
                     placement={'top'}
                     enterTouchDelay={0}
                     arrow
@@ -229,7 +236,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
             },
           }}
         >
-          {/* <Box>
+          <Box>
             <BeraChainProgressCardContent>
               <BeraChainProgressCardHeader display={'flex'}>
                 <Typography
@@ -244,7 +251,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                   Available to Deposit
                 </Typography>
                 <Tooltip
-                  title={'tvl'}
+                  title={AVAILABLE_TOOLTIP}
                   placement={'top'}
                   enterTouchDelay={0}
                   arrow
@@ -277,10 +284,10 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                 }).format(maxInputValue)}{' '}
               </Typography>
             </BeraChainProgressCardContent>
-          </Box> */}
-          <DigitCard
+          </Box>
+          {/* <DigitCard
             title={'Available to Deposit'}
-            tooltipText="Available to Deposit"
+            tooltipText={AVAILABLE_TOOLTIP}
             digit={Intl.NumberFormat('en-US', {
               notation: 'standard',
               useGrouping: true,
@@ -290,7 +297,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
           />
           <DigitCard
             title={'TVL'}
-            tooltipText="The total value of crypto assets deposited in this pool"
+            tooltipText={TVL_TOOLTIP}
             digit={
               market?.locked_quantity_usd
                 ? t('format.currency', {
@@ -299,8 +306,8 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                   })
                 : 'N/A'
             }
-          />
-          {/* <Box>
+          /> */}
+          <Box>
             <BeraChainProgressCardContent>
               <BeraChainProgressCardHeader display={'flex'}>
                 <Typography
@@ -315,7 +322,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                   TVL
                 </Typography>
                 <Tooltip
-                  title={'tvl'}
+                  title={TVL_TOOLTIP}
                   placement={'top'}
                   enterTouchDelay={0}
                   arrow
@@ -348,7 +355,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                   : 'N/A'}
               </Typography>
             </BeraChainProgressCardContent>
-          </Box> */}
+          </Box>
         </BeraChainProgressCardComponent>
       </BerchainMarketCardInfos>
 
@@ -398,7 +405,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
                       {'Total Incentives'}
                     </Typography>
                     <Tooltip
-                      title={''}
+                      title={INCENTIVES_TOOLTIP}
                       placement={'top'}
                       enterTouchDelay={0}
                       arrow
@@ -464,7 +471,7 @@ function InfoBlock({ market }: { market: EnrichedMarketDataType }) {
           </Tooltip>
         ) : (
           <Tooltip
-            title={'Expected return on the tokens invested'}
+            title={APY_TOOLTIP}
             open={openTokensTooltip ? false : undefined}
             disableFocusListener={openTokensTooltip ? false : undefined}
             disableInteractive={!openTokensTooltip ? false : undefined}

diff --git a/src/components/Berachain/const/title.ts b/src/components/Berachain/const/title.ts
@@ -0,0 +1,13 @@
+//Title
+export const TVL_TITLE = 'TVL';
+export const AVAILABLE_TITLE = 'TVL';
+export const APY_TITLE = 'APY';
+
+//Tooltip
+export const TVL_TOOLTIP =
+  'Total value of crypto assets deposited in this market.';
+export const APY_TOOLTIP = 'Expected yearly return rate of the tokens invested';
+export const AVAILABLE_TOOLTIP = 'Available';
+export const DEPOSIT_TOOLTIP = 'Deposit';
+export const INCENTIVES_TOOLTIP = 'incentives';
+export const LOCKUP_TOOLTIP = 'lockup';