Skip to content

Commit

Permalink
Merge pull request #535 from privacy-scaling-explorations/fix/nav-and…
Browse files Browse the repository at this point in the history 
…-home

fix: nav bar display and the singleRound stuff
  • Loading branch information
@kittybest
kittybest authored Dec 9, 2024
2 parents 5f2e7df + b324f7b commit 52a14bf
Show file tree
Hide file tree
Showing 7 changed files with 99 additions and 93 deletions.
168 changes: 86 additions & 82 deletions packages/interface/src/features/ballot/components/BallotConfirmation.tsx
View file
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
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
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
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
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
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
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

0 comments on commit 52a14bf

Please sign in to comment.