fix(web): don't show popup if the user cancels the tx

kleros · Jan 9, 2024 · 5d2d039 · 5d2d039
1 parent d1fcd9a
commit 5d2d039
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 14 deletions.
diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx
@@ -57,8 +57,8 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen }) => {
         args: [parsedDisputeID, parsedVoteIDs, commit],
       });
       if (walletClient) {
-        wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
-          setIsOpen(true);
+        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((result) => {
+          setIsOpen(result);
         });
       }
     },

diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx
@@ -74,6 +74,7 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) =
   const [storedSaltAndChoice, _] = useLocalStorage<string>(saltKey);
 
   const handleReveal = useCallback(async () => {
+    setIsSending(true);
     const { salt, choice } = isUndefined(storedSaltAndChoice)
       ? await getSaltAndChoice(signingAccount, generateSigningAccount, saltKey, disputeTemplate.answers, commit)
       : JSON.parse(storedSaltAndChoice);
@@ -82,11 +83,12 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) =
       functionName: "castVote",
       args: [parsedDisputeID, parsedVoteIDs, BigInt(choice), BigInt(salt), justification],
     });
-    if (walletClient) {
-      wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
-        setIsOpen(true);
+    if (request && walletClient) {
+      await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((result) => {
+        setIsOpen(result);
       });
     }
+    setIsSending(false);
   }, [
     commit,
     disputeTemplate?.answers,
@@ -112,7 +114,6 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) =
         disabled={isSending}
         isLoading={isSending}
         onClick={async () => {
-          setIsSending(true);
           handleReveal();
         }}
       />

diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx
@@ -40,7 +40,7 @@ const Vote: React.FC<IVote> = ({ arbitrable, voteIDs, setIsOpen }) => {
         ],
       });
       if (walletClient) {
-        wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
+        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(() => {
           setIsOpen(true);
         });
       }

diff --git a/web/src/utils/wrapWithToast.ts b/web/src/utils/wrapWithToast.ts
@@ -13,13 +13,20 @@ export const OPTIONS = {
 
 export async function wrapWithToast(contractWrite: () => Promise<`0x${string}`>, publicClient: any) {
   toast.info("Transaction initiated", OPTIONS);
-  const hash = await contractWrite();
-  await publicClient
-    .waitForTransactionReceipt({ hash, confirmations: 2 })
-    .then(() => {
-      toast.success("Transaction mined!", OPTIONS);
-    })
+  return await contractWrite()
+    .then(
+      async (hash) =>
+        await publicClient.waitForTransactionReceipt({ hash, confirmations: 2 }).then(() => {
+          toast.success("Transaction mined!", OPTIONS);
+          return true;
+        })
+    )
     .catch((error) => {
-      toast.error(error.message, OPTIONS);
+      toast.error(error.shortMessage ?? error.message, OPTIONS);
+      return false;
     });
 }
+
+export async function catchShortMessage(promise: Promise<any>) {
+  return await promise.catch((error) => toast.error(error.shortMessage ?? error.message, OPTIONS));
+}