feat: add wallet linking

src/app/i18n.ts

@@ -1,10 +1,10 @@
+import { currencyFormatter, decimalFormatter } from '@/utils/formatNumbers';
 import type { Resource, i18n } from 'i18next';
 import { createInstance } from 'i18next';
 import resourcesToBackend from 'i18next-resources-to-backend';
 import { initReactI18next } from 'react-i18next/initReactI18next';
-import i18nConfig from '../../i18nconfig';
-import { currencyFormatter, decimalFormatter } from '@/utils/formatNumbers';
 import { dateFormatter } from 'src/utils/formatDate';
+import i18nConfig from '../../i18nconfig';
 
 // TODO: use https://nextjs.org/docs/app/building-your-application/routing/internationalization#localization
 export default async function initTranslations(

src/components/AvatarBadge/AvatarBadge.style.ts

@@ -0,0 +1,74 @@
+import { Avatar, Badge, Avatar as MuiAvatar } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import type { BadgeOffsetProps } from './AvatarBadge';
+import { getAvatarMask } from './getAvatarMask';
+
+interface StyledAvatarProps {
+  avatarSize: number;
+  badgeSize: number;
+  badgeOffset?: BadgeOffsetProps;
+  badgeGap?: number;
+}
+
+// Styled Avatar component for the badge
+export const StyledAvatar = styled(Avatar, {
+  shouldForwardProp: (prop) =>
+    prop !== 'avatarSize' &&
+    prop !== 'badgeSize' &&
+    prop !== 'badgeOffset' &&
+    prop !== 'badgeGap',
+})<StyledAvatarProps>(({ avatarSize, badgeSize, badgeOffset, badgeGap }) => ({
+  height: avatarSize,
+  width: avatarSize,
+  mask: getAvatarMask({ avatarSize, badgeSize, badgeOffset, badgeGap }), // Apply dynamic mask based on avatar and badge size
+  '> img': {
+    height: '100%',
+    width: '100%',
+    objectFit: 'contain',
+  },
+}));
+
+interface StyledBadgeProps {
+  badgeOffset?: BadgeOffsetProps;
+  avatarSize: number;
+}
+
+// Styled Badge component for the badge
+export const StyledBadge = styled(Badge, {
+  shouldForwardProp: (prop) => prop !== 'badgeOffset' && prop !== 'avatarSize',
+})<StyledBadgeProps>(({ badgeOffset, avatarSize }) => ({
+  borderRadius: '50%',
+  display: 'block',
+  height: avatarSize,
+  width: avatarSize,
+
+  '.MuiBadge-badge': {
+    position: 'static',
+    transform: 'none',
+    top: 'unset',
+    right: 'unset',
+    zIndex: 'unset',
+    minWidth: 'unset',
+    padding: 'unset',
+    height: 'unset',
+    lineHeight: 'unset',
+    ...((badgeOffset?.x || badgeOffset?.y) && {
+      transform: `translate(${badgeOffset?.x ? badgeOffset.x : 0}px, ${badgeOffset?.y ? badgeOffset.y : 0}px)`,
+    }),
+  },
+}));
+
+// Styled avatar
+export const StyledBadgeAvatar = styled(MuiAvatar, {
+  shouldForwardProp: (prop) => prop !== 'badgeSize',
+})<{
+  badgeSize: number;
+}>(({ badgeSize }) => ({
+  width: badgeSize,
+  height: badgeSize,
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: 'unset',
+  left: 'unset',
+}));

src/components/AvatarBadge/AvatarBadge.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from '@mui/material';
+import React from 'react';
+import {
+  StyledAvatar,
+  StyledBadge,
+  StyledBadgeAvatar,
+} from './AvatarBadge.style';
+
+export interface BadgeOffsetProps {
+  x?: number;
+  y?: number;
+}
+
+type AvatarBadgeProps = {
+  avatarAlt: string;
+  avatarSize: number;
+  avatarSrc?: string;
+  badgeAlt: string;
+  badgeSize: number;
+  badgeSrc?: string;
+  badgeOffset?: BadgeOffsetProps;
+  badgeGap?: number;
+};
+
+const AvatarBadge: React.FC<AvatarBadgeProps> = ({
+  avatarAlt,
+  avatarSize,
+  avatarSrc,
+  badgeAlt,
+  badgeSize,
+  badgeSrc,
+  badgeOffset,
+  badgeGap,
+}) => {
+  return (
+    <StyledBadge
+      overlap="circular"
+      badgeOffset={badgeOffset}
+      avatarSize={avatarSize}
+      // anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      badgeContent={
+        <StyledBadgeAvatar src={badgeSrc} alt={badgeAlt} badgeSize={badgeSize}>
+          <Skeleton variant="circular" width={badgeSize} height={badgeSize} />
+        </StyledBadgeAvatar>
+      }
+    >
+      <StyledAvatar
+        src={avatarSrc}
+        alt={avatarAlt}
+        avatarSize={avatarSize}
+        badgeSize={badgeSize}
+        badgeOffset={{ x: badgeOffset?.x, y: badgeOffset?.y }}
+        badgeGap={badgeGap}
+      >
+        <Skeleton variant="circular" width={avatarSize} height={avatarSize} />
+      </StyledAvatar>
+    </StyledBadge>
+  );
+};
+
+export default AvatarBadge;

