Fix(165,169): Participants percentage & Current vote bar

src/components/_shared/mento-lock/providers/create-lock-provider.tsx

@@ -5,7 +5,7 @@ import useApprove from "@/lib/contracts/mento/useApprove";
 import { useContracts } from "@/lib/contracts/useContracts";
 import React from "react";
 import { parseEther } from "viem";
-import { useAccount, useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 import {
   DEFAULT_CLIFF,
   LOCKING_AMOUNT_FORM_KEY,
@@ -56,12 +56,11 @@ export const CreateLockProvider = ({
   const { watch, reset: resetForm } = useFormContext();
   const [isTxModalOpen, setIsTxModalOpen] = React.useState(false);
 
-  const { address } = useAccount();
+  const { address, chainId } = useAccount();
   const amount = watch(LOCKING_AMOUNT_FORM_KEY);
   const slope = watch(LOCKING_DURATION_FORM_KEY);
 
   const contracts = useContracts();
-  const chainId = useChainId();
   const parsedAmount = parseEther(amount);
 
   const lock = useCreateLockOnChain({

src/components/_shared/progress-bar/progress-bar.component.tsx

@@ -143,7 +143,6 @@ export const MultiProgressBar = ({
           progress,
           barColorString,
           styles: {
-            borderRadius: 0,
             backgroundColor: "transparent",
           },
         };
@@ -175,15 +174,15 @@ export const MultiProgressBar = ({
         className,
       )}
     >
-      <div className="relative h-4 w-full overflow-hidden rounded-3xl border-[0.5px] border-solid border-black dark:border-gray">
+      <div className="relative flex h-4 w-full overflow-hidden rounded-3xl">
         {progressBars
-          .toSorted((a, b) => b.progress - a.progress)
+          .filter((item) => item.progress !== 0)
           .map(({ progress, barColorString }, index) => {
             return (
               <div
                 key={index}
                 className={cn(
-                  "absolute left-[-1px] top-[-1px] h-[calc(100%_+_2px)] rounded-r-3xl border-[0.5px] border-black bg-gray dark:border-gray",
+                  "h-100% relative top-0 flex-grow border-r-[1px] border-black bg-gray dark:border-gray",
                 )}
                 style={{
                   width: `${progress}%`,
@@ -192,6 +191,12 @@ export const MultiProgressBar = ({
               ></div>
             );
           })}
+        {/* More sensible border */}
+        <div
+          className={cn(
+            "absolute top-0 z-10 h-full w-full flex-grow rounded-3xl border-[0.5px] border-solid border-black bg-transparent dark:border-gray",
+          )}
+        ></div>
       </div>
     </div>
   );

src/components/create-proposal/create-proposal-provider.tsx

@@ -10,7 +10,7 @@ import useCreateProposalOnChain, {
   TransactionItem,
 } from "@/lib/contracts/governor/useCreateProposalOnChain";
 import { LocalStorageKeys, useLocalStorage } from "@/lib/hooks/useStorage";
-import { useBlockNumber, useChainId } from "wagmi";
+import { useAccount, useBlockNumber } from "wagmi";
 import { Loader } from "@/components/_shared";
 import { CreateProposalTxModal } from "@/components/create-proposal/create-proposal-transaction.model";
 import { useRouter } from "next/navigation";
@@ -57,7 +57,7 @@ interface ICreateProposalProvider {
 export const CreateProposalProvider = ({
   children,
 }: ICreateProposalProvider) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
   const router = useRouter();
   const { proposalExists, refetchProposals } = useProposals();
 

src/components/proposal-current-votes/proposal-current-votes.component.tsx

@@ -36,15 +36,15 @@ export const ProposalCurrentVotes = ({
       },
       {
         progress: Number(
-          (proposal.votes.against.total * 100n) / proposal.votes.total,
+          (proposal.votes.abstain.total * 100n) / proposal.votes.total,
         ),
-        type: "danger",
+        type: "info",
       },
       {
         progress: Number(
-          (proposal.votes.abstain.total * 100n) / proposal.votes.total,
+          (proposal.votes.against.total * 100n) / proposal.votes.total,
         ),
-        type: "info",
+        type: "danger",
       },
     ] as MultiProgressBarValue[];
   }, [

src/components/votes-list/votes-list.component.tsx

@@ -59,6 +59,20 @@ const getParticipantPercentage = (
 ) => {
   // If there are no votes, we need to avoid division by zero
   if (totalVotes > 0n) {
-    return `${Number((participant.weight * 100n) / totalVotes).toFixed(2)}%`;
+    const decimals = 8;
+    const accuracy = 10n ** BigInt(decimals);
+
+    const weightScaled = participant.weight * 100n;
+
+    const valueInRawBN = (weightScaled * accuracy) / totalVotes;
+
+    const formatted = formatUnits(valueInRawBN, decimals);
+
+    if (formatted.includes(".")) {
+      const [integers, remainingDecimals] = formatted.split(".");
+      return `${integers}.${remainingDecimals.substring(0, 2)}%`;
+    } else {
+      return `${formatted}%`;
+    }
   } else return "0%";
 };

src/lib/contracts/governor/useProposal.ts

@@ -11,12 +11,12 @@ import {
 } from "@/lib/graphql/subgraph/generated/subgraph";
 import { NetworkStatus } from "@apollo/client";
 import { useEffect, useMemo } from "react";
-import { useBlockNumber, useChainId, useReadContract } from "wagmi";
+import { useAccount, useBlockNumber, useReadContract } from "wagmi";
 
 export const ProposalQueryKey = "proposal";
 
 const useProposal = (proposalId: bigint) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
   const contracts = useContracts();
   const { data: blockNumber } = useBlockNumber({ watch: true });
 

src/lib/contracts/governor/useProposals.ts

@@ -11,12 +11,12 @@ import {
 } from "@/lib/graphql/subgraph/generated/subgraph";
 import { NetworkStatus } from "@apollo/client";
 import { useCallback, useMemo } from "react";
-import { useChainId, useReadContracts } from "wagmi";
+import { useAccount, useReadContracts } from "wagmi";
 
 export const GraphProposalsQueryKey = ["proposals-graph-query"];
 
 const useProposals = () => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
   const contracts = useContracts();
 
   const {

src/lib/contracts/locking/useAllLocks.ts

@@ -3,10 +3,10 @@ import {
   Lock,
   useGetAllLocksSuspenseQuery,
 } from "@/lib/graphql/subgraph/generated/subgraph";
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 
 const useAllLocks = () => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
   const {
     data: { locks },
   } = useGetAllLocksSuspenseQuery({

src/lib/contracts/locking/useLocksByAccount.ts

@@ -3,14 +3,14 @@ import {
   useGetLocksSuspenseQuery,
   Lock,
 } from "@/lib/graphql/subgraph/generated/subgraph";
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 
 interface UseLocksProps {
   account: string;
 }
 
 const useLocksByAccount = ({ account }: UseLocksProps) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
   const {
     data: { locks },
     ...rest

src/lib/contracts/useContractsInfo.ts

@@ -2,7 +2,7 @@ import { GetContractsInfoQuery, ProposalCall } from "@/lib/graphql";
 import { useGetContractsInfoQuery } from "@/lib/graphql/celo-explorer/generated/celoGraph";
 import { useMemo } from "react";
 import { decodeFunctionData } from "viem";
-import { useChainId } from "wagmi";
+import { useAccount } from "wagmi";
 
 /**
  * The Celo Explorer API returns nothing (as in not even undefined) for
@@ -96,7 +96,7 @@ type ContractInfo = {
 };
 
 const useContractsInfo = ({ calls }: Props) => {
-  const chainId = useChainId();
+  const { chainId } = useAccount();
 
   const { data, error: apolloError } = useGetContractsInfoQuery({
     variables: {