[Campaign Launcher UI] Redesign Dashboard and Campaigns pages

campaign-launcher/client/package.json

@@ -28,14 +28,11 @@
     "@tanstack/react-query": "^5.90.21",
     "@walletconnect/ethereum-provider": "^2.23.5",
     "axios": "^1.13.2",
-    "chart.js": "^4.5.1",
-    "chartjs-plugin-annotation": "^3.1.0",
     "dayjs": "^1.11.19",
     "ethers": "~6.16.0",
     "jwt-decode": "^4.0.0",
     "notistack": "^3.0.2",
     "react": "^19.2.5",
-    "react-chartjs-2": "^5.3.1",
     "react-dom": "^19.2.5",
     "react-hook-form": "^7.68.0",
     "react-number-format": "^5.4.4",

campaign-launcher/client/src/App.tsx

@@ -8,7 +8,8 @@ import Layout from '@/components/Layout';
 import ProtectedRoute from '@/components/ProtectedRoute';
 import WalletProtectedRoute from '@/components/WalletProtectedRoute';
 import { ROUTES } from '@/constants';
-import Campaign from '@/pages/Campaign';
+import CampaignDetails from '@/pages/CampaignDetails';
+import Campaigns from '@/pages/Campaigns';
 import Dashboard from '@/pages/Dashboard';
 import LaunchCampaignPage from '@/pages/LaunchCampaign';
 import ManageApiKeysPage from '@/pages/ManageApiKeys';
