feat(gov): gov homepage update

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

@@ -6,20 +6,20 @@ import { Button } from "@bera/ui/button";
 import { Icons } from "@bera/ui/icons";
 
 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 { SWRFallback, usePollAllProposalsQueryKey } from "@bera/berajs";
 import { unstable_serialize } from "swr/infinite";
 import { OrderDirection, Proposal_OrderBy } from "@bera/graphql/governance";
 import Image from "next/image";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 export default function GovernanceByStatus({
   allProposals,
 }: {
   allProposals?: any;
 }) {
-  const { currentTopic: govTopic } = useGovernance();
+  const { currentTopic: govTopic } = useCurrentTopic();
   return (
     <SWRFallback
       fallback={{

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

@@ -1,7 +1,6 @@
 "use client";
 
 import { createContext, useContext, useEffect, useState } from "react";
-import { notFound } from "next/navigation";
 import {
   useBeraJs,
   usePollBalance,
@@ -11,13 +10,6 @@ import {
 import { bgtTokenAddress, governorAddress } from "@bera/config";
 import BigNumber from "bignumber.js";
 import { Address } from "viem";
-
-import {
-  GovernanceTopic,
-  PROPOSAL_GENRE,
-  getDappByGenre,
-  isValidGenre,
-} from "../../governance-genre-helper";
 import { DelegateModal } from "./delegate-modal";
 import { NotEnoughVotingPower } from "./not-enough-voting-power";
 
@@ -40,7 +32,6 @@ type GovernanceContextType = {
     onClose?: () => void;
     isOpen?: boolean;
   }) => void;
-  currentTopic: GovernanceTopic;
 };
 
 const GovernanceContext = createContext<GovernanceContextType | undefined>(
@@ -57,15 +48,10 @@ export const useGovernance = () => {
 
 // Provides a context for the governance page
 export const GovernanceProvider = ({
-  genre,
   children,
 }: {
-  genre: PROPOSAL_GENRE;
   children: React.ReactNode;
 }) => {
-  if (!isValidGenre(genre)) return notFound();
-  const currentTopic = getDappByGenre(genre);
-
   const { account } = useBeraJs();
   const { data: tokenBalanceData, isLoading: isLoadingTokenBalance } =
     usePollBalance({ address: bgtTokenAddress });
@@ -124,7 +110,6 @@ export const GovernanceProvider = ({
           isLoading:
             isLoadingVotes || isLoadingVotesThreshold || isLoadingTokenBalance,
           governorAddress,
-          currentTopic,
           delegatedByOthers,
           delegatedToThemselves,
           tokenBalance: tokenBalanceData?.formattedBalance,

apps/hub/src/app/governance/[genre]/components/proposals-list.tsx

@@ -8,21 +8,21 @@ import { ProposalCard } from "./proposal-card";
 import { ProposalSorting } from "./proposal-sorting";
 import { ProposalStatusFilter } from "./proposal-status-filter";
 import { Button } from "@bera/ui/button";
-import { useGovernance } from "./governance-provider";
 import {
   OrderDirection,
   ProposalStatus,
   Proposal_OrderBy,
 } from "@bera/graphql/governance";
 import { useState } from "react";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 // const PROPOSALS_PER_PAGE = 100;
 
 export const ProposalsList = () => {
   const router = useRouter();
   const parms = useParams();
 
-  const { currentTopic } = useGovernance();
+  const { currentTopic } = useCurrentTopic();
   const [sortBy, setSortBy] = useState<{
     orderBy: Proposal_OrderBy;
     orderDirection: OrderDirection;

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

@@ -12,7 +12,7 @@ import {
   checkProposalField,
   type useCreateProposal,
 } from "~/hooks/useCreateProposal";
-import { useGovernance } from "../../components/governance-provider";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 export const CreateProposalBody = ({
   proposal,
@@ -27,7 +27,7 @@ export const CreateProposalBody = ({
   errors: CustomProposalErrors;
   setErrors: Dispatch<SetStateAction<CustomProposalErrors>>;
 }) => {
-  const { currentTopic } = useGovernance();
+  const { currentTopic } = useCurrentTopic();
   const handleNext = useCallback(() => {
     const e: CustomProposalErrors = {};
 

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

@@ -14,12 +14,12 @@ import { ActionButton } from "@bera/shared-ui";
 import { Tabs } from "./tabs";
 import { Icons } from "@bera/ui/icons";
 import { governorAddress } from "@bera/config";
-import { useGovernance } from "../../components/governance-provider";
 import { useRouter } from "next/navigation";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 export const CreateProposal = () => {
   const router = useRouter();
-  const { currentTopic } = useGovernance();
+  const { currentTopic } = useCurrentTopic();
 
   const {
     proposal,

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

@@ -10,18 +10,15 @@ import { PROPOSAL_GENRE } from "../../../governance-genre-helper";
 import { useGovernance } from "../../components/governance-provider";
 import { CreateProposal } from "./create-proposal";
 import Image from "next/image";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 export default function NewProposal({ genre }: { genre: PROPOSAL_GENRE }) {
-  // const dapp = getDappByGenre(genre);
   const { account } = useBeraJs();
   const params = useParams();
-  const {
-    canPropose,
-    isLoading,
-    currentTopic,
-    openNotEnoughVotingPowerDialog,
-  } = useGovernance();
+  const { canPropose, isLoading, openNotEnoughVotingPowerDialog } =
+    useGovernance();
   const router = useRouter();
+  const { currentTopic } = useCurrentTopic();
 
   useEffect(() => {
     if (isLoading) return;

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

@@ -1,14 +1,7 @@
-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>
-  );
+  return <section>{children}</section>;
 }

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

@@ -1,11 +1,13 @@
+"use client";
 import Link from "next/link";
-
 import {
   GovernanceTopic,
   NativeDapps,
   Others,
 } from "../governance-genre-helper";
 import { cn } from "@bera/ui";
+import Image from "next/image";
+import { UserVotingPower } from "../[genre]/components/user-voting-power";
 
 const GovernanceSection = ({
   title,
@@ -15,11 +17,11 @@ const GovernanceSection = ({
   dapps: GovernanceTopic[];
 }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 w-full">
       <h2 className="font-semibold leading-6 tracking-wider text-muted-foreground">
         {title}
       </h2>
-      <div className="grid gap-4 sm:gap-6 grid-cols-2 sm:grid-cols-4">
+      <div className="grid gap-4 sm:gap-6 grid-cols-2 sm:grid-cols-3 pr-6">
         {dapps.map((dapp: GovernanceTopic) => (
           <Link
             className={cn(
@@ -52,22 +54,41 @@ const GovernanceSection = ({
 
 export const HomePage = () => {
   return (
-    <div className="flex flex-col gap-12 pt-12 pb-32">
-      <div className="flex flex-col gap-2">
-        <h1 className="font-bold leading-6 tracking-wider text-muted-foreground">
-          GOVERNANCE
-        </h1>
-        <h2 className="text-5xl font-bold">
-          Berachain <br /> Governance
-        </h2>
+    <div className="flex flex-col pt-12">
+      <div className="grid grid-cols-4">
+        <div className="col-span-3 flex flex-col gap-2 mt-12">
+          <div className="text-stone-500 text-base font-bold font-['IBM Plex Sans'] leading-normal tracking-wider">
+            GOVERNANCE
+          </div>
+          <h2 className="text-5xl font-bold">
+            Vote on proposals <br /> or create your own
+          </h2>
+          <div className="text-[#868e96] text-sm font-medium font-['IBM Plex Sans'] leading-normal">
+            Participate in the future decisions of Berachain through governance
+            proposals.
+          </div>
+        </div>
+        <div className="col-span-1">
+          <Image
+            src="https://res.cloudinary.com/duv0g402y/image/upload/v1729532664/governance/y59qkz9bqnwkuqulpkme.png"
+            width={586}
+            height={388}
+            alt="poll image"
+          />
+        </div>
       </div>
+      <div className="grid grid-cols-4 w-full">
+        {/* Left column - takes up 3 columns */}
+        <div className="col-span-3 gap-12 pb-12 w-full">
+          <GovernanceSection title="" dapps={[...Others, ...NativeDapps]} />
+        </div>
 
-      <GovernanceSection
-        title=""
-        dapps={[...NativeDapps, ...Others].filter(
-          (dapp) => dapp.forumLink !== "#",
-        )}
-      />
+        {/* Right column - takes up 1 column */}
+        <div className="col-span-1 mt-4">
+          <UserVotingPower />
+        </div>
+      </div>
+      <div className="w-full h-[0px] border border-[#373331] self-center" />
     </div>
   );
 };

apps/hub/src/app/governance/components/proposal-heading.tsx

@@ -1,8 +1,8 @@
 import { cn } from "@bera/ui";
 import { Icons } from "@bera/ui/icons";
-import { getTopicColor, parseProposalBody } from "../helper";
-import { useGovernance } from "../[genre]/components/governance-provider";
+import { getTopicColor } from "../helper";
 import { ProposalSelectionFragment } from "@bera/graphql/governance";
+import { useCurrentTopic } from "~/hooks/useCurrentTopic";
 
 export const ProposalHeading = ({
   proposal,
@@ -13,7 +13,7 @@ export const ProposalHeading = ({
 }) => {
   const Heading = size === "sm" ? "h3" : "h1";
 
-  const { currentTopic } = useGovernance();
+  const { currentTopic } = useCurrentTopic();
 
   const isLinkVerified = proposal.unverifiedForumLink?.startsWith(
     currentTopic.forumLink,

apps/hub/src/app/governance/layout.tsx

@@ -1,3 +1,13 @@
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return <section className="container">{children}</section>;
+import { GovernanceProvider } from "./[genre]/components/governance-provider";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="container">
+      <GovernanceProvider>{children}</GovernanceProvider>
+    </section>
+  );
 }

apps/hub/src/hooks/useCreateProposal.ts

@@ -17,8 +17,6 @@ import {
   isAddress,
   parseAbiItem,
 } from "viem";
-
-import { useGovernance } from "../app/governance/[genre]/components/governance-provider";
 import {
   GovernanceTopic,
   PROPOSAL_GENRE,
@@ -31,6 +29,7 @@ import {
   ProposalTypeEnum,
   SafeProposalAction,
 } from "../app/governance/types";
+import { useCurrentTopic } from "./useCurrentTopic";
 
 const defaultAction = {
   type: ProposalTypeEnum.CUSTOM_PROPOSAL,
@@ -299,7 +298,7 @@ export const useCreateProposal = ({
     topic: new Set(),
   });
 
-  const { currentTopic } = useGovernance();
+  const { currentTopic } = useCurrentTopic();
 
   useEffect(() => {
     setProposal((p) => ({

apps/hub/src/hooks/useCurrentTopic.ts

@@ -0,0 +1,16 @@
+import { useParams } from "next/navigation";
+import {
+  GovernanceTopic,
+  getDappByGenre,
+  isValidGenre,
+} from "~/app/governance/governance-genre-helper";
+
+export const useCurrentTopic = () => {
+  const { genre } = useParams();
+  if (!isValidGenre(genre)) {
+    throw new Error(`Invalid genre: ${genre}`);
+  }
+  const currentTopic = getDappByGenre(genre) as GovernanceTopic;
+
+  return { currentTopic };
+};