Fix leaderboard page after review

src/components/FormatBalance.tsx

@@ -8,6 +8,7 @@ type FormatBalanceProps = {
   loading?: boolean
   startFromSymbol?: boolean
   className?: string
+  sceletonClassName?: string
 }
 
 const FormatBalance = ({
@@ -17,6 +18,7 @@ const FormatBalance = ({
   startFromSymbol: startFromSybmol,
   symbol,
   className,
+  sceletonClassName,
 }: FormatBalanceProps) => {
   const formattedValue = formatBalance({
     value: value,
@@ -28,7 +30,7 @@ const FormatBalance = ({
     : `${formattedValue} ${symbol}`
 
   return (
-    <SkeletonFallback isLoading={loading}>
+    <SkeletonFallback className={sceletonClassName} isLoading={loading}>
       <span className={className}>
         {symbol ? formattedValueWithSymbol : formattedValue}
       </span>

src/components/floating/PopOver.tsx

@@ -2,12 +2,12 @@ import { HOVER_MENU_DELAY_OPT } from '@/constants/interaction'
 import useIsMounted from '@/hooks/useIsMounted'
 import { cx } from '@/utils/class-names'
 import {
+  FloatingFocusManager,
+  Placement,
   arrow,
   autoUpdate,
   flip,
-  FloatingFocusManager,
   offset,
-  Placement,
   safePolygon,
   useClick,
   useDismiss,
@@ -18,7 +18,7 @@ import {
   useTransitionStyles,
 } from '@floating-ui/react'
 import { Transition } from '@headlessui/react'
-import { cva, VariantProps } from 'class-variance-authority'
+import { VariantProps, cva } from 'class-variance-authority'
 import React, { ComponentProps, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { HiXMark } from 'react-icons/hi2'
@@ -166,7 +166,7 @@ export default function PopOver({
                   position: strategy,
                   top: y ?? 0,
                   left: x ?? 0,
-                  width: 'max-content',
+                  width: 'auto',
                 }}
                 ref={refs.setFloating}
                 className={cx(

src/components/layouts/CreatorSidebar/RewardInfo.tsx

@@ -98,7 +98,6 @@ export default function RewardInfo({ size, ...props }: RewardInfoProps) {
         <CustomLink
           className='flex items-center justify-center gap-2 px-4 py-3.5 font-medium text-text-primary'
           href={`${getLeaderboardLink(myAddress)}?role=staker`}
-          forceHardNavigation
           onClick={() => {
             sendEvent('leaderboard_my_stats_opened', {
               myStats: true,

src/components/layouts/Sidebar.tsx

@@ -42,7 +42,6 @@ export default function Sidebar() {
           icon={MdOutlineLeaderboard}
           title='Leaderboard'
           href={getLeaderboardLink(myAddress)}
-          forceHardNavigation
         />
         <SidebarItem
           icon={RiLineChartLine}

src/components/leaderboard/GlobalStats/index.tsx

@@ -12,13 +12,13 @@ const sizeStyle = isTouchDevice() ? '70px' : '88px'
 const GlobalStats = () => {
   return (
     <div className='flex w-full flex-col gap-5'>
-      <div className='grid grid-cols-[calc(70%-8px),30%] gap-x-4'>
+      <div className='flex flex-col-reverse gap-4 md:grid md:grid-cols-[calc(70%-8px),30%] md:gap-x-4'>
         <div className='grid grid-cols-2 gap-4'>
           <GlobalStatsDashboard />
         </div>
         <div
           className={cx(
-            'flex gap-4 rounded-[20px] border border-[#6366F1]/20 bg-[#0053FF]/10 md:col-auto md:row-[span_2]',
+            'flex gap-4 rounded-[20px] border border-[#6366F1]/20 bg-[#0053FF]/10',
             'items-center p-4 md:flex-col'
           )}
         >

src/components/leaderboard/LeaderboardRadioGroup.tsx

@@ -35,7 +35,7 @@ export const LeaderboardRoleRadioGroup = ({
       value={leaderboardRole}
       onChange={onChange}
       className={cx(
-        'flex h-[34px] items-center gap-[2px] rounded-lg bg-white px-[2px] dark:bg-white/10',
+        'flex h-[36px] items-center gap-[2px] rounded-lg bg-white px-[2px] dark:bg-white/10 md:h-[34px]',
         className
       )}
     >

src/components/leaderboard/MyStats/LeaderboardModal.tsx

@@ -59,7 +59,7 @@ const LeaderboardModal = ({
       isOpen={openModal}
       closeModal={closeModal}
       className='h-full !max-h-[500px]'
-      contentClassName='!p-2 !py-4'
+      contentClassName='!p-2 !pt-4 !pb-0'
       titleClassName='px-3'
       descriptionClassName='px-3'
       title={title}
@@ -72,7 +72,8 @@ const LeaderboardModal = ({
           next={fetchNextPage}
           hasMore={!!hasNextPage}
           scrollableTarget='leaderboard'
-          loader={<Loading />}
+          loader={<Loading className='pt-2' />}
+          className='pb-4'
         >
           <table className='w-full table-fixed text-left'>
             <TableHeader

src/components/leaderboard/MyStats/LeaderboardStatsData.tsx

@@ -107,6 +107,7 @@ export const UserStatsCard = ({
               loading={isLoading}
               defaultMaximumFractionDigits={2}
               symbol={tokenSymbol}
+              sceletonClassName='max-w-full'
             />
           )}
         </span>

src/components/leaderboard/MyStats/LeaderboardTable.tsx

@@ -131,7 +131,7 @@ const LeaderboardTable = ({
 
   return (
     <>
-      <div className='flex h-fit flex-col gap-4 rounded-2xl bg-white py-4 dark:bg-slate-800 md:gap-6'>
+      <div className='flex h-fit flex-col gap-4 rounded-2xl bg-white py-4 dark:bg-slate-800 md:gap-4'>
         <div className='flex flex-col gap-2 px-4'>
           <span className='text-lg font-bold leading-normal'>{title}</span>
           <span
@@ -212,7 +212,7 @@ export const UserReward = ({ reward }: UserRewardProps) => {
       value={rewardWithDecimal.toString()}
       symbol={tokenSymbol}
       defaultMaximumFractionDigits={2}
-      className='font-semibold'
+      className='font-medium'
     />
   )
 }

src/components/leaderboard/MyStats/StakerRewards.tsx

@@ -16,6 +16,8 @@ type StakerRewardsProps = {
   leaderboardRole: LeaderboardRole
 }
 
+const REWRADS_LIMIT = 13
+
 const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
   const { data, isLoading } = getRewardHistoryQuery.useQuery(address)
   const [isViewMore, setIsViewMore] = useState(false)
@@ -35,12 +37,13 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
   const sectionTitle = leaderboardRole === 'staker' ? 'Staker' : 'Creator'
 
   const rewardsData = useMemo(
-    () => (isViewMore ? rewards : rewards.slice(0, 13)),
+    () => (isViewMore ? rewards : rewards.slice(0, REWRADS_LIMIT)),
     [rewards.length, isViewMore]
   )
 
+  console.log(rewards.length)
   return (
-    <div className='flex h-fit flex-col gap-4 rounded-2xl bg-white p-4 dark:bg-slate-800 md:gap-5'>
+    <div className='flex h-fit flex-col gap-4 rounded-2xl bg-white p-4 dark:bg-slate-800 md:gap-4'>
       <div className='flex flex-col gap-2'>
         <span className='text-lg font-bold leading-normal'>
           {sectionTitle} Rewards
@@ -87,7 +90,7 @@ const StakerRewards = ({ address, leaderboardRole }: StakerRewardsProps) => {
               />
             )
           })}
-          {!isViewMore && (
+          {!isViewMore && rewards.length > REWRADS_LIMIT && (
             <LinkText
               className='w-full text-center hover:no-underline'
               onClick={() => setIsViewMore(true)}
@@ -120,7 +123,7 @@ const RewardsRow = ({ date, rewardValue }: RewardsRowProps) => {
       <span className={cx('text-sm leading-[22px]', mutedTextColorStyles)}>
         {date}
       </span>
-      <span className='text-base font-semibold'>+ {rewardValue}</span>
+      <span className='text-base font-medium'>+ {rewardValue}</span>
     </div>
   )
 }

src/modules/LandingPage/Footer.tsx

@@ -3,8 +3,10 @@ import Button from '@/components/Button'
 import LinkText, { LinkTextProps } from '@/components/LinkText'
 import Toast from '@/components/Toast'
 import Input from '@/components/inputs/Input'
+import { getLeaderboardLink } from '@/components/leaderboard/utils'
 import { useSubscribeInLanding } from '@/services/subsocial-offchain/mutation'
 import { useSendEvent } from '@/stores/analytics'
+import { useMyMainAddress } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { ComponentProps } from 'react'
@@ -18,6 +20,8 @@ import HighlightedText from './common/HighlightedText'
 
 export default function Footer(props: ComponentProps<'footer'>) {
   const sendEvent = useSendEvent()
+  const myAddress = useMyMainAddress()
+
   return (
     <footer
       className={cx(
@@ -116,7 +120,7 @@ export default function Footer(props: ComponentProps<'footer'>) {
             Lock SUB
           </OpenInNewTabLink>
           <OpenInNewTabLink
-            href='https://grillapp.net/leaderboard'
+            href={getLeaderboardLink(myAddress)}
             onClick={() => sendEvent('lp_leaderboard_clicked')}
           >
             Leaderboard

src/modules/LandingPage/sections/EarningsSection.tsx

@@ -1,7 +1,9 @@
 import ActivitiesImage from '@/assets/graphics/landing/activities.png'
 import Diamond from '@/assets/graphics/landing/diamond.png'
 import Button from '@/components/Button'
+import { getLeaderboardLink } from '@/components/leaderboard/utils'
 import { useSendEvent } from '@/stores/analytics'
+import { useMyMainAddress } from '@/stores/my-account'
 import { cx, getBlurFallbackStyles } from '@/utils/class-names'
 import Image from 'next/image'
 import { ComponentProps } from 'react'
@@ -10,6 +12,8 @@ import Heading from '../common/Heading'
 
 export default function EarningsSection(props: ComponentProps<'section'>) {
   const sendEvent = useSendEvent()
+  const myAddress = useMyMainAddress()
+
   return (
     <section
       {...props}
@@ -62,7 +66,7 @@ export default function EarningsSection(props: ComponentProps<'section'>) {
               variant='landingPrimary'
               size='xl'
               roundings='xl'
-              href='https://grillapp.net/leaderboard'
+              href={getLeaderboardLink(myAddress)}
               onClick={() => sendEvent('lp_live_stats')}
             >
               See Live Stats