Update subgraph url

.env

@@ -1,5 +1,8 @@
 NEXT_PUBLIC_CELO_EXPLORER_API_URL=https://explorer.celo.org/mainnet/graphiql
 NEXT_PUBLIC_CELO_EXPLORER_API_URL_ALFAJORES=https://explorer.celo.org/alfajores/graphiql
-NEXT_PUBLIC_CELO_EXPLORER_API_URL_BAKLAVA=https://explorer.celo.org/baklava/graphiql
+
+# TODO: Replace next line with the mainnet subgraph URL once it's deployed
+NEXT_PUBLIC_SUBGRAPH_URL=https://api.studio.thegraph.com/query/67235/mento-alfajores/version/latest
+NEXT_PUBLIC_SUBGRAPH_URL_ALFAJORES=https://api.studio.thegraph.com/query/67235/mento-alfajores/version/latest
+
 NEXT_PUBLIC_WALLET_CONNECT_ID=3f6f578ca4a77fd09bc984689c9d095f
-NEXT_PUBLIC_SUBGRAPH_URL=https://api.studio.thegraph.com/query/63311/mento/version/latest

app/(routes)/proposals/[id]/_components/execution-code.component.tsx

@@ -4,10 +4,10 @@ import {
   type GetContractsInfoQuery,
   type ProposalCall,
 } from "@/app/graphql";
-import { useCeloExplorerApi } from "@/app/hooks/useCeloExplorer";
 import { useQuery } from "@apollo/experimental-nextjs-app-support/ssr";
 import { useMemo } from "react";
 import { decodeFunctionData } from "viem";
+import { useChainId } from "wagmi";
 
 type Props = {
   calls: ProposalCall[];
@@ -21,13 +21,15 @@ type ContractInfo = {
 };
 
 export default function ExecutionCode({ calls }: Props) {
-  const { name: apiName } = useCeloExplorerApi();
+  const chainId = useChainId();
 
   const { data, error: apolloError } = useQuery(GetContractsInfo, {
     variables: {
       addresses: calls.map((call) => call.target.id),
     },
-    context: { apiName },
+    context: {
+      apiName: chainId === 44787 ? "celoExplorerAlfajores" : "celoExplorer",
+    },
     skip: !calls.length,
   });
 

app/(routes)/proposals/[id]/page.tsx

@@ -6,7 +6,7 @@ import { useSuspenseQuery } from "@apollo/experimental-nextjs-app-support/ssr";
 import classNames from "classnames";
 import { format } from "date-fns";
 import { useMemo, useState } from "react";
-import { useBlock, useBlockNumber } from "wagmi";
+import { useBlock, useBlockNumber, useChainId } from "wagmi";
 import styles from "./page.module.scss";
 
 // Components
@@ -27,12 +27,18 @@ import Vote from "./_components/vote.component";
 
 const Page = ({ params }: { params: { id: string } }) => {
   const { walletAddress, balanceVeMENTO } = useUserStore();
+  const chainId = useChainId();
 
-  // FIXME: The return type definition is a bit hacky and ideally shouldn't be needed.
-  // It's likely fragments-related. If we inline the ProposalFields fragment into GetProposal,
-  // then it works without explicit return type definition 🤷‍♂️
+  /**
+   * FIXME: The return type definition is a bit hacky and ideally shouldn't be needed.
+   * It's likely fragments-related. If we inline the ProposalFields fragment into the
+   * GetProposal query, then it works without an explicit return type definition 🤷‍♂️
+   */
   const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposal, {
     variables: { id: params.id },
+    context: {
+      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
+    },
   });
 
   useProposalStates(data.proposals);

app/components/locks-list/locks-list.component.tsx

@@ -1,27 +1,34 @@
-import styles from "./locks-list.module.scss";
-import BaseComponentProps from "@interfaces/base-component-props.interface";
-import { Button, DropdownButton } from "@components/_shared";
-import classNames from "classnames";
-import { GetLocksDocument, Lock } from "@/app/graphql";
-import { useSuspenseQuery } from "@apollo/client";
-import { useAccount, useReadContract } from "wagmi";
 import { LockingABI } from "@/app/abis/Locking";
+import { GetLocksDocument, Lock } from "@/app/graphql";
 import { useContracts } from "@/app/hooks/useContracts";
+import useModal from "@/app/providers/modal.provider";
+import { useSuspenseQuery } from "@apollo/client";
+import BaseComponentProps from "@interfaces/base-component-props.interface";
+import classNames from "classnames";
+import { addWeeks, nextWednesday } from "date-fns";
 import { useCallback, useMemo } from "react";
-import { addWeeks, format, nextWednesday } from "date-fns";
 import { formatUnits } from "viem";
-import { useWriteContract } from "wagmi";
-import useModal from "@/app/providers/modal.provider";
+import {
+  useAccount,
+  useChainId,
+  useReadContract,
+  useWriteContract,
+} from "wagmi";
+import styles from "./locks-list.module.scss";
 
 interface LocksListProps extends BaseComponentProps {
   address: string;
 }
 
 export const LocksList = ({ address }: LocksListProps) => {
+  const chainId = useChainId();
   const { data, refetch } = useSuspenseQuery<{ locks: Lock[] }>(
     GetLocksDocument,
     {
       variables: { address },
+      context: {
+        apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
+      },
     },
   );
 

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

@@ -6,11 +6,17 @@ import { useSuspenseQuery } from "@apollo/client";
 import { Card } from "@components/_shared";
 import { useMemo } from "react";
 import { formatUnits } from "viem";
-import { useBlockNumber, useReadContract } from "wagmi";
+import { useBlockNumber, useChainId, useReadContract } from "wagmi";
 
 const ProposalSummaryComponent = () => {
+  const chainId = useChainId();
   const contracts = useContracts();
-  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals);
+  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals, {
+    context: {
+      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
+    },
+  });
+
   const { data: totalSupply } = useReadContract({
     address: contracts.Locking.address,
     abi: LockingABI,

app/components/proposals-list/proposals-list.component.tsx

@@ -10,6 +10,7 @@ import { stateToBadgeColorMap } from "@interfaces/proposal.interface";
 import classNames from "classnames";
 import Link from "next/link";
 import { formatUnits, numberToHex } from "viem";
+import { useChainId } from "wagmi";
 import styles from "./proposals-list.module.scss";
 
 interface ProposalsListProps extends BaseComponentProps {}
@@ -18,7 +19,14 @@ export const ProposalsListComponent = ({
   className,
   style,
 }: ProposalsListProps) => {
-  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals);
+  const chainId = useChainId();
+  const { data } = useSuspenseQuery<{ proposals: Proposal[] }>(GetProposals, {
+    queryKey: "GetProposals",
+    context: {
+      apiName: chainId === 44787 ? "subgraphAlfajores" : "subgraph",
+    },
+  });
+
   useProposalStates(data?.proposals);
 
   return (

app/graphql/apollo.client.ts

@@ -17,10 +17,10 @@ const CELO_EXPLORER_API_URL_ALFAJORES = loadEnvVar(
   process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL_ALFAJORES,
 );
 
-const CELO_EXPLORER_API_URL_BAKLAVA = loadEnvVar(
-  process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL_BAKLAVA,
-);
 const SUBGRAPH_URL = loadEnvVar(process.env.NEXT_PUBLIC_SUBGRAPH_URL);
+const SUBGRAPH_URL_ALFAJORES = loadEnvVar(
+  process.env.NEXT_PUBLIC_SUBGRAPH_URL_ALFAJORES,
+);
 
 // have a function to create a client for you
 export function newApolloClient() {
@@ -29,13 +29,18 @@ export function newApolloClient() {
     uri: (operation) => {
       const { apiName } = operation.getContext();
 
-      if (apiName === "celoExplorer") return CELO_EXPLORER_API_URL;
-      if (apiName === "celoExplorerAlfajores")
-        return CELO_EXPLORER_API_URL_ALFAJORES;
-      if (apiName === "celoExplorerBaklava")
-        return CELO_EXPLORER_API_URL_BAKLAVA;
-
-      return SUBGRAPH_URL;
+      switch (apiName) {
+        case "celoExplorer":
+          return CELO_EXPLORER_API_URL;
+        case "celoExplorerAlfajores":
+          return CELO_EXPLORER_API_URL_ALFAJORES;
+        case "subgraph":
+          return SUBGRAPH_URL;
+        case "subgraphAlfajores":
+          return SUBGRAPH_URL_ALFAJORES;
+        default:
+          return SUBGRAPH_URL;
+      }
     },
 
     // you can disable result caching here if you want to

app/graphql/subgraph/generated/graphql.ts

@@ -7278,6 +7278,8 @@ export type _Block_ = {
   hash?: Maybe<Scalars['Bytes']['output']>;
   /** The block number */
   number: Scalars['Int']['output'];
+  /** The hash of the parent block */
+  parentHash?: Maybe<Scalars['Bytes']['output']>;
   /** Integer representation of the timestamp stored in blocks for the chain */
   timestamp?: Maybe<Scalars['Int']['output']>;
 };

app/helpers/chains.ts

@@ -50,38 +50,6 @@ export const Alfajores: MentoChain = {
   },
 };
 
-export const Baklava: MentoChain = {
-  id: 62320,
-  name: "Baklava",
-  nativeCurrency: {
-    decimals: 18,
-    name: "CELO",
-    symbol: "B-CELO",
-  },
-  rpcUrls: {
-    default: {
-      http: ["https://baklava-forno.celo-testnet.org"],
-    },
-    public: {
-      http: ["https://baklava-forno.celo-testnet.org"],
-    },
-  },
-  blockExplorers: {
-    default: {
-      name: "Celo Explorer",
-      url: "https://explorer.celo.org/baklava",
-    },
-    etherscan: {
-      name: "Celo Explorer",
-      url: "https://explorer.celo.org/baklava",
-    },
-  },
-  testnet: true,
-  contracts: {
-    ...transformToChainContracts(addresses[62320]),
-  },
-};
-
 /**
  * Transforms the specified Mento contract addresses to the format used by Viem.
  * @param contractAddresses The Mento contract addresses to be transformed.

app/helpers/wagmi.config.ts

@@ -1,12 +1,12 @@
-import { createConfig, http } from "wagmi";
-import { Alfajores, Baklava, Celo } from "@/app/helpers/chains";
+import { Alfajores, Celo } from "@/app/helpers/chains";
+import { connectorsForWallets } from "@rainbow-me/rainbowkit";
 import {
   metaMaskWallet,
   omniWallet,
   trustWallet,
   walletConnectWallet,
 } from "@rainbow-me/rainbowkit/wallets";
-import { connectorsForWallets } from "@rainbow-me/rainbowkit";
+import { createConfig, http } from "wagmi";
 import { valora } from "./Valora.wallet";
 
 const connectors = connectorsForWallets(
@@ -30,10 +30,9 @@ const connectors = connectorsForWallets(
 );
 
 export const wagmiConfig = createConfig({
-  chains: [Alfajores, Baklava, Celo],
+  chains: [Alfajores, Celo],
   transports: {
     [Alfajores.id]: http(),
-    [Baklava.id]: http(),
     [Celo.id]: http(),
   },
   // autoConnect: true,

codegen.ts

@@ -5,10 +5,13 @@ import loadEnvVar from "./app/helpers/load-env-var";
 const CELO_EXPLORER_API_URL = loadEnvVar(
   process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL,
 );
+
 const SUBGRAPH_URL = loadEnvVar(process.env.NEXT_PUBLIC_SUBGRAPH_URL);
 
 const config: CodegenConfig = {
   generates: {
+    // NOTE: In case we need to use different subgraph URLs for different environments
+    // we'll need to add another element to the object below, i.e. "./app/graphql/subgraph-alfajores/generated"
     "./app/graphql/subgraph/generated/": {
       schema: [SUBGRAPH_URL, "./schema.client.graphql"],
       documents: ["app/graphql/subgraph/**/*.graphql"],