chore: various style change

jumperexchange · Jan 19, 2025 · f11060d · f11060d
1 parent 939ce85
commit f11060d
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 18 deletions.
diff --git a/src/components/Berachain/const/title.ts b/src/components/Berachain/const/title.ts
@@ -19,3 +19,6 @@ export const INCENTIVES_TO_EARN_TOOLTIP =
   'Rewards you should earn after the lockup on Berachain mainnet.';
 export const LOCKUP_TOOLTIP =
   'Deposits will be locked for the displayed amount of times to earn rewards. You are able to withdraw prior to the end of the lockup period but will forfeit any rewards on Berachain.';
+
+export const BOOSTED_APY =
+  'Additional APY you get from participating to this campaign inside Jumper.';
diff --git a/src/components/QuestPage/BackButton/BackButton.tsx b/src/components/QuestPage/BackButton/BackButton.tsx
@@ -36,7 +36,7 @@ export const BackButton = ({ path, title }: BackButtonProps) => {
           marginLeft={'8px'}
         >
           {String(
-            title || t('navbar.navbarMenu.profile') || 'Jumper Profile',
+            title || 'Loyalty Pass' || t('navbar.navbarMenu.profile'),
           ).toUpperCase()}
         </Typography>
       </Button>

diff --git a/src/components/Zap/BackButton/BackButton.tsx b/src/components/Zap/BackButton/BackButton.tsx
@@ -15,7 +15,7 @@ export const BackButton = ({ path, title }: BackButtonProps) => {
   return (
     <Link
       href={path ?? '/profile'}
-      style={{ textDecoration: 'none', width: 168, display: 'block' }}
+      style={{ textDecoration: 'none', width: 184, display: 'block' }}
     >
       <BackButtonStyles size={'large'}>
         <ArrowBackIcon
@@ -28,7 +28,7 @@ export const BackButton = ({ path, title }: BackButtonProps) => {
           marginLeft={'8px'}
         >
           {String(
-            title || t('navbar.navbarMenu.profile') || 'Profile',
+            title || t('navbar.navbarMenu.profile') || 'Loyalty Pass',
           ).toUpperCase()}
         </Typography>
       </BackButtonStyles>

diff --git a/src/components/Zap/ZapInfo/SocialInfosBox.tsx b/src/components/Zap/ZapInfo/SocialInfosBox.tsx
@@ -20,32 +20,55 @@ export const SocialInfosBox = ({ detailInformation }: ZapPageProps) => {
       {detailInformation?.socials && (
         <>
           {detailInformation?.socials?.twitter && (
-            <ZapActionProtocolShareLink
+            <a
               href={detailInformation?.socials?.twitter}
-              style={{ color: 'inherit', textDecoration: 'none' }}
+              target="_blank"
+              style={{
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              rel="noreferrer"
             >
               <ZapActionProtocolShare>
                 <XIcon sx={{ width: '16px', height: '16px' }} />
               </ZapActionProtocolShare>
-            </ZapActionProtocolShareLink>
+            </a>
           )}
           {detailInformation?.socials?.telegram && (
-            <ZapActionProtocolShareLink
+            <a
               href={detailInformation?.socials?.telegram}
+              target="_blank"
+              style={{
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              rel="noreferrer"
             >
               <ZapActionProtocolShare>
                 <TelegramIcon sx={{ width: '16px', height: '16px' }} />
               </ZapActionProtocolShare>
-            </ZapActionProtocolShareLink>
+            </a>
           )}
           {detailInformation?.socials?.website && (
-            <ZapActionProtocolShareLink
+            <a
               href={detailInformation?.socials?.website}
+              target="_blank"
+              style={{
+                textDecoration: 'none',
+                color: 'inherit',
+                display: 'flex',
+                alignItems: 'center',
+              }}
+              rel="noreferrer"
             >
               <ZapActionProtocolShare>
                 <LanguageIcon sx={{ width: '16px', height: '16px' }} />
               </ZapActionProtocolShare>
-            </ZapActionProtocolShareLink>
+            </a>
           )}
         </>
       )}

diff --git a/src/components/Zap/ZapInfo/ZapInfo.tsx b/src/components/Zap/ZapInfo/ZapInfo.tsx
@@ -39,7 +39,7 @@ export const ZapInfo = ({ market, detailInformation }: ZapPageProps) => {
 
   return (
     <ZapProtocolActionInfoBox>
-      <BackButton />
+      <BackButton title={'Loyalty Pass'} />
       {/* Main Information about the protocol */}
       <ZapProtocolIntro market={market} detailInformation={detailInformation} />
 

diff --git a/src/components/ZapWidget/Deposit/DepositCard.tsx b/src/components/ZapWidget/Deposit/DepositCard.tsx
@@ -16,14 +16,14 @@ import { useEffect, useMemo } from 'react';
 import {
   DEPOSIT_TOOLTIP,
   DEPOSITED_TOOLTIP,
+  TVL_TOOLTIP,
+  APY_TOOLTIP,
 } from 'src/components/Berachain/const/title';
 import { useTranslation } from 'react-i18next';
 import { useMissionsMaxAPY } from 'src/hooks/useMissionsMaxAPY';
 import DigitOnlyCard from './Stat/DigitOnlyCard';
 import DigitTextCard from './Stat/DigitTextCard';
 import { ColoredStatBox } from './DepositCard.style';
-import { useChains } from '@/hooks/useChains';
-import TokenImage from '@/components/Portfolio/TokenImage';
 import BadgeWithChain from '@/components/ZapWidget/BadgeWithChain';
 
 export interface ItemPriceProps {
@@ -35,7 +35,13 @@ export interface ItemPriceProps {
     name: string;
   };
   chainId: number;
-  analytics: any;
+  analytics: {
+    base_apy: number;
+    total_apy: number;
+    tvl_usd: number;
+    boosted_apy?: number;
+    position?: number;
+  };
   claimingIds?: string[] | undefined;
 }
 
@@ -68,6 +74,18 @@ export const DepositCard: React.FC<ItemPriceProps> = ({
 
   const hasDeposited = !!analytics?.position && analytics?.position > 0;
 
+  const ANALYTICS_TOOLTIP = useMemo(() => {
+    return analytics?.boosted_apy
+      ? `${analytics.base_apy}% is the expected yearly return rate of the underlying tokens invested. There is an additional ${analytics.boosted_apy}% in extra rewards paid in other tokens, check the protocol website for more information.`
+      : APY_TOOLTIP;
+  }, [analytics]);
+
+  const BOOSTED_APY_TOOLTIP = useMemo(() => {
+    return boostedAPY
+      ? `Additional APY you get from participating to this campaign inside Jumper. This APY will be paid in ${'LISK'}.`
+      : '';
+  }, [boostedAPY]);
+
   return (
     <Stack spacing={2} padding={2}>
       <Box display="flex" alignItems="center" gap={1}>
@@ -102,7 +120,7 @@ export const DepositCard: React.FC<ItemPriceProps> = ({
         <ColoredStatBox>
           <DigitOnlyCard
             title={'TVL'}
-            tooltipText={'hello world'}
+            tooltipText={TVL_TOOLTIP}
             digit={
               analytics?.tvl_usd
                 ? `$${Number(analytics.tvl_usd).toLocaleString('en-US', {
@@ -118,7 +136,7 @@ export const DepositCard: React.FC<ItemPriceProps> = ({
         <ColoredStatBox>
           <DigitOnlyCard
             title={'APY'}
-            tooltipText={'hello world'}
+            tooltipText={ANALYTICS_TOOLTIP}
             digit={
               analytics?.total_apy
                 ? `${analytics?.total_apy.toFixed(1)}%`
@@ -129,8 +147,8 @@ export const DepositCard: React.FC<ItemPriceProps> = ({
         {!!boostedAPY && boostedAPY > 0 && (
           <ColoredStatBox>
             <DigitOnlyCard
-              title={'Boost APY'}
-              tooltipText={'hello world'}
+              title={'APY Boost'}
+              tooltipText={BOOSTED_APY_TOOLTIP}
               digit={analytics?.total_apy ? `${boostedAPY.toFixed(1)}%` : 'N/A'}
             />
           </ColoredStatBox>