Fixing-beta

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

@@ -1,7 +1,12 @@
 "use client";
 import { useEffect } 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 { usePathname, useRouter } from "next/navigation";
 import { toast } from "react-toastify";
 import { Address, encodeAbiParameters, formatUnits } from "viem";
 import { useAccount, useToken } from "wagmi";
@@ -22,10 +27,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 +51,7 @@ export default function Page({
     garden: string;
   };
 }) {
-  const { isDisconnected, address } = useAccount();
+  const { address } = useAccount();
   const [, proposalNumber] = proposalId.split("-");
   const { data } = useSubgraphQuery<getProposalDataQuery>({
     query: getProposalDataDocument,
@@ -73,6 +80,8 @@ export default function Page({
     hash: proposalData?.metadataHash,
     enabled: !proposalData?.metadata,
   });
+  const router = useRouter();
+  const path = usePathname();
   const metadata = proposalData?.metadata ?? ipfsResult;
   const isProposerConnected =
     proposalData?.submitter === address?.toLowerCase();
@@ -90,6 +99,8 @@ export default function Page({
     chainId,
   });
 
+  const { tooltipMessage, isConnected, missmatchUrl } = useDisableButtons();
+
   const {
     currentConvictionPct,
     thresholdPct,
@@ -137,6 +148,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) {
@@ -245,6 +265,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 +296,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 +307,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>

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} className="section-layout">
+            <Proposals
+              poolToken={poolToken}
+              strategy={strategyObj}
+              alloInfo={alloInfo}
+              communityAddress={communityAddress}
+              createProposalUrl={`/gardens/${chain}/${garden}/${communityAddress}/${poolId}/create-proposal`}
+              proposalType={proposalType}
+            />
+          </section>
         </>
       )}
     </div>

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}
               />
             ))}

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",

apps/web/components/Charts/ConvictionBarChart.tsx

@@ -19,6 +19,7 @@ type ConvictionBarChartProps = {
   proposalNumber: number;
   compact?: boolean;
   timeToPass?: number;
+  defaultChartMaxValue?: boolean;
   onReadyToExecute?: () => void;
 };
 
@@ -31,6 +32,7 @@ export const ConvictionBarChart = ({
   compact,
   timeToPass,
   onReadyToExecute,
+  defaultChartMaxValue = false,
 }: ConvictionBarChartProps) => {
   const supportNeeded = (thresholdPct - proposalSupportPct).toFixed(2);
   const scenarioMappings: Record<string, ScenarioMapping> = {
@@ -181,7 +183,7 @@ export const ConvictionBarChart = ({
     disabled: true,
   };
 
-  const borderRadius = [50, 0, 0, 50];
+  const borderRadius = defaultChartMaxValue ? [50, 50] : [50, 0, 0, 50];
 
   const markLine: MarkLineComponentOption = {
     symbol: "none",
@@ -213,6 +215,12 @@ export const ConvictionBarChart = ({
         },
         z: 50,
       };
+
+  const chartMaxValue =
+    defaultChartMaxValue ?
+      Math.max(currentConvictionPct, proposalSupportPct, thresholdPct)
+    : 100;
+
   const option: EChartsOption = {
     emphasis: emphasis,
     yAxis: {
@@ -228,12 +236,12 @@ export const ConvictionBarChart = ({
       axisLabel: {
         show: false,
         formatter: "{value}%",
-        fontSize: 10,
+        fontSize: 8,
       },
       axisLine: {
         show: false,
       },
-      max: 100,
+      max: chartMaxValue,
     },
     tooltip: {
       trigger: "axis",
@@ -273,7 +281,7 @@ export const ConvictionBarChart = ({
           show: !compact,
           position: "insideRight",
           color: "#191919",
-          fontSize: 10,
+          fontSize: 8,
           formatter: "{@score} %",
         },
         z:
@@ -294,7 +302,7 @@ export const ConvictionBarChart = ({
           show: !compact,
           position: "insideRight",
           color: "#FFFFFF",
-          fontSize: 10,
+          fontSize: 8,
           formatter: "{@score} %",
           width: 0,
         },

apps/web/components/Forms/PoolEditForm.tsx

@@ -177,7 +177,9 @@ export default function PoolEditForm({
   const shouldRenderInput = (key: string): boolean => {
     if (
       PoolTypes[proposalType] === "signaling" &&
-      (key === "spendingLimit" || key === "minThresholdPoints")
+      (key === "spendingLimit" ||
+        key === "minThresholdPoints" ||
+        key === "minimumConviction")
     ) {
       return false;
     }

apps/web/components/Forms/PoolForm.tsx

@@ -194,7 +194,7 @@ export function PoolForm({ token, communityAddr }: Props) {
       rulingTime: parseTimeUnit(DEFAULT_RULING_TIMEOUT_SEC, "seconds", "days"),
       defaultResolution: 1,
       minThresholdPoints: 0,
-      poolTokenAddress: token.id,
+      poolTokenAddress: "",
       proposalCollateral:
         chain.id === polygon.id ?
           defaultMaticProposalColateral
@@ -711,7 +711,7 @@ export function PoolForm({ token, communityAddr }: Props) {
                             registerKey="maxAmount"
                             type="number"
                             placeholder="0"
-                            suffix={token.symbol}
+                            suffix={customTokenData?.symbol}
                           />
                         </div>
                       )}