beta-ui

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

@@ -8,7 +8,13 @@ import {
   getProposalDataDocument,
   getProposalDataQuery,
 } from "#/subgraph/.graphclient";
-import { Badge, Button, DisplayNumber, EthAddress, Statistic } from "@/components";
+import {
+  Badge,
+  Button,
+  DisplayNumber,
+  EthAddress,
+  Statistic,
+} from "@/components";
 import { ConvictionBarChart } from "@/components/Charts/ConvictionBarChart";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import { usePubSubContext } from "@/contexts/pubsub.context";
@@ -80,9 +86,17 @@ export default function Page({
     !!proposalData &&
     (proposalStatus[proposalData.proposalStatus] === "executed" ||
       proposalStatus[proposalData.proposalStatus] === "cancelled");
-  logOnce("debug", { isProposalEnded, proposalStatus: proposalStatus[proposalData?.proposalStatus] });
+  logOnce("debug", {
+    isProposalEnded,
+    proposalStatus: proposalStatus[proposalData?.proposalStatus],
+  });
 
-  const { currentConvictionPct, thresholdPct, totalSupportPct, updateConvictionLast } = useConvictionRead({
+  const {
+    currentConvictionPct,
+    thresholdPct,
+    totalSupportPct,
+    updateConvictionLast,
+  } = useConvictionRead({
     proposalData,
     tokenData: data?.tokenGarden,
   });
@@ -125,7 +139,7 @@ export default function Page({
         topic: "proposal",
         type: "update",
         function: "distribute",
-        id:proposalId,
+        id: proposalId,
         containerId: data?.cvproposal?.strategy?.id,
         chainId,
       });
@@ -171,8 +185,8 @@ export default function Page({
             </div>
             <div className="flex items-center justify-between gap-4 sm:justify-start">
               <Badge status={status} />
-              <p className="font-semibold">
-                {prettyTimestamp(proposalData?.createdAt ?? 0)}
+              <p className="subtitle2">
+                Submitted: {prettyTimestamp(proposalData?.createdAt ?? 0)}
               </p>
             </div>
           </div>
@@ -192,40 +206,56 @@ export default function Page({
                   />
                 </Statistic>
                 <Statistic label={"beneficiary"} icon={<UserIcon />}>
-                  <EthAddress address={beneficiary} actions="copy" />
+                  <EthAddress
+                    address={beneficiary}
+                    actions="copy"
+                    icon={"identicon"}
+                  />
                 </Statistic>
               </>
             )}
             <Statistic label={"created by"} icon={<UserIcon />}>
-              <EthAddress address={submitter} actions="copy" />
+              <EthAddress address={submitter} actions="copy" icon="ens" />
             </Statistic>
           </div>
         </div>
       </header>
       <section className="section-layout">
-        <h2>Metrics</h2>
-        {/* TODO: need designs for this entire section */}
         {status && proposalStatus[status] === "executed" ?
-          <div className="my-8 flex w-full justify-center">
-            <div className="badge badge-success p-4 text-primary">
-              Proposal passed and executed successfully
-            </div>
-          </div>
-          : (
+          <h4 className="text-primary-content text-center">
+            Proposal passed and executed successfully!
+          </h4>
+        : <>
+            <h2>Metrics</h2>
             <ConvictionBarChart
               currentConvictionPct={currentConvictionPct}
               thresholdPct={thresholdPct}
               proposalSupportPct={totalSupportPct}
               isSignalingType={isSignalingType}
               proposalId={proposalIdNumber}
             />
-          )}
+          </>
+        }
         <div className="absolute top-8 right-10">
-          {proposalStatus[status] !== "executed" && !isSignalingType && ( <Button onClick={() => writeDistribute?.({ args:[poolId, [data.cvproposal?.strategy.id], encodedDataProposalId(Number(proposalIdNumber))] })} disabled={currentConvictionPct < thresholdPct} tooltip="Proposal not executable">Execute</Button>)}
-
+          {proposalStatus[status] !== "executed" && !isSignalingType && (
+            <Button
+              onClick={() =>
+                writeDistribute?.({
+                  args: [
+                    poolId,
+                    [data.cvproposal?.strategy.id],
+                    encodedDataProposalId(Number(proposalIdNumber)),
+                  ],
+                })
+              }
+              disabled={currentConvictionPct < thresholdPct}
+              tooltip="Proposal not executable"
+            >
+              Execute
+            </Button>
+          )}
         </div>
       </section>
     </div>
   );
 }
-

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

@@ -196,7 +196,6 @@ export default function Page({
               communityAddress={communityAddress}
               tokenGarden={tokenGarden}
               chainId={chain}
-              spendingLimitPct={spendingLimitPct}
             />
           )}
           <Proposals

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

@@ -235,13 +235,13 @@ export default function Page({
               />
             </Statistic>
             <div className="flex">
-              <p className="font-medium">Registration cost:</p>
+              <p className="subtitle2">Registration stake:</p>
               <InfoIcon
                 content={`Registration amount: ${parseToken(registrationAmount)} ${tokenGarden.symbol}\nCommunity fee: ${parseToken(parsedCommunityFee())} ${tokenGarden.symbol}`}
               >
                 <DisplayNumber
                   number={[getTotalRegistrationCost(), tokenGarden?.decimals]}
-                  className="font-semibold text-primary-content"
+                  className="subtitle2 text-primary-content"
                   disableTooltip={true}
                   compact={true}
                   tokenSymbol={tokenGarden.symbol}
@@ -263,6 +263,7 @@ export default function Page({
         memberData={isMemberResult}
         registryCommunity={registryCommunity}
         tokenGarden={tokenGarden}
+        registrationAmount={registrationAmount}
       />
       <section className="section-layout flex flex-col gap-10">
         <header className="flex justify-between">

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

@@ -166,12 +166,12 @@ export default function Page({
             <Image
               src={tree2}
               alt="tree"
-              className="absolute bottom-0 left-5"
+              className="absolute bottom-0 -left-10 h-52"
             />
             <Image
               src={tree3}
               alt="tree"
-              className="absolute bottom-0 right-5"
+              className="absolute bottom-0 -right-10 h-60 "
             />
             <Image
               src={grassLarge}

apps/web/app/(app)/gardens/page.tsx

@@ -6,7 +6,7 @@ import {
   getTokenGardensDocument,
   getTokenGardensQuery,
 } from "#/subgraph/.graphclient";
-import { clouds1, clouds2, gardenHeader } from "@/assets";
+import { clouds1, clouds2, Banner } from "@/assets";
 import { GardenCard } from "@/components";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import { useSubgraphQueryMultiChain } from "@/hooks/useSubgraphQueryMultiChain";
@@ -43,54 +43,53 @@ export default function Page() {
   );
 
   const GardenList = useMemo(() => {
-    if (fetching) {
-      return <LoadingSpinner />;
-    }
-    if (tokenGardens?.length) {
-      return (
-        <>
-          {tokenGardens.map((garden) => (
+    return fetching ?
+        <LoadingSpinner />
+      : <>
+          {tokenGardens?.map((garden) => (
             <div key={garden.id}>
               <GardenCard garden={garden} />
             </div>
           ))}
-        </>
-      );
-    }
-    return (
-      <p className="badge-info mb-8 rounded p-1 text-center">No Gardens</p>
-    );
+        </>;
   }, [fetching, tokenGardens?.length]);
 
   return (
-    <div className="flex flex-col items-center justify-center gap-8">
-      <header className="flex flex-col items-center gap-8">
-        <div className="flex items-center text-center">
-          <div className="relative flex-1">
-            <Image src={clouds1} alt="clouds" />
-          </div>
-          <div className="mx-10 flex flex-col items-center gap-5">
-            <div className="flex flex-col items-center">
-              <h1 className="max-w-xl text-center text-[#084D21]">
-                Explore and Join Gardens Ecosystems
-              </h1>
-              <p className="text-xl">
-                A place where you help shape digital economies
-              </p>
+    <>
+      <div className="flex flex-col items-center justify-center gap-8 relative z-10">
+        <header className="flex flex-col items-center gap-8 2xl:mt-20">
+          <div className="flex items-center text-center">
+            <div className="relative flex-1">
+              <Image src={clouds1} alt="clouds" />
+            </div>
+            <div className="mx-10 flex flex-col items-center gap-5">
+              <div className="flex flex-col items-center">
+                <h1 className="max-w-xl text-center text-neutral-content">
+                  Explore and Join Gardens Ecosystems
+                </h1>
+                <p className="text-xl text-primary-content">
+                  A place where you help shape digital economies
+                </p>
+              </div>
+            </div>
+            <div className="relative flex-1">
+              <Image src={clouds2} alt="clouds" />
             </div>
           </div>
-          <div className="relative flex-1">
-            <Image src={clouds2} alt="clouds" />
+          <div className="relative" />
+        </header>
+        <section className="my-2 flex w-full max-w-2xl flex-col items-center justify-center gap-8 2xl:mt-10">
+          <div className="grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,minmax(320px,1fr))] z-10">
+            {GardenList}
           </div>
-        </div>
-        <div className="relative" />
-      </header>
-      <section className="my-2 flex w-full max-w-2xl flex-col items-center justify-center gap-8">
-        <div className="grid max-w-7xl grid-cols-[repeat(auto-fit,minmax(310px,1fr))] gap-6 md:grid-cols-[repeat(auto-fit,minmax(320px,1fr))]">
-          {GardenList}
-        </div>
-        <Image src={gardenHeader} alt="gardens" />
-      </section>
-    </div>
+        </section>
+      </div>
+      <Image
+        src={Banner}
+        alt="gardens"
+        className="absolute inset-0 object-cover w-full h-full"
+        loading="lazy"
+      />
+    </>
   );
 }

apps/web/app/page.tsx

@@ -8,11 +8,10 @@ import {
   ArrowPathIcon,
   FingerPrintIcon,
   LockClosedIcon,
-  ArrowLongRightIcon,
   Battery50Icon,
 } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { newLogo, commF } from "@/assets";
+import { newLogo, commF, HomeBanner } from "@/assets";
 import { Button } from "@/components";
 import { ChainIcon } from "@/configs/chainServer";
 
@@ -75,16 +74,6 @@ const Hero = () => {
               </a>
             ))} */}
           </div>
-          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
-            <a
-              href="/gardens"
-              className="flex items-center justify-center text-sm font-semibold leading-6 text-gray-900"
-              target="_blank"
-              rel="noreferrer"
-            >
-              <Button>Launch App</Button>
-            </a>
-          </div>
         </nav>
         <Dialog
           open={mobileMenuOpen}
@@ -162,21 +151,27 @@ const Hero = () => {
                   healthy, fun, intuitive, secure, and open.
                 </span>
               </p>
-              {/* <div className="mt-10 flex items-center gap-x-6">
+              <div className="mt-10 flex items-center gap-x-6">
                 <a
-                  href="#"
-                  className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  href="/gardens"
+                  className="flex items-center justify-center text-sm font-semibold leading-6 text-gray-900"
+                  target="_blank"
+                  rel="noreferrer"
                 >
-                  Get started
+                  <Button>Launch App</Button>
                 </a>
                 <a
-                  href="#"
-                  className="text-sm font-semibold leading-6 text-gray-900"
+                  href="https://docs.gardens.fund/"
+                  className="flex items-center justify-center text-sm font-semibold leading-6 text-gray-900"
+                  target="_blank"
+                  rel="noreferrer"
                 >
-                  Learn more <span aria-hidden="true">→</span>
+                  {/* TODO: point to our url docs */}
+                  <Button btnStyle="outline">Documentation</Button>
                 </a>
-              </div> */}
+              </div>
             </div>
+
             <Image
               src={commF}
               alt={"ecosystem img"}
@@ -355,12 +350,12 @@ const SignUp = () => {
   return (
     <div className="bg-white py-16 sm:py-24">
       <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-        <div className="relative isolate overflow-hidden bg-neutral-content px-6 py-24 shadow-2xl sm:rounded-3xl sm:px-24 xl:py-32">
-          <h2 className="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight text-neutral sm:text-4xl">
+        <div className="isolate overflow-hidden bg-neutral-content px-6 py-24 shadow-md sm:rounded-3xl sm:px-24 xl:py-32 relative">
+          <h2 className="mx-auto max-w-2xl text-center text-3xl font-bold tracking-tight sm:text-4xl">
             Cultivate change with Gardens
           </h2>
-          <p className="mx-auto mt-2 max-w-xl text-center text-lg leading-8 text-neutral-soft">
-            Join our Beta and start growing your community.
+          <p className="mx-auto mt-2 max-w-xl text-center text-lg leading-8">
+            Join our pre-beta release and start growing your community.
           </p>
           <div className="mx-auto mt-10 flex max-w-md items-center justify-center gap-x-4 rounded-xl">
             {/* TODO: link to gardnes form */}
@@ -372,33 +367,15 @@ const SignUp = () => {
             >
               <Button>Launch App</Button>
             </a>
-          </div>
-          <svg
-            viewBox="0 0 1024 1024"
-            aria-hidden="true"
-            className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2"
-          >
-            <circle
-              r={512}
-              cx={512}
-              cy={512}
-              fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
-              fillOpacity="0.7"
+            <Image
+              src={HomeBanner}
+              alt="gardens"
+              className="absolute inset-0 w-full h-full object-cover -z-10"
+              loading="lazy"
+              // width={1200}
+              // height={100}
             />
-            <defs>
-              <radialGradient
-                r={1}
-                cx={0}
-                cy={0}
-                id="759c1415-0410-454c-8f7c-9a820de03641"
-                gradientUnits="userSpaceOnUse"
-                gradientTransform="translate(512 512) rotate(90) scale(512)"
-              >
-                <stop stopColor="#65AD18" />
-                <stop offset={1} stopColor="#2AAAE5" stopOpacity={0} />
-              </radialGradient>
-            </defs>
-          </svg>
+          </div>
         </div>
       </div>
     </div>