src/components/AvatarBadge/getAvatarMask.ts

@@ -0,0 +1,52 @@
+/**
+ * Generates a dynamic avatar mask that positions a badge based on the avatar size and optional badge gap/offset.
+ *
+ * The mask uses a radial gradient to blend the badge into the avatar, simulating the appearance of the badge
+ * partially overlapping the avatar's edge. The function also allows specifying a gap between the avatar and badge,
+ * along with custom x/y offsets for fine-tuning positioning.
+ *
+ * @param {number} avatarSize - The size of the avatar in pixels (e.g. 44, 32).
+ * @param {number} badgeSize - The size of the badge in pixels (e.g. 12).
+ * @param {BadgeOffsetProps} [badgeOffset] - Optional x and y offset values to adjust the badge's position.
+ * @param {number} [badgeGap] - Optional gap between the avatar and badge, defaults to a quarter of the badge size.
+ * @returns {string} The radial gradient mask for the avatar.
+ *
+ * The `badgeGap` introduces space between the avatar and badge by modifying the badge's radius.
+ * If `badgeGap` is not provided, a default value of 25% of the badge size is used.
+ *
+ * Example usage:
+ * ```
+ * getAvatarMask({
+ *   avatarSize: 44,
+ *   badgeSize: 12,
+ *   badgeOffset: { x: 4, y: 4 },
+ *   badgeGap: 2,
+ * });
+ * ```
+ */
+
+import type { BadgeOffsetProps } from './AvatarBadge';
+
+interface GetAvatarMask {
+  avatarSize: number;
+  badgeSize: number;
+  badgeOffset?: BadgeOffsetProps;
+  badgeGap?: number;
+}
+
+export const getAvatarMask = ({
+  avatarSize,
+  badgeSize,
+  badgeOffset,
+  badgeGap,
+}: GetAvatarMask) => {
+  const badgeRadius =
+    badgeGap !== undefined
+      ? (badgeSize + badgeGap) / 2
+      : (badgeSize + badgeSize / 4) / 2; // Badge radius with default gap if not provided
+  const badgeOffsetX =
+    avatarSize - badgeSize / 2 + (!!badgeOffset?.x ? badgeOffset?.x : 0);
+  const badgeOffsetY =
+    avatarSize - badgeSize / 2 + (!!badgeOffset?.y ? badgeOffset?.y : 0);
+  return `radial-gradient(circle ${badgeRadius}px at calc(${badgeOffsetX}px) calc(${badgeOffsetY}px), #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`;
+};

src/components/Blog/BlogCarousel/CarouselContainer.tsx

@@ -4,16 +4,16 @@ 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 useClient from 'src/hooks/useClient';
 import {
   CarouselCenteredBox,
   CarouselContainerBox,
   CarouselHeader,
   CarouselNavigationButton,
   CarouselNavigationContainer,
 } from '.';
