Skip to content

Commit

Permalink
merge v2
Browse files Browse the repository at this point in the history
  • Loading branch information
@ninibear030
ninibear030 committed Sep 25, 2024
2 parents 68d47c3 + 794980f commit ff682c4
Show file tree
Hide file tree
Showing 28 changed files with 1,190 additions and 777 deletions.
56 changes: 25 additions & 31 deletions apps/hub/src/app/governance/[genre]/components/proposal-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,29 +10,15 @@ import { formatEther } from "viem";
import {
getBadgeColor,
getTimeText,
getTopicColor,
getTotalVotes,
getVotesDataList,
parseProposalBody,
} from "../../helper";
import { StatusEnum } from "../../types";
import { VoteInfo } from "./Voter";
import { ProgressBarChart } from "./progress-bar-chart";
import { QuorumStatus } from "./quorum-status";
import { Icons } from "@bera/ui/icons";
import { ProposalHeading } from "../../components/proposal-heading";

// If the proposal is active there is a time left to vote
const tAgo = new Intl.RelativeTimeFormat("en-US", {
style: "long",
numeric: "auto",
});
// If the proposal is closed there is a time ago
const tIn = new Intl.RelativeTimeFormat("en-US", {
style: "long",
numeric: "auto",
});

export function ProposalCard({
details = false,
truncate = true,
Expand All @@ -57,31 +43,39 @@ export function ProposalCard({
>
<div className="flex-1 ">
<ProposalHeading frontmatter={fm} size="sm" />
<div className="mt-3 text-xs font-medium leading-6 text-muted-foreground">
<div className="mt-1 md:mt-3 text-xs font-medium leading-6 text-muted-foreground">
<Badge
variant={getBadgeColor(proposal.status as StatusEnum)}
className="mr-3 rounded-xs px-2 py-1 text-sm leading-none font-semibold capitalize"
className="mr-3 rounded-xs px-2 py-1 text-sm leading-none font-semibold capitalize select-none"
>
{proposal.status}
</Badge>
{getTimeText(proposal)}
<span className="inline-block">{getTimeText(proposal)}</span>
</div>
</div>

<div
className={cn(
"flex flex-col items-start sm:grid sm:grid-cols-2 xl:items-center gap-2 gap-y-4 text-xs xl:flex-row ",
)}
>
<QuorumStatus
delegatesVotesCount={getTotalVotes(proposal)}
quorum={formatEther(BigInt(proposal.governor.quorum))}
/>
<ProgressBarChart
dataList={getVotesDataList(proposal)}
className="w-full"
/>
</div>
{![
StatusEnum.PENDING,
StatusEnum.CANCELED_BY_USER,
StatusEnum.CANCELED_BY_GUARDIAN,
].includes(proposal.status as StatusEnum) ? (
<div
className={cn(
"flex flex-col items-start min-w-36 sm:grid sm:grid-cols-2 xl:items-center gap-2 gap-y-4 text-xs xl:flex-row ",
)}
>
<QuorumStatus
delegatesVotesCount={getTotalVotes(proposal)}
quorum={formatEther(BigInt(proposal.governor.quorum))}
/>
<ProgressBarChart
dataList={getVotesDataList(proposal)}
className="w-full"
/>
</div>
) : (
<div>--</div>
)}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion apps/hub/src/app/governance/[genre]/components/quorum-status.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const QuorumStatus = ({
.toNumber();

return (
<div className="sm:flex sm:h-4 gap-2 font-medium">
<div className="grid grid-cols-1 md:flex items-center md:h-4 gap-2 font-medium">
<div className="whitespace-nowrap leading-none">
<FormattedNumber value={delegatesVotesCount} visibleDecimals={1} /> of{" "}
<FormattedNumber value={quorum} visibleDecimals={1} />
Expand Down
22 changes: 21 additions & 1 deletion apps/hub/src/app/governance/[genre]/components/voter-column.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,11 @@ import { formatEther } from "viem";

import { VoteEnum } from "../../types";
import { VoteInfo } from "./Voter";
import {
AccordionContent,
AccordionItem,
AccordionTrigger,
} from "@bera/ui/accordion";

const getBadgeColor = (type: keyof typeof VoteEnum) => {
switch (type) {
Expand All @@ -23,7 +28,22 @@ const getBadgeColor = (type: keyof typeof VoteEnum) => {
export const voterColumns: ColumnDef<Vote>[] = [
{
header: "Voter",
cell: ({ row }) => <VoteInfo voter={row.original.voter} />,
cell: ({ row }) => (
<AccordionItem value={row.original.voter.address}>
<AccordionTrigger>
<VoteInfo voter={row.original.voter} />
</AccordionTrigger>
<AccordionContent className="ml-7">
{row.original.reason ? (
<p className="m">{row.original.reason}</p>
) : (
<span className="italic text-muted-foreground">
No reason provided
</span>
)}
</AccordionContent>
</AccordionItem>
),
accessorKey: "voter",
enableSorting: false,
minSize: 200,
Expand Down
20 changes: 11 additions & 9 deletions apps/hub/src/app/governance/[genre]/components/voter-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,10 @@ import {
} from "@bera/shared-ui";
import { Skeleton } from "@bera/ui/skeleton";

import { MultiSelectBadge, SelectedVotes } from "./multi-select-badge";
import { MultiSelectBadge } from "./multi-select-badge";
import { voterColumns } from "./voter-column";
import { VoteOption } from "@bera/proto/ts-proto-gen/cosmos-ts/cosmos/gov/v1/gov";
import { Tabs, TabsList, TabsTrigger } from "@bera/ui/tabs";
import { Accordion } from "@bera/ui/accordion";

const voteOptionMap: Record<VoteOption, string> = {
[VoteOption.VOTE_OPTION_YES]: "for",
Expand Down Expand Up @@ -126,13 +126,15 @@ export function VoterTable({
) : votes.length === 0 ? (
<NotFoundBear title="No recent votes found." />
) : (
<SimpleTable
table={table}
wrapperClassName={""}
flexTable
dynamicFlex
showToolbar={false}
/>
<Accordion type="single" collapsible>
<SimpleTable
table={table}
wrapperClassName={""}
flexTable
dynamicFlex
showToolbar={false}
/>
</Accordion>
)}
</div>

Expand Down
88 changes: 39 additions & 49 deletions apps/hub/src/app/governance/components/home-page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,63 +6,53 @@ import {
Others,
} from "../governance-genre-helper";

const GovernanceSection = ({
title,
dapps,
}: {
title: string;
dapps: GovernanceTopic[];
}) => {
return (
<div className="flex flex-col gap-4">
<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">
{dapps.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.slug}`}
>
<div
className="flex justify-center border-b border-border p-1"
style={{ background: dapp.color }}
>
{dapp.icon}
</div>
<h3 className="p-4 text-xl font-semibold">{dapp.name}</h3>
</Link>
))}
</div>
</div>
);
};

export const HomePage = () => {
return (
<div className="flex flex-col gap-12 pb-32">
<div className="flex flex-col gap-2">
<div className="font-bold leading-6 tracking-wider text-muted-foreground">
<h1 className="font-bold leading-6 tracking-wider text-muted-foreground">
GOVERNANCE
</div>
<div className="text-5xl font-bold">
</h1>
<h2 className="text-5xl font-bold">
Berachain <br /> Governance Forum
</div>
</div>

<div className="flex flex-col gap-4">
<div className="font-semibold leading-6 tracking-wider text-muted-foreground">
NATIVE dAPPS
</div>
<div className="grid gap-4 sm:gap-6 grid-cols-2 sm:grid-cols-4">
{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.slug}`}
>
<div
className="flex justify-center border-b border-border p-1"
style={{ background: dapp.color }}
>
{dapp.icon}
</div>
<div className="p-4 text-xl font-semibold">{dapp.name}</div>
</Link>
))}
</div>
</h2>
</div>

<div className="flex flex-col gap-4">
<div className="font-semibold leading-6 tracking-wider text-muted-foreground">
OTHER
</div>
<div className="grid gap-4 lg: gap-6 grid-cols-2 lg:grid-cols-4">
{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.slug}`}
>
<div
className="flex justify-center border-b border-border p-1"
style={{ background: dapp.color }}
>
{dapp.icon}
</div>
<div className="p-4 text-xl font-semibold">{dapp.name}</div>
</Link>
))}
</div>
</div>
<GovernanceSection title="NATIVE dAPPS" dapps={NativeDapps} />
<GovernanceSection title="OTHER" dapps={Others} />
</div>
);
};
64 changes: 34 additions & 30 deletions apps/hub/src/app/governance/components/proposal-heading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,38 +12,42 @@ export const ProposalHeading = ({
const Heading = size === "sm" ? "h3" : "h1";
return (
<>
<p
className={cn("text-xs flex gap-2 font-semibold capitalize leading-4")}
>
<p>
{(fm.data.topics || fm.data.topic)?.map((topic: string) => (
<span
className="inline-block after:content-['•'] after:mx-1 last:after:hidden"
style={{ color: getTopicColor(topic) }}
>
{topic}
</span>
))}
</p>
{fm.data.forumLink && (
<>
<span className="text-muted-foreground">•</span>
<a
href={fm.data.forumLink}
target="_blank"
className="text-muted-foreground"
rel="noreferrer"
>
View Forum Post
<Icons.externalLink className="w-3 h-3 ml-1 align-middle inline-block" />
</a>
</>
)}
</p>
{(fm.data.topics || fm.data.topic || fm.data.forumLink) && (
<div
className={cn(
"text-xs flex gap-2 font-semibold capitalize leading-4",
)}
>
<p>
{(fm.data.topics || fm.data.topic)?.map((topic: string) => (
<span
className="inline-block after:content-['•'] after:mx-1 last:after:hidden"
style={{ color: getTopicColor(topic) }}
>
{topic}
</span>
))}
</p>
{fm.data.forumLink && (
<>
<span className="text-muted-foreground">•</span>
<a
href={fm.data.forumLink}
target="_blank"
className="text-muted-foreground"
rel="noreferrer"
>
View Forum Post
<Icons.externalLink className="w-3 h-3 ml-1 align-middle inline-block" />
</a>
</>
)}
</div>
)}
<Heading
className={cn(
"mt-2 font-semibold ",
size === "sm" && " line-clamp-1 text-base",
"first:mt-0 mt-1 md:mt-2 font-semibold ",
size === "sm" && " line-clamp-1 text-base hyphens-auto",
size === "md" && "text-2xl",
)}
>
Expand Down
21 changes: 11 additions & 10 deletions apps/hub/src/app/governance/helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,24 +5,25 @@ import { decodeFunctionData, formatEther } from "viem";

import { ProposalTypeEnum, StatusEnum, VoteColorMap } from "./types";
import { NativeDapps, Others } from "./governance-genre-helper";
import { ComponentProps } from "react";
import { Badge } from "@bera/ui/badge";

export const getBadgeColor = (proposalStatus: StatusEnum) => {
export const getBadgeColor = (
proposalStatus: StatusEnum,
): ComponentProps<typeof Badge>["variant"] => {
switch (proposalStatus) {
case StatusEnum.PENDING:
case StatusEnum.IN_QUEUE:
case StatusEnum.EXPIRED:
return "default";
return "outline";
case StatusEnum.ACTIVE:
case StatusEnum.EXECUTED:
return "success";
case StatusEnum.DEFEATED:
case StatusEnum.CANCELED:
return "destructive";
case StatusEnum.PENDING_EXECUTION:
case StatusEnum.PENDING_QUEUE:
return "info";
default:
return "foreground";
case StatusEnum.EXPIRED:
return "warning";
case StatusEnum.CANCELED_BY_GUARDIAN:
case StatusEnum.CANCELED_BY_USER:
return "outline";
}
};

Expand Down
Loading

0 comments on commit ff682c4

Please sign in to comment.