Merge commit '2cadf283771310006491222794c008c22054e812' into fix-routing

apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx

@@ -5,6 +5,7 @@ import {
   CurrencyDollarIcon,
   PlusIcon,
   RectangleGroupIcon,
+  UserGroupIcon,
 } from "@heroicons/react/24/outline";
 import { Dnum } from "dnum";
 import Image from "next/image";
@@ -199,7 +200,11 @@ export default function Page({
             <EthAddress address={communityAddr as Address} />
           </div>
           <div className="flex flex-col gap-2">
-            <Statistic label="members" count={members?.length ?? 0} />
+            <Statistic
+              label="members"
+              count={members?.length ?? 0}
+              icon={<UserGroupIcon />}
+            />
             <Statistic
               label="pools"
               icon={<RectangleGroupIcon />}
@@ -214,12 +219,11 @@ export default function Page({
             </Statistic>
             <div className="flex">
               <p className="font-medium">Registration cost:</p>
-              <InfoIcon content={`Registration amount: ${parseToken(registrationAmount)} ${tokenGarden.symbol}\nCommunity fee: ${parseToken(parsedCommunityFee())} ${tokenGarden.symbol}`}>
+              <InfoIcon
+                content={`Registration amount: ${parseToken(registrationAmount)} ${tokenGarden.symbol}\nCommunity fee: ${parseToken(parsedCommunityFee())} ${tokenGarden.symbol}`}
+              >
                 <DisplayNumber
-                  number={[
-                    getTotalRegistrationCost(),
-                    tokenGarden?.decimals,
-                  ]}
+                  number={[getTotalRegistrationCost(), tokenGarden?.decimals]}
                   className="font-semibold text-primary-content"
                   disableTooltip={true}
                   compact={true}
@@ -274,6 +278,7 @@ export default function Page({
                 key={pool.poolId}
                 tokenGarden={{
                   decimals: tokenGarden?.decimals ?? 18,
+                  symbol: tokenGarden?.symbol ?? "",
                 }}
                 pool={pool}
               />
@@ -289,6 +294,7 @@ export default function Page({
               <PoolCard
                 key={pool.poolId}
                 tokenGarden={{
+                  symbol: tokenGarden?.symbol ?? "",
                   decimals: tokenGarden?.decimals ?? 18,
                 }}
                 pool={pool}
@@ -306,6 +312,7 @@ export default function Page({
                 key={pool.poolId}
                 tokenGarden={{
                   decimals: tokenGarden?.decimals ?? 18,
+                  symbol: tokenGarden?.symbol ?? "",
                 }}
                 pool={pool}
               />

apps/web/app/(app)/gardens/[chain]/[garden]/page.tsx

@@ -1,7 +1,11 @@
 "use client";
 
 import React, { useEffect } from "react";
-import { CubeTransparentIcon, PlusIcon } from "@heroicons/react/24/outline";
+import {
+  CubeTransparentIcon,
+  PlusIcon,
+  UserGroupIcon,
+} from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
 import { Address } from "viem";
@@ -110,7 +114,8 @@ export default function Page({
           <div>
             <div className="mb-2 flex flex-col">
               <div className="flex items-center gap-4">
-                <h2>{tokenGarden?.name}</h2> <TokenLabel chainId={chain} />
+                <h2>{tokenGarden?.name}</h2>{" "}
+                <TokenLabel chainId={chain} classNames="bg-neutral-soft" />
               </div>
               <EthAddress address={tokenGarden?.id as Address} />
             </div>
@@ -128,7 +133,11 @@ export default function Page({
               icon={<CubeTransparentIcon />}
               count={communities?.length ?? 0}
             />
-            <Statistic label="members" count={gardenTotalMembers()} />
+            <Statistic
+              label="members"
+              count={gardenTotalMembers()}
+              icon={<UserGroupIcon />}
+            />
           </div>
         </div>
       </header>