From 1150edc2ce05db3e174421e0aed1b73da183a3b7 Mon Sep 17 00:00:00 2001 From: thevolcanomanishere Date: Thu, 9 Jan 2025 15:13:08 +0000 Subject: [PATCH 1/5] feat(gov): gov homepage update --- .../app/governance/components/home-page.tsx | 56 +++++++++++++------ apps/hub/src/app/governance/layout.tsx | 14 ++++- 2 files changed, 51 insertions(+), 19 deletions(-) diff --git a/apps/hub/src/app/governance/components/home-page.tsx b/apps/hub/src/app/governance/components/home-page.tsx index 965437066..1de035ccc 100644 --- a/apps/hub/src/app/governance/components/home-page.tsx +++ b/apps/hub/src/app/governance/components/home-page.tsx @@ -1,11 +1,14 @@ +"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 { DelegateModal } from "../[genre]/components/delegate-modal"; +import { UserVotingPower } from "../[genre]/components/user-voting-power"; const GovernanceSection = ({ title, @@ -15,11 +18,11 @@ const GovernanceSection = ({ dapps: GovernanceTopic[]; }) => { return ( -
+

{title}

-
+
{dapps.map((dapp: GovernanceTopic) => ( { return ( -
-
-

- GOVERNANCE -

-

- Berachain
Governance -

+
+
+
+
+ GOVERNANCE +
+

+ Vote on proposals
or create your own +

+
+ Participate in the future decisions of Berachain through governance + proposals. +
+
+
+ poll image +
+
+ {/* Left column - takes up 3 columns */} +
+ +
- dapp.forumLink !== "#", - )} - /> + {/* Right column - takes up 1 column */} +
+ +
+
+
); }; diff --git a/apps/hub/src/app/governance/layout.tsx b/apps/hub/src/app/governance/layout.tsx index d005cfa79..06a00bf27 100755 --- a/apps/hub/src/app/governance/layout.tsx +++ b/apps/hub/src/app/governance/layout.tsx @@ -1,3 +1,13 @@ -export default function Layout({ children }: { children: React.ReactNode }) { - return
{children}
; +import { GovernanceProvider } from "./[genre]/components/governance-provider"; + +export default function Layout({ + children, +}: { + children: React.ReactNode; +}) { + return ( +
+ {children} +
+ ); } From d87bbace7924e45a5c9eda14049ed8972a75c8f2 Mon Sep 17 00:00:00 2001 From: thevolcanomanishere Date: Thu, 9 Jan 2025 16:39:28 +0000 Subject: [PATCH 2/5] feat(gov): basic layout, move current topic from provider --- .../[genre]/components/governance-by-status.tsx | 4 ++-- .../[genre]/components/governance-provider.tsx | 15 --------------- .../[genre]/components/proposals-list.tsx | 4 ++-- .../create/components/create-proposal-body.tsx | 4 ++-- .../create/components/create-proposal.tsx | 4 ++-- .../[genre]/create/components/new-proposal.tsx | 11 ++++------- apps/hub/src/app/governance/[genre]/layout.tsx | 9 +-------- .../src/app/governance/components/home-page.tsx | 3 +-- .../governance/components/proposal-heading.tsx | 6 +++--- apps/hub/src/app/governance/layout.tsx | 2 +- apps/hub/src/hooks/useCreateProposal.ts | 5 ++--- apps/hub/src/hooks/useCurrentTopic.ts | 16 ++++++++++++++++ 12 files changed, 36 insertions(+), 47 deletions(-) create mode 100644 apps/hub/src/hooks/useCurrentTopic.ts diff --git a/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx b/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx index c71d58595..58513beed 100755 --- a/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx +++ b/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 ( void; isOpen?: boolean; }) => void; - currentTopic: GovernanceTopic; }; const GovernanceContext = createContext( @@ -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, diff --git a/apps/hub/src/app/governance/[genre]/components/proposals-list.tsx b/apps/hub/src/app/governance/[genre]/components/proposals-list.tsx index 247b7cb03..ae9f2eb1b 100644 --- a/apps/hub/src/app/governance/[genre]/components/proposals-list.tsx +++ b/apps/hub/src/app/governance/[genre]/components/proposals-list.tsx @@ -8,13 +8,13 @@ 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; @@ -22,7 +22,7 @@ export const ProposalsList = () => { const router = useRouter(); const parms = useParams(); - const { currentTopic } = useGovernance(); + const { currentTopic } = useCurrentTopic(); const [sortBy, setSortBy] = useState<{ orderBy: Proposal_OrderBy; orderDirection: OrderDirection; diff --git a/apps/hub/src/app/governance/[genre]/create/components/create-proposal-body.tsx b/apps/hub/src/app/governance/[genre]/create/components/create-proposal-body.tsx index eb6de0280..8ad82393b 100644 --- a/apps/hub/src/app/governance/[genre]/create/components/create-proposal-body.tsx +++ b/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>; }) => { - const { currentTopic } = useGovernance(); + const { currentTopic } = useCurrentTopic(); const handleNext = useCallback(() => { const e: CustomProposalErrors = {}; diff --git a/apps/hub/src/app/governance/[genre]/create/components/create-proposal.tsx b/apps/hub/src/app/governance/[genre]/create/components/create-proposal.tsx index dcfde75a3..e9f3fa423 100644 --- a/apps/hub/src/app/governance/[genre]/create/components/create-proposal.tsx +++ b/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, diff --git a/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx b/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx index 4bf053300..47ebd5ea6 100755 --- a/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx +++ b/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; diff --git a/apps/hub/src/app/governance/[genre]/layout.tsx b/apps/hub/src/app/governance/[genre]/layout.tsx index f9f22552b..5797767ce 100755 --- a/apps/hub/src/app/governance/[genre]/layout.tsx +++ b/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 ( - {children} - ); + return
{children}
; } diff --git a/apps/hub/src/app/governance/components/home-page.tsx b/apps/hub/src/app/governance/components/home-page.tsx index 1de035ccc..7ae45833f 100644 --- a/apps/hub/src/app/governance/components/home-page.tsx +++ b/apps/hub/src/app/governance/components/home-page.tsx @@ -7,7 +7,6 @@ import { } from "../governance-genre-helper"; import { cn } from "@bera/ui"; import Image from "next/image"; -import { DelegateModal } from "../[genre]/components/delegate-modal"; import { UserVotingPower } from "../[genre]/components/user-voting-power"; const GovernanceSection = ({ @@ -85,7 +84,7 @@ export const HomePage = () => {
{/* Right column - takes up 1 column */} -
+
diff --git a/apps/hub/src/app/governance/components/proposal-heading.tsx b/apps/hub/src/app/governance/components/proposal-heading.tsx index 8910245ea..e1922f1ec 100644 --- a/apps/hub/src/app/governance/components/proposal-heading.tsx +++ b/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, diff --git a/apps/hub/src/app/governance/layout.tsx b/apps/hub/src/app/governance/layout.tsx index 06a00bf27..5f6d2af8d 100755 --- a/apps/hub/src/app/governance/layout.tsx +++ b/apps/hub/src/app/governance/layout.tsx @@ -7,7 +7,7 @@ export default function Layout({ }) { return (
- {children} + {children}
); } diff --git a/apps/hub/src/hooks/useCreateProposal.ts b/apps/hub/src/hooks/useCreateProposal.ts index d8713d953..8dbb24231 100755 --- a/apps/hub/src/hooks/useCreateProposal.ts +++ b/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) => ({ diff --git a/apps/hub/src/hooks/useCurrentTopic.ts b/apps/hub/src/hooks/useCurrentTopic.ts new file mode 100644 index 000000000..ead10a712 --- /dev/null +++ b/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 }; +}; From 1f44eb252b38a7c75da130e1ec384c2eef86c748 Mon Sep 17 00:00:00 2001 From: thevolcanomanishere Date: Fri, 10 Jan 2025 14:25:38 +0000 Subject: [PATCH 3/5] feat(gov): add docs box --- .../app/governance/components/home-page.tsx | 41 ++++++++++++++----- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/apps/hub/src/app/governance/components/home-page.tsx b/apps/hub/src/app/governance/components/home-page.tsx index 7ae45833f..68276431d 100644 --- a/apps/hub/src/app/governance/components/home-page.tsx +++ b/apps/hub/src/app/governance/components/home-page.tsx @@ -21,7 +21,7 @@ const GovernanceSection = ({

{title}

-
+
{dapps.map((dapp: GovernanceTopic) => ( { return (
-
-
+
+
GOVERNANCE
-

+

Vote on proposals
or create your own

@@ -68,27 +68,48 @@ export const HomePage = () => { proposals.
-
+
poll image
-
- {/* Left column - takes up 3 columns */} -
+ +
+
- {/* Right column - takes up 1 column */}
-
+ +
+ +
+
+
+
+ DOCS +
+
+
+ Learn more about Governance +
+
+
+ Get started with documentation on proposals, delegation +
+ and voting. +
+
+
+
); }; From 212a917336660f7f133404cc5c47dd213e17810f Mon Sep 17 00:00:00 2001 From: thevolcanomanishere Date: Fri, 10 Jan 2025 14:48:55 +0000 Subject: [PATCH 4/5] fix(gov): Add missing next.js rule for aws image cdn --- apps/hub/next.config.mjs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/apps/hub/next.config.mjs b/apps/hub/next.config.mjs index 2c8351d00..ffaa5c739 100755 --- a/apps/hub/next.config.mjs +++ b/apps/hub/next.config.mjs @@ -49,6 +49,12 @@ const config = { port: "", pathname: "/coins/images/**", }, + { + protocol: "https", + hostname: "artio-static-asset-public.s3.ap-southeast-1.amazonaws.com", + port: "", + pathname: "/assets/**", + } ], }, }; From b86c18d8f545ad2984ce7dd1ef73e8e3c0287146 Mon Sep 17 00:00:00 2001 From: thevolcanomanishere Date: Fri, 10 Jan 2025 14:49:50 +0000 Subject: [PATCH 5/5] fix(gov): missing aws cdn in next.js config --- apps/hub/next.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/hub/next.config.mjs b/apps/hub/next.config.mjs index ffaa5c739..2adaed0c1 100755 --- a/apps/hub/next.config.mjs +++ b/apps/hub/next.config.mjs @@ -54,7 +54,7 @@ const config = { hostname: "artio-static-asset-public.s3.ap-southeast-1.amazonaws.com", port: "", pathname: "/assets/**", - } + }, ], }, };