chore: open rewards on profile (#1640)

src/app/[lng]/zap/[slug]/page.tsx

@@ -4,9 +4,8 @@ import { getQuestBySlug } from 'src/app/lib/getQuestBySlug';
 import { siteName } from 'src/app/lib/metadata';
 import ZapPage from 'src/app/ui/zap/ZapPage';
 import { getSiteUrl } from 'src/const/urls';
-import type { Quest, QuestAttributes } from 'src/types/loyaltyPass';
+import type { QuestAttributes } from 'src/types/loyaltyPass';
 import { sliceStrToXChar } from 'src/utils/splitStringToXChar';
-import { ExtendedQuest } from '@/types/questDetails';
 
 export async function generateMetadata({
   params,

src/components/AccordionFAQ/AccordionFAQ.style.ts

@@ -86,7 +86,7 @@ export const Accordion = styled(MuiAccordion)(({ theme }) => ({
   },
 
   '&:hover': {
-    background: alpha(theme.palette.text.primary, 0.16),
+    background: alpha(theme.palette.text.primary, 0.02),
   },
 }));
 

src/components/Berachain/components/BerachainWidget/DepositWidget/WidgetDeposit.style.ts

@@ -1,15 +1,4 @@
-import {
-  Accordion,
-  Box,
-  Card,
-  darken,
-  Divider,
-  Skeleton,
-  styled,
-  Typography,
-} from '@mui/material';
-import { alpha, Button } from '@mui/material';
-import { urbanist } from 'src/fonts/fonts';
+import { Accordion, alpha, Box, Button, styled } from '@mui/material';
 
 export const MaxButton = styled(Button, {
   shouldForwardProp: (prop) => prop !== 'mainColor',
@@ -26,22 +15,6 @@ export const MaxButton = styled(Button, {
   },
 }));
 
-export const BerachainActionBerachainWidgetWrapper = styled(Box)(
-  ({ theme }) => ({
-    minWidth: 416,
-    height: 'fit-content',
-    borderRadius: '24px',
-    boxShadow: '0px 4px 24px 0px rgba(126, 88, 88, 0.08)',
-  }),
-);
-
-export const BerachainWidgetHeader = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  color: theme.palette.text.primary,
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}));
-
 export const BerachainWidgetSelection = styled(Box)(({ theme }) => ({
   display: 'flex',
   color: theme.palette.text.primary,
@@ -69,18 +42,6 @@ export const BerachainDepositInputBackground = styled(Box)(({ theme }) => ({
   gap: '8px',
 }));
 
-export const BerachainDetailsDropdown = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  color: theme.palette.text.primary,
-  justifyContent: 'space-between',
-  backgroundColor: '#1E1D1C',
-  borderRadius: '16px',
-  padding: theme.spacing(2),
-  marginTop: theme.spacing(2),
-  border: `1px solid ${alpha(theme.palette.white.main, 0.08)}`,
-  cursor: 'pointer',
-}));
-
 export const BerachainDetailsAccordion = styled(Accordion)<{
   isExpanded?: boolean;
 }>(({ theme, isExpanded }) => ({
@@ -94,103 +55,6 @@ export const BerachainDetailsAccordion = styled(Accordion)<{
   marginTop: 0,
 }));
 
-export const BerachainWidgetSelectionBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexGrow: 1,
-  justifyContent: 'flex-start',
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: theme.spacing(2),
-}));
-
-export const BerachainWidgetSelectionCard = styled(Card)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  background: 'inherit',
-  backgroundColor: 'transparent',
-  borderRadius: '16px',
-  padding: theme.spacing(2, 0),
-  boxShadow: 'unset',
-}));
-
-export const BerachainWidgetDivider = styled(Divider)(({ theme }) => ({
-  borderColor: alpha(theme.palette.white.main, 0.08),
-}));
-
-export const BerachainBadgeAvatar = styled(Box)(({ theme }) => ({
-  width: 40,
-  height: 40,
-  overflow: 'visible',
-  position: 'relative',
-}));
-
-export const BerachainWidgetSelectionTokenLogoSkeleton = styled(Skeleton)(
-  ({ theme }) => ({
-    width: 40,
-    height: 40,
-    border: `2px solid ${theme.palette.white.main}`,
-  }),
-);
-
-export const BerachainWidgetSelectionChainLogoSkeleton = styled(Skeleton)(
-  ({ theme }) => ({
-    width: 15,
-    height: 15,
-    border: `2px solid ${theme.palette.white.main}`,
-    position: 'absolute',
-    right: -6,
-    bottom: -2,
-    zIndex: 10,
-  }),
-);
-
-export const BerachainWidgetSelectionRewards = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'stretch',
-  gap: theme.spacing(2),
-}));
-
-export const BerachainActionPledgeButton = styled(Button)(({ theme }) => ({
-  backgroundColor: '#F47226',
-  color: theme.palette.white.main,
-  marginTop: theme.spacing(2),
-  width: '100%',
-  '&:hover': {
-    backgroundColor: darken('#F47226', 0.08),
-  },
-}));
-
-export const BerachainWidgetPledgedBox = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  color: theme.palette.text.primary,
-  height: 44,
-  width: '100%',
-  borderRadius: '12px',
-  justifyContent: 'space-between',
-  backgroundColor: '#1E1D1C',
-  marginTop: theme.spacing(2),
-  alignItems: 'center',
-  padding: theme.spacing(1.5, 2),
-}));
-
-export const BerachainWidgetPledgedBoxLabel = styled(Typography)(
-  ({ theme }) => ({
-    fontFamily: urbanist.style.fontFamily,
-  }),
-);
-
-export const BerachainActionBerachainWidget = styled(Box)(({ theme }) => ({
-  width: 416,
-  // height: 522,
-  backgroundColor: '#121214',
-  padding: theme.spacing(3),
-  borderRadius: '24px',
-  boxShadow: '0px 4px 24px 0px rgba(0, 0, 0, 0.08)',
-}));
-
 export const BoxForm = styled('form')(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',

src/components/Menus/MainMenu/useMainMenuContent.tsx

@@ -163,7 +163,7 @@ export const useMainMenuContent = () => {
     //   },
     // },
     {
-      label: t('navbar.navbarMenu.profile'),
+      label: 'Jumper Loyalty Pass',
       prefixIcon: <AccountCircleIcon />,
       showMoreIcon: false,
       link: { url: JUMPER_LOYALTY_PATH },

src/components/ProfilePage/Rewards/RewardsAmountBox/RewardsAmountBox.tsx

@@ -43,17 +43,17 @@ export const RewardsAmountBox = ({
           width={40}
           height={40}
           style={{
-            borderRadius: 16,
+            borderRadius: '50%',
           }}
         />
         {isMobile ? undefined : (
           <Image
             src={REWARD_CHAIN_LOGO}
             alt="chain image"
-            width={15}
-            height={15}
+            width={20}
+            height={20}
             style={{
-              borderRadius: 16,
+              borderRadius: '50%',
               border: '2px solid',
               borderColor: '#FFFFFF',
               zIndex: 10,

src/components/QuestPage/CTA/MissionCTA.style.ts

@@ -124,12 +124,12 @@ export const StartedTitleTypography = styled(Typography)(({ theme }) => ({
   fontFamily: urbanist.style.fontFamily,
   [theme.breakpoints.down('md' as Breakpoint)]: {
     fontSize: '16px',
-    fontWeight: 600,
+    fontWeight: 700,
     lineHeight: '14px',
   },
   [theme.breakpoints.up('md' as Breakpoint)]: {
-    fontSize: '20px',
-    fontWeight: 600,
+    fontSize: '32px',
+    fontWeight: 700,
     lineHeight: '20px',
   },
 }));

src/components/QuestPage/CTA/MissionCTA.tsx

@@ -2,6 +2,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import {
   Box,
   type Theme,
+  Tooltip,
   Typography,
   useMediaQuery,
   useTheme,
@@ -191,24 +192,34 @@ export const MissionCTA = ({
                 </CTAExplanationBox>
                 <FlexCenterRowBox>
                   {CTA.apy && !variableWeeklyAPY && (
-                    <XPDisplayBox
-                      bgcolor={theme.palette.primary.main}
-                      marginRight={'16px'}
-                      height={'32px'}
-                      minWidth={'88px'}
+                    <Tooltip
+                      className="tooltip-icon"
+                      title={
+                        'Expected extra rewards to win during the campaign for the tokens invested.'
+                      }
+                      placement={'top'}
+                      enterTouchDelay={0}
+                      arrow
                     >
-                      <Typography
-                        fontSize="16px"
-                        fontWeight={700}
-                        lineHeight="20px"
-                        color={'#ffffff'}
+                      <XPDisplayBox
+                        bgcolor={theme.palette.primary.main}
+                        marginRight={'16px'}
+                        height={'32px'}
+                        minWidth={'88px'}
                       >
-                        {`${Number(CTA.apy).toFixed(1)}%`}
-                      </Typography>
-                      <XPIconBox marginLeft="4px">
-                        <APYIcon size={24} />
-                      </XPIconBox>
-                    </XPDisplayBox>
+                        <Typography
+                          fontSize="16px"
+                          fontWeight={700}
+                          lineHeight="20px"
+                          color={theme.palette.text.primary}
+                        >
+                          {`${Number(CTA.apy).toFixed(1)}%`}
+                        </Typography>
+                        <XPIconBox marginLeft="4px">
+                          <APYIcon size={24} />
+                        </XPIconBox>
+                      </XPDisplayBox>
+                    </Tooltip>
                   )}
                   {variableWeeklyAPY && (
                     <XPDisplayBox

src/components/Zap/ZapInfo/ZapInfo.style.ts

@@ -1,5 +1,5 @@
 import type { Breakpoint } from '@mui/material';
-import { alpha, Box, styled, IconButton } from '@mui/material';
+import { alpha, Box, IconButton, styled } from '@mui/material';
 import Link from 'next/link';
 
 export const ZapProtocolActionBox = styled(Box)(({ theme }) => ({
@@ -20,14 +20,16 @@ export const ZapProtocolActionInfoBox = styled(Box)(({ theme }) => ({
   padding: theme.spacing(3),
   flexDirection: 'column',
   marginTop: theme.spacing(2),
-  maxWidth: 640,
   gap: theme.spacing(2),
   borderRadius: '24px',
   background: theme.palette.surface1.main,
   boxShadow:
     theme.palette.mode === 'light'
       ? '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)'
       : '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
+  [theme.breakpoints.up('lg' as Breakpoint)]: {
+    maxWidth: 640,
+  },
 }));
 
 export const ZapActionProtocolIntro = styled(Box)(({ theme }) => ({
@@ -79,36 +81,14 @@ export const ZapActionProtocolShare = styled(IconButton)(({ theme }) => ({
 
 export const ZapTabsBox = styled(Box)(({ theme }) => ({
   marginTop: theme.spacing(2),
-  padding: theme.spacing(3, 1),
+  padding: theme.spacing(3, 0),
   borderRadius: '24px',
   backgroundColor: theme.palette.surface1.main,
   boxShadow:
     theme.palette.mode === 'light'
       ? '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)'
       : '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
-}));
-
-export const ZapWidgetSizeBox = styled(Box)(({ theme }) => ({
-  marginTop: theme.spacing(2),
-  padding: theme.spacing(3, 1),
-  borderRadius: '24px',
-  backgroundColor: theme.palette.surface1.main,
-  boxShadow:
-    theme.palette.mode === 'light'
-      ? '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.08)'
-      : '0px 2px 4px rgba(0, 0, 0, 0.08), 0px 8px 16px rgba(0, 0, 0, 0.16)',
-}));
-
-export const ZapStyledAccordionItem = styled('div')(({ theme }) => ({
-  padding: '0px 8px',
-  backgroundColor: 'transparent',
-  '.MuiAccordionSummary-root': {
-    padding: 0,
-  },
-  '.accordion-items': {
-    gap: '4px',
-  },
-  '.MuiAccordionDetails-root': {
-    padding: '20px 16px 16px',
+  [theme.breakpoints.up('md' as Breakpoint)]: {
+    maxWidth: 432,
   },
 }));