feat(web): add toast notifications for user actions

Author: alcercu

web/package.json

@@ -81,6 +81,7 @@
     "react-markdown": "^8.0.3",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.4.2",
+    "react-toastify": "^9.1.1",
     "react-use": "^17.4.0",
     "styled-components": "^5.3.6",
     "swr": "^1.3.0"

web/src/app.tsx

@@ -12,6 +12,8 @@ import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
 
+import "react-toastify/dist/ReactToastify.css";
+
 const fetcherBuilder =
   (url: string) =>
   ({ query, variables }: { query: string; variables?: any }) => {

web/src/layout/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { Outlet } from "react-router-dom";
+import { ToastContainer } from "react-toastify";
 import Header from "./Header";
 import Footer from "./Footer";
 
@@ -9,9 +10,15 @@ const Container = styled.div`
   width: 100%;
 `;
 
+const StyledToastContainer = styled(ToastContainer)`
+  padding: 16px;
+  padding-top: 70px;
+`;
+
 const Layout: React.FC = () => (
   <Container>
     <Header />
+    <StyledToastContainer />
     <Outlet />
     <Footer />
   </Container>

web/src/pages/Cases/CaseDetails/Appeal/Classic/Fund.tsx

@@ -4,6 +4,7 @@ import { useParams } from "react-router-dom";
 import { Field, Button } from "@kleros/ui-components-library";
 import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
 import { useConnectedContract } from "hooks/useConnectedContract";
+import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import { useETHBalance } from "hooks/queries/useETHBalance";
 
@@ -16,8 +17,6 @@ const Fund: React.FC<IFund> = ({ selectedOption }) => {
   const { data: balance } = useETHBalance();
   const [amount, setAmount] = useState("");
   const parsedAmount = useParsedAmount(amount);
-  console.log("parsedAmount: ", parsedAmount);
-  console.log("balance: ", balance);
   const [isSending, setIsSending] = useState(false);
   const disputeKitClassic = useConnectedContract(
     "DisputeKitClassic"
@@ -43,16 +42,15 @@ const Fund: React.FC<IFund> = ({ selectedOption }) => {
               typeof id !== "undefined"
             ) {
               setIsSending(true);
-              disputeKitClassic
-                .fundAppeal(id, selectedOption, { value: parsedAmount })
-                .then(
-                  async (tx) =>
-                    await tx.wait().then(() => {
-                      setAmount("");
-                      close();
-                    })
-                )
-                .catch()
+              wrapWithToast(
+                disputeKitClassic.fundAppeal(id, selectedOption, {
+                  value: parsedAmount,
+                })
+              )
+                .then(() => {
+                  setAmount("");
+                  close();
+                })
                 .finally(() => setIsSending(false));
             }
           }}

web/src/pages/Cases/CaseDetails/Evidence/SubmitEvidenceModal.tsx

@@ -3,6 +3,7 @@ import styled from "styled-components";
 import Modal from "react-modal";
 import { Textarea, Button } from "@kleros/ui-components-library";
 import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/dispute-kits/DisputeKitClassic";
+import { wrapWithToast } from "utils/wrapWithToast";
 import { useConnectedContract } from "hooks/useConnectedContract";
 
 const SubmitEvidenceModal: React.FC<{
@@ -36,16 +37,11 @@ const SubmitEvidenceModal: React.FC<{
           disabled={isSending}
           onClick={() => {
             setIsSending(true);
-            disputeKit
-              .submitEvidence(evidenceGroup, message)
-              .then(
-                async (tx) =>
-                  await tx.wait().then(() => {
-                    setMessage("");
-                    close();
-                  })
-              )
-              .catch()
+            wrapWithToast(disputeKit.submitEvidence(evidenceGroup, message))
+              .then(() => {
+                setMessage("");
+                close();
+              })
               .finally(() => setIsSending(false));
           }}
         />

web/src/pages/Cases/CaseDetails/Voting/Binary.tsx

@@ -5,6 +5,7 @@ import { DisputeKitClassic } from "@kleros/kleros-v2-contracts/typechain-types/s
 import { Button, Textarea } from "@kleros/ui-components-library";
 import { useConnectedContract } from "hooks/useConnectedContract";
 import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
+import { wrapWithToast } from "utils/wrapWithToast";
 
 const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
   arbitrable,
@@ -40,16 +41,15 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
                 text={answer}
                 disabled={isSending}
                 isLoading={chosenOption === i + 1}
-                onClick={async () => {
+                onClick={() => {
                   setIsSending(true);
                   setChosenOption(i + 1);
-                  await disputeKit
-                    .castVote(id, voteIDs, i + 1, 0, justification)
-                    .then(async (tx) => await tx.wait(2))
-                    .finally(() => {
-                      setChosenOption(-1);
-                      setIsSending(false);
-                    });
+                  wrapWithToast(
+                    disputeKit.castVote(id, voteIDs, i + 1, 0, justification)
+                  ).finally(() => {
+                    setChosenOption(-1);
+                    setIsSending(false);
+                  });
                 }}
               />
             )
@@ -62,16 +62,15 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({
           text="Refuse to Arbitrate"
           disabled={isSending}
           isLoading={chosenOption === 0}
-          onClick={async () => {
+          onClick={() => {
             setIsSending(true);
             setChosenOption(0);
-            await disputeKit
-              .castVote(id, voteIDs, 0, 0, justification)
-              .then(async (tx) => await tx.wait(2))
-              .finally(() => {
-                setChosenOption(-1);
-                setIsSending(false);
-              });
+            wrapWithToast(
+              disputeKit.castVote(id, voteIDs, 0, 0, justification)
+            ).finally(() => {
+              setChosenOption(-1);
+              setIsSending(false);
+            });
           }}
         />
       </RefuseToArbitrateContainer>

web/src/pages/Courts/CourtDetails/StakeModal.tsx

@@ -8,6 +8,7 @@ import { PNK } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration
 import { KlerosCore } from "@kleros/kleros-v2-contracts/typechain-types/src/arbitration/KlerosCore";
 import { useWeb3 } from "hooks/useWeb3";
 import { useConnectedContract } from "hooks/useConnectedContract";
+import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
 import { usePNKBalance } from "queries/usePNKBalance";
 import { usePNKAllowance } from "queries/usePNKAllowance";
@@ -80,16 +81,12 @@ const AllowanceButton: React.FC<IAllowanceButton> = ({
       }
       onClick={() => {
         setIsSending(true);
-        pnk
-          .increaseAllowance(klerosCore.address, parsedAmount.sub(allowance!))
-          .then(
-            async (tx) =>
-              await tx.wait().then(() => {
-                console.log("nice!");
-              })
+        wrapWithToast(
+          pnk.increaseAllowance(
+            klerosCore.address,
+            parsedAmount.sub(allowance!)
           )
-          .catch()
-          .finally(() => setIsSending(false));
+        ).finally(() => setIsSending(false));
       }}
     />
   );
@@ -117,16 +114,11 @@ const StakeButton: React.FC<IStakeButton> = ({
       onClick={() => {
         if (typeof id !== "undefined") {
           setIsSending(true);
-          klerosCore
-            .setStake(id, parsedAmount)
-            .then(
-              async (tx) =>
-                await tx.wait().then(() => {
-                  setAmount("");
-                  close();
-                })
-            )
-            .catch()
+          wrapWithToast(klerosCore.setStake(id, parsedAmount))
+            .then(() => {
+              setAmount("");
+              close();
+            })
             .finally(() => setIsSending(false));
         }
       }}

web/src/styles/global-style.ts

@@ -1,6 +1,13 @@
 import { createGlobalStyle } from "styled-components";
 
 export const GlobalStyle = createGlobalStyle`
+  :root {
+    --toastify-color-info: ${({ theme }) => theme.primaryBlue};
+    --toastify-color-success: ${({ theme }) => theme.success};
+    --toastify-color-warning: ${({ theme }) => theme.warning};
+    --toastify-color-error: ${({ theme }) => theme.error};
+  }
+
   body {
     font-family: "Open Sans", sans-serif;
     margin: 0px;

web/src/utils/wrapWithToast.ts

@@ -0,0 +1,25 @@
+import { toast, ToastPosition, Theme } from "react-toastify";
+import { ContractTransaction } from "ethers";
+
+const OPTIONS = {
+  position: "top-center" as ToastPosition,
+  autoClose: 5000,
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: undefined,
+  theme: "colored" as Theme,
+};
+
+export async function wrapWithToast(tx: Promise<ContractTransaction>) {
+  toast.info("Transaction initiated", OPTIONS);
+  await tx
+    .then((tx) => {
+      tx.wait(2);
+      toast.success("Transaction mined!", OPTIONS);
+    })
+    .catch((error) => {
+      toast.error(error.message, OPTIONS);
+    });
+}

yarn.lock

@@ -2353,6 +2353,7 @@ __metadata:
     react-markdown: ^8.0.3
     react-modal: ^3.16.1
     react-router-dom: ^6.4.2
+    react-toastify: ^9.1.1
     react-use: ^17.4.0
     styled-components: ^5.3.6
     swr: ^1.3.0
@@ -8141,6 +8142,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^1.1.1":
+  version: 1.2.1
+  resolution: "clsx@npm:1.2.1"
+  checksum: 30befca8019b2eb7dbad38cff6266cf543091dae2825c856a62a8ccf2c3ab9c2907c4d12b288b73101196767f66812365400a227581484a05f968b0307cfaf12
+  languageName: node
+  linkType: hard
+
 "code-point-at@npm:^1.0.0":
   version: 1.1.0
   resolution: "code-point-at@npm:1.1.0"
@@ -19830,6 +19838,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-toastify@npm:^9.1.1":
+  version: 9.1.1
+  resolution: "react-toastify@npm:9.1.1"
+  dependencies:
+    clsx: ^1.1.1
+  peerDependencies:
+    react: ">=16"
+    react-dom: ">=16"
+  checksum: 2039255539961a9b4d77b2656f120b20abe46cb0c699a7f3c0af23b4ef669d9c4d24dae6b8f4954b5efd83edf6d6e23614a29e94e9ee0d2647741fba9ba2db85
+  languageName: node
+  linkType: hard
+
 "react-universal-interface@npm:^0.6.2":
   version: 0.6.2
   resolution: "react-universal-interface@npm:0.6.2"