Merge branch 'dev' into beta

1Hive · Nov 26, 2024 · bbe6e99 · bbe6e99
2 parents 3c40ddc + 09c7c91
commit bbe6e99
Show file tree

Hide file tree

Showing 234 changed files with 127,525 additions and 17,342 deletions.
diff --git a/LICENSE b/LICENSE
diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/[proposalId]/page.tsx
@@ -1,7 +1,13 @@
 "use client";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Hashicon } from "@emeraldpay/hashicon-react";
-import { InformationCircleIcon, UserIcon } from "@heroicons/react/24/outline";
+import {
+  AdjustmentsHorizontalIcon,
+  InformationCircleIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import { usePathname, useRouter } from "next/navigation";
 import { toast } from "react-toastify";
 import { Address, encodeAbiParameters, formatUnits } from "viem";
 import { useAccount, useToken } from "wagmi";
@@ -22,10 +28,12 @@ import { DisputeButton } from "@/components/DisputeButton";
 import { LoadingSpinner } from "@/components/LoadingSpinner";
 import MarkdownWrapper from "@/components/MarkdownWrapper";
 import { Skeleton } from "@/components/Skeleton";
+import { QUERY_PARAMS } from "@/constants/query-params";
 import { usePubSubContext } from "@/contexts/pubsub.context";
 import { useChainIdFromPath } from "@/hooks/useChainIdFromPath";
 import { useContractWriteWithConfirmations } from "@/hooks/useContractWriteWithConfirmations";
 import { useConvictionRead } from "@/hooks/useConvictionRead";
+import { useDisableButtons } from "@/hooks/useDisableButtons";
 import { useMetadataIpfsFetch } from "@/hooks/useIpfsFetch";
 import { useSubgraphQuery } from "@/hooks/useSubgraphQuery";
 import { alloABI } from "@/src/generated";
@@ -44,7 +52,10 @@ export default function Page({
     garden: string;
   };
 }) {
-  const { isDisconnected, address } = useAccount();
+  const [convictionRefreshing, setConvictionRefreshing] = useState(true);
+  const router = useRouter();
+
+  const { address } = useAccount();
   const [, proposalNumber] = proposalId.split("-");
   const { data } = useSubgraphQuery<getProposalDataQuery>({
     query: getProposalDataDocument,
@@ -73,6 +84,7 @@ export default function Page({
     hash: proposalData?.metadataHash,
     enabled: !proposalData?.metadata,
   });
+  const path = usePathname();
   const metadata = proposalData?.metadata ?? ipfsResult;
   const isProposerConnected =
     proposalData?.submitter === address?.toLowerCase();
@@ -90,6 +102,8 @@ export default function Page({
     chainId,
   });
 
+  const { tooltipMessage, isConnected, missmatchUrl } = useDisableButtons();
+
   const {
     currentConvictionPct,
     thresholdPct,
@@ -104,6 +118,12 @@ export default function Page({
     enabled: proposalData?.proposalNumber != null,
   });
 
+  useEffect(() => {
+    if (convictionRefreshing && currentConvictionPct != null) {
+      setConvictionRefreshing(false);
+    }
+  }, [convictionRefreshing, currentConvictionPct]);
+
   //encode proposal id to pass as argument to distribute function
   const encodedDataProposalId = (proposalId_: bigint) => {
     const encodedProposalId = encodeAbiParameters(
@@ -137,6 +157,15 @@ export default function Page({
     },
   });
 
+  const manageSupportClicked = () => {
+    const pathSegments = path.split("/");
+    pathSegments.pop();
+    if (pathSegments.length === 3) {
+      pathSegments.pop();
+    }
+    const newPath = pathSegments.join("/");
+    router.push(newPath + `?${QUERY_PARAMS.poolPage.allocationView}=true`);
+  };
   const distributeErrorName = useErrorDetails(errorDistribute);
   useEffect(() => {
     if (isErrorDistribute && distributeErrorName.errorName !== undefined) {
@@ -157,6 +186,14 @@ export default function Page({
     );
   }
 
+  const handleRefreshConviction = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setConvictionRefreshing(true);
+    await triggerConvictionRefetch?.();
+    setConvictionRefreshing(false);
+  };
+
   const status = ProposalStatus[proposalData.proposalStatus];
 
   return (
@@ -245,6 +282,26 @@ export default function Page({
         : <>
             <div className="flex justify-between">
               <h2>Metrics</h2>
+              <Button
+                icon={<AdjustmentsHorizontalIcon height={24} width={24} />}
+                onClick={() => manageSupportClicked()}
+                disabled={!isConnected || missmatchUrl}
+                tooltip={tooltipMessage}
+              >
+                Manage support
+              </Button>
+            </div>
+            <ConvictionBarChart
+              currentConvictionPct={currentConvictionPct}
+              thresholdPct={thresholdPct}
+              proposalSupportPct={totalSupportPct}
+              isSignalingType={isSignalingType}
+              proposalNumber={Number(proposalIdNumber)}
+              timeToPass={Number(timeToPass)}
+              onReadyToExecute={triggerConvictionRefetch}
+              defaultChartMaxValue
+            />
+            <div className="flex justify-center w-full">
               {status === "active" && !isSignalingType && (
                 <Button
                   onClick={() =>
@@ -256,12 +313,9 @@ export default function Page({
                       ],
                     })
                   }
-                  disabled={
-                    currentConvictionPct < thresholdPct || isDisconnected
-                  }
+                  disabled={currentConvictionPct < thresholdPct || !isConnected}
                   tooltip={
-                    isDisconnected ? "Connect wallet"
-                    : currentConvictionPct < thresholdPct ?
+                    tooltipMessage ?? currentConvictionPct < thresholdPct ?
                       "Proposal not executable"
                     : undefined
                   }
@@ -270,15 +324,6 @@ export default function Page({
                 </Button>
               )}
             </div>
-            <ConvictionBarChart
-              currentConvictionPct={currentConvictionPct}
-              thresholdPct={thresholdPct}
-              proposalSupportPct={totalSupportPct}
-              isSignalingType={isSignalingType}
-              proposalNumber={Number(proposalIdNumber)}
-              timeToPass={Number(timeToPass)}
-              onReadyToExecute={triggerConvictionRefetch}
-            />
           </>
         }
       </section>

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/[poolId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { Address } from "viem";
 import { useToken } from "wagmi";
 import {
@@ -27,6 +27,7 @@ export default function Page({
   params: { chain: string; poolId: number; garden: string };
 }) {
   const searchParams = useCollectQueryParams();
+  const proposalSectionRef = useRef<HTMLDivElement>(null);
 
   const { data, refetch, error } = useSubgraphQuery<getPoolDataQuery>({
     query: getPoolDataDocument,
@@ -55,7 +56,6 @@ export default function Page({
       },
     ],
   });
-
   const strategyObj = data?.cvstrategies?.[0];
   const poolTokenAddr = strategyObj?.token as Address;
   const proposalType = strategyObj?.config.proposalType;
@@ -105,6 +105,21 @@ export default function Page({
 
   const tokenGarden = data?.tokenGarden;
 
+  useEffect(() => {
+    if (
+      searchParams[QUERY_PARAMS.poolPage.allocationView] !== undefined &&
+      proposalSectionRef.current
+    ) {
+      const elementTop =
+        proposalSectionRef.current.getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: elementTop - 130,
+        behavior: "smooth",
+      });
+    }
+    // setAllocationView(searchParams[QUERY_PARAMS.poolPage.allocationView]);
+  }, [proposalSectionRef.current, searchParams]);
+
   if (!tokenGarden || (!poolToken && PoolTypes[proposalType] === "funding")) {
     return (
       <div className="mt-96">
@@ -146,14 +161,16 @@ export default function Page({
               chainId={chain}
             />
           )}
-          <Proposals
-            poolToken={poolToken}
-            strategy={strategyObj}
-            alloInfo={alloInfo}
-            communityAddress={communityAddress}
-            createProposalUrl={`/gardens/${chain}/${garden}/${communityAddress}/${poolId}/create-proposal`}
-            proposalType={proposalType}
-          />
+          <section ref={proposalSectionRef}>
+            <Proposals
+              poolToken={poolToken}
+              strategy={strategyObj}
+              alloInfo={alloInfo}
+              communityAddress={communityAddress}
+              createProposalUrl={`/gardens/${chain}/${garden}/${communityAddress}/${poolId}/create-proposal`}
+              proposalType={proposalType}
+            />
+          </section>
         </>
       )}
     </div>

diff --git a/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx b/apps/web/app/(app)/gardens/[chain]/[garden]/[community]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useRef, useState } from "react";
+import React, { Fragment, useEffect, useRef, useState } from "react";
 import {
   CurrencyDollarIcon,
   PlusIcon,
@@ -75,7 +75,6 @@ export default function Page({
       { topic: "member", containerId: communityAddr },
     ],
   });
-
   const registryCommunity = result?.registryCommunity;
 
   let {
@@ -148,6 +147,30 @@ export default function Page({
 
   const poolsInReview = strategies.filter((strategy) => !strategy.isEnabled);
 
+  // const [tokenDataArray, setTokenDataArray] = useState([]);
+
+  // useEffect(() => {
+  //   // Initialize an empty array for holding token data for each pool
+  //   const newTokenDataArray = fundingPools.map((pool) => ({
+  //     poolId: pool.poolId,
+  //     tokenData: null ,
+  //   }));
+
+  //   // Iterate over each pool and use `useToken` to get token data
+  //   fundingPools.forEach((pool, index) => {
+  //     const { data } = useToken({
+  //       address: pool.token as Address,
+  //       chainId: +chain,
+  //     });
+
+  //     // Update the tokenData in the array for this specific pool
+  //     newTokenDataArray[index].tokenData = data;
+  //   });
+
+  //   // Once data is fetched, update the state
+  //   setTokenDataArray(newTokenDataArray);
+  // }, [fundingPools, chain]);
+
   useEffect(() => {
     const newPoolId = searchParams[QUERY_PARAMS.communityPage.newPool];
     const fetchedPools = poolsInReview.some((c) => c.poolId === newPoolId);
@@ -318,14 +341,9 @@ export default function Page({
           </h4>
           <div className="flex flex-row flex-wrap gap-10">
             {fundingPools.map((pool) => (
-              <PoolCard
-                key={pool.poolId}
-                tokenGarden={{
-                  decimals: tokenGarden?.decimals ?? 18,
-                  symbol: tokenGarden?.symbol ?? "",
-                }}
-                pool={pool}
-              />
+              <Fragment key={pool.poolId}>
+                <PoolCard token={pool.token} chainId={chain} pool={pool} />
+              </Fragment>
             ))}
           </div>
         </div>
@@ -337,10 +355,8 @@ export default function Page({
             {signalingPools.map((pool) => (
               <PoolCard
                 key={pool.poolId}
-                tokenGarden={{
-                  symbol: tokenGarden?.symbol ?? "",
-                  decimals: tokenGarden?.decimals ?? 18,
-                }}
+                token={pool.token}
+                chainId={chain}
                 pool={pool}
               />
             ))}
@@ -354,10 +370,8 @@ export default function Page({
             {poolsInReview.map((pool) => (
               <PoolCard
                 key={pool.poolId}
-                tokenGarden={{
-                  decimals: tokenGarden?.decimals ?? 18,
-                  symbol: tokenGarden?.symbol ?? "",
-                }}
+                token={pool.token}
+                chainId={chain}
                 pool={pool}
               />
             ))}

diff --git a/apps/web/components/Button.tsx b/apps/web/components/Button.tsx
@@ -22,7 +22,7 @@ type ButtonProps = {
     | "tooltip-bottom"
     | "tooltip-left"
     | "tooltip-right";
-  children: React.ReactNode;
+  children?: React.ReactNode;
   isLoading?: boolean;
   size?: Size;
   icon?: React.ReactNode;
@@ -70,7 +70,7 @@ const btnStyles: BtnStyles = {
 
 export function Button({
   onClick,
-  className: styles = "",
+  className = "",
   disabled = false,
   tooltip,
   showToolTip = false,
@@ -86,7 +86,7 @@ export function Button({
   const buttonElement = (
     <button
       type={type}
-      className={`${btnStyles[btnStyle][disabled ? "disabled" : color]} flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${styles}`}
+      className={`${btnStyles[btnStyle][disabled ? "disabled" : color]} flex relative cursor-pointer  justify-center rounded-lg px-6 py-4 transition-all ease-out disabled:cursor-not-allowed h-fit ${className}`}
       onClick={onClick}
       disabled={disabled || isLoading}
     >

diff --git a/apps/web/components/Charts/ChartWrapper.tsx b/apps/web/components/Charts/ChartWrapper.tsx
@@ -33,7 +33,7 @@ export const ChartWrapper = ({
     {
       name: "Conviction",
       className: "bg-primary-content  h-4 w-4 rounded-full",
-      info: "Accumulated pool weight for a proposal, increasing over time, based on the conviction growth param.",
+      info: "Accumulated pool weight for a proposal, increasing over time, based on the conviction growth.",
     },
     {
       name: "Threshold",