@@ -46,9 +47,13 @@ const App: FC = () => {
                                   path={ROUTES.DASHBOARD}
                                   element={<Dashboard />}
                                 />
+                                <Route
+                                  path={ROUTES.CAMPAIGNS}
+                                  element={<Campaigns />}
+                                />
                                 <Route
                                   path={ROUTES.CAMPAIGN_DETAILS}
-                                  element={<Campaign />}
+                                  element={<CampaignDetails />}
                                 />
                                 <Route
                                   path={ROUTES.MANAGE_API_KEYS}

campaign-launcher/client/src/api/launcherApiClient.ts

@@ -29,7 +29,7 @@ export class LauncherApiClient extends HttpClient {
   }
 
   async getCampaigns(
-    params: Record<string, string | number>,
+    params: Record<string, string | number | string[]>,
     signal?: AbortSignal
   ): Promise<CampaignsResponse> {
     const response = await this.get<CampaignsResponse>('/campaigns', {

campaign-launcher/client/src/api/recordingApiClient.ts

@@ -9,9 +9,10 @@ import axios, { AxiosError } from 'axios';
 import type {
   EvmAddress,
   ExchangeApiKeyData,
-  CampaignsResponse,
   UserProgress,
   CheckCampaignJoinStatusResponse,
+  JoinedCampaignsResponse,
+  LeaderboardResponseDto,
 } from '@/types';
 import { HttpClient, HttpError } from '@/utils/HttpClient';
 import type { TokenData, TokenManager } from '@/utils/TokenManager';
@@ -162,10 +163,10 @@ export class RecordingApiClient extends HttpClient {
   }
 
   async getJoinedCampaigns(
-    params: Record<string, string | number>,
+    params: Record<string, string | number | string[]>,
     signal?: AbortSignal
-  ): Promise<CampaignsResponse> {
-    const response = await this.get<CampaignsResponse>('/campaigns', {
+  ): Promise<JoinedCampaignsResponse> {
+    const response = await this.get<JoinedCampaignsResponse>('/campaigns', {
       params,
       signal,
     });
@@ -219,4 +220,14 @@ export class RecordingApiClient extends HttpClient {
 
     return response || null;
   }
+
+  async getLeaderboard(
+    chain_id: ChainId,
+    campaign_address: string
+  ): Promise<LeaderboardResponseDto> {
+    const response = await this.get<LeaderboardResponseDto>(
+      `/campaigns/${chain_id}-${campaign_address}/leaderboard`
+    );
+    return response;
+  }
 }

campaign-launcher/client/src/components/AboutHuFi/index.tsx

@@ -0,0 +1,68 @@
+import { type FC } from 'react';
+
+import { Link, Stack, Typography } from '@mui/material';
+
+import logo from '@/assets/logo.svg';
+import { useIsMobile } from '@/hooks/useBreakpoints';
+import { ArrowLeftIcon } from '@/icons';
+
+const DOCS_URL = import.meta.env.VITE_APP_DOCS_URL;
+
+const AboutHuFi: FC = () => {
+  const isMobile = useIsMobile();
+
+  return (
+    <Stack gap={{ xs: 2, md: 3 }}>
+      <Typography
+        variant={isMobile ? 'h6' : 'h5'}
+        color="white"
+        fontWeight={{ xs: 500, md: 800 }}
+        letterSpacing={{ xs: '0px', md: '-0.5px' }}
+      >
+        About HuFi
+      </Typography>
+      <Stack
+        px={2}
+        py={{ xs: 2, md: 4 }}
+        borderRadius="8px"
+        border="1px solid #433679"
+        bgcolor="#251d47"
+      >
+        {!isMobile && <img src={logo} alt="HuFi" width={125} />}
+        <Typography
+          variant="body2"
+          color="white"
+          fontWeight={600}
+          mt={{ xs: 0, md: 4 }}
+          mb={2}
+        >
+          HuFi is a decentralized tradeathon organizing platform where
+          communities earn rewards for holding, trading, and contributing to
+          activities that support the token&apos;s growth.
+        </Typography>
+        <Link
+          href={DOCS_URL}
+          target="_blank"
+          rel="noreferrer"
+          sx={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            width: 'fit-content',
+            color: 'error.main',
+            fontSize: 16,
+            fontWeight: 500,
+            textDecoration: 'underline',
+            textDecorationColor: 'error.main',
+          }}
+        >
+          Learn More
+          <ArrowLeftIcon
+            sx={{ width: 24, height: 24, transform: 'rotate(135deg)' }}
+          />
+        </Link>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default AboutHuFi;

campaign-launcher/client/src/components/AllCampaigns/index.tsx

@@ -1,53 +1,82 @@
-import type { FC } from 'react';
+import { useEffect, useState, type FC } from 'react';
 
-import { CircularProgress } from '@mui/material';
+import { Box, Button } from '@mui/material';
 
-import CampaignsTable from '@/components/CampaignsTable';
-import CampaignsTablePagination from '@/components/CampaignsTablePagination';
+import CampaignsEmptyState from '@/components/CampaignsEmptyState';
+import CampaignsFeed from '@/components/CampaignsFeed';
 import { useCampaigns } from '@/hooks/useCampaigns';
-import usePagination from '@/hooks/usePagination';
-import { useNetwork } from '@/providers/NetworkProvider';
-import { CampaignStatus, type CampaignsQueryParams } from '@/types';
-import { filterFalsyQueryParams } from '@/utils';
+import { type Campaign, type CampaignsQueryParams } from '@/types';
+import { appendUniqueCampaigns } from '@/utils';
 
 type Props = {
-  showOnlyActiveCampaigns: boolean;
+  queryParams: CampaignsQueryParams;
+  hasActiveFilters: boolean;
+  isGridView: boolean;
+  isHistory: boolean;
+  setNextPage: () => void;
 };
 
-const AllCampaigns: FC<Props> = ({ showOnlyActiveCampaigns }) => {
-  const { appChainId } = useNetwork();
-  const { params, pagination, setPageSize, setNextPage, setPrevPage } =
-    usePagination();
-  const { limit, skip } = params;
-  const { page, pageSize } = pagination;
-
-  const queryParams = filterFalsyQueryParams({
-    chain_id: appChainId,
-    status: showOnlyActiveCampaigns ? CampaignStatus.ACTIVE : undefined,
-    limit,
-    skip,
-  }) as CampaignsQueryParams;
+const AllCampaigns: FC<Props> = ({
+  queryParams,
+  hasActiveFilters,
+  isGridView,
+  isHistory,
+  setNextPage,
+}) => {
+  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
 
   const { data, isLoading, isFetching } = useCampaigns(queryParams);
 
+  const currentSkip = queryParams.skip ?? 0;
+
+  useEffect(() => {
+    if (!data) return;
+
+    setCampaigns((prev) => {
+      if (currentSkip === 0) return data.results;
+      if (isFetching) return prev;
+      return appendUniqueCampaigns(prev, data.results);
+    });
+  }, [data, currentSkip, isFetching]);
+
+  const showLoadMore = isLoading || isFetching || data?.has_more;
+
+  const showEmptyState = !isLoading && !isFetching && campaigns.length === 0;
+
   return (
     <>
-      {isLoading && (
-        <CircularProgress sx={{ width: '40px', height: '40px', mx: 'auto' }} />
+      {showEmptyState ? (
+        <CampaignsEmptyState
+          view="all"
+          hasActiveFilters={hasActiveFilters}
+          isHistory={isHistory}
+        />
+      ) : (
+        <CampaignsFeed
+          data={campaigns}
+          isGridView={isGridView}
+          isLoading={isLoading}
+          isFetching={isFetching}
+        />
       )}
-      {!isLoading && (
-        <>
-          <CampaignsTable data={data?.results || []} isFetching={isFetching} />
-          <CampaignsTablePagination
-            page={page}
-            resultsLength={data?.results?.length || 0}
-            hasMore={data?.has_more}
-            pageSize={pageSize}
-            setPageSize={setPageSize}
-            setNextPage={setNextPage}
-            setPrevPage={setPrevPage}
-          />
-        </>
+      {showLoadMore && (
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          mx={{ xs: 0, md: 'auto' }}
+          mt={4}
+        >
+          <Button
+            variant="contained"
+            color="error"
+            disabled={isFetching || isLoading}
+            sx={{ width: { xs: '100%', md: '200px' } }}
+            onClick={setNextPage}
+          >
+            Load More
+          </Button>
+        </Box>
       )}
     </>
   );

campaign-launcher/client/src/components/CampaignAddress/index.tsx

@@ -24,8 +24,6 @@ const AddressLink: FC<Props> = ({ address, chainId, size }) => {
           size === 'small' ? '12px' : size === 'medium' ? '14px' : '16px',
         color: 'text.primary',
         textDecoration: 'underline',
-        textDecorationStyle: 'dotted',
-        textDecorationThickness: '12%',
         fontWeight: 600,
       }}
     >

campaign-launcher/client/src/components/CampaignCard/SkeletonView.tsx

@@ -0,0 +1,47 @@
+import { Paper, Skeleton, Stack } from '@mui/material';
+
+const SkeletonCard = () => {
+  return (
+    <Paper
+      sx={{
+        display: 'flex',
+        p: 2,
+        gap: 1.5,
+        flexDirection: 'column',
+        bgcolor: '#251d47',
+        borderRadius: '8px',
+        border: '1px solid #433679',
+        boxShadow: 'none',
+      }}
+    >
+      <Stack direction="row" justifyContent="space-between" alignItems="center">
+        <Skeleton variant="text" width={140} height={28} />
+        <Skeleton variant="text" width={125} height={28} />
+      </Stack>
+      <Stack justifyContent="center" gap={1}>
+        <Skeleton variant="text" width={150} height={30} />
+        <Skeleton variant="text" width={150} height={20} />
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        gap={2}
+      >
+        <Skeleton variant="rectangular" height={90} sx={{ flex: 1 }} />
+        <Skeleton variant="rectangular" height={90} sx={{ flex: 1 }} />
+      </Stack>
+      <Stack
+        direction="row"
+        justifyContent="space-between"
+        alignItems="center"
+        gap={2}
+      >
+        <Skeleton variant="rectangular" height={44} sx={{ flex: 1 }} />
+        <Skeleton variant="rectangular" height={44} sx={{ flex: 1 }} />
+      </Stack>
+    </Paper>
+  );
+};
+
+export default SkeletonCard;