feat: add traits section + page

src/app/[lng]/(infos)/traits/page.tsx

@@ -0,0 +1,15 @@
+import { getSiteUrl } from '@/const/urls';
+import type { Metadata } from 'next';
+import TraitsPage from 'src/app/ui/traits/TraitsPage';
+
+export const metadata: Metadata = {
+  title: 'Jumper Traits',
+  description: 'Jumper Traits is showing the users´ traits on Jumper.',
+  alternates: {
+    canonical: `${getSiteUrl()}/traits`,
+  },
+};
+
+export default async function Page() {
+  return <TraitsPage />;
+}

src/app/ui/traits/TraitsPage.tsx

@@ -0,0 +1,8 @@
+'use client';
+import { TraitsPage as TraitsPageComponent } from '@/components/Traits/TraitsPage';
+
+const TraitsPage = () => {
+  return <TraitsPageComponent />;
+};
+
+export default TraitsPage;

src/components/Berachain/Berachain.style.ts

@@ -1,7 +1,7 @@
 import { Box, Button } from '@mui/material';
 import { lighten, styled } from '@mui/material/styles';
 import { inter } from 'src/fonts/fonts';
-import { PageContainer } from '../ProfilePage/ProfilePage.style';
+import { PageContainer } from '../styles';
 
 export const BerachainFrame = styled(Box)(({ theme }) => ({
   backgroundColor: theme.palette.black.main,

src/components/Berachain/components/BerachainIntroduction/BerachainIntroduction.style.ts

@@ -2,7 +2,7 @@ import { Box, Grid, Typography } from '@mui/material';
 import type { Breakpoint } from '@mui/material/styles';
 import { alpha, styled } from '@mui/material/styles';
 import Image from 'next/image';
-import { PageContainer } from 'src/components/ProfilePage/ProfilePage.style';
+import { PageContainer } from 'src/components/styles';
 
 export const BerachainIntroductionBox = styled(PageContainer)(({ theme }) => ({
   marginTop: theme.spacing(10),

src/components/Blog/BlogArticlesCollections/BlogArticlesCollections.style.ts

@@ -2,7 +2,6 @@ import type { Breakpoint } from '@mui/material';
 import { Grid } from '@mui/material';
 
 import { styled } from '@mui/material/styles';
-import { SectionTitle } from 'src/components/ProfilePage/ProfilePage.style';
 
 export const BlogArticlesCollectionsContainer = styled(Grid)(({ theme }) => ({
   display: 'flex',
@@ -47,9 +46,3 @@ export const BlogArticlesCollectionsContainer = styled(Grid)(({ theme }) => ({
     },
   },
 }));
-
-export const BlogArticlesCollectionsTitle = styled(SectionTitle)(
-  ({ theme }) => ({
-    color: theme.palette.text.primary,
-  }),
-);

src/components/Blog/BlogArticlesCollections/BlogArticlesTabs.tsx

@@ -9,15 +9,13 @@ import type { Breakpoint } from '@mui/material';
 import { Box, useTheme } from '@mui/material';
 import { useState } from 'react';
 import type { GetTagsResponse } from 'src/app/lib/getTags';
+import { SectionTitle } from 'src/components/styles';
 import { TrackingCategory } from 'src/const/trackingKeys';
 import { chunkArray } from 'src/utils/chunkArray';
 import { BlogArticleCard } from '../BlogArticleCard';
 import { CarouselHeader } from '../BlogCarousel';
 import { Pagination } from '../Pagination/Pagination';
-import {
-  BlogArticlesCollectionsContainer,
-  BlogArticlesCollectionsTitle,
-} from './BlogArticlesCollections.style';
+import { BlogArticlesCollectionsContainer } from './BlogArticlesCollections.style';
 import { ArticlesGrid } from './BlogArticlesTabs.style';
 
 interface BlogArticlesTabsProps {
@@ -54,9 +52,9 @@ export function BlogArticlesTabs({
         }}
       >
         <CarouselHeader>
-          <BlogArticlesCollectionsTitle variant="headerMedium">
+          <SectionTitle variant="headerMedium">
             {tag.attributes?.Title}
-          </BlogArticlesCollectionsTitle>
+          </SectionTitle>
         </CarouselHeader>
         {chunkedPages.map(
           (page, pageIndex) =>

src/components/Blog/BlogCarousel/CarouselContainer.tsx

@@ -5,7 +5,7 @@ import { Box, useTheme, type CSSObject } from '@mui/material';
 import type { ReactNode } from 'react';
 import { useCallback, useRef } from 'react';
 import IconHeader from 'src/components/ProfilePage/Common/IconHeader';
-import { SectionTitle } from 'src/components/ProfilePage/ProfilePage.style';
+import { SectionTitle } from 'src/components/styles';
 import useClient from 'src/hooks/useClient';
 import {
   CarouselCenteredBox,

src/components/Campaign/CampaignPage.tsx

@@ -1,20 +1,8 @@
 'use client';
 
-import { useAccount } from '@lifi/wallet-management';
-import generateKey from 'src/app/lib/generateKey';
-import { useMerklRewardsOnCampaigns } from 'src/hooks/useMerklRewardsOnCampaigns';
-import { useMissionsAPY } from 'src/hooks/useMissionsAPY';
-import { type Quest } from 'src/types/loyaltyPass';
-
-import {
-  QuestPageMainBox,
-  QuestsContainer,
-} from '../QuestPage/QuestPage.style';
-import { BackButton } from '../QuestPage/BackButton/BackButton';
-import { BerachainMarketsHeader } from '../Berachain/components/BerachainMarkets/BerachainMarketsHeader';
-import { Box } from '@mui/material';
 import { QuestsOverview } from '../ProfilePage/QuestsOverview/QuestsOverview';
-import { PageContainer } from '../ProfilePage/ProfilePage.style';
+import { BackButton } from '../QuestPage/BackButton/BackButton';
+import { PageContainer } from '../styles';
 import { CampaignHeader } from './CampaignHeader/CampaignHeader';
 
 interface CampaignPageProps {

src/components/Leaderboard/Leaderboard.tsx

@@ -4,13 +4,16 @@ import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAccount } from '@lifi/wallet-management';
+import { Box } from '@mui/material';
+import useClient from 'src/hooks/useClient';
 import type { LeaderboardEntryData } from '../../hooks/useLeaderboard';
 import {
   useLeaderboardList,
   useLeaderboardUser,
 } from '../../hooks/useLeaderboard';
+import IconHeader from '../ProfilePage/Common/IconHeader';
 import { Pagination } from '../ProfilePage/Common/Pagination';
-import { PageContainer } from '../ProfilePage/ProfilePage.style';
+import { PageContainer } from '../styles';
 import {
   LeaderboardContainer,
   LeaderboardEntryDivider,
@@ -22,9 +25,6 @@ import {
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { LeaderboardEntrySkeleton } from './LeaderboardEntrySkeleton';
 import { LeaderboardUserEntry } from './LeaderboardUserEntry';
-import IconHeader from '../ProfilePage/Common/IconHeader';
-import useClient from 'src/hooks/useClient';
-import { Box } from '@mui/material';
 
 export const LEADERBOARD_LENGTH = 25;
 

src/components/Leaderboard/LeaderboardEntry.tsx

@@ -13,14 +13,15 @@ import {
   RankWalletImageSkeleton,
 } from './LeaderboardEntry.style';
 
-import { useWalletAddressImg } from 'src/hooks/useAddressImg';
-import { obfuscatedAddressFormatter } from 'src/utils/obfuscatedAddressFormatter';
 import useBlockieImg from 'src/hooks/useBlockieImg';
+import { obfuscatedAddressFormatter } from 'src/utils/obfuscatedAddressFormatter';
 
 interface LeaderboardEntryProps {
   isUserPosition?: boolean;
   isUserConnected?: boolean;
   isUserEntry?: boolean;
+  hideRank?: boolean;
+  loadingLabel?: string;
   walletAddress?: string;
   position?: number | string;
   points: number | string;
@@ -30,6 +31,8 @@ export const LeaderboardEntry = ({
   isUserEntry,
   isUserConnected,
   isUserPosition,
+  hideRank,
+  loadingLabel,
   walletAddress,
   position,
   points,
@@ -45,13 +48,15 @@ export const LeaderboardEntry = ({
       isUserConnected={isUserConnected}
     >
       <LeaderboardEntryInfos>
-        <Box minWidth={74} textAlign={'center'}>
-          <RankLabel variant="bodyXSmallStrong">
-            {isUserEntry && !isUserConnected
-              ? '?'
-              : t('format.decimal2Digit', { value: position }) || 'N/A'}
-          </RankLabel>
-        </Box>
+        {!hideRank && (
+          <Box minWidth={74} textAlign={'center'}>
+            <RankLabel variant="bodyXSmallStrong">
+              {isUserEntry && !isUserConnected
+                ? '?'
+                : t('format.decimal2Digit', { value: position }) || 'N/A'}
+            </RankLabel>
+          </Box>
+        )}
         {walletAddress ? (
           <RankWalletImage
             src={imgLink}
@@ -71,7 +76,7 @@ export const LeaderboardEntry = ({
           hide={!isUserConnected && isUserEntry}
         >
           {isUserEntry && !isUserConnected
-            ? t('leaderboard.rankCtaConnect')
+            ? loadingLabel || t('leaderboard.rankCtaConnect')
             : walletDigest(walletAddress)}
         </RankWalletAddress>
       </LeaderboardEntryInfos>

src/components/Leaderboard/LeaderboardUserEntry.tsx

@@ -5,7 +5,13 @@ import { useLeaderboardUser } from '../../hooks/useLeaderboard';
 import { LeaderboardEntry } from './LeaderboardEntry';
 import { LeaderboardUserEntryBox } from './LeaderboardUserEntry.style';
 
-export const LeaderboardUserEntry = () => {
+export const LeaderboardUserEntry = ({
+  hideRank,
+  loadingLabel,
+}: {
+  hideRank?: boolean;
+  loadingLabel?: string;
+}) => {
   const { account } = useAccount();
   const { data: leaderboardUserData } = useLeaderboardUser(account?.address);
   const { points } = useLoyaltyPass(account?.address);
@@ -15,6 +21,8 @@ export const LeaderboardUserEntry = () => {
     return (
       <LeaderboardEntry
         isUserEntry={true}
+        loadingLabel={loadingLabel}
+        hideRank={hideRank}
         isUserConnected={!!account.address}
         position={parseInt(leaderboardUserData?.position)}
         points={points || 0}
@@ -27,6 +35,7 @@ export const LeaderboardUserEntry = () => {
       href={`/leaderboard?page=${leaderboardUserData.userPage}`}
     >
       <LeaderboardEntry
+        hideRank={hideRank}
         isUserEntry={true}
         isUserConnected={!!account.address}
         walletAddress={account?.address}

src/components/ProfilePage/LeaderboardCard/LeaderboardCard.style.ts

@@ -3,23 +3,7 @@ import { Box, styled } from '@mui/material';
 import Link from 'next/link';
 import { ButtonSecondary, ButtonTransparent } from 'src/components/Button';
 import { TierboxInfoTitles } from '../LevelBox/TierBox.style';
-
-export const CardContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'space-between',
-  backgroundColor:
-    theme.palette.mode === 'light'
-      ? theme.palette.white.main
-      : theme.palette.bgSecondary.main,
-  borderRadius: '16px',
-  width: '100%',
-  padding: theme.spacing(2),
-  boxShadow: theme.shadows[2],
-  [theme.breakpoints.up('sm' as Breakpoint)]: {
-    padding: theme.spacing(3),
-  },
-}));
+import { CardContainer } from '../ProfilePage.style';
 
 export const RankContainer = styled(CardContainer)(({ theme }) => ({
   justifyContent: 'flex-start',

src/components/ProfilePage/LevelBox/LevelIndicator.tsx

@@ -1,5 +1,4 @@
 import { NoSelectTypography } from '@/components/ProfilePage/ProfilePage.style';
-import { useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { LevelButton } from '../../Button';
 import { XPIcon } from '../../illustrations/XPIcon';
@@ -11,7 +10,6 @@ interface LevelButtonProps {
 
 export const LevelIndicator = ({ level, bound }: LevelButtonProps) => {
   const { t } = useTranslation();
-  const theme = useTheme();
 
   return (
     <LevelButton aria-label="XP Level" size="medium">

src/components/ProfilePage/LevelBox/TierBox.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { LevelData } from '@/types/loyaltyPass';
-import { CardContainer } from '../LeaderboardCard/LeaderboardCard.style';
+import { CardContainer } from '../ProfilePage.style';
 import { LevelBox } from './LevelBox';
 import { PointsBox } from './PointsBox';
 import { ProgressionBar } from './ProgressionBar';

src/components/ProfilePage/ProfilePage.style.ts

@@ -1,33 +1,20 @@
 import type { Breakpoint } from '@mui/material';
-import { Box, Container, Typography, alpha, styled } from '@mui/material';
+import { Box, Typography, alpha, styled } from '@mui/material';
 
-export const PageContainer = styled(Container)(({ theme }) => ({
-  marginTop: 16,
-  fontFamily: 'var(--font-inter)',
-  background: 'transparent',
-  borderRadius: '8px',
-  position: 'relative',
-  width: '100% !important',
-  overflow: 'visible', //'hidden',
-  paddingBottom: 20,
-  [theme.breakpoints.down('md' as Breakpoint)]: {
-    paddingLeft: '8px',
-    paddingRight: '8px',
-  },
-  [theme.breakpoints.up('xl' as Breakpoint)]: {
-    paddingLeft: 0,
-    paddingRight: 0,
-  },
-}));
-
-export const SectionTitle = styled(Typography)(({ theme }) => ({
-  color: theme.palette.text.primary,
-  fontWeight: 700,
-  fontSize: '24px',
-  lineHeight: '32px',
-  margin: theme.spacing(0, 1.5, 0),
+export const CardContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+  backgroundColor:
+    theme.palette.mode === 'light'
+      ? theme.palette.white.main
+      : theme.palette.bgSecondary.main,
+  borderRadius: '16px',
+  width: '100%',
+  padding: theme.spacing(2),
+  boxShadow: theme.shadows[2],
   [theme.breakpoints.up('sm' as Breakpoint)]: {
-    margin: theme.spacing(0, 1.5, 0),
+    padding: theme.spacing(3),
   },
 }));
 
@@ -41,17 +28,24 @@ export const ProfileHeaderBox = styled(Box)(({ theme }) => ({
 }));
 
 export const ProfileInfoBox = styled(Box)(({ theme }) => ({
-  gab: theme.spacing(2),
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 2,
+  gap: theme.spacing(2),
   backgroundColor: theme.palette.bgSecondary.main,
   borderRadius: '24px',
-  flexDirection: 'column',
   boxShadow: theme.shadows[1],
   padding: theme.spacing(2),
 
   [theme.breakpoints.up('sm' as Breakpoint)]: {
     padding: theme.spacing(3),
   },
+}));
 
+export const ProfileInfoBoxCards = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(2),
   [theme.breakpoints.up('lg' as Breakpoint)]: {
     flexDirection: 'row',
   },