Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: nav bar display and the singleRound stuff #535

Merged
merged 1 commit into from
Dec 9, 2024
Merged

fix: nav bar display and the singleRound stuff #535

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 86 additions & 82 deletions packages/interface/src/features/ballot/components/BallotConfirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,109 +57,113 @@ export const BallotConfirmation = ({ pollId }: IBallotConfirmationProps): JSX.El
const sum = useMemo(() => formatNumber(sumBallot(ballot.votes)), [ballot, sumBallot]);

return (
<section>
<Heading as="h2" className="tracking-tighter" size="4xl">
Your ballot has been successfully submitted 🥳
</Heading>

<p className="mb-14 mt-4 text-gray-400">
{`Thank you for participating in ${config.eventName} ${round?.roundId} round.`}
</p>
<div className="flex w-full justify-center dark:text-white">
<section className="md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
<Heading as="h2" className="tracking-tighter" size="4xl">
Your ballot has been successfully submitted 🥳
</Heading>

<p className="mb-14 mt-4 text-gray-400">
{`Thank you for participating in ${config.eventName} ${round?.roundId} round.`}
</p>

<div className="mb-7 rounded-lg border border-gray-200 p-5">
<b className="font-mono text-2xl uppercase">Summary of your ballot</b>
<div className="mb-7 rounded-lg border border-gray-200 p-5">
<b className="font-mono text-2xl uppercase">Summary of your ballot</b>

<p className="my-8 text-gray-400">
<span>{`Round you voted in: ${pollId}`} </span>
<p className="my-8 text-gray-400">
<span>{`Round you voted in: ${pollId}`} </span>

<br />
<br />

<span>{`Number of projects you voted for: ${allocations.length} of ${projectCount?.count}`}</span>
</p>
<span>{`Number of projects you voted for: ${allocations.length} of ${projectCount?.count}`}</span>
</p>

<div>
{allocations.map((project) => (
<div key={project.projectId} className="border-b border-gray-200 py-3">
<ProjectAvatarWithName
allocation={project.amount}
id={project.projectId}
pollId={pollId}
registryAddress={round?.registryAddress as Hex}
/>
</div>
))}
</div>
<div>
{allocations.map((project) => (
<div key={project.projectId} className="border-b border-gray-200 py-3">
<ProjectAvatarWithName
allocation={project.amount}
id={project.projectId}
pollId={pollId}
registryAddress={round?.registryAddress as Hex}
/>
</div>
))}
</div>

<div className="mt-4 flex w-full justify-end">
<h4>Total votes allocated:</h4>
<div className="mt-4 flex w-full justify-end">
<h4>Total votes allocated:</h4>

<p className="ml-1">{sum}</p>
<p className="ml-1">{sum}</p>
</div>
</div>
</div>

<Notice
content={
round?.votingEndsAt ? format(round.votingEndsAt, "d MMM yyyy hh:mm") : "The date would be announced soon."
}
title="Results will be available after tallying."
variant="block"
/>
<Notice
content={
round?.votingEndsAt ? format(round.votingEndsAt, "d MMM yyyy hh:mm") : "The date would be announced soon."
}
title="Results will be available after tallying."
variant="block"
/>

{roundState === ERoundState.VOTING && (
<Card className="flex-col sm:flex-row">
<div className="flex-3 flex flex-col gap-4">
<b className="font-mono text-2xl uppercase">Changed your mind?</b>

<p className="text-gray-400">
Your can edit your ballot and resubmit it anytime during the voting period.
</p>
</div>

<div>
<Button as={Link} className="w-80 sm:w-fit" href={`/rounds/${pollId}/ballot`} variant="primary">
Edit my ballot
</Button>
</div>
</Card>
)}

{roundState === ERoundState.VOTING && (
<Card className="flex-col sm:flex-row">
<div className="flex-3 flex flex-col gap-4">
<b className="font-mono text-2xl uppercase">Changed your mind?</b>
<b className="font-mono text-2xl uppercase">{`Help us improve our next round of ${config.eventName}`}</b>

<p className="text-gray-400">Your can edit your ballot and resubmit it anytime during the voting period.</p>
<p className="text-gray-400">
{`Your feedback will be influential to help us iterate on
${config.eventName} process.`}
</p>
</div>

<div>
<Button as={Link} className="w-80 sm:w-fit" href={`/rounds/${pollId}/ballot`} variant="primary">
Edit my ballot
<Button as={Link} className="w-80 sm:w-fit" href={feedbackUrl} target="_blank" variant="primary">
Share your feedback
</Button>
</div>
</Card>
)}

<Card className="flex-col sm:flex-row">
<div className="flex-3 flex flex-col gap-4">
<b className="font-mono text-2xl uppercase">{`Help us improve our next round of ${config.eventName}`}</b>

<p className="text-gray-400">
{`Your feedback will be influential to help us iterate on
${config.eventName} process.`}
</p>
</div>

<div>
<Button as={Link} className="w-80 sm:w-fit" href={feedbackUrl} target="_blank" variant="primary">
Share your feedback
</Button>
</div>
</Card>

<Card className="flex-col sm:flex-row">
<div className="flex-3 flex flex-col gap-4">
<b className="font-mono text-2xl uppercase">Want to run a round?</b>
<Card className="flex-col sm:flex-row">
<div className="flex-3 flex flex-col gap-4">
<b className="font-mono text-2xl uppercase">Want to run a round?</b>

<p className="text-gray-400">
Our code is open source so you can fork it and run a round anytime. If you need any assistance or want to
share with us your awesomeness, find us at #🗳️-maci channel in PSE Discord.
</p>
</div>
<p className="text-gray-400">
Our code is open source so you can fork it and run a round anytime. If you need any assistance or want to
share with us your awesomeness, find us at #🗳️-maci channel in PSE Discord.
</p>
</div>

<div>
<Button
as={Link}
className="w-80 sm:w-fit"
href="https://discord.com/invite/sF5CT5rzrR"
target="_blank"
variant="primary"
>
Contact us
</Button>
</div>
</Card>
</section>
<div>
<Button
as={Link}
className="w-80 sm:w-fit"
href="https://discord.com/invite/sF5CT5rzrR"
target="_blank"
variant="primary"
>
Contact us
</Button>
</div>
</Card>
</section>
</div>
);
};
2 changes: 1 addition & 1 deletion packages/interface/src/layouts/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,5 +27,5 @@ export interface ILayoutProps extends PropsWithChildren<LayoutProps> {
export interface IAdminLayoutProps extends PropsWithChildren<LayoutProps> {
sidebar?: "left" | "right";
sidebarComponent?: ReactNode;
roundId?: string;
pollId?: string;
}
10 changes: 5 additions & 5 deletions packages/interface/src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,13 @@ const HomePage = (): JSX.Element => {
const { isRegistered } = useMaci();
const isAdmin = useIsAdmin();
const { rounds } = useRound();
const singleRound = useMemo(() => rounds?.[0], [rounds]);
const singleRound = useMemo(() => (rounds && rounds.length === 1 ? rounds[0] : undefined), [rounds]);

return (
<Layout pollId={singleRound ? singleRound.pollId : ""} type="home">
{singleRound && rounds!.length === 1 && <SingleRoundHome round={singleRound} />}
{singleRound && <SingleRoundHome round={singleRound} />}

{rounds && rounds.length > 1 && (
{!singleRound && (
<div className="flex h-auto w-screen flex-col items-center justify-center gap-4 bg-blue-50 px-2 pb-4 sm:h-[90vh] dark:bg-black">
<Heading className="mt-4 max-w-screen-lg text-center sm:mt-0" size="6xl">
{config.eventName}
Expand All @@ -51,11 +51,11 @@ const HomePage = (): JSX.Element => {
</div>
)}

{isConnected && !isAdmin && rounds.length === 0 && (
{isConnected && !isAdmin && rounds && rounds.length === 0 && (
<p className="text-gray-400">There are no rounds deployed.</p>
)}

<RoundsList />
{rounds && rounds.length > 1 && <RoundsList />}
</div>
)}

Expand Down
4 changes: 2 additions & 2 deletions packages/interface/src/pages/rounds/[pollId]/applications/confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const ConfirmProjectPage = ({ pollId }: { pollId: string }): JSX.Element => {

if (project === undefined) {
return (
<Layout>
<Layout pollId={pollId}>
<div className="flex w-full justify-center">
<div className="flex flex-col items-center gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
<Heading as="h2" size="4xl">
Expand All @@ -54,7 +54,7 @@ const ConfirmProjectPage = ({ pollId }: { pollId: string }): JSX.Element => {
}

return (
<Layout>
<Layout pollId={pollId}>
<div className="flex w-fit justify-center sm:w-full">
<div className="flex flex-col items-center gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
{project.recipient.initialized === false ? (
Expand Down
2 changes: 1 addition & 1 deletion packages/interface/src/pages/rounds/[pollId]/applications/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface IApplicationsPageProps {
}

const ApplicationsPage = ({ pollId }: IApplicationsPageProps): JSX.Element => (
<AdminLayout roundId={pollId} title="Review applications">
<AdminLayout pollId={pollId} title="Review applications">
<ApplicationsToApprove pollId={pollId} />
</AdminLayout>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/interface/src/pages/rounds/[pollId]/applications/new.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const NewProjectPage = ({ pollId }: { pollId: string }): JSX.Element => {
const state = useRoundState({ pollId });

return (
<Layout>
<Layout pollId={pollId}>
<div className="flex w-full justify-center">
<div className="flex flex-col gap-4 md:max-w-screen-sm lg:max-w-screen-md xl:max-w-screen-lg">
<Heading as="h3" size="3xl">
Expand Down
4 changes: 3 additions & 1 deletion packages/interface/src/pages/rounds/[pollId]/ballot/confirmation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,9 @@ const BallotConfirmationPage = ({ pollId }: { pollId: string }): JSX.Element | n
}, [manageDisplay]);

return (
<Layout requireAuth>{isLoading ? <Spinner className="h-6 w-6" /> : <BallotConfirmation pollId={pollId} />}</Layout>
<Layout requireAuth pollId={pollId}>
{isLoading ? <Spinner className="h-6 w-6" /> : <BallotConfirmation pollId={pollId} />}
</Layout>
);
};

Expand Down
Loading