Skip to content

Commit

Permalink
Lock to vote improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
brickpop committed Aug 26, 2024
1 parent 9590b0c commit 828deb1
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 96 deletions.
2 changes: 1 addition & 1 deletion plugins/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export const plugins: PluginItem[] = [
{
id: "lock-to-vote",
folderName: "lockToVote",
title: "Lock to bote",
title: "Lock to vote",
// icon: IconType.BLOCKCHAIN_BLOCK,
pluginAddress: PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS,
},
Expand Down
148 changes: 59 additions & 89 deletions plugins/lockToVote/pages/proposal-list.tsx
Original file line number Diff line number Diff line change
@@ -1,50 +1,61 @@
import { useAccount, useBlockNumber, useReadContract } from "wagmi";
import { type ReactNode, useEffect, useState } from "react";
import ProposalCard from "@/plugins/lockToVote/components/proposal";
import { OptimisticTokenVotingPluginAbi } from "@/plugins/lockToVote/artifacts/OptimisticTokenVotingPlugin.sol";
import { Button, Card, EmptyState, IconType } from "@aragon/ods";
import { useCanCreateProposal } from "@/plugins/lockToVote/hooks/useCanCreateProposal";
import { type ReactNode, useEffect } from "react";
import ProposalCard from "../components/proposal";
import { LockToVetoPluginAbi } from "../artifacts/LockToVetoPlugin.sol";
import { Button, DataList, IconType, ProposalDataListItemSkeleton, type DataListState } from "@aragon/ods";
import { useCanCreateProposal } from "../hooks/useCanCreateProposal";
import Link from "next/link";
import { Else, ElseIf, If, Then } from "@/components/if";
import { PleaseWaitSpinner } from "@/components/please-wait";
import { PUB_CHAIN, PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS } from "@/constants";
import { digestPagination } from "@/utils/pagination";
import { PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS, PUB_CHAIN } from "@/constants";
import { MainSection } from "@/components/layout/main-section";
import { useWeb3Modal } from "@web3modal/wagmi/react";
import { useRouter } from "next/router";
import { MissingContentView } from "@/components/MissingContentView";

const DEFAULT_PAGE_SIZE = 6;

export default function Proposals() {
const { isConnected } = useAccount();
const canCreate = useCanCreateProposal();
const { open } = useWeb3Modal();
const { push } = useRouter();

const { data: blockNumber } = useBlockNumber({ watch: true });
const canCreate = useCanCreateProposal();
const [currentPage, setCurrentPage] = useState(0);

const {
data: proposalCountResponse,
error: isError,
isLoading,
isFetching: isFetchingNextPage,
refetch,
} = useReadContract({
address: PUB_LOCK_TO_VOTE_PLUGIN_ADDRESS,
abi: OptimisticTokenVotingPluginAbi,
abi: LockToVetoPluginAbi,
functionName: "proposalCount",
chainId: PUB_CHAIN.id,
});
const proposalCount = Number(proposalCountResponse);

useEffect(() => {
refetch();
}, [blockNumber]);

const proposalCount = Number(proposalCountResponse);
const { visibleProposalIds, showNext, showPrev } = digestPagination(proposalCount, currentPage);
const entityLabel = proposalCount === 1 ? "Proposal" : "Proposals";

let dataListState: DataListState = "idle";
if (isLoading && !proposalCount) {
dataListState = "initialLoading";
} else if (isError) {
dataListState = "error";
} else if (isFetchingNextPage) {
dataListState = "fetchingNextPage";
}

return (
<MainSection>
<MainSection narrow>
<SectionView>
<h1 className="justify-self-start align-middle text-3xl font-semibold">Proposals</h1>
<h1 className="line-clamp-1 flex flex-1 shrink-0 text-2xl font-normal leading-tight text-neutral-800 md:text-3xl">
Proposals
</h1>
<div className="justify-self-end">
<If all={[canCreate, proposalCount]}>
<If true={isConnected && canCreate}>
<Link href="#/new">
<Button iconLeft={IconType.PLUS} size="md" variant="primary">
Submit Proposal
Expand All @@ -53,85 +64,44 @@ export default function Proposals() {
</If>
</div>
</SectionView>
<If true={proposalCount}>

<If not={isConnected}>
<Then>
{visibleProposalIds.map((id) => (
<ProposalCard key={id} proposalIndex={id} />
))}
<div className="mb-10 mt-4 flex w-full flex-row justify-end gap-2">
<Button
variant="tertiary"
size="sm"
disabled={!showPrev}
onClick={() => setCurrentPage((page) => Math.max(page - 1, 0))}
iconLeft={IconType.CHEVRON_LEFT}
>
Previous
</Button>
<Button
variant="tertiary"
size="sm"
disabled={!showNext}
onClick={() => setCurrentPage((page) => page + 1)}
iconRight={IconType.CHEVRON_RIGHT}
>
Next
</Button>
</div>
<MissingContentView callToAction="Connect wallet" onClick={() => open()}>
Please connect your wallet to access the proposals section.
</MissingContentView>
</Then>
<ElseIf true={isLoading}>
<SectionView>
<PleaseWaitSpinner />
</SectionView>
</ElseIf>
<ElseIf true={isConnected}>
<SectionView>
<Card className="w-full">
<EmptyState
className="w-full md:w-full lg:w-full xl:w-full"
heading="There are no proposals yet"
humanIllustration={{
body: "VOTING",
expression: "SMILE",
hairs: "CURLY",
}}
primaryButton={{
label: "Submit the first one",
iconLeft: IconType.PLUS,
onClick: () => push("#/new"),
}}
/>
</Card>
</SectionView>
<ElseIf not={proposalCount}>
<MissingContentView>
No proposals have been created yet. Here you will see the available proposals.{" "}
<If true={canCreate}>Create your first proposal.</If>
</MissingContentView>
</ElseIf>
<Else>
<SectionView>
<Card className="w-full">
<EmptyState
className="w-full md:w-full lg:w-full xl:w-full"
heading="There are no proposals yet"
humanIllustration={{
body: "VOTING",
expression: "SMILE",
hairs: "CURLY",
}}
primaryButton={{
label: "Connect your wallet",
onClick: () => open(),
}}
/>
</Card>
</SectionView>
<DataList.Root
entityLabel={entityLabel}
itemsCount={proposalCount}
pageSize={DEFAULT_PAGE_SIZE}
state={dataListState}
//onLoadMore={fetchNextPage}
>
<DataList.Container SkeletonElement={ProposalDataListItemSkeleton}>
{proposalCount &&
Array.from(Array(proposalCount || 0)?.keys())
.reverse()
?.map((proposalIndex) => (
// TODO: update with router agnostic ODS DataListItem
<ProposalCard key={proposalIndex} proposalIndex={proposalIndex} />
))}
</DataList.Container>
<DataList.Pagination />
</DataList.Root>
</Else>
</If>
</MainSection>
);
}

function MainSection({ children }: { children: ReactNode }) {
return <main className="flex w-screen max-w-full flex-col items-center pt-6">{children}</main>;
}

function SectionView({ children }: { children: ReactNode }) {
return <div className="mb-6 flex w-full flex-row content-center justify-between">{children}</div>;
return <div className="flex w-full flex-row content-center justify-between">{children}</div>;
}
7 changes: 2 additions & 5 deletions plugins/multisig/pages/proposal-list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,8 @@ export default function Proposals() {
<ElseIf not={proposalCount}>
<MissingContentView>
No proposals have been created yet. <br />
Here you will see the proposals created by the Council before they can be submitted to the{" "}
<Link href="/plugins/community-proposals/#/" className="underline">
community veto stage
</Link>
. <If true={canCreate}>Create your first proposal.</If>
Here you will see the proposals created by the Council before they can be submitted to the community veto
stage. <If true={canCreate}>Create your first proposal.</If>
</MissingContentView>
</ElseIf>
<Else>
Expand Down
2 changes: 1 addition & 1 deletion plugins/optimistic-proposals/pages/proposal-list.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useAccount, useBlockNumber, useReadContract } from "wagmi";
import { useEffect } from "react";
import ProposalCard from "@/plugins/optimistic-proposals/components/proposal";
import ProposalCard from "../components/proposal";
import { AlertCard, DataList, Link, ProposalDataListItemSkeleton, type DataListState } from "@aragon/ods";
import { Else, ElseIf, If, Then } from "@/components/if";
import { PUB_DUAL_GOVERNANCE_PLUGIN_ADDRESS, PUB_CHAIN } from "@/constants";
Expand Down

0 comments on commit 828deb1

Please sign in to comment.