-import IconHeader from 'src/components/ProfilePage/Common/IconHeader';
-import useClient from 'src/hooks/useClient';
 
 interface CarouselContainerProps {
   title?: string;

src/components/Leaderboard/Leaderboard.tsx

@@ -4,11 +4,14 @@ 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 {
@@ -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,9 +13,8 @@ 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;

src/components/ProfilePage/AddressBox/AddressBox.tsx

@@ -1,19 +1,17 @@
+import { NoSelectTypography } from '@/components/ProfilePage/ProfilePage.style';
+import { getSiteUrl } from '@/const/urls';
+import { useWalletAddressImg } from '@/hooks/useAddressImg';
 import { useMenuStore } from '@/stores/menu';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import LinkIcon from '@mui/icons-material/Link';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
 import { useTheme } from '@mui/material';
 import Image from 'next/image';
 import { useTranslation } from 'react-i18next';
-import { useMercleNft } from 'src/hooks/useMercleNft';
 import { getAddressLabel } from 'src/utils/getAddressLabel';
 import type { Address } from 'viem';
 import { useEnsName } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
-import { NoSelectTypography } from '@/components/ProfilePage/ProfilePage.style';
-import { getSiteUrl } from '@/const/urls';
-import useBlockieImg from '@/hooks/useBlockieImg';
-import { useWalletAddressImg } from '@/hooks/useAddressImg';
 import {
   AddressBoxContainer,
   PassImageBox,

src/components/ProfilePage/AddressCard/AddressCard.tsx

@@ -4,25 +4,24 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { Typography } from '@mui/material';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useWalletAddressImg } from 'src/hooks/useAddressImg';
 import { useMercleNft } from 'src/hooks/useMercleNft';
 import { getAddressLabel } from 'src/utils/getAddressLabel';
 import type { Address } from 'viem';
 import { useEnsName } from 'wagmi';
 import { mainnet } from 'wagmi/chains';
 import { AddressMenu } from '../AddressMenu/AddressMenu';
 import {
+  AddressBlockiesImage,
   AddressBox,
   AddressBoxContainer,
   AddressButton,
   AddressButtonLabel,
   AddressConnectButton,
-  AddressBlockiesImage,
-  AddressBlockiesImageSkeleton,
   ImageBackground,
   PassImageBox,
   ProfileIconButton,
 } from './AddressCard.style';
-import { useWalletAddressImg } from 'src/hooks/useAddressImg';
 
 interface AddressBoxProps {
   address?: string;

src/components/ProfilePage/LeaderboardCard/LeaderboardCard.tsx

@@ -5,6 +5,7 @@ import { RankIcon } from 'src/components/illustrations/IconRANK';
 import { LEADERBOARD_LENGTH } from 'src/components/Leaderboard/Leaderboard';
 import type { LeaderboardEntryData } from '../../../hooks/useLeaderboard';
 import { useLeaderboardUser } from '../../../hooks/useLeaderboard';
+import IconHeader from '../Common/IconHeader';
 import {
   CardButton,
   CardButtonContainer,
@@ -13,7 +14,6 @@ import {
   RankContainer,
   RankContentContainer,
 } from './LeaderboardCard.style';
-import IconHeader from '../Common/IconHeader';
 
 export const LeaderboardCard = ({ address }: { address?: string }) => {
   const { data: leaderboardUserData }: { data: LeaderboardEntryData } =

src/components/ProfilePage/LevelBox/LevelBox.tsx

@@ -1,8 +1,8 @@
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { LvlIcon } from 'src/components/illustrations/IconLVL';
-import { PointsDisplay } from './PointsDisplay';
 import IconHeader from '../Common/IconHeader';
+import { PointsDisplay } from './PointsDisplay';
 
 interface LevelBoxProps {
   level?: number;

src/components/ProfilePage/LevelBox/PointsBox.tsx

@@ -3,9 +3,9 @@
 import { Box } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { XPIcon } from 'src/components/illustrations/XPIcon';
-import { PointsDisplay } from './PointsDisplay';
-import IconHeader from '../Common/IconHeader';
 import useClient from 'src/hooks/useClient';
+import IconHeader from '../Common/IconHeader';
+import { PointsDisplay } from './PointsDisplay';
 
 interface PointsBoxProps {
   points?: number;

src/components/ProfilePage/ProfilePage.tsx

@@ -1,6 +1,5 @@
 'use client';
 import { useLoyaltyPass } from '@/hooks/useLoyaltyPass';
-import { useAccount } from '@lifi/wallet-management';
 import { useContext } from 'react';
 import { useMerklRewardsOnCampaigns } from 'src/hooks/useMerklRewardsOnCampaigns';
 import { useTraits } from 'src/hooks/useTraits';

src/components/ProfilePage/Rewards/RewardsCarousel.tsx

@@ -1,12 +1,12 @@
 import { Box, useTheme } from '@mui/material';
+import { useTranslation } from 'react-i18next';
 import { FlexCenterRowBox } from 'src/components/Superfest/SuperfestPage/SuperfestMissionPage.style';
 import type { AvailableRewards } from 'src/hooks/useMerklRewardsOnCampaigns';
 import { ClaimingBox } from './ClaimingBox/ClaimingBox';
 import {
   EarnedTypography,
   RewardsCarouselContainer,
 } from './RewardsCarousel.style';
-import { useTranslation } from 'react-i18next';
 
 interface RewardsCarouselProps {
   isMerklSuccess: boolean;

src/components/ProfilePage/WalletCardBox/WalletCardBox.style.ts

@@ -0,0 +1,18 @@
+import { Box, styled } from '@mui/material';
+
+export const WalletCardsContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  padding: theme.spacing(3),
+  backgroundColor: theme.palette.white.main,
+  gap: theme.spacing(2),
+  minWidth: 208,
+  width: '100%',
+  borderRadius: 16,
+  flexGrow: 1,
+  [theme.breakpoints.up('md')]: {
+    minWidth: 'auto',
+    width: 208,
+  },
+}));