feat: Improve useChainState and standardize contract loading

app/(routes)/providers.tsx

@@ -6,6 +6,7 @@ import { ApolloNextAppProvider } from "@apollo/experimental-nextjs-app-support/s
 import { newApolloClient } from "@/app/graphql/apollo.client";
 import { wagmiConfig } from "@/app/helpers/wagmi.config";
 import { ChainStateProvider } from "../providers/chainState.provider";
+import { Celo } from "../helpers/chains";
 
 const queryClient = new QueryClient();
 
@@ -16,7 +17,7 @@ export function Providers({ children }: { children: ReactNode }) {
     <ApolloNextAppProvider makeClient={newApolloClient}>
       <WagmiProvider config={wagmiConfig}>
         <QueryClientProvider client={queryClient}>
-          <RainbowKitProvider>
+          <RainbowKitProvider initialChain={Celo}>
             <ChainStateProvider>{mounted && children}</ChainStateProvider>
           </RainbowKitProvider>
         </QueryClientProvider>

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

@@ -14,6 +14,7 @@ import { useUserStore } from "@/app/store";
 import { useEffect } from "react";
 import { useChainState } from "@/app/providers/chainState.provider";
 import NumbersService from "@/app/helpers/numbers.service";
+import { formatUnits } from "viem";
 
 interface ConnectedDropdownProps extends BaseComponentProps {
   block?: boolean;
@@ -32,13 +33,8 @@ export const ConnectedDropdown = ({
   const { openChainModal } = useChainModal();
   const { openAccountModal } = useAccountModal();
 
-  const {
-    initWallet,
-    disconnectWallet,
-    isFetching,
-    isInitialized,
-    balanceMENTO,
-  } = useUserStore();
+  const { initWallet, disconnectWallet, isFetching, isInitialized } =
+    useUserStore();
 
   useEffect(() => {
     const connected = !!account && !!chain;
@@ -63,33 +59,16 @@ export const ConnectedDropdown = ({
       <DropdownButton.Dropdown>
         {chainStateReady ? (
           <div className={styles.wallet_addons}>
-            <div className={styles.addon}>
-              <div className={styles.addon__title}>
-                {tokens.nativeCurrency.symbol}
-              </div>
-              <div className={styles.addon__value}>
-                {NumbersService.scaleBalance(
-                  tokens.nativeCurrency.balance,
-                  tokens.nativeCurrency.decimals,
-                )}
-              </div>
-            </div>
             <div className={styles.addon}>
               <div className={styles.addon__title}>{tokens.mento.symbol}</div>
               <div className={styles.addon__value}>
-                {NumbersService.scaleBalance(
-                  tokens.mento.balance,
-                  tokens.mento.decimals,
-                )}
+                {formatUnits(tokens.mento.balance, tokens.mento.decimals)}
               </div>
             </div>
             <div className={styles.addon}>
               <div className={styles.addon__title}>{tokens.veMento.symbol}</div>
               <div className={styles.addon__value}>
-                {NumbersService.scaleBalance(
-                  tokens.veMento.balance,
-                  tokens.veMento.decimals,
-                )}
+                {formatUnits(tokens.veMento.balance, tokens.veMento.decimals)}
               </div>
             </div>
           </div>
@@ -121,7 +100,6 @@ export const ConnectButton = ({
       {({ account, chain, openConnectModal, mounted }) => {
         if (!mounted) return <></>;
         const connected = !!account && !!chain;
-        console.log(account);
 
         return (
           <>

app/components/create-proposal/create-proposal-preview-step/create-proposal-preview-step.component.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { GovernorABI } from "@/app/abis/Governor";
+import { useContracts } from "@/app/hooks/useContracts";
 import { useCreateProposalStore } from "@/app/store";
 import { MarkdownView } from "@components/_shared";
 import Wrapper from "@components/create-proposal/wrapper/wrapper.component";
@@ -21,6 +22,7 @@ type ProposalCreateParams = {
 
 export const CreateProposalPreviewStep = () => {
   const { form } = useCreateProposalStore();
+  const contracts = useContracts();
 
   const proposal: ProposalCreateParams = useMemo(() => {
     const { title, description } =
@@ -55,7 +57,7 @@ export const CreateProposalPreviewStep = () => {
 
   const onSave = useCallback(() => {
     writeContract({
-      address: "0xc1d32e3bac67b28d31d7828c8ff160e44c37be1c",
+      address: contracts?.MentoGovernor.address as Address,
       abi: GovernorABI,
       functionName: "propose",
       args: [
@@ -67,7 +69,7 @@ export const CreateProposalPreviewStep = () => {
         JSON.stringify(proposal.metadata),
       ] as any,
     });
-  }, [writeContract, proposal]);
+  }, [writeContract, proposal, contracts?.MentoGovernor.address]);
 
   return (
     <Wrapper step={formStep} title="Preview your proposal" onSave={onSave}>

app/helpers/chains.ts

@@ -1,54 +1,42 @@
-import { Chain, celoAlfajores } from "viem/chains";
+import { Address } from "viem";
+import { celoAlfajores } from "viem/chains";
 import { celo } from "viem/chains";
+import { addresses, ContractAddresses } from "@mento-protocol/mento-sdk";
+import { MentoChain, MentoChainContracts } from "../types";
 
-export const Celo: Chain = {
+export const Celo: MentoChain = {
   ...celo,
-  // iconUrl: "https://rainbowkit-with-celo.vercel.app/icons/celo.svg",
-  // iconBackground: "#fff",
   contracts: {
     ...celo.contracts,
-    governance: {
-      address: "0x0",
-      blockCreated: 0,
-    },
-    mento: {
-      address: "0x0",
-      blockCreated: 0,
-    },
-    locking: {
-      address: "0x0",
-      blockCreated: 0,
-    },
+    ...transformToChainContracts(addresses[celo.id]),
   },
 };
 
-export const Alfajores: Chain = {
+export const Alfajores: MentoChain = {
   ...celoAlfajores,
-  // iconUrl: "https://rainbowkit-with-celo.vercel.app/icons/alfajores.svg",
-  // iconBackground: "#fff",
   contracts: {
     ...celoAlfajores.contracts,
-    governance: {
+    ...transformToChainContracts(addresses[celoAlfajores.id]),
+    //TODO: REMOVE ME POST SUBGRAPH UPDATE PLS :'(
+    //      Here we override the MentoGovernor and Locking contract addresses
+    //      To use the versions deployed by @bowd that have proposal and have
+    //      been indexed by the subgraph.
+    //      This should be removed once the subgraph is updated and the contracts
+    //      Have been seeded with some test proposals.
+    //      See comment here:
+    //      https://github.com/mento-protocol/governance-ui/pull/50#issue-2109977351
+    MentoGovernor: {
       address: "0xc1d32e3bac67b28d31d7828c8ff160e44c37be1c",
-      blockCreated: 21963087,
     },
-    mento: {
-      address: "0xc88f553dc20fc78ce554bff97c2f4a4e5bdb0134",
-      blockCreated: 21963087,
-    },
-    locking: {
-      address: "0x8e1707307f04ec9742ad3d8e6d88ae5f506f83ca",
-      blockCreated: 21963087,
+    Locking: {
+      address: "0x8E1707307f04eC9742AD3d8e6D88AE5F506F83cA",
     },
   },
 };
 
-export const Baklava: Chain = {
+export const Baklava: MentoChain = {
   id: 62320,
   name: "Baklava",
-  // network: "Baklava Testnet",
-  // iconUrl: "https://rainbowkit-with-celo.vercel.app/icons/baklava.svg",
-  // iconBackground: "#fff",
   nativeCurrency: {
     decimals: 18,
     name: "CELO",
@@ -74,17 +62,26 @@ export const Baklava: Chain = {
   },
   testnet: true,
   contracts: {
-    governance: {
-      address: "0x0",
-      blockCreated: 0,
-    },
-    mento: {
-      address: "0x0",
-      blockCreated: 0,
-    },
-    locking: {
-      address: "0x0",
-      blockCreated: 0,
-    },
+    ...transformToChainContracts(addresses[62320]),
   },
 };
+
+/**
+ * Transforms the specified Mento contract addresses to the format used by Viem.
+ * @param contractAddresses The Mento contract addresses to be transformed.
+ * @returns Mento contract addresses in the format used by Viem.
+ */
+function transformToChainContracts(
+  contractAddresses: ContractAddresses,
+): MentoChainContracts {
+  const chainContracts: Partial<MentoChainContracts> = {};
+
+  Object.keys(contractAddresses).forEach((key) => {
+    const contractKey = key as keyof ContractAddresses;
+    chainContracts[contractKey] = {
+      address: contractAddresses[contractKey] as Address,
+    };
+  });
+
+  return chainContracts as MentoChainContracts;
+}

app/hooks/useContracts.ts

@@ -0,0 +1,18 @@
+import { useMemo } from "react";
+import { useChainId, useConfig } from "wagmi";
+import { MentoChain, MentoChainContracts } from "../types";
+
+export const useContracts = (): MentoChainContracts | undefined => {
+  const config = useConfig();
+  const chainId = useChainId();
+
+  const contracts = useMemo(() => {
+    const chain = config.chains.find(
+      (chain) => chain.id === chainId,
+    ) as MentoChain;
+
+    return chain?.contracts;
+  }, [chainId, config.chains]);
+
+  return contracts;
+};

app/hooks/useProposalStates.ts

@@ -23,6 +23,7 @@ import { Proposal, ProposalState, Scalars } from "@/app/graphql";
 import { useEffect } from "react";
 import { useReadContracts } from "wagmi";
 import { GovernorABI } from "@/app/abis/Governor";
+import { useContracts } from "./useContracts";
 
 type ProposalID = Scalars["ID"]["output"];
 type ProposalToState = Record<ProposalID, ProposalState>;
@@ -48,10 +49,10 @@ export const isStateNumber = (value: any): value is StateNumber => {
 export const useProposalStates = (
   proposals: Pick<Proposal, "proposalId">[],
 ) => {
+  const contracts = useContracts();
   const { data, isError, isLoading } = useReadContracts({
     contracts: proposals.map((proposal) => ({
-      // TODO: Add propper address
-      address: "0xc1d32e3bac67b28d31d7828c8ff160e44c37be1c",
+      address: contracts?.MentoGovernor.address,
       abi: GovernorABI,
       functionName: "state",
       args: [proposal.proposalId],