Skip to content

Commit ad7886f

Browse files
JohnGuildingJohnGuilding
committed
feat: add loading spinners
1 parent 2a42609 commit ad7886f

File tree

5 files changed

+48
-43
lines changed

5 files changed

+48
-43
lines changed

‎plugins/maciVoting/components/MaciCard.tsx

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Button, Card, Heading } from "@aragon/ods";
1+
import { Button, Card, Heading, Spinner } from "@aragon/ods";
22
import { useCallback, useEffect, useMemo, useState } from "react";
33
import { useMaci } from "../hooks/useMaci";
44

@@ -11,16 +11,17 @@ const MaciCard = () => {
1111
}, [maciError]);
1212

1313
const buttonMessage = useMemo(() => {
14+
if (isLoading) {
15+
return <Spinner size="sm" variant="neutral" className="-m-[2px] inline-block" />;
16+
}
1417
if (isRegistered) {
1518
return "Already signed up";
16-
} else {
17-
if (!maciKeypair) {
18-
return "Generate keys";
19-
} else {
20-
return "Sign up";
21-
}
2219
}
23-
}, [maciKeypair, isRegistered]);
20+
if (!maciKeypair) {
21+
return "Generate keys";
22+
}
23+
return "Sign up";
24+
}, [maciKeypair, isRegistered, isLoading]);
2425

2526
const onClick = useCallback(async () => {
2627
if (!maciKeypair) {

‎plugins/maciVoting/components/PollCard.tsx

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Button, Card, Heading } from "@aragon/ods";
22
import { useCallback, useEffect, useMemo, useState } from "react";
33
import { useMaci } from "../hooks/useMaci";
44
import { VoteOption } from "../utils/types";
5+
import { PleaseWaitSpinner } from "@/components/please-wait";
56

67
const PollCard = ({ pollId }: { pollId: bigint }) => {
78
// check if the user joined the poll
@@ -43,9 +44,10 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
4344
return "Already joined poll";
4445
}
4546
if (isLoading) {
46-
return "Joining poll...";
47+
return <PleaseWaitSpinner fullMessage="Joining poll..." />;
4748
}
4849
return "Join poll";
50+
// TODO: hide Join poll if we can finalize / or after the sign up window closes whenever that is
4951
}, [hasJoinedPoll, isLoading]);
5052

5153
return (
@@ -60,17 +62,27 @@ const PollCard = ({ pollId }: { pollId: bigint }) => {
6062
<div className="flex flex-col justify-between gap-y-2">
6163
<p>Submit your vote anonymously to the poll. Results will be tallied after the voting period ends.</p>
6264
<div className="flex flex-row gap-x-1">
63-
<Button onClick={() => onClickVote(VoteOption.Yes)} disabled={isLoading} size="sm" variant="success">
65+
<Button
66+
onClick={() => onClickVote(VoteOption.Yes)}
67+
disabled={isLoading}
68+
size="sm"
69+
variant={isLoading ? "tertiary" : "success"}
70+
>
6471
Yes
6572
</Button>
66-
<Button onClick={() => onClickVote(VoteOption.No)} disabled={isLoading} size="sm" variant="critical">
73+
<Button
74+
onClick={() => onClickVote(VoteOption.No)}
75+
disabled={isLoading}
76+
size="sm"
77+
variant={isLoading ? "tertiary" : "critical"}
78+
>
6779
No
6880
</Button>
6981
<Button
7082
onClick={() => onClickVote(VoteOption.Abstain)}
7183
disabled={isLoading}
7284
size="sm"
73-
variant="warning"
85+
variant={isLoading ? "tertiary" : "warning"}
7486
>
7587
Abstain
7688
</Button>

‎plugins/maciVoting/components/finalize/finalizeAction.tsx

Lines changed: 5 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useEffect, useMemo } from "react";
22
import { useCoordinator } from "../../hooks/useCoordinator";
33
import { Button } from "@aragon/ods";
44
import { useAlerts } from "@/context/Alerts";
5+
import { PleaseWaitSpinner } from "@/components/please-wait";
56

67
interface IFinalizeActionProps {
78
pollId: number;
@@ -16,15 +17,15 @@ export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
1617
case "notStarted":
1718
return "";
1819
case "merging":
19-
return "Merging poll...";
20+
return <PleaseWaitSpinner fullMessage="Merging poll..." />;
2021
case "merged":
2122
return "The poll has been merged.";
2223
case "proving":
23-
return "Generating proofs...";
24+
return <PleaseWaitSpinner fullMessage="Generating proofs..." />;
2425
case "proved":
2526
return "The proofs have been generated.";
2627
case "submitting":
27-
return "Submitting proofs...";
28+
return <PleaseWaitSpinner fullMessage="Submitting proofs..." />;
2829
case "submitted":
2930
return "The proofs have been submitted. You can now execute the proposal.";
3031
default:
@@ -34,43 +35,25 @@ export const FinalizeAction: React.FC<IFinalizeActionProps> = ({ pollId }) => {
3435

3536
useEffect(() => {
3637
if (finalizeStatus === "notStarted") return;
37-
if (finalizeStatus === "merging") {
38-
addAlert("Votes merging", {
39-
description: "The votes are being merged.",
40-
type: "info",
41-
});
42-
}
4338
if (finalizeStatus === "merged") {
4439
addAlert("Votes merged", {
4540
description: "The votes have been merged.",
4641
type: "success",
4742
});
4843
}
49-
if (finalizeStatus === "proving") {
50-
addAlert("Votes proving", {
51-
description: "The votes are being proved.",
52-
type: "info",
53-
});
54-
}
5544
if (finalizeStatus === "proved") {
5645
addAlert("Votes proved", {
5746
description: "The votes have been proved.",
5847
type: "success",
5948
});
6049
}
61-
if (finalizeStatus === "submitting") {
62-
addAlert("Submitting votes.", {
63-
description: "The votes are being submitted.",
64-
type: "info",
65-
});
66-
}
6750
if (finalizeStatus === "submitted") {
6851
addAlert("Votes submitted", {
6952
description: "The votes have been submitted.",
7053
type: "success",
7154
});
7255
}
73-
}, [finalizeStatus]);
56+
}, [addAlert, finalizeStatus]);
7457

7558
return (
7659
<div className="overflow-hidden rounded-xl bg-neutral-0 pb-2 shadow-neutral">

‎plugins/maciVoting/contexts/CoordinatorContext.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { EMode } from "@maci-protocol/core";
2-
import { getPoll, getPollContracts, ITallyData, Poll__factory as PollFactory } from "@maci-protocol/sdk/browser";
2+
import { getPoll, getPollContracts, type ITallyData, Poll__factory as PollFactory } from "@maci-protocol/sdk/browser";
33
import { PUBLIC_CHAIN_NAME, PUBLIC_COORDINATOR_SERVICE_URL, PUBLIC_MACI_ADDRESS } from "@/constants";
44
import { createContext, type ReactNode, useCallback, useMemo, useState } from "react";
55
import {
@@ -160,30 +160,35 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
160160
const finalizeProposal = useCallback(
161161
async (pollId: number) => {
162162
if (!signer) {
163+
// eslint-disable-next-line no-console
163164
console.log("No signer");
164165
return;
165166
}
166167

167168
// check if poll was already finalized
168169
// TODO: what should we do here?
169-
const { tally } = await getPollContracts({
170+
const pollContracts = await getPollContracts({
170171
maciAddress: PUBLIC_MACI_ADDRESS,
171172
pollId,
172173
signer,
173-
});
174-
const isTallied = await tally.isTallied();
174+
}).catch(() => setFinalizeStatus("notStarted"));
175+
if (!pollContracts) {
176+
return;
177+
}
178+
const isTallied = await pollContracts.tally.isTallied();
179+
// eslint-disable-next-line no-console
175180
console.log("isTallied", isTallied);
176181
/*if (isTallied) {
177182
console.log("Poll already finalized");
178183
return;
179184
}*/
180185

181186
setFinalizeStatus("merging");
182-
const hasMerged = await checkMergeStatus(pollId);
187+
const hasMerged = await checkMergeStatus(pollId).catch(() => setFinalizeStatus("notStarted"));
183188
if (!hasMerged) {
184189
const mergeResult = await merge(pollId);
185190
if (!mergeResult.success) {
186-
console.log("Failed to merge");
191+
setFinalizeStatus("notStarted");
187192
return;
188193
}
189194
}
@@ -194,15 +199,15 @@ export const CoordinatorProvider = ({ children }: { children: ReactNode }) => {
194199
pollId,
195200
});
196201
if (!proveResult.success) {
197-
console.log("Failed to generate proofs");
202+
setFinalizeStatus("notStarted");
198203
return;
199204
}
200205
setFinalizeStatus("proved");
201206

202207
setFinalizeStatus("submitting");
203208
const submitResult = await submit(pollId);
204209
if (!submitResult.success) {
205-
console.log("Failed to submit");
210+
setFinalizeStatus("notStarted");
206211
return;
207212
}
208213
setFinalizeStatus("submitted");

‎plugins/maciVoting/pages/new.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ export default function Create() {
3737
const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({ hash: createTxHash });
3838
const [actionType, setActionType] = useState<ActionType>(ActionType.Signaling);
3939

40+
const isLoading = status === "pending" || isConfirming;
41+
4042
const changeActionType = (actionType: ActionType) => {
4143
setActions([]);
4244
setActionType(actionType);
@@ -77,6 +79,8 @@ export default function Create() {
7779
setTimeout(() => {
7880
push("#/");
7981
}, 1000 * 2);
82+
// adding addAlert causes multiple re-renders of the toast messeage
83+
// eslint-disable-next-line react-hooks/exhaustive-deps
8084
}, [status, createTxHash, isConfirming, isConfirmed, error, push]);
8185

8286
const submitProposal = async () => {
@@ -316,7 +320,7 @@ export default function Create() {
316320
disabled={!actions.length}
317321
onClick={() => submitProposal()}
318322
>
319-
Submit proposal
323+
{isLoading ? <PleaseWaitSpinner fullMessage="Submitting proposal..." /> : "Submit proposal"}
320324
</Button>
321325
</div>
322326
</Else>

0 commit comments

Comments
 (0)