diff --git a/.env b/.env index 0e550378..f7ba10f2 100644 --- a/.env +++ b/.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 diff --git a/app/(routes)/proposals/[id]/_components/execution-code.component.tsx b/app/(routes)/proposals/[id]/_components/execution-code.component.tsx index b66c594e..536e9db0 100644 --- a/app/(routes)/proposals/[id]/_components/execution-code.component.tsx +++ b/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, }); diff --git a/app/(routes)/proposals/[id]/page.tsx b/app/(routes)/proposals/[id]/page.tsx index 8e285b9f..17a9b05b 100644 --- a/app/(routes)/proposals/[id]/page.tsx +++ b/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); diff --git a/app/components/locks-list/locks-list.component.tsx b/app/components/locks-list/locks-list.component.tsx index 03d79ab9..6e6f4a70 100644 --- a/app/components/locks-list/locks-list.component.tsx +++ b/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", + }, }, ); diff --git a/app/components/proposal-summary/proposal-summary.component.tsx b/app/components/proposal-summary/proposal-summary.component.tsx index f720feeb..f74c19de 100644 --- a/app/components/proposal-summary/proposal-summary.component.tsx +++ b/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, diff --git a/app/components/proposals-list/proposals-list.component.tsx b/app/components/proposals-list/proposals-list.component.tsx index 99d661fc..d23488ea 100644 --- a/app/components/proposals-list/proposals-list.component.tsx +++ b/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 ( diff --git a/app/graphql/apollo.client.ts b/app/graphql/apollo.client.ts index 572ee0db..644b5717 100644 --- a/app/graphql/apollo.client.ts +++ b/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 diff --git a/app/graphql/subgraph/generated/graphql.ts b/app/graphql/subgraph/generated/graphql.ts index 32974ce9..5b5bce3b 100644 --- a/app/graphql/subgraph/generated/graphql.ts +++ b/app/graphql/subgraph/generated/graphql.ts @@ -7278,6 +7278,8 @@ export type _Block_ = { hash?: Maybe; /** The block number */ number: Scalars['Int']['output']; + /** The hash of the parent block */ + parentHash?: Maybe; /** Integer representation of the timestamp stored in blocks for the chain */ timestamp?: Maybe; }; diff --git a/app/helpers/chains.ts b/app/helpers/chains.ts index 6ff7d122..85f32be5 100644 --- a/app/helpers/chains.ts +++ b/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. diff --git a/app/helpers/wagmi.config.ts b/app/helpers/wagmi.config.ts index 2e494f12..3f688d1c 100644 --- a/app/helpers/wagmi.config.ts +++ b/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, diff --git a/app/hooks/useCeloExplorer.ts b/app/hooks/useCeloExplorer.ts deleted file mode 100644 index f39db91b..00000000 --- a/app/hooks/useCeloExplorer.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { useChainId } from "wagmi"; -import loadEnvVar from "../helpers/load-env-var"; - -const CELO_EXPLORER_API_URL = loadEnvVar( - process.env.NEXT_PUBLIC_CELO_EXPLORER_API_URL, -); -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, -); - -type CeloExplorerApi = { - name: "celoExplorer" | "celoExplorerAlfajores" | "celoExplorerBaklava"; - url: string; -}; - -export const useCeloExplorerApi = (): CeloExplorerApi => { - const chainId = useChainId(); - let result: CeloExplorerApi = { - name: "celoExplorer", - url: CELO_EXPLORER_API_URL, - }; - - if (chainId === 44787) { - result = { - name: "celoExplorerAlfajores", - url: CELO_EXPLORER_API_URL_ALFAJORES, - }; - } - - if (chainId === 62320) { - result = { - name: "celoExplorerBaklava", - url: CELO_EXPLORER_API_URL_BAKLAVA, - }; - } - - return result; -}; diff --git a/codegen.ts b/codegen.ts index 71092b0e..767f9070 100644 --- a/codegen.ts +++ b/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"],