chore: mobile dashboard update

apps/frontend/src/components/DashboardView/AssetsTable/BorrowTable.tsx

@@ -381,7 +381,7 @@ export const BorrowTable = () => {
                   <div className="w-1/2 text-moon font-medium">
                     Borrow Points
                   </div>
-                  <PointIcons points={POINTS_BORROW} />
+                  <PointIcons points={POINTS_BORROW} mobile />
                 </div>
               </div>
             </CardContent>

apps/frontend/src/components/DashboardView/AssetsTable/CollateralTable.tsx

@@ -13,6 +13,7 @@ import {
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
+import { Progress } from '@/components/ui/progress';
 import { Skeleton } from '@/components/ui/skeleton';
 import {
   Table,
@@ -206,12 +207,69 @@ const CollateralTableRow = ({
         {formattedBalance} {symbol}
       </TableCell>
       <TableCell>
-        <div className="w-[48px] h-[48px]">
-          <CircularProgressBar percent={supplyUsed.div(100)} />
-        </div>
+        <TooltipProvider delayDuration={100}>
+          <Tooltip>
+            <TooltipTrigger onClick={(e) => e.preventDefault()}>
+              <div className="w-[48px] h-[48px]">
+                <CircularProgressBar percent={supplyUsed.div(100)} />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent onPointerDownOutside={(e) => e.preventDefault()}>
+              <div className="p-2 w-[250px]">
+                <div className="font-bold text-lg">
+                  Collateral Supply Details
+                </div>
+                <div className="flex flex-col gap-y-2 mt-2">
+                  <div className="text-md flex justify-between">
+                    <div className="text-lavender">Supply Cap</div>
+                    <div className="font-semibold text-moon">
+                      {getFormattedNumber(
+                        formatUnits(
+                          BigNumber(
+                            collateralConfiguration.supply_cap.toString()
+                          ),
+                          decimals
+                        )
+                      )}{' '}
+                      {appConfig.assets[assetId]}
+                    </div>
+                  </div>
+                  <div className="text-md flex justify-between">
+                    <div className="text-lavender">Supply Cap Value</div>
+                    <div className="font-semibold text-moon">
+                      {getFormattedNumber(
+                        formatUnits(
+                          BigNumber(
+                            collateralConfiguration.supply_cap.toString()
+                          ),
+                          decimals
+                        ).times(price)
+                      )}
+                      {' $'}
+                    </div>
+                  </div>
+                  <div className="text-md flex justify-between">
+                    <div className="text-lavender">Total Supplied</div>
+                    <div className="font-semibold text-moon">
+                      {getFormattedNumber(collateralAmount)}{' '}
+                      {appConfig.assets[assetId]}
+                    </div>
+                  </div>
+                  <div className="text-md flex justify-between">
+                    <div className="text-lavender">Total Supplied Value</div>
+                    <div className="font-semibold text-moon">
+                      {getFormattedNumber(collateralAmount.times(price))}
+                      {' $'}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </TableCell>
       <TableCell>
-        <div className=" h-full flex items-center gap-x-2">
+        <div className="h-full flex items-center gap-x-2">
           <span className="text-lavender font-medium">
             {getFormattedPrice(
               formatUnits(protocolBalance, decimals).times(price)
@@ -221,7 +279,7 @@ const CollateralTableRow = ({
         </div>
       </TableCell>
       <TableCell>
-        <div className=" h-full flex items-center gap-x-2">
+        <div className="h-full flex items-center gap-x-2">
           <PointIcons
             points={[
               ...(symbol === 'USDT' || symbol === 'ETH'
@@ -319,10 +377,13 @@ const CollateralCard = ({
           </div>
           <div className="w-full flex items-center">
             <div className="w-1/2 text-moon font-medium">
-              Supply Cap Reached
+              Supply Cap
+              <br />
+              Reached
             </div>
-            <div className="w-[48px] h-[48px]">
-              <CircularProgressBar percent={supplyUsed.div(100)} />
+            <div className="w-[30%] h-[48px] flex items-center gap-x-2">
+              {Number(supplyUsed.decimalPlaces(1))}%
+              <Progress value={Number(supplyUsed)} />
             </div>
           </div>
           <div className="w-full flex items-center">
@@ -348,6 +409,7 @@ const CollateralCard = ({
                   : [POINTS_COLLATERAL[1]]),
                 POINTS_COLLATERAL[2],
               ]}
+              mobile
             />
           </div>
         </div>

apps/frontend/src/components/DashboardView/AssetsTable/LendTable.tsx

@@ -359,7 +359,7 @@ export const LendTable = () => {
                   <div className="w-1/2 text-moon font-medium">
                     Supply Points
                   </div>
-                  <PointIcons points={POINTS_LEND} />
+                  <PointIcons points={POINTS_LEND} mobile />
                 </div>
               </div>
             </CardContent>

apps/frontend/src/components/LeaderboardView/index.tsx

@@ -11,7 +11,7 @@ export const LeaderboardView = () => {
 
   return (
     <>
-      <div className="hidden lg:flex pt-[33px] sm:pt-[55px] pb-[55px] w-full items-center justify-center">
+      <div className="flex pt-[33px] sm:pt-[55px] pb-[55px] w-full items-center justify-center">
         <div className="flex flex-col items-center justify-center max-w-[750px] lg:w-[750px]">
           <div className="text-xl font-semibold text-white">
             Swaylend Leaderboard
@@ -26,27 +26,27 @@ export const LeaderboardView = () => {
               <div className="w-full mt-[30px] flex justify-between bg-card p-4 rounded-xl">
                 <div>
                   <div className="text-moon font-semibold">Your Rank</div>
-                  <div className="text-primary text-2xl font-semibold">
+                  <div className="text-primary font-semibold text-xl md:text-2xl">
                     {user?.rank === 0 ? (
-                      <span className="text-xl">Unranked</span>
+                      <span className="text-lg md:text-xl">Unranked</span>
                     ) : (
                       user?.rank
                     )}
                   </div>
                 </div>
                 <div className="flex flex-col items-end">
                   <div className="text-moon font-semibold">Your Points</div>
-                  <div className="text-white text-2xl font-semibold text-right">
+                  <div className="text-white font-semibold text-right text-xl md:text-2xl">
                     {user ? user.points : '0'}
                   </div>
                 </div>
               </div>
             ))}
-          <div className="w-full mt-[55px] flex justify-between">
+          <div className="max-sm:flex max-sm:flex-col max-sm:text-center w-full mt-[55px] flex justify-between">
             <div className="text-lg text-white font-semibold">
               Top Contributors
             </div>
-            <div className="text-sm text-yellow-100 flex items-center px-2">
+            <div className="text-sm text-yellow-100 flex items-center sm:px-2 max-sm:justify-center">
               <TriangleAlert className="w-4 h-4 mr-1" /> Points are updated
               every 24 hours
             </div>
@@ -75,7 +75,15 @@ export const LeaderboardView = () => {
                           {user.rank}
                         </td>
                         <td className="px-4 py-2 text-left text-lavender font-semibold">
-                          {user.address}
+                          <span className="md:hidden">{`${user.address.slice(
+                            0,
+                            6
+                          )}...${user.address.slice(-4)}`}</span>
+                          <span className="max-md:hidden lg:hidden">{`${user.address.slice(
+                            0,
+                            14
+                          )}...${user.address.slice(-14)}`}</span>
+                          <span className="max-lg:hidden">{user.address}</span>
                         </td>
                         <td className="px-4 py-2 text-right text-lavender font-semibold">
                           {user.points}
@@ -89,9 +97,9 @@ export const LeaderboardView = () => {
           </table>
         </div>
       </div>
-      <div className="lg:hidden w-full h-[60dvh] flex items-center justify-center">
+      {/* <div className="lg:hidden w-full h-[60dvh] flex items-center justify-center">
         This page is not supported on this screen size.
-      </div>
+      </div> */}
     </>
   );
 };

apps/frontend/src/components/PointIcons/index.tsx

@@ -18,9 +18,10 @@ export type Point = {
 
 type PointIconsProps = {
   points: Point[];
+  mobile?: boolean;
 };
 
-export const PointIcons = ({ points }: PointIconsProps) => {
+export const PointIcons = ({ points, mobile = false }: PointIconsProps) => {
   return (
     <div className="flex items-center">
       {points.map((point: Point) => {
@@ -57,6 +58,8 @@ export const PointIcons = ({ points }: PointIconsProps) => {
                 </TooltipTrigger>
                 <TooltipContent
                   onPointerDownOutside={(e) => e.preventDefault()}
+                  className={mobile ? 'w-64' : 'w-128'}
+                  align="center"
                 >
                   <div className="p-1">
                     <div className="font-bold">{point.name}</div>

apps/frontend/src/components/Providers/FuelProviderWrapper.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import 'react-toastify/dist/ReactToastify.css';
+
+import { appConfig } from '@/configs';
+import { isMobile } from '@/utils/isMobile';
+import {
+  BakoSafeConnector,
+  BurnerWalletConnector,
+  FuelWalletConnector,
+  FuelWalletDevelopmentConnector,
+  FueletWalletConnector,
+  SolanaConnector,
+  WalletConnectConnector,
+  createConfig,
+} from '@fuels/connectors';
+import { FuelProvider } from '@fuels/react';
+import { CHAIN_IDS, type FuelConnector, Provider } from 'fuels';
+import { type ReactNode } from 'react';
+import { fallback } from 'viem';
+import { http, createConfig as createConfigWagmiConfig } from 'wagmi';
+import { mainnet, sepolia } from 'wagmi/chains';
+import { coinbaseWallet, injected, walletConnect } from 'wagmi/connectors';
+
+const METADATA = {
+  name: 'Swaylend',
+  description: 'Swaylend',
+  url: 'https://app.swaylend.com',
+  icons: ['https://app.swaylend.com/logo512.png'],
+};
+
+const UI_CONFIG = {
+  suggestBridge: false,
+};
+const NETWORKS = [
+  appConfig.env === 'testnet'
+    ? {
+        bridgeURL: `${appConfig.client.fuelExplorerUrl}/bridge`,
+        url: appConfig.client.fuelNodeUrl,
+        chainId: CHAIN_IDS.fuel.testnet,
+      }
+    : {
+        bridgeURL: `${appConfig.client.fuelExplorerUrl}/bridge`,
+        url: appConfig.client.fuelNodeUrl,
+        chainId: CHAIN_IDS.fuel.mainnet,
+      },
+];
+
+const wagmiConfig = createConfigWagmiConfig({
+  chains: [mainnet, sepolia],
+  connectors: [
+    injected({ shimDisconnect: false }),
+    walletConnect({
+      projectId: appConfig.client.walletConnectProjectId,
+      metadata: METADATA,
+      showQrModal: false,
+    }),
+    coinbaseWallet({
+      appName: METADATA.name,
+      appLogoUrl: METADATA.icons[0],
+      darkMode: true,
+      reloadOnDisconnect: true,
+    }),
+  ],
+  transports: {
+    [mainnet.id]: fallback([
+      http(
+        `https://eth-mainnet.g.alchemy.com/v2/${appConfig.client.alchemyId}`
+      ),
+    ]),
+    [sepolia.id]: fallback([
+      http(
+        `https://eth-sepolia.g.alchemy.com/v2/${appConfig.client.alchemyId}`
+      ),
+    ]),
+  },
+});
+
+const customDefaultConnectors = (): Array<FuelConnector> => {
+  const provider = Provider.create(appConfig.client.fuelNodeUrl);
+  const connectors: Array<FuelConnector> = [
+    new FueletWalletConnector(),
+    new WalletConnectConnector({
+      projectId: appConfig.client.walletConnectProjectId,
+      wagmiConfig: wagmiConfig,
+      chainId:
+        appConfig.env === 'testnet'
+          ? CHAIN_IDS.fuel.testnet
+          : CHAIN_IDS.fuel.mainnet,
+      fuelProvider: provider,
+    }),
+    new SolanaConnector({
+      projectId: appConfig.client.walletConnectProjectId,
+      chainId:
+        appConfig.env === 'testnet'
+          ? CHAIN_IDS.fuel.testnet
+          : CHAIN_IDS.fuel.mainnet,
+      fuelProvider: provider,
+    }),
+    // Add desktop only connectors
+    ...(!isMobile(navigator.userAgent)
+      ? [new FuelWalletConnector(), new BakoSafeConnector()]
+      : []),
+  ];
+
+  if (appConfig.env === 'testnet') {
+    connectors.push(
+      new FuelWalletDevelopmentConnector(),
+      new BurnerWalletConnector({
+        chainId: CHAIN_IDS.fuel.testnet,
+        fuelProvider: provider,
+      })
+    );
+  }
+
+  return connectors;
+};
+
+const FUEL_CONFIG = createConfig(() => ({
+  connectors: customDefaultConnectors(),
+}));
+
+export const FuelProviderWrapper = ({ children }: { children: ReactNode }) => {
+  return (
+    <FuelProvider
+      theme="dark"
+      uiConfig={UI_CONFIG}
+      networks={NETWORKS}
+      fuelConfig={FUEL_CONFIG}
+    >
+      {children}
+    </FuelProvider>
+  );
+};