feat: moving leaderboard

geyserfund · Aug 19, 2024 · 8b1f6b4 · 8b1f6b4
1 parent 299bddd
commit 8b1f6b4
Show file tree

Hide file tree

Showing 18 changed files with 110 additions and 124 deletions.
diff --git a/src/config/routes/routes.tsx b/src/config/routes/routes.tsx
@@ -21,8 +21,6 @@ const ProjectDashboard = () => import('../../modules/project/pages1/projectDashb
 
 const ProjectFunding = () => import('../../modules/project/pages1/projectFunding')
 
-const Leaderboard = () => import('../../modules/leaderboard/pages/Leaderboard')
-
 const CreatorReward = () => import('../../modules/project/pages1/projectView/views/rewards/views')
 
 const CreatorPost = () => import('../../modules/project/pages1/projectView/views/posts/views')
@@ -547,13 +545,7 @@ export const platformRoutes: RouteObject[] = [
     path: getPath('projectNotFound'),
     Component: NotFoundProject,
   },
-  {
-    path: getPath('leaderboard'),
-    async lazy() {
-      const LeaderboardPage = await Leaderboard().then((m) => m.Leaderboard)
-      return { Component: LeaderboardPage }
-    },
-  },
+
   {
     path: getPath('badges'),
     async lazy() {

diff --git a/src/modules/discovery/Platform.tsx b/src/modules/discovery/Platform.tsx
@@ -26,7 +26,7 @@ export const Platform = () => {
           maxWidth={`${dimensions.maxWidth + 24 * 2}`}
           position="relative"
           paddingX={standardPadding}
-          paddingBottom={{ base: 28, lg: 10 }}
+          paddingBottom={{ base: 28, lg: 100 }}
         >
           <Outlet />
         </Box>

diff --git a/src/modules/discovery/pages/leaderboard/Leaderboard.tsx b/src/modules/discovery/pages/leaderboard/Leaderboard.tsx
@@ -1,3 +1,110 @@
+import { HStack, VStack } from '@chakra-ui/react'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PiCalendarDots } from 'react-icons/pi'
+
+import { Banner } from '@/components/ui/Banner'
+import { CustomSelect } from '@/components/ui/CustomSelect'
+import { StickToTop } from '@/shared/components/layouts'
+import { AnimatedNavBar, AnimatedNavBarItem } from '@/shared/components/navigation/AnimatedNavBar'
+import { useAnimatedNavBar } from '@/shared/components/navigation/useAnimatedNavBar'
+import { Body } from '@/shared/components/typography'
+import { dimensions } from '@/shared/constants'
+import { LeaderboardPeriod } from '@/types'
+import { getBitcoinAmount, getShortAmountLabel, useMobileMode } from '@/utils'
+
+import { TopContributors, TopProjects } from './components'
+import { useSummaryBannerStats } from './hooks'
+
+interface PeriodOption {
+  value: LeaderboardPeriod
+  label: string
+}
 export const Leaderboard = () => {
-  return <div>Leaderboard</div>
+  const { t } = useTranslation()
+  const isMobile = useMobileMode()
+  const [period, setPeriod] = useState<LeaderboardPeriod>(LeaderboardPeriod.AllTime)
+
+  const { projectsCount, bitcoinsRaised, contributorsCount, loading } = useSummaryBannerStats()
+
+  const bannerItems = [
+    { label: 'Projects', value: getShortAmountLabel(projectsCount) },
+    { label: 'Bitcoin raised', value: getBitcoinAmount(bitcoinsRaised, true) },
+    { label: 'Contributors', value: getShortAmountLabel(contributorsCount) },
+  ]
+
+  const periodOptions: PeriodOption[] = [
+    { value: LeaderboardPeriod.Month, label: t('Past month') },
+    { value: LeaderboardPeriod.AllTime, label: t('All time') },
+  ]
+
+  const handlePeriodChange = (selectedOption: PeriodOption | null) => {
+    if (selectedOption) {
+      setPeriod(selectedOption.value)
+    }
+  }
+
+  return (
+    <VStack spacing={4} width="full">
+      <Banner title={t('The leaders making world-changing ideas possible')} items={bannerItems} loading={loading} />
+      <HStack width="100%" justifyContent="space-between">
+        {!isMobile && (
+          <Body fontSize="24px" bold>
+            {t('Top Projects and Contributors')}
+          </Body>
+        )}
+        <CustomSelect
+          isSearchable={false}
+          options={periodOptions}
+          value={periodOptions.find((option) => option.value === period)}
+          onChange={handlePeriodChange}
+          placeholder={t('Select period...')}
+          dropdownIndicator={<PiCalendarDots />}
+        />
+      </HStack>
+
+      {isMobile ? (
+        <MobileLeaderboard period={period} />
+      ) : (
+        <HStack width="full" alignItems="flex-start" spacing={6}>
+          <TopProjects period={period} />
+          <TopContributors period={period} />
+        </HStack>
+      )}
+    </VStack>
+  )
+}
+
+const MobileLeaderboard = ({ period }: { period: LeaderboardPeriod }) => {
+  const { t } = useTranslation()
+
+  const items: AnimatedNavBarItem[] = [
+    {
+      name: t('Projects'),
+      key: 'projects',
+      render: () => <TopProjects period={period} />,
+    },
+    {
+      name: t('Contributors'),
+      key: 'contributors',
+      render: () => <TopContributors period={period} />,
+    },
+  ]
+
+  const { render, ...animatedNavBarProps } = useAnimatedNavBar({ items, defaultView: 'projects' })
+
+  return (
+    <VStack id="leaderboard-mobile-wrapper" width="full" height="120%" spacing={4}>
+      <StickToTop
+        width={'100%'}
+        id="leaderboard-mobile"
+        wrapperId="leaderboard-mobile-wrapper"
+        offset={dimensions.projectNavBar.mobile.height + 20}
+        _onStick={{ width: '100%', px: '4' }}
+      >
+        <AnimatedNavBar {...animatedNavBarProps} showLabel />
+      </StickToTop>
+      {render && render()}
+    </VStack>
+  )
 }
diff --git a/...leaderboard/components/ScrollableList.tsx → ...leaderboard/components/ScrollableList.tsx b/...leaderboard/components/ScrollableList.tsx → ...leaderboard/components/ScrollableList.tsx
diff --git a/...eaderboard/components/TopContributors.tsx → ...eaderboard/components/TopContributors.tsx b/...eaderboard/components/TopContributors.tsx → ...eaderboard/components/TopContributors.tsx
diff --git a/...es/leaderboard/components/TopProjects.tsx → ...es/leaderboard/components/TopProjects.tsx b/...es/leaderboard/components/TopProjects.tsx → ...es/leaderboard/components/TopProjects.tsx
diff --git a/src/modules/leaderboard/components/index.ts → ...ery/pages/leaderboard/components/index.ts b/src/modules/leaderboard/components/index.ts → ...ery/pages/leaderboard/components/index.ts
diff --git a/...raphql/fragments/summaryBannerFragment.ts → ...raphql/fragments/summaryBannerFragment.ts b/...raphql/fragments/summaryBannerFragment.ts → ...raphql/fragments/summaryBannerFragment.ts
diff --git a/...phql/fragments/topContributorsFragment.ts → ...phql/fragments/topContributorsFragment.ts b/...phql/fragments/topContributorsFragment.ts → ...phql/fragments/topContributorsFragment.ts
diff --git a/.../graphql/fragments/topProjectsFragment.ts → .../graphql/fragments/topProjectsFragment.ts b/.../graphql/fragments/topProjectsFragment.ts → .../graphql/fragments/topProjectsFragment.ts
diff --git a/...ard/graphql/queries/summaryBannerQuery.ts → ...ard/graphql/queries/summaryBannerQuery.ts b/...ard/graphql/queries/summaryBannerQuery.ts → ...ard/graphql/queries/summaryBannerQuery.ts
diff --git a/...d/graphql/queries/topContributorsQuery.ts → ...d/graphql/queries/topContributorsQuery.ts b/...d/graphql/queries/topContributorsQuery.ts → ...d/graphql/queries/topContributorsQuery.ts
diff --git a/...board/graphql/queries/topProjectsQuery.ts → ...board/graphql/queries/topProjectsQuery.ts b/...board/graphql/queries/topProjectsQuery.ts → ...board/graphql/queries/topProjectsQuery.ts
diff --git a/src/modules/leaderboard/hooks/index.ts → ...iscovery/pages/leaderboard/hooks/index.ts b/src/modules/leaderboard/hooks/index.ts → ...iscovery/pages/leaderboard/hooks/index.ts
diff --git a/...les/leaderboard/hooks/useSummaryBanner.ts → ...ges/leaderboard/hooks/useSummaryBanner.ts b/...les/leaderboard/hooks/useSummaryBanner.ts → ...ges/leaderboard/hooks/useSummaryBanner.ts
diff --git a/...s/leaderboard/hooks/useTopContributors.ts → ...s/leaderboard/hooks/useTopContributors.ts b/...s/leaderboard/hooks/useTopContributors.ts → ...s/leaderboard/hooks/useTopContributors.ts
diff --git a/...dules/leaderboard/hooks/useTopProjects.ts → ...pages/leaderboard/hooks/useTopProjects.ts b/...dules/leaderboard/hooks/useTopProjects.ts → ...pages/leaderboard/hooks/useTopProjects.ts
diff --git a/src/modules/leaderboard/pages/Leaderboard.tsx b/src/modules/leaderboard/pages/Leaderboard.tsx