Release bugs fix part 1

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

@@ -65,7 +65,9 @@ export default function Page({
   const proposalData = data?.cvproposal;
   const metadata = proposalData?.metadata;
   const proposalIdNumber =
-    !!proposalData ? BigInt(proposalData.proposalNumber) : undefined;
+    proposalData?.proposalNumber ?
+      BigInt(proposalData.proposalNumber)
+    : undefined;
 
   const { publish } = usePubSubContext();
   const chainId = useChainIdFromPath();
@@ -158,48 +160,53 @@ export default function Page({
             <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} #{proposalIdNumber}
+                  {ipfsResult?.title} #{proposalData?.proposalNumber}
                 </h2>
                 <Badge type={proposalType} />
               </div>
               <div className="flex items-center justify-between gap-4 sm:justify-start">
                 <Badge status={proposalData.proposalStatus} />
-                <p className="font-semibold">
-                  {prettyTimestamp(proposalData?.createdAt ?? 0)}
+                <p className="">
+                  Created:{" "}
+                  <span className="font-semibold">
+                    {prettyTimestamp(proposalData?.createdAt ?? 0)}
+                  </span>
                 </p>
               </div>
             </div>
             <p>{ipfsResult?.description}</p>
-            <div className="flex flex-col gap-2">
-              {!isSignalingType && (
-                <>
-                  <Statistic
-                    label={"requested amount"}
-                    icon={<InformationCircleIcon />}
-                  >
-                    <DisplayNumber
-                      number={formatUnits(requestedAmount, 18)}
-                      tokenSymbol={tokenSymbol}
-                      compact={true}
-                      className="font-bold text-black"
-                    />
-                  </Statistic>
-                  <Statistic label={"beneficiary"} icon={<UserIcon />}>
-                    <EthAddress address={beneficiary} actions="copy" />
-                  </Statistic>
-                </>
-              )}
-              <Statistic label={"created by"} icon={<UserIcon />}>
-                <EthAddress address={submitter} actions="copy" />
-              </Statistic>
+            <div className="flex justify-between">
+              <div className="flex flex-col gap-2">
+                {!isSignalingType && (
+                  <>
+                    <Statistic
+                      label={"requested amount"}
+                      icon={<InformationCircleIcon />}
+                    >
+                      <DisplayNumber
+                        number={formatUnits(requestedAmount, 18)}
+                        tokenSymbol={tokenSymbol}
+                        compact={true}
+                        className="font-bold text-black"
+                      />
+                    </Statistic>
+                    <Statistic label={"beneficiary"} icon={<UserIcon />}>
+                      <EthAddress address={beneficiary} actions="copy" />
+                    </Statistic>
+                  </>
+                )}
+                <Statistic label={"created by"} icon={<UserIcon />}>
+                  <EthAddress address={submitter} actions="copy" />
+                </Statistic>
+              </div>
+              <div className="flex items-end">
+                <DisputeButton
+                  proposalData={{ ...proposalData, ...ipfsResult }}
+                />
+              </div>
             </div>
           </div>
         </div>
-        <div className="w-full justify-end flex gap-4">
-          <div className="flex w-full justify-end">
-            <DisputeButton proposalData={{ ...proposalData, ...ipfsResult }} />
-          </div>
-        </div>
       </header>
       <section className="section-layout">
         {status && status !== "active" && status !== "disputed" ?
@@ -211,7 +218,26 @@ export default function Page({
             : `Proposal as been ${status}.`}
           </h4>
         : <>
-            <h2>Metrics</h2>
+            <div className="flex justify-between">
+              <h2>Metrics</h2>
+              {status === "active" && !isSignalingType && (
+                <Button
+                  onClick={() =>
+                    writeDistribute?.({
+                      args: [
+                        [],
+                        encodedDataProposalId(proposalIdNumber),
+                        "0x0",
+                      ],
+                    })
+                  }
+                  disabled={currentConvictionPct < thresholdPct}
+                  tooltip="Proposal not executable"
+                >
+                  Execute
+                </Button>
+              )}
+            </div>
             <ConvictionBarChart
               currentConvictionPct={currentConvictionPct}
               thresholdPct={thresholdPct}
@@ -221,21 +247,6 @@ export default function Page({
             />
           </>
         }
-        <div className="absolute top-8 right-10">
-          {status === "active" && !isSignalingType && (
-            <Button
-              onClick={() =>
-                writeDistribute?.({
-                  args: [[], encodedDataProposalId(proposalIdNumber), "0x0"],
-                })
-              }
-              disabled={currentConvictionPct < thresholdPct}
-              tooltip="Proposal not executable"
-            >
-              Execute
-            </Button>
-          )}
-        </div>
       </section>
     </div>
   );

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

@@ -47,12 +47,10 @@ export default function Page({
   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 #{poolId}
-          </h2>
-          <div className="mt-1">
-            <h4 className="text-sm">{metadata.title}</h4>
+        <div className="text-center sm:mt-5 mb-12">
+          <h2 className="mb-2">Create a Proposal in Pool #{poolId}</h2>
+          <div className="">
+            <h4 className="">{metadata.title}</h4>
           </div>
         </div>
         <ProposalForm

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

@@ -27,10 +27,8 @@ export default function Page({
   return result ?
       <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="text-center sm:mt-5 mb-12">
+            <h2 className="">Create a Pool in {communityName} community</h2>
           </div>
           <PoolForm
             alloAddr={alloAddr}

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

@@ -39,12 +39,12 @@ export default function Page({
   return tokenGarden ?
       <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">
+          <div className="text-center sm:mt-5 mb-12">
+            <h2 className="mb-2">
               Welcome to the {tokenGarden.symbol} Community Form!
             </h2>
-            <div className="mt-1">
-              <p className="text-sm">
+            <div className="">
+              <p className="">
                 Create a vibrant community around the {tokenGarden.name} by
                 providing the necessary details below.
               </p>

apps/web/components/Button.tsx

@@ -79,18 +79,22 @@ export function Button({
   icon,
   type = "button",
 }: ButtonProps) {
-  const buttonContent =
-    isLoading ? <span className="loading loading-spinner" /> : children;
-
   const buttonElement = (
     <button
       type={type}
       className={`${btnStyles[btnStyle][disabled ? "disabled" : color]}
-      flex cursor-pointer items-center justify-center gap-2 rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
+      flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed ${styles}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >
-      {icon && icon} {buttonContent}
+      <div
+        className={`${isLoading ? "invisible" : "visible"} flex gap-2 items-center`}
+      >
+        {icon && icon} {children}
+      </div>
+      <span
+        className={`loading loading-spinner absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 ${isLoading ? "block" : "hidden"}`}
+      />
     </button>
   );
 

apps/web/components/ConnectWalletButton.tsx

@@ -151,12 +151,10 @@ export function ConnectWallet() {
                               </div>
                               <div className="flex justify-between py-1">
                                 <p className="subtitle2">Balance</p>
-
                                 <DisplayNumber
                                   number={(token?.formatted ?? 0).toString()}
                                   tokenSymbol={token?.symbol}
                                   className="text-primary-content"
-                                  compact={true}
                                 />
                               </div>
                             </Menu.Item>
@@ -199,17 +197,6 @@ export function ConnectWallet() {
                 </Menu>
               );
             })()}
-            {urlChainId === chain?.id && tokenUrlAddress !== undefined && (
-              <div className="py-2 flex flex-col gap-0.5">
-                <p className="text-xs font-medium">Balance</p>
-                <DisplayNumber
-                  number={(token?.formatted ?? 0).toString()}
-                  tokenSymbol={token?.symbol}
-                  className="text-primary-content"
-                  compact={true}
-                />
-              </div>
-            )}
           </>
         );
       }}

apps/web/components/DisputeButton.tsx

@@ -155,13 +155,17 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
 
   async function handleSubmit() {
     setIsLoading(true);
-    const reasonHash = await ipfsJsonUpload({ reason }, "disputeReason");
-    if (!reasonHash) {
-      return;
+    try {
+      const reasonHash = await ipfsJsonUpload({ reason }, "disputeReason");
+      if (!reasonHash) {
+        return;
+      }
+      await writeDisputeProposalAsync({
+        args: [BigInt(proposalData.proposalNumber), reasonHash, "0x0"],
+      });
+    } catch (error) {
+      setIsLoading(false);
     }
-    await writeDisputeProposalAsync({
-      args: [BigInt(proposalData.proposalNumber), reasonHash, "0x0"],
-    });
     setIsLoading(false);
   }
 
@@ -315,7 +319,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
               />
             )}
           </div>
-
           <div className="flex gap-2">
             <Button
               onClick={() => setIsModalOpened(false)}
@@ -324,7 +327,6 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
             >
               Cancel
             </Button>
-
             <Button
               onClick={handleSubmit}
               color="danger"
@@ -349,26 +351,26 @@ export const DisputeButton: FC<Props> = ({ proposalData }) => {
 
   return (
     <>
-      {ProposalStatus[proposalData?.proposalStatus] === "active" ||
-        (ProposalStatus[proposalData?.proposalStatus] === "disputed" && (
-          <>
-            <Button
-              color="danger"
-              btnStyle="outline"
-              onClick={() => setIsModalOpened(true)}
-            >
-              {isDisputed ? "Open dispute" : "Dispute"}
-            </Button>
-            <Modal
-              title={`Disputed Proposal: ${proposalData.title} #${proposalData.proposalNumber}`}
-              onClose={() => setIsModalOpened(false)}
-              isOpen={isModalOpened}
-            >
-              {content}
-              {buttons}
-            </Modal>
-          </>
-        ))}
+      {(ProposalStatus[proposalData?.proposalStatus] === "active" ||
+        ProposalStatus[proposalData?.proposalStatus] === "disputed") && (
+        <>
+          <Button
+            color="danger"
+            btnStyle="outline"
+            onClick={() => setIsModalOpened(true)}
+          >
+            {isDisputed ? "Open dispute" : "Dispute"}
+          </Button>
+          <Modal
+            title={`Disputed Proposal: ${proposalData.title} #${proposalData.proposalNumber}`}
+            onClose={() => setIsModalOpened(false)}
+            isOpen={isModalOpened}
+          >
+            {content}
+            {buttons}
+          </Modal>
+        </>
+      )}
     </>
   );
 };

apps/web/components/Forms/CommunityForm.tsx

@@ -43,7 +43,7 @@ type FormRowTypes = {
   parse?: (value: any) => string;
 };
 
-const ethereumAddressRegEx = /^(0x)?[0-9a-fA-F]{40}$/;
+const ethereumAddressRegEx = /^0x[a-fA-F0-9]{40}$/;
 
 export const CommunityForm = ({
   chainId,

apps/web/components/Forms/FormInput.tsx

@@ -91,7 +91,7 @@ export function FormInput({
         {children}
       </div>
       {errors && (
-        <p className="text-red mt-2 text-sm">
+        <p className="text-error mt-2 text-sm font-semibold ml-1">
           {errors[registerKey]?.message || ""}
         </p>
       )}

apps/web/components/Forms/FormPreview.tsx

@@ -19,32 +19,15 @@ export function FormPreview({
     return <>Error no Data</>;
   }
 
-  // description or covenant
-  {
-    /* <h3 className="text-sm font-medium leading-6 text-gray-900">
-Covenant
-</h3>
-<p className="text-md max-h-56 overflow-y-auto rounded-xl border p-2 leading-7">
-{covenant}
-</p> */
-  }
-
   return (
     <>
-      {/* <div className="divider-default divider" /> */}
-      <div className="px-4 sm:px-0 py-4">
-        <h4 className="mt-0 max-w-2xl leading-6 text-gray-600">
-          {previewTitle}
-        </h4>
+      <div className="px-4 sm:px-0 mb-12 mt-16">
+        <p className="subtitle font-medium">{previewTitle}</p>
       </div>
       {title && description && (
-        <div className="my-6 flex flex-col items-center">
-          <h4 className="text-xl font-medium leading-6 text-gray-900">
-            {title}
-          </h4>
-          <p className="text-md max-h-56 overflow-y-auto rounded-xl text-center leading-7">
-            {description}
-          </p>
+        <div className="my-8 flex flex-col">
+          <h3 className="mb-4">{title}</h3>
+          <p className="">{description}</p>
         </div>
       )}