Hu-Fi · KirillKirill · Feb 27, 2026
diff --git a/campaign-launcher/client/index.html b/campaign-launcher/client/index.html
@@ -15,14 +15,6 @@
     <meta name="twitter:description" content="HuFi Campaign Launcher" />
     <meta name="twitter:image" content="/site-preview.png" />
     <link rel="manifest" href="/manifest.json" />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800&display=swap"
-    />
-    <link
-      rel="stylesheet"
-      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,800&display=swap"
-    />
     <title>HuFi</title>
   </head>
   <body>

diff --git a/campaign-launcher/client/package.json b/campaign-launcher/client/package.json
@@ -26,7 +26,6 @@
     "@mui/x-data-grid": "^8.21.0",
     "@mui/x-date-pickers": "^8.21.0",
     "@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",

diff --git a/campaign-launcher/client/public/tableImage.png b/campaign-launcher/client/public/tableImage.png
diff --git a/campaign-launcher/client/src/App.tsx b/campaign-launcher/client/src/App.tsx
@@ -23,6 +23,8 @@ import ThemeProvider from '@/providers/ThemeProvider';
 import WagmiProvider from '@/providers/WagmiProvider';
 import { Web3AuthProvider } from '@/providers/Web3AuthProvider';
 
+import './index.css';
+
 const App: FC = () => {
   return (
     <WagmiProvider>

diff --git a/campaign-launcher/client/src/assets/fonts/Inter.woff2 b/campaign-launcher/client/src/assets/fonts/Inter.woff2
diff --git a/campaign-launcher/client/src/assets/metamask.svg b/campaign-launcher/client/src/assets/metamask.svg
diff --git a/campaign-launcher/client/src/components/CampaignInfo/index.tsx b/campaign-launcher/client/src/components/CampaignInfo/index.tsx
@@ -1,4 +1,4 @@
-import { useState, type FC } from 'react';
+import { lazy, Suspense, useState, type FC } from 'react';
 
 import { Box, Button, Skeleton, Stack, Typography } from '@mui/material';
 
@@ -7,13 +7,14 @@ import CampaignStatusLabel from '@/components/CampaignStatusLabel';
 import CampaignTypeLabel from '@/components/CampaignTypeLabel';
 import CustomTooltip from '@/components/CustomTooltip';
 import JoinCampaign from '@/components/JoinCampaign';
-import ChartModal from '@/components/modals/ChartModal';
 import { useIsMobile } from '@/hooks/useBreakpoints';
 import { CalendarIcon } from '@/icons';
 import type { CampaignDetails, CampaignJoinStatus } from '@/types';
 import { getChainIcon, getNetworkName } from '@/utils';
 import dayjs from '@/utils/dayjs';
 
+const ChartModal = lazy(() => import('@/components/modals/ChartModal'));
+
 const formatDate = (dateString: string): string => {
   return dayjs(dateString).format('D MMM YYYY');
 };
@@ -136,11 +137,13 @@ const CampaignInfo: FC<Props> = ({
           >
             Paid Amount Chart
           </Button>
-          <ChartModal
-            open={isChartModalOpen}
-            onClose={() => setIsChartModalOpen(false)}
-            campaign={campaign}
-          />
+          <Suspense fallback={null}>
+            <ChartModal
+              open={isChartModalOpen}
+              onClose={() => setIsChartModalOpen(false)}
+              campaign={campaign}
+            />
+          </Suspense>
         </Box>
       )}
     </Box>

diff --git a/campaign-launcher/client/src/components/CampaignStats/index.tsx b/campaign-launcher/client/src/components/CampaignStats/index.tsx
@@ -1,4 +1,11 @@
-import { type FC, type PropsWithChildren, Children, useState } from 'react';
+import {
+  type FC,
+  type PropsWithChildren,
+  Children,
+  lazy,
+  Suspense,
+  useState,
+} from 'react';
 
 import { Box, Button, Skeleton, styled, Typography, Grid } from '@mui/material';
 
@@ -21,7 +28,7 @@ import {
   getTokenInfo,
 } from '@/utils';
 
-import ChartModal from '../modals/ChartModal';
+const ChartModal = lazy(() => import('@/components/modals/ChartModal'));
 
 type Props = {
   campaign: CampaignDetails | null | undefined;
@@ -377,11 +384,13 @@ const CampaignStats: FC<Props> = ({
           >
             Paid Amount Chart
           </Button>
-          <ChartModal
-            open={isChartModalOpen}
-            onClose={() => setIsChartModalOpen(false)}
-            campaign={campaign}
-          />
+          <Suspense fallback={null}>
+            <ChartModal
+              open={isChartModalOpen}
+              onClose={() => setIsChartModalOpen(false)}
+              campaign={campaign}
+            />
+          </Suspense>
         </>
       )}
     </>

diff --git a/campaign-launcher/client/src/components/CampaignSymbol/index.tsx b/campaign-launcher/client/src/components/CampaignSymbol/index.tsx
@@ -15,7 +15,7 @@ export const getSymbolStyles = (size: 'xs' | 'small' | 'medium' | 'large') => {
     case 'xs':
       return {
         image: {
-          width: 16,
+          size: 16,
           border: '1px solid white',
         },
         text: {
@@ -26,7 +26,7 @@ export const getSymbolStyles = (size: 'xs' | 'small' | 'medium' | 'large') => {
     case 'small':
       return {
         image: {
-          width: 24,
+          size: 24,
           border: '1px solid white',
         },
         text: {
@@ -37,7 +37,7 @@ export const getSymbolStyles = (size: 'xs' | 'small' | 'medium' | 'large') => {
     case 'medium':
       return {
         image: {
-          width: 32,
+          size: 32,
           border: '1px solid white',
         },
         text: {
@@ -48,7 +48,7 @@ export const getSymbolStyles = (size: 'xs' | 'small' | 'medium' | 'large') => {
     case 'large':
       return {
         image: {
-          width: 72,
+          size: 72,
           border: '2px solid white',
         },
         text: {
@@ -60,7 +60,7 @@ export const getSymbolStyles = (size: 'xs' | 'small' | 'medium' | 'large') => {
     default:
       return {
         image: {
-          width: 24,
+          size: 24,
           border: '1px solid white',
         },
         text: {

diff --git a/campaign-launcher/client/src/components/ConnectWallet/index.tsx b/campaign-launcher/client/src/components/ConnectWallet/index.tsx
@@ -10,28 +10,23 @@ import {
 } from 'wagmi';
 
 import coinbaseSvg from '@/assets/coinbase.svg';
-import metaMaskSvg from '@/assets/metamask.svg';
 import walletConnectSvg from '@/assets/walletconnect.svg';
 import BaseModal from '@/components/modals/BaseModal';
 import { useIsMobile } from '@/hooks/useBreakpoints';
 import { useActiveAccount } from '@/providers/ActiveAccountProvider';
 import { useWeb3Auth } from '@/providers/Web3AuthProvider';
 
 const WALLET_ICONS: Record<string, string> = {
-  metaMask: metaMaskSvg,
   coinbaseWalletSDK: coinbaseSvg,
   walletConnect: walletConnectSvg,
 };
 
-const ConnectWallet: FC = () => {
-  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
-
-  const connect = useConnect();
+const Content: FC<{ onClose: () => void }> = ({ onClose }) => {
+  const isMobile = useIsMobile();
   const connectors = useConnectors();
-  const { isConnecting } = useActiveAccount();
-  const { setShowSignInPrompt } = useWeb3Auth();
+  const connect = useConnect();
   const disconnect = useDisconnect();
-  const isMobile = useIsMobile();
+  const { setShowSignInPrompt } = useWeb3Auth();
 
   const handleConnect = async (connector: Connector) => {
     try {
@@ -50,59 +45,64 @@ const ConnectWallet: FC = () => {
     }
   };
 
+  return (
+    <>
+      <Box
+        width="100%"
+        display="flex"
+        flexDirection="column"
+        gap={1}
+        mt={{ xs: 2, md: 0 }}
+      >
+        {connectors.map((connector) => (
+          <Button
+            key={connector.id}
+            sx={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              px: 3,
+              py: 2,
+              bgcolor: 'rgba(255, 255, 255, 0.09)',
+              color: 'text.primary',
+              borderRadius: '4px',
+            }}
+            onClick={() => {
+              handleConnect(connector);
+              if (isMobile) {
+                onClose();
+              }
+            }}
+          >
+            <img
+              src={connector.icon ?? WALLET_ICONS[connector.id]}
+              alt={connector.id}
+              width={24}
+              height={24}
+            />
+            <span>{connector.name}</span>
+          </Button>
+        ))}
+      </Box>
+      <Typography color="text.primary" fontSize={11} mt={1.5}>
+        By connecting a wallet, you agree to HUMAN Protocol Terms of Service and
+        consent to its Privacy Policy.
+      </Typography>
+    </>
+  );
+};
+
+const ConnectWallet: FC = () => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+
+  const { isConnecting } = useActiveAccount();
+  const isMobile = useIsMobile();
+
   const handleConnectWalletButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
     setAnchorEl(e.currentTarget);
   };
 
   const onClose = () => setAnchorEl(null);
 
-  const renderContent = () => {
-    return (
-      <>
-        <Box
-          width="100%"
-          display="flex"
-          flexDirection="column"
-          gap={1}
-          mt={{ xs: 2, md: 0 }}
-        >
-          {connectors.map((connector) => (
-            <Button
-              key={connector.id}
-              sx={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                px: 3,
-                py: 2,
-                bgcolor: 'rgba(255, 255, 255, 0.09)',
-                color: 'text.primary',
-                borderRadius: '4px',
-              }}
-              onClick={() => {
-                handleConnect(connector);
-                if (isMobile) {
-                  onClose();
-                }
-              }}
-            >
-              <img
-                src={connector.icon ?? WALLET_ICONS[connector.id]}
-                alt={connector.id}
-                width={24}
-                height={24}
-              />
-              <span>{connector.name}</span>
-            </Button>
-          ))}
-        </Box>
-        <Typography color="text.primary" fontSize={11} mt={1.5}>
-          By connecting a wallet, you agree to HUMAN Protocol Terms of Service
-          and consent to its Privacy Policy.
-        </Typography>
-      </>
-    );
-  };
-
   return (
     <>
       <Button
@@ -121,7 +121,7 @@ const ConnectWallet: FC = () => {
           elevation={4}
           sx={{ px: 2 }}
         >
-          {renderContent()}
+          <Content onClose={onClose} />
         </BaseModal>
       ) : (
         <Popover
@@ -157,7 +157,7 @@ const ConnectWallet: FC = () => {
               <CloseIcon sx={{ color: 'primary.main' }} />
             </IconButton>
           </Box>
-          {renderContent()}
+          <Content onClose={onClose} />
         </Popover>
       )}
     </>

diff --git a/campaign-launcher/client/src/components/CryptoEntity/index.tsx b/campaign-launcher/client/src/components/CryptoEntity/index.tsx
@@ -20,7 +20,8 @@ const CryptoEntity: FC<Props> = ({ symbol, size = 'small' }) => {
           component="img"
           src={icon}
           alt={label}
-          width={getSymbolStyles(size).image.width}
+          width={getSymbolStyles(size).image.size}
+          height={getSymbolStyles(size).image.size}
           border={getSymbolStyles(size).image.border}
           borderRadius="100%"
         />

diff --git a/campaign-launcher/client/src/components/CryptoPairEntity/index.tsx b/campaign-launcher/client/src/components/CryptoPairEntity/index.tsx
@@ -26,16 +26,20 @@ const CryptoPairEntity: FC<Props> = ({ symbol, size = 'small' }) => {
             component="img"
             src={baseIcon}
             alt={baseLabel}
+            width={getSymbolStyles(size).image.size}
+            height={getSymbolStyles(size).image.size}
+            border={getSymbolStyles(size).image.border}
             borderRadius="100%"
-            {...getSymbolStyles(size).image}
           />
           <Box
             component="img"
             src={quoteIcon}
             alt={quoteLabel}
-            marginLeft={isLarge ? -4 : -2}
+            ml={isLarge ? -4 : -2}
+            width={getSymbolStyles(size).image.size}
+            height={getSymbolStyles(size).image.size}
+            border={getSymbolStyles(size).image.border}
             borderRadius="100%"
-            {...getSymbolStyles(size).image}
           />
         </>
       )}