Merge pull request #278 from 1Hive/implement-breadcrumbs

Implement breadcrumbs

apps/web/app/(app)/gardens/[chain]/[garden]/[community]/pool/[poolId]/[proposalId]/page.tsx → apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx

@@ -230,7 +230,7 @@ export default function Proposal({
           <div>
             <div className="mb-4 flex flex-col items-start gap-4 sm:mb-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
               <h2>
-                {ipfsResult?.title} - Proposal #{proposalIdNumber}
+                {ipfsResult?.title} #{proposalIdNumber}
               </h2>
               <Badge type={proposalType} />
             </div>

apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/create-proposal/page.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { getPoolDataDocument, getPoolDataQuery } from "#/subgraph/.graphclient";
+import { ProposalForm } from "@/components/Forms";
+import LoadingSpinner from "@/components/LoadingSpinner";
+import useSubgraphQuery from "@/hooks/useSubgraphQuery";
+import { getIpfsMetadata } from "@/utils/ipfsUtils";
+import { MAX_RATIO_CONSTANT, CV_SCALE_PRECISION } from "@/utils/numbers";
+import React, { useEffect, useState } from "react";
+import { Address } from "viem";
+
+export default function Page({
+  params: { chain, poolId, garden },
+}: {
+  params: { chain: string; poolId: number; garden: string };
+}) {
+  const { data } = useSubgraphQuery<getPoolDataQuery>({
+    query: getPoolDataDocument,
+    variables: { poolId: poolId, garden: garden },
+  });
+  const strategyObj = data?.cvstrategies?.[0];
+
+  const [metadata, setMetadata] = useState({ title: "", description: "" });
+
+  useEffect(() => {
+    const fetchMetadata = async () => {
+      if (strategyObj?.metadata) {
+        const fetchedMetadata = await getIpfsMetadata(
+          strategyObj.metadata as string,
+        );
+        setMetadata(fetchedMetadata);
+      }
+    };
+
+    fetchMetadata();
+  }, [strategyObj]);
+
+  if (!strategyObj) {
+    return <div>{`Pool ${poolId} not found`}</div>;
+  }
+
+  const alloInfo = data?.allos[0];
+  const proposalType = strategyObj.config?.proposalType as number;
+  const poolAmount = strategyObj.poolAmount as number;
+  const tokenGarden = data.tokenGarden;
+
+  const maxRatioDivPrecision =
+    (Number(strategyObj.config?.maxRatio) / CV_SCALE_PRECISION) *
+    MAX_RATIO_CONSTANT;
+
+  const spendingLimitPct = maxRatioDivPrecision * 100;
+  const poolAmountSpendingLimit = poolAmount * maxRatioDivPrecision;
+
+  if (!tokenGarden) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <div className="page-layout">
+      <section className="section-layout">
+        <div className="text-center sm:mt-5">
+          <h2 className="text-xl font-semibold leading-6 text-gray-900">
+            Create a Proposal in Pool
+          </h2>
+          <div className="mt-1">
+            <p className="text-sm">{metadata.title}</p>
+          </div>
+        </div>
+        <ProposalForm
+          poolId={poolId}
+          proposalType={proposalType}
+          alloInfo={alloInfo}
+          tokenGarden={tokenGarden}
+          tokenAddress={garden as Address}
+          spendingLimit={poolAmountSpendingLimit}
+          spendingLimitPct={spendingLimitPct}
+          poolAmount={poolAmount}
+        />
+      </section>
+    </div>
+  );
+}

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

@@ -113,7 +113,7 @@ export default function Pool({
       <section className="section-layout flex flex-col gap-0 overflow-hidden">
         <header className="mb-2">
           <h2>
-            {ipfsResult.title} - Pool #{poolId}
+            {ipfsResult.title} #{poolId}
           </h2>
           <EthAddress address={strategyAddr} />
         </header>
@@ -181,7 +181,7 @@ export default function Pool({
             strategy={strategyObj}
             alloInfo={alloInfo}
             communityAddress={communityAddress}
-            createProposalUrl={`/gardens/${chain}/${garden}/pool/${poolId}/create-proposal`}
+            createProposalUrl={`/gardens/${chain}/${garden}/${poolId}/create-proposal`}
             proposalType={proposalType}
           />
         </>

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

@@ -26,21 +26,23 @@ export default function CreatePool({
   let communityName = result?.registryCommunity?.communityName as string;
 
   return result ? (
-    <div className="mx-auto flex max-w-[820px] flex-col items-center justify-center gap-4">
-      <div className="text-center sm:mt-5">
-        <h2 className="text-xl font-semibold leading-6 text-gray-900">
-          Create a Pool in {communityName} community
-        </h2>
-        {/* <div className="mt-1">
+    <div className="page-layout">
+      <section className="section-layout">
+        <div className="text-center sm:mt-5">
+          <h2 className="text-xl font-semibold leading-6 text-gray-900">
+            Create a Pool in {communityName} community
+          </h2>
+          {/* <div className="mt-1">
           <p className="text-sm">subtitle for pool form creation...</p>
         </div> */}
-      </div>
-      <PoolForm
-        alloAddr={alloAddr}
-        token={token as TokenGarden}
-        communityAddr={community as Address}
-        chainId={chain}
-      />
+        </div>
+        <PoolForm
+          alloAddr={alloAddr}
+          token={token as TokenGarden}
+          communityAddr={community as Address}
+          chainId={chain}
+        />
+      </section>
     </div>
   ) : (
     <div className="mt-96">

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

@@ -10,7 +10,7 @@ import {
   RegisterMember,
   DisplayNumber,
   IncreasePower,
-  FormLink,
+  Button,
 } from "@/components";
 import { Address } from "viem";
 import {
@@ -20,6 +20,7 @@ import {
 import {
   CurrencyDollarIcon,
   ExclamationCircleIcon,
+  PlusIcon,
   RectangleGroupIcon,
 } from "@heroicons/react/24/outline";
 import { poolTypes } from "@/types";
@@ -32,6 +33,8 @@ import {
 import { Dnum } from "dnum";
 import useSubgraphQuery from "@/hooks/useSubgraphQuery";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import Link from "next/link";
+import { useDisableButtons } from "@/hooks/useDisableButtons";
 
 export default function CommunityPage({
   params: { chain, garden: tokenAddr, community: communityAddr },
@@ -47,7 +50,8 @@ export default function CommunityPage({
       { topic: "member", containerId: communityAddr },
     ],
   });
-
+
+  const { tooltipMessage, isConnected, missmatchUrl } = useDisableButtons();
   useEffect(() => {
     if (error) {
       console.error("Error while fetching community data: ", error);
@@ -233,10 +237,18 @@ export default function CommunityPage({
       <section className="section-layout flex flex-col gap-10">
         <header className="flex justify-between">
           <h2>Pools</h2>
-          <FormLink
+          <Link
             href={`/gardens/${chain}/${tokenAddr}/${communityAddr}/create-pool`}
-            label="Create Pool"
-          />
+          >
+            <Button
+              btnStyle="filled"
+              disabled={!isConnected || missmatchUrl}
+              tooltip={tooltipMessage}
+              icon={<PlusIcon height={24} width={24} />}
+            >
+              Create Pool
+            </Button>
+          </Link>
         </header>
         <div className="flex flex-col gap-4">
           <h4 className="text-secondary-content">

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

@@ -36,18 +36,20 @@ export default function Page({
     .alloAddress as Address;
 
   return tokenGarden ? (
-    <div className="mx-auto flex max-w-[820px] flex-col items-center justify-center gap-4">
-      <div className="text-center sm:mt-5">
-        <h2 className="text-xl font-semibold leading-6 text-gray-900">
-          Welcome to the {tokenGarden.symbol} Community Form!
-        </h2>
-        <div className="mt-1">
-          <p className="text-sm">
-            Create a vibrant community around the {tokenGarden.name} by
-            providing the necessary details below.
-          </p>
+    <div className="page-layout">
+      <section className="section-layout">
+        <div className="text-center sm:mt-5">
+          <h2 className="text-xl font-semibold leading-6 text-gray-900">
+            Welcome to the {tokenGarden.symbol} Community Form!
+          </h2>
+          <div className="mt-1">
+            <p className="text-sm">
+              Create a vibrant community around the {tokenGarden.name} by
+              providing the necessary details below.
+            </p>
+          </div>
         </div>
-      </div>
+      </section>
       <CommunityForm
         chainId={chain}
         tokenGarden={tokenGarden}

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

@@ -2,16 +2,23 @@
 
 import { tree2, tree3, grassLarge, ecosystem } from "@/assets";
 import Image from "next/image";
-import { Communities, EthAddress, Statistic, TokenLabel } from "@/components";
+import {
+  Button,
+  Communities,
+  EthAddress,
+  Statistic,
+  TokenLabel,
+} from "@/components";
 import { getGardenDocument, getGardenQuery } from "#/subgraph/.graphclient";
-import { FormLink } from "@/components";
 import React, { useEffect } from "react";
-import { CubeTransparentIcon } from "@heroicons/react/24/outline";
+import { CubeTransparentIcon, PlusIcon } from "@heroicons/react/24/outline";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import useSubgraphQuery from "@/hooks/useSubgraphQuery";
 import { isProd } from "@/constants/contracts";
 import TokenGardenFaucet from "@/components/TokenGardenFaucet";
 import { Address } from "viem";
+import Link from "next/link";
+import { useDisableButtons } from "@/hooks/useDisableButtons";
 
 export const dynamic = "force-dynamic";
 
@@ -35,6 +42,8 @@ export default function Garden({
     ],
   });
 
+  const { tooltipMessage, isConnected, missmatchUrl } = useDisableButtons();
+
   useEffect(() => {
     if (error) {
       console.error("Error while fetching garden data: ", error);
@@ -113,12 +122,19 @@ export default function Garden({
             </h4>
           </header>
           <div className="relative flex h-[219px] justify-center">
-            <FormLink
-              label="Create a community"
+            <Link
               href={`/gardens/${chain}/${garden}/create-community`}
               className="mt-6"
-            />
-
+            >
+              <Button
+                btnStyle="filled"
+                disabled={!isConnected || missmatchUrl}
+                tooltip={tooltipMessage}
+                icon={<PlusIcon height={24} width={24} />}
+              >
+                Create a community
+              </Button>
+            </Link>
             <Image
               src={tree2}
               alt="tree"

apps/web/app/(app)/layout.tsx

@@ -1,14 +1,18 @@
 import React from "react";
 import { NavBar } from "@/components";
 import { GoBackButton } from "@/components";
+import { Breadcrumbs } from "@/components/Breadcrumbs";
 export default function layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <NavBar />
       <main className="my-10 flex flex-col items-center bg-primary">
-        <div className="w-full max-w-6xl">
-          <GoBackButton />
-        </div>
+        <nav className="w-full max-w-6xl">
+          <div className="mx-8 flex gap-4 truncate">
+            <GoBackButton />
+            <Breadcrumbs />
+          </div>
+        </nav>
         {children}
       </main>
       {/* footer */}