Merge pull request #80 from berachain/feat/add-bera-subgraph-governance

Feature: base structure update

apps/hub/src/app/governance/[genre]/components/delegate-modal.tsx

@@ -20,7 +20,7 @@ import { Icons } from "@bera/ui/icons";
 import { Address, isAddress } from "viem";
 import { Skeleton } from "@bera/ui/skeleton";
 import Identicon from "@bera/shared-ui/src/identicon";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 import { InputWithLabel } from "@bera/ui/input";
 
 export const DelegateModal = ({

apps/hub/src/app/governance/[genre]/components/go-to-if-has-voting-power.tsx

@@ -5,7 +5,7 @@ import { ActionButton } from "@bera/shared-ui";
 import { Address } from "viem";
 import Link from "next/link";
 import { governanceTokenAddress } from "@bera/config";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 
 export const GoToIfHasVotingPower = ({
   governorAddress,

apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx

@@ -1,21 +1,18 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
+import { governorAddress } from "@bera/config";
 import { Button } from "@bera/ui/button";
 import { Icons } from "@bera/ui/icons";
 
-import { Address } from "viem";
-import { Dapp } from "../../governance-genre-helper";
+import { GoToIfHasVotingPower } from "./go-to-if-has-voting-power";
+import { useGovernance } from "./governance-provider";
 import { ProposalsList } from "./proposals-list";
 import { UserVotingPower } from "./user-voting-power";
-import { GoToIfHasVotingPower } from "./go-to-if-has-voting-power";
 
-export default function GovernanceByStatus({
-  dapp,
-  governorAddress,
-}: {
-  dapp: Dapp;
-  governorAddress: Address;
-}) {
+export default function GovernanceByStatus() {
+  const { dappConfig } = useGovernance();
   return (
     <div className="pb-32">
       <Link
@@ -27,17 +24,17 @@ export default function GovernanceByStatus({
       </Link>
       <div
         className="font-bold uppercase tracking-widest"
-        style={{ color: dapp.color }}
+        style={{ color: dappConfig.color }}
       >
-        {dapp.name}
+        {dappConfig.name}
       </div>
-      <div className="text-foreground text-3xl font-bold leading-9 sm:text-5xl sm:leading-[48px]">
+      <div className="text-3xl font-bold leading-9 text-foreground sm:text-5xl sm:leading-[48px]">
         Vote on proposals <br />
         or create your own
       </div>
       <div className="mx-auto my-8 flex   flex-col gap-3 sm:w-full sm:flex-row">
         <GoToIfHasVotingPower
-          href={`/governance/${dapp.link}/create`}
+          href={`/governance/${dappConfig.slug}/create`}
           governorAddress={governorAddress}
         />
         <Button variant="secondary" className="w-fit">

apps/hub/src/app/governance/components/governance-provider.tsx → apps/hub/src/app/governance/[genre]/components/governance-provider.tsx

@@ -1,22 +1,28 @@
 "use client";
-import BigNumber from "bignumber.js";
 
+import { createContext, useContext, useEffect, useState } from "react";
+import { notFound } from "next/navigation";
 import { ApolloProvider } from "@apollo/client";
 import {
   useBeraJs,
   usePollBalance,
   usePollProposalThreshold,
   usePollUserDelegates,
 } from "@bera/berajs";
-import { bgtClient } from "@bera/graphql";
-import { createContext, useContext, useEffect, useState } from "react";
+import { bgtTokenAddress, governorAddress } from "@bera/config";
+import { getClient } from "@bera/graphql";
+import BigNumber from "bignumber.js";
 import { Address } from "viem";
+
 import {
-  governanceTokenAddress,
-  governorAddress as governorAddressFromEnv,
-} from "@bera/config";
+  GovernanceTopic,
+  PROPOSAL_GENRE,
+  getDappByGenre,
+  isValidGenre,
+} from "../../governance-genre-helper";
+import { DelegateModal } from "./delegate-modal";
 import { NotEnoughVotingPower } from "./not-enough-voting-power";
-import { DelegateModal } from "../[genre]/components/delegate-modal";
+
 type GovernanceContextType = {
   canPropose: boolean;
   votesThreshold?: string;
@@ -36,6 +42,7 @@ type GovernanceContextType = {
     onClose?: () => void;
     isOpen?: boolean;
   }) => void;
+  dappConfig: GovernanceTopic;
 };
 
 const GovernanceContext = createContext<GovernanceContextType | undefined>(
@@ -51,14 +58,20 @@ export const useGovernance = () => {
 };
 
 // Provides a context for the governance page
-const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
-  // TODO: update this if we want to support multiple governors
-  const [governorAddress, setGovernorAddress] = useState<Address>(
-    governorAddressFromEnv,
-  );
+export const GovernanceProvider = ({
+  genre,
+  children,
+}: {
+  genre: PROPOSAL_GENRE;
+  children: React.ReactNode;
+}) => {
+  if (!isValidGenre(genre)) return notFound();
+  const dappConfig = getDappByGenre(genre);
+  const client = getClient(dappConfig!.subgraph);
+
   const { account } = useBeraJs();
   const { data: tokenBalanceData, isLoading: isLoadingTokenBalance } =
-    usePollBalance({ address: governanceTokenAddress });
+    usePollBalance({ address: bgtTokenAddress });
 
   const [isDialogOpen, setIsDialogOpen] = useState<{
     isOpen: boolean;
@@ -99,6 +112,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
       setIsDialogOpen((prev) => ({ ...prev, isOpen: false }));
     }
   }, [canPropose]);
+
   return (
     <GovernanceContext.Provider
       value={
@@ -112,6 +126,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
           isLoading:
             isLoadingVotes || isLoadingVotesThreshold || isLoadingTokenBalance,
           governorAddress,
+          dappConfig,
           delegatedByOthers,
           delegatedToThemselves,
           tokenBalance: tokenBalanceData?.formattedBalance,
@@ -151,17 +166,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
           }));
         }}
       />
-      {children}
+      <ApolloProvider client={client}>{children}</ApolloProvider>
     </GovernanceContext.Provider>
   );
 };
-
-export const GovernanceProvider = ({
-  children,
-}: { children: React.ReactNode }) => {
-  return (
-    <ApolloProvider client={bgtClient}>
-      <_GovernanceProvider>{children}</_GovernanceProvider>
-    </ApolloProvider>
-  );
-};

apps/hub/src/app/governance/[genre]/components/user-voting-power.tsx

@@ -11,7 +11,7 @@ import { Skeleton } from "@bera/ui/skeleton";
 import { DelegateModal } from "./delegate-modal";
 import { Button } from "@bera/ui/button";
 import { useState } from "react";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 import { governanceTokenAddress } from "@bera/config";
 
 export const UserVotingPower = () => {

apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx

@@ -10,9 +10,9 @@ import {
   ProposalErrorCodes,
   ProposalTypeEnum,
 } from "~/app/governance/types";
-import { useGovernance } from "~/app/governance/components/governance-provider";
 import { formatUnits, isAddress, parseUnits } from "viem";
 import { checkProposalField } from "~/hooks/useCreateProposal";
+import { useGovernance } from "../../components/governance-provider";
 
 export function Erc20Transfer({
   idx,

apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx

@@ -1,24 +1,17 @@
 "use client";
 
+import { useEffect } from "react";
 import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useBeraJs } from "@bera/berajs";
+import { governorAddress } from "@bera/config";
 import { Icons } from "@bera/ui/icons";
 
-import {
-  PROPOSAL_GENRE,
-  getDappByGenre,
-} from "../../../governance-genre-helper";
+import { PROPOSAL_GENRE } from "../../../governance-genre-helper";
+import { useGovernance } from "../../components/governance-provider";
 import { CreateProposal } from "./create-proposal";
-import { governorAddress } from "@bera/config";
 
-import { useParams, useRouter } from "next/navigation";
-import { useGovernance } from "~/app/governance/components/governance-provider";
-import { useEffect } from "react";
-import { useBeraJs } from "@bera/berajs";
-export default function NewProposal({
-  genre,
-}: {
-  genre: PROPOSAL_GENRE;
-}) {
+export default function NewProposal({ genre }: { genre: PROPOSAL_GENRE }) {
   // const dapp = getDappByGenre(genre);
   const { account } = useBeraJs();
   const params = useParams();
@@ -42,10 +35,10 @@ export default function NewProposal({
   }, [canPropose, account, isLoading]);
 
   return (
-    <div className="pb-16 col-span-12 xl:col-span-8 xl:col-start-3">
+    <div className="col-span-12 pb-16 xl:col-span-8 xl:col-start-3">
       <Link
         href={`/governance/${params.genre}`}
-        className="flex mb-8 items-center gap-1 text-sm font-medium text-muted-foreground"
+        className="mb-8 flex items-center gap-1 text-sm font-medium text-muted-foreground"
       >
         <Icons.arrowLeft className="h-4 w-4" />
         All Proposals

apps/hub/src/app/governance/[genre]/layout.tsx

@@ -0,0 +1,14 @@
+import { PROPOSAL_GENRE } from "../governance-genre-helper";
+import { GovernanceProvider } from "./components/governance-provider";
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { genre: PROPOSAL_GENRE };
+}) {
+  return (
+    <GovernanceProvider genre={params.genre}>{children}</GovernanceProvider>
+  );
+}

apps/hub/src/app/governance/[genre]/page.tsx

@@ -1,27 +1,6 @@
-"use client";
-
 import React from "react";
-import { notFound } from "next/navigation";
-
-import {
-  PROPOSAL_GENRE,
-  getDappByGenre,
-  isValidGenre,
-} from "../governance-genre-helper";
 import GovernanceByStatus from "./components/governance-by-status";
-import { governorAddress } from "@bera/config";
-
-export default function Page({
-  params,
-}: {
-  params: { genre: PROPOSAL_GENRE };
-}) {
-  if (!isValidGenre(params.genre)) return notFound();
 
-  return (
-    <GovernanceByStatus
-      governorAddress={governorAddress}
-      dapp={getDappByGenre(params.genre)!}
-    />
-  );
+export default function Page() {
+  return <GovernanceByStatus />;
 }

apps/hub/src/app/governance/components/home-page.tsx

@@ -1,6 +1,10 @@
 import Link from "next/link";
 
-import { Dapp, NativeDapps, Others } from "../governance-genre-helper";
+import {
+  GovernanceTopic,
+  NativeDapps,
+  Others,
+} from "../governance-genre-helper";
 
 export const HomePage = () => {
   return (
@@ -19,11 +23,11 @@ export const HomePage = () => {
           NATIVE dAPPS
         </div>
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {NativeDapps.map((dapp: Dapp) => (
+          {NativeDapps.map((dapp: GovernanceTopic) => (
             <Link
               className="w-full cursor-pointer overflow-hidden rounded-lg border border-border transition-all hover:scale-105"
               key={dapp.name}
-              href={`governance/${dapp.link}`}
+              href={`governance/${dapp.slug}`}
             >
               <div
                 className="flex justify-center border-b border-border p-1"
@@ -42,11 +46,11 @@ export const HomePage = () => {
           OTHER
         </div>
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {Others.map((dapp: Dapp) => (
+          {Others.map((dapp: GovernanceTopic) => (
             <Link
               className="w-full cursor-pointer overflow-hidden rounded-lg border border-border transition-all hover:scale-105"
               key={dapp.name}
-              href={`governance/${dapp.link}`}
+              href={`governance/${dapp.slug}`}
             >
               <div
                 className="flex justify-center border-b border-border p-1"