Skip to content

Commit

Permalink
Merge pull request #83 from berachain/feat/remove-tally-use-our-own
Browse files Browse the repository at this point in the history
feat: general proposal page
  • Loading branch information
ninibear030 authored Sep 25, 2024
2 parents 794980f + ff682c4 commit f3baef8
Show file tree
Hide file tree
Showing 15 changed files with 3,815 additions and 434 deletions.
2 changes: 1 addition & 1 deletion .env.v2
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ NEXT_PUBLIC_DYNAMIC_API_KEY="b8a5104d-47e0-4965-b56a-0bcc31cf56f4"


# in seconds
NEXT_PUBLIC_BLOCKTIME="4"
NEXT_PUBLIC_BLOCKTIME="1.9"

# Honey Addresses ===================================================================
NEXT_PUBLIC_HONEY_ROUTER_ADDRESS="0xAd1782b2a7020631249031618fB1Bd09CD926b31"
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from "react";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@bera/ui/dropdown-menu";
import { Icons } from "@bera/ui/icons";

import { OrderByEnum } from "../../types";

export const ProposalSorting = () => {
const [sortBy, setSortBy] = React.useState(OrderByEnum.MOST_RECENT);

return (
<div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex w-fit cursor-pointer items-center rounded-full border border-border text-sm hover:bg-muted">
<div className="flex h-10 w-[160px] items-center whitespace-nowrap border-r px-3 font-medium capitalize">
{sortBy.replace("-", " ")}
</div>
<Icons.chevronDown className="ml-1 mr-2 h-4 w-4 text-foreground" />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 border border-border">
<DropdownMenuLabel>Proposal Status</DropdownMenuLabel>
<DropdownMenuSeparator />
{Object.keys(OrderByEnum).map((order) => (
<DropdownMenuCheckboxItem
className="capitalize"
key={order}
checked={order === sortBy}
onCheckedChange={() =>
setSortBy(OrderByEnum[order as keyof typeof OrderByEnum])
}
>
{OrderByEnum[order as keyof typeof OrderByEnum].replace("-", " ")}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from "react";
import {
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@bera/ui/dropdown-menu";
import { Icons } from "@bera/ui/icons";

import { StatusEnum } from "../../types";

export const ProposalStatusFilter = () => {
const config = Object.keys(StatusEnum).reduce(
(acc, curr) => {
acc[curr] = true;
return acc;
},
{} as { [key: string]: boolean },
);
const [statusConfig, setStatusConfig] = React.useState(config);

return (
<div>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div className="flex w-fit cursor-pointer items-center rounded-full border border-border text-sm hover:bg-muted">
<div className="flex h-10 w-fit items-center border-r px-3 font-medium whitespace-nowrap">
Filter by Status
</div>
<Icons.chevronDown className="ml-1 mr-2 h-4 w-4 text-foreground" />
</div>
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56 border border-border">
<DropdownMenuLabel>Proposal Status</DropdownMenuLabel>
<DropdownMenuSeparator />
{Object.keys(StatusEnum).map((status) => (
<DropdownMenuCheckboxItem
className="capitalize"
key={status}
checked={statusConfig[status]}
onCheckedChange={() =>
setStatusConfig((prev) => ({
...prev,
[status]: !prev[status],
}))
}
>
{StatusEnum[status as keyof typeof StatusEnum].replace("-", " ")}
</DropdownMenuCheckboxItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
);
};
74 changes: 47 additions & 27 deletions apps/hub/src/app/governance/[genre]/components/proposals-list.tsx
Original file line number Diff line number Diff line change
@@ -1,47 +1,67 @@
import { useState } from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useQuery } from "@apollo/client";
import { usePollAllProposals, type Proposal } from "@bera/berajs";
import { cloudinaryUrl, isIPFS } from "@bera/config";
import { cloudinaryUrl } from "@bera/config";
import { getProposalss } from "@bera/graphql";
import { SearchInput } from "@bera/shared-ui";
import { Skeleton } from "@bera/ui/skeleton";

import { useRouter } from "next/navigation";
import { ProposalCard } from "./proposal-card";
import { ProposalSorting } from "./proposal-sorting";
import { ProposalStatusFilter } from "./proposal-status-filter";

const PROPOSALS_PER_PAGE = 10;

export const ProposalsList = () => {
const { data } = usePollAllProposals();
const { data = [], isLoading } = usePollAllProposals();
const [page, setPage] = useState(0);
const router = useRouter();
const {
loading,
error,
data: proposals,
} = useQuery(getProposalss, {
variables: {
offset: page * PROPOSALS_PER_PAGE,
limit: PROPOSALS_PER_PAGE,
},
pollInterval: 60000, // 1 min
});

return (
<div className="w-full">
<div className="max-sm:hidden font-medium text-xs text-muted-foreground px-4 lg:pr-8 xl:pr-16 gap-4 grid grid-cols-[4fr_2.5fr_2.5fr] mb-3 uppercase">
<h4>Proposal</h4>
<h4>Votes</h4>
<h4>Quorum</h4>
<div className="flex-col md:flex-row flex w-full justify-between mb-10 gap-4">
<SearchInput
className="w-[300px] bg-transparent"
placeholder="Search proposals..."
/>
<div className="flex gap-4">
<ProposalStatusFilter />
<ProposalSorting />
</div>
</div>
<div className="grid grid-cols-1 gap-4">
{data?.map((proposal: Proposal) => (
<ProposalCard
proposal={proposal}
key={`proposal-${proposal.id}`}
className="hover:cursor-pointer"
onClick={() =>
router.push(
`/governance/proposal${isIPFS ? "?id=" : "/"}${proposal.id}`,
)
}
onMouseOver={() =>
router.prefetch(
`/governance/proposal${isIPFS ? "?id=" : "/"}${proposal.id}`,
)
}
/>
))}
{!data?.length && (

<div className="flex flex-col gap-4">
{isLoading ? (
<>
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
<Skeleton className="h-20 w-full" />
</>
) : (
data.map((proposal: Proposal) => (
<ProposalCard
proposal={proposal}
key={`proposal-${proposal.id}`}
className="hover:cursor-pointer" //@ts-ignore
onClick={() => {
window.open(`/governance/proposal/${proposal.id}`, "_self");
}}
/>
))
)}
</div>

Expand Down
4 changes: 3 additions & 1 deletion apps/hub/src/app/governance/governance-genre-helper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ export const NativeDapps: GovernanceTopic[] = [
icon: <Icons.hubFav className="h-16 w-16" />,
name: "BeraHub",
slug: "berahub",
subgraph: governanceSubgraphUrl,
// subgraph: governanceSubgraphUrl,
subgraph:
"https://api.goldsky.com/api/public/project_clq1h5ct0g4a201x18tfte5iv/subgraphs/governance-subgraph/v1/gn",
},
{
id: "honey",
Expand Down
6 changes: 2 additions & 4 deletions apps/hub/src/app/governance/helper.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { Proposal } from "@bera/berajs";
import BigNumber from "bignumber.js";
import graymatter from "gray-matter";
import { decodeFunctionData, formatEther } from "viem";

import { ProposalTypeEnum, StatusEnum, VoteColorMap } from "./types";
import graymatter from "gray-matter";
import { NativeDapps, Others } from "./governance-genre-helper";
import { ComponentProps } from "react";
import { Badge } from "@bera/ui/badge";
Expand All @@ -14,10 +15,7 @@ export const getBadgeColor = (
case StatusEnum.PENDING:
return "outline";
case StatusEnum.ACTIVE:
case StatusEnum.QUEUED:
return "info";
case StatusEnum.EXECUTED:
case StatusEnum.SUCCEEDED:
return "success";
case StatusEnum.DEFEATED:
return "destructive";
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const StatusAction = ({
}
return (
<div className="flex items-center gap-3 font-medium">
{status === StatusEnum.QUEUED && (
{status === StatusEnum.IN_QUEUE && (
<CancelButton
// TODO: this is wrong, must be provided from subgraph data
// @ts-ignore
Expand Down
11 changes: 6 additions & 5 deletions apps/hub/src/app/governance/types.ts
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { Address } from "viem";

import { PROPOSAL_GENRE } from "./governance-genre-helper";

export enum StatusEnum {
PENDING = "pending",
QUEUED = "queued",
ACTIVE = "active",
CANCELED_BY_GUARDIAN = "canceled-by-guardian",
CANCELED_BY_USER = "canceled", // TODO: rename to canceled-by-user on subgraph
CANCELED_BY_USER = "canceled",
SUCCEEDED = "succeeded",
PENDING_EXECUTION = "pending-execution",
PENDING_QUEUE = "pending-queue",
DEFEATED = "defeated",
EXPIRED = "expired",
PENDING_QUEUE = "pending-queue",
IN_QUEUE = "in-queue",
PENDING_EXECUTION = "pending-execution",
EXECUTED = "executed",
EXPIRED = "expired",
}

export enum OrderByEnum {
Expand Down
13 changes: 13 additions & 0 deletions graphql.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import dotenv from "dotenv";

dotenv.config({
path: ["./.env", "./.env.local"],
});
module.exports = {
projects: {
governance: {
schema: "http://localhost:8000/subgraphs/name/governance-subgraph",
documents: "./packages/graphql/src/modules/governance/query.ts",
},
},
};
30 changes: 30 additions & 0 deletions packages/graphql/codegen.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import type { CodegenConfig } from "@graphql-codegen/cli";
import dotenv from "dotenv";

dotenv.config({
path: ["../../.env", "../../.env.local"],
});

const config: CodegenConfig = {
overwrite: true,
documents: "./lib/**/query.ts",
schema: process.env.NEXT_PUBLIC_GOVERNANCE_SUBGRAPH_URL,
generates: {
"./src/modules/governance/codegen.ts": {
documents: "./src/modules/governance/query.ts",
schema: process.env.NEXT_PUBLIC_GOVERNANCE_SUBGRAPH_URL,
plugins: [
"typescript",
"typescript-operations",
"typescript-react-apollo",
{
"typescript-document-nodes": {
gqlImport: "@apollo/client#gql",
},
},
],
},
},
};

export default config;
16 changes: 12 additions & 4 deletions packages/graphql/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,29 @@
"module": "dist/index.js",
"types": "dist/index.d.ts",
"type": "module",
"files": [
"dist"
],
"files": ["dist"],
"author": "deez",
"license": "MIT",
"scripts": {
"build": "tsup src",
"clean": "git clean -xdf dist .turbo node_modules",
"dev": "tsup src --watch",
"lint": "eslint src",
"lint:fix": "pnpm lint --fix"
"lint:fix": "pnpm lint --fix",
"codegen": "graphql-codegen",
"codegen:watch": "graphql-codegen --watch"
},
"dependencies": {
"@apollo/client": "^3.8.8",
"@bera/config": "workspace:*",
"graphql": "^16.8.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^5.0.2",
"@graphql-codegen/typescript": "^4.0.9",
"@graphql-codegen/typescript-document-nodes": "^4.0.9",
"@graphql-codegen/typescript-operations": "^4.2.3",
"@graphql-codegen/typescript-react-apollo": "^4.3.2",
"@parcel/watcher": "^2.4.1"
}
}
Loading

0 comments on commit f3baef8

Please sign in to comment.