Merge 'Develop' into 'Main' (#191)

src/app/proposals/[id]/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import { Suspense, useMemo } from "react";
-import { useBlock, useBlockNumber } from "wagmi";
+import { useAccount, useBlock, useBlockNumber } from "wagmi";
 import { format } from "date-fns";
 
 // Components
@@ -18,11 +18,16 @@ import Vote from "@/app/proposals/[id]/_components/vote.component";
 import ExecutionCode from "@/app/proposals/[id]/_components/execution-code.component";
 import Participants from "@/app/proposals/[id]/_components/participants.component";
 import { Countdown, ProposalCurrentVotes } from "@/components/index";
+import { ensureChainId } from "@/lib/helpers/ensureChainId";
 
 const Page = ({ params: { id } }: { params: { id: string } }) => {
   const { proposal } = useProposal(BigInt(id));
+  const { chainId } = useAccount();
 
-  const currentBlock = useBlockNumber();
+  const { data: currentBlock } = useBlockNumber({
+    watch: true,
+    chainId: ensureChainId(chainId),
+  });
 
   const endBlock = useBlock({
     blockNumber: BigInt(proposal?.endBlock),
@@ -39,20 +44,20 @@ const Page = ({ params: { id } }: { params: { id: string } }) => {
   const votingDeadline = useMemo(() => {
     const CELO_BLOCK_TIME = 5000; // 5 seconds
 
-    if (proposal && currentBlock.data) {
+    if (proposal && currentBlock) {
       // If the end block is already mined, we can fetch the timestamp
-      if (Number(currentBlock.data) >= proposal.endBlock && endBlock.data) {
+      if (Number(currentBlock) >= proposal.endBlock && endBlock.data) {
         return new Date(Number(endBlock.data.timestamp) * 1000);
       } else {
         // If the end block is not mined yet, we estimate the time
         return new Date(
           Date.now() +
             // Estimation of ~5 seconds per block
-            (proposal.endBlock - Number(currentBlock.data)) * CELO_BLOCK_TIME,
+            (proposal.endBlock - Number(currentBlock)) * CELO_BLOCK_TIME,
         );
       }
     }
-  }, [currentBlock.data, endBlock.data, proposal]);
+  }, [currentBlock, endBlock.data, proposal]);
 
   const timeLockDeadLine = useMemo(() => {
     if (proposal && proposal.state === "Queued" && proposal.proposalQueued[0]) {

src/app/providers.tsx

@@ -8,6 +8,7 @@ import { makeClient } from "@/lib/graphql/apollo.client";
 import { wagmiConfig } from "@/config/wagmi.config";
 import { Celo } from "@/config/chains";
 import { ThemeProvider } from "next-themes";
+import { EnsureChain } from "@/lib/helpers/ensureChain";
 
 const queryClient = new QueryClient();
 
@@ -27,7 +28,7 @@ export function Providers({ children }: { children: ReactNode }) {
                 defaultTheme="system"
                 attribute="class"
               >
-                {children}
+                <EnsureChain>{children}</EnsureChain>
               </ThemeProvider>
             )}
           </RainbowKitProvider>

src/components/_shared/connect-button/connect-button.component.tsx

@@ -24,6 +24,7 @@ import { useAccount, useDisconnect } from "wagmi";
 import { cn } from "@/styles/helpers";
 import NumbersService from "@/lib/helpers/numbers.service";
 import { IS_PROD } from "../../../middleware";
+import { useAddTokens } from "@/lib/hooks/useAddTokens";
 
 interface ConnectedDropdownProps extends BaseComponentProps {
   fullwidth?: boolean;
@@ -44,6 +45,7 @@ export const ConnectedDropdown = ({
   const { disconnect } = useDisconnect();
 
   const { mentoBalance, veMentoBalance } = useTokens();
+  const { addMento, addVeMento } = useAddTokens();
 
   return (
     <DropdownButton
@@ -61,7 +63,11 @@ export const ConnectedDropdown = ({
       <DropdownButton.Dropdown className="border border-solid  border-black bg-white text-black dark:border-white dark:bg-black dark:text-white">
         {isConnected && (
           <div className="flex w-full flex-col items-center border-b border-solid border-black py-2 font-inter dark:border-white">
-            <div className="flex w-full flex-row justify-between px-5 py-3">
+            <div
+              title="Click to add MENTO to your wallet"
+              onClick={addMento}
+              className="flex w-full cursor-pointer flex-row justify-between px-5 py-3"
+            >
               <div className="flex flex-row items-center  font-semibold">
                 <MentoIcon
                   className="mr-x1"
@@ -76,7 +82,11 @@ export const ConnectedDropdown = ({
               </div>
             </div>
             <hr className="mx-auto w-[calc(100%_-_40px)] border-t-gray-light" />
-            <div className="flex w-full flex-row justify-between px-5 py-x2">
+            <div
+              title="Click to add veMENTO to your wallet"
+              onClick={addVeMento}
+              className="flex w-full cursor-pointer flex-row justify-between px-5 py-x2"
+            >
               <div className="flex flex-shrink flex-grow flex-row items-center font-semibold">
                 <MentoIcon
                   className="mr-x1"

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

@@ -56,7 +56,7 @@ export const CreateLockProvider = ({
   const { watch, reset: resetForm } = useFormContext();
   const [isTxModalOpen, setIsTxModalOpen] = React.useState(false);
 
-  const { address, chainId } = useAccount();
+  const { address } = useAccount();
   const amount = watch(LOCKING_AMOUNT_FORM_KEY);
   const slope = watch(LOCKING_DURATION_FORM_KEY);
 
@@ -67,7 +67,6 @@ export const CreateLockProvider = ({
     onLockConfirmation,
   });
   const allowance = useAllowance({
-    chainId,
     owner: address,
     spender: contracts.Locking.address,
   });

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

@@ -15,6 +15,7 @@ import { Loader } from "@/components/_shared";
 import { CreateProposalTxModal } from "@/components/create-proposal/create-proposal-transaction.model";
 import { useRouter } from "next/navigation";
 import useProposals from "@/lib/contracts/governor/useProposals";
+import { ensureChainId } from "@/lib/helpers/ensureChainId";
 
 export enum CreateProposalStep {
   wallet = 1,
@@ -66,6 +67,7 @@ export const CreateProposalProvider = ({
 
   const { data: blockNumber } = useBlockNumber({
     watch: true,
+    chainId: ensureChainId(chainId),
     query: {
       enabled: !!expectingId,
     },

src/components/proposal-summary/proposal-summary.component.tsx

@@ -1,12 +1,13 @@
 import { Suspense, useMemo } from "react";
 import { formatUnits } from "viem";
-import { useBlockNumber } from "wagmi";
+import { useAccount, useBlockNumber } from "wagmi";
 import { Card } from "@/components/_shared";
 import useProposals from "@/lib/contracts/governor/useProposals";
 import useLockingWeek from "@/lib/contracts/locking/useLockingWeek";
 import useAllLocks from "@/lib/contracts/locking/useAllLocks";
 import useTokens from "@/lib/contracts/useTokens";
 import NumbersService from "@/lib/helpers/numbers.service";
+import { ensureChainId } from "@/lib/helpers/ensureChainId";
 
 export const ProposalSummaryComponent = () => {
   return (
@@ -27,8 +28,12 @@ const ContractDataGrid = () => {
   const { currentWeek } = useLockingWeek();
   const { locks } = useAllLocks();
   const { proposals } = useProposals();
+  const { chainId } = useAccount();
 
-  const currentBlockNumber = useBlockNumber();
+  const currentBlockNumber = useBlockNumber({
+    watch: true,
+    chainId: ensureChainId(chainId),
+  });
 
   const proposalsEndBlocks: Array<BigInt> = proposals.map(
     (proposal) => proposal.endBlock,

src/lib/contracts/governor/useGovernanceDetails.ts

@@ -1,6 +1,7 @@
 import { GovernorABI } from "@/lib/abi/Governor";
 import { TimelockControllerABI } from "@/lib/abi/TimelockController";
 import { useContracts } from "@/lib/contracts/useContracts";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 import { useMemo } from "react";
 
 import { useReadContracts } from "wagmi";
@@ -36,6 +37,7 @@ function formatParam(
 }
 
 const useGovernanceDetails = () => {
+  const ensuredChainId = useEnsureChainId();
   const { MentoGovernor, TimelockController } = useContracts();
 
   const governorContact = {
@@ -53,18 +55,22 @@ const useGovernanceDetails = () => {
       {
         ...governorContact,
         functionName: "votingPeriod",
+        chainId: ensuredChainId,
       },
       {
         ...governorContact,
         functionName: "proposalThreshold",
+        chainId: ensuredChainId,
       },
       {
         ...governorContact,
         functionName: "quorumVotes",
+        chainId: ensuredChainId,
       },
       {
         ...timeLockContract,
         functionName: "getMinDelay",
+        chainId: ensuredChainId,
       },
     ],
     allowFailure: false,

src/lib/contracts/governor/useProposal.ts

@@ -9,24 +9,29 @@ import {
   Proposal,
   useGetProposalSuspenseQuery,
 } from "@/lib/graphql/subgraph/generated/subgraph";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 import { NetworkStatus } from "@apollo/client";
 import { useEffect, useMemo } from "react";
-import { useAccount, useBlockNumber, useReadContract } from "wagmi";
+import { useBlockNumber, useReadContract } from "wagmi";
 
 export const ProposalQueryKey = "proposal";
 
 const useProposal = (proposalId: bigint) => {
-  const { chainId } = useAccount();
   const contracts = useContracts();
-  const { data: blockNumber } = useBlockNumber({ watch: true });
+  const ensuredChainId = useEnsureChainId();
+
+  const { data: blockNumber } = useBlockNumber({
+    watch: true,
+    chainId: ensuredChainId,
+  });
 
   const {
     data: { proposals: graphProposals },
     networkStatus: graphNetworkStatus,
     refetch: graphRefetch,
   } = useGetProposalSuspenseQuery({
     context: {
-      apiName: getSubgraphApiName(chainId),
+      apiName: getSubgraphApiName(ensuredChainId),
     },
     refetchWritePolicy: "merge",
     fetchPolicy: "cache-and-network",
@@ -43,6 +48,7 @@ const useProposal = (proposalId: bigint) => {
     functionName: "state",
     args: [proposalId],
     scopeKey: ProposalQueryKey,
+    chainId: ensuredChainId,
     query: {
       refetchInterval: 5000,
       enabled:

src/lib/contracts/governor/useProposalThreshold.ts

@@ -1,15 +1,18 @@
 import { GovernorABI } from "@/lib/abi/Governor";
 import { useContracts } from "@/lib/contracts/useContracts";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 import { useReadContract } from "wagmi";
 
 export const useProposalThreshold = () => {
+  const ensuredChainId = useEnsureChainId();
   const { MentoGovernor } = useContracts();
 
   const { data: proposalThreshold } = useReadContract({
     address: MentoGovernor.address,
     abi: GovernorABI,
     functionName: "proposalThreshold",
     args: [],
+    chainId: ensuredChainId,
   });
 
   return {

src/lib/contracts/governor/useProposals.ts

@@ -9,14 +9,15 @@ import {
   Proposal,
   useGetProposalsQuery,
 } from "@/lib/graphql/subgraph/generated/subgraph";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 import { NetworkStatus } from "@apollo/client";
 import { useCallback, useMemo } from "react";
-import { useAccount, useReadContracts } from "wagmi";
+import { useReadContracts } from "wagmi";
 
 export const GraphProposalsQueryKey = ["proposals-graph-query"];
 
 const useProposals = () => {
-  const { chainId } = useAccount();
+  const ensuredChainId = useEnsureChainId();
   const contracts = useContracts();
 
   const {
@@ -25,7 +26,7 @@ const useProposals = () => {
     refetch,
   } = useGetProposalsQuery({
     context: {
-      apiName: getSubgraphApiName(chainId),
+      apiName: getSubgraphApiName(ensuredChainId),
     },
     initialFetchPolicy: "network-only",
     nextFetchPolicy: "cache-and-network",
@@ -43,6 +44,7 @@ const useProposals = () => {
               abi: GovernorABI,
               functionName: "state",
               args: [proposal.proposalId],
+              chainId: ensuredChainId,
             }) as const,
         )
       : [],

src/lib/contracts/governor/useQuorum.ts

@@ -1,16 +1,19 @@
 import { GovernorABI } from "@/lib/abi/Governor";
 import { useContracts } from "@/lib/contracts/useContracts";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 import { useReadContract } from "wagmi";
 
 // Used for getting the quorum at a specific block
 export const useQuorum = (blockNumber: bigint) => {
+  const ensuredChainId = useEnsureChainId();
   const { MentoGovernor } = useContracts();
 
   const { data: quorumNeeded } = useReadContract({
     address: MentoGovernor.address,
     abi: GovernorABI,
     functionName: "quorum",
     args: [blockNumber],
+    chainId: ensuredChainId,
   });
 
   return {

src/lib/contracts/governor/useVoteReceipt.ts

@@ -2,6 +2,7 @@ import { useReadContract } from "wagmi";
 import { Address } from "viem";
 import { GovernorABI } from "@/lib/abi/Governor";
 import { useContracts } from "@/lib/contracts/useContracts";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 
 const useVoteReceipt = ({
   address,
@@ -11,12 +12,15 @@ const useVoteReceipt = ({
   proposalId: bigint;
 }) => {
   const contracts = useContracts();
+  const ensuredChainId = useEnsureChainId();
+
   return useReadContract({
     abi: GovernorABI,
     address: contracts.MentoGovernor.address,
     functionName: "getReceipt",
     args: [proposalId, address!],
     query: { enabled: !!address },
+    chainId: ensuredChainId,
   });
 };
 

src/lib/contracts/locking/useAllLocks.ts

@@ -3,17 +3,17 @@ import {
   Lock,
   useGetAllLocksSuspenseQuery,
 } from "@/lib/graphql/subgraph/generated/subgraph";
-import { useAccount } from "wagmi";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 
 const useAllLocks = () => {
-  const { chainId } = useAccount();
+  const ensuredChainId = useEnsureChainId();
   const {
     data: { locks },
   } = useGetAllLocksSuspenseQuery({
     queryKey: "locking-contract-hook",
     refetchWritePolicy: "overwrite",
     context: {
-      apiName: getSubgraphApiName(chainId),
+      apiName: getSubgraphApiName(ensuredChainId),
     },
   });
 

src/lib/contracts/locking/useLockCalculation.ts

@@ -4,6 +4,7 @@ import { Lock } from "@/lib/graphql/subgraph/generated/subgraph";
 import { formatUnits, parseUnits } from "viem";
 import { useReadContract } from "wagmi";
 import useTokens from "../useTokens";
+import { useEnsureChainId } from "@/lib/hooks/useEnsureChainId";
 
 interface ILockHook {
   lock: Pick<Lock, "slope" | "cliff"> & { amount: string };
@@ -15,12 +16,14 @@ const useLockCalculation = ({ lock }: ILockHook) => {
     mentoContractData: { decimals: mentoDecimals },
     veMentoContractData: { decimals: veMentoDecimals },
   } = useTokens();
+  const ensuredChainId = useEnsureChainId();
 
   return useReadContract({
     address: Locking.address,
     abi: LockingABI,
     functionName: "getLock",
     args: [parseUnits(lock.amount, mentoDecimals), lock.slope, lock.cliff],
+    chainId: ensuredChainId,
     query: {
       enabled: Number(lock.amount) > 0 && lock.slope > 0,
       select: ([quote, slope]) => {