refactor: wrong chain button display

Author: nhestrompia

web/src/layout/Header/navbar/Menu/Settings/SendMeNotifications/FormNotifs/index.tsx

@@ -25,14 +25,6 @@ const FormEmailContainer = styled.div`
   position: relative;
 `;
 
-const EmailErrorContainer = styled.div`
-  position: absolute;
-  color: ${({ theme }) => theme.error};
-  font-size: 12px;
-  padding-top: 4px;
-  padding-left: 16px;
-`;
-
 const OPTIONS = [{ label: "When x." }, { label: "When y." }, { label: "When z." }, { label: "When w." }];
 
 const FormNotifs: React.FC = () => {

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

@@ -1,9 +1,10 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
-import { useAccount, useBalance } from "wagmi";
+import { useAccount, useBalance, useNetwork } from "wagmi";
 import { useDebounce } from "react-use";
 import { Field, Button } from "@kleros/ui-components-library";
+import ConnectButton from "components/ConnectButton";
 import { usePrepareDisputeKitClassicFundAppeal, useDisputeKitClassicFundAppeal } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { useParsedAmount } from "hooks/useParsedAmount";
@@ -13,6 +14,7 @@ import {
   useFundingContext,
 } from "hooks/useClassicAppealContext";
 import { isUndefined } from "utils/index";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Fund: React.FC = () => {
   const loserSideCountdown = useLoserSideCountdownContext();
@@ -35,6 +37,7 @@ const Fund: React.FC = () => {
   const parsedAmount = useParsedAmount(debouncedAmount);
   const [isSending, setIsSending] = useState(false);
   const { selectedOption } = useSelectedOptionContext();
+  const { chain } = useNetwork();
   const { config: fundAppealConfig } = usePrepareDisputeKitClassicFundAppeal({
     enabled: !isUndefined(id) && !isUndefined(selectedOption),
     args: [BigInt(id ?? 0), BigInt(selectedOption ?? 0)],
@@ -53,21 +56,25 @@ const Fund: React.FC = () => {
           }}
           placeholder="Amount to fund"
         />
-        <StyledButton
-          disabled={isDisconnected || isSending || !balance || parsedAmount > balance.value}
-          text={isDisconnected ? "Connect to Fund" : "Fund"}
-          onClick={() => {
-            if (fundAppeal) {
-              setIsSending(true);
-              wrapWithToast(fundAppeal!())
-                .then(() => {
-                  setAmount("");
-                  close();
-                })
-                .finally(() => setIsSending(false));
-            }
-          }}
-        />
+        {chain && chain.id === DEFAULT_CHAIN ? (
+          <StyledButton
+            disabled={isDisconnected || isSending || !balance || parsedAmount > balance.value}
+            text={isDisconnected ? "Connect to Fund" : "Fund"}
+            onClick={() => {
+              if (fundAppeal) {
+                setIsSending(true);
+                wrapWithToast(fundAppeal!())
+                  .then(() => {
+                    setAmount("");
+                    close();
+                  })
+                  .finally(() => setIsSending(false));
+              }
+            }}
+          />
+        ) : (
+          <ConnectButton />
+        )}
       </div>
     </div>
   ) : (

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

@@ -5,15 +5,18 @@ import Modal from "react-modal";
 import { Textarea, Button } from "@kleros/ui-components-library";
 import { wrapWithToast, OPTIONS as toastOptions } from "utils/wrapWithToast";
 import { uploadFormDataToIPFS } from "utils/uploadFormDataToIPFS";
-import { useWalletClient } from "wagmi";
+import { useWalletClient, useNetwork } from "wagmi";
 import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
+import { DEFAULT_CHAIN } from "consts/chains";
+import ConnectButton from "components/ConnectButton";
 
 const SubmitEvidenceModal: React.FC<{
   isOpen: boolean;
   evidenceGroup: string;
   close: () => void;
 }> = ({ isOpen, evidenceGroup, close }) => {
   const { data: walletClient } = useWalletClient();
+  const { chain } = useNetwork();
   const [isSending, setIsSending] = useState(false);
   const [message, setMessage] = useState("");
   return (
@@ -22,33 +25,37 @@ const SubmitEvidenceModal: React.FC<{
       <StyledTextArea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Your Arguments" />
       <ButtonArea>
         <Button variant="secondary" disabled={isSending} text="Return" onClick={close} />
-        <Button
-          text="Submit"
-          isLoading={isSending}
-          disabled={isSending}
-          onClick={() => {
-            setIsSending(true);
-            const formData = constructEvidence(message);
-            toast.info("Uploading to IPFS", toastOptions);
-            uploadFormDataToIPFS(formData)
-              .then(async (res) => {
-                const response = await res.json();
-                if (res.status === 200 && walletClient) {
-                  const cid = "/ipfs/" + response["cid"];
-                  const { request } = await prepareWriteDisputeKitClassic({
-                    functionName: "submitEvidence",
-                    args: [BigInt(evidenceGroup), cid],
-                  });
-                  await wrapWithToast(walletClient.writeContract(request)).then(() => {
-                    setMessage("");
-                    close();
-                  });
-                }
-              })
-              .catch()
-              .finally(() => setIsSending(false));
-          }}
-        />
+        {chain && chain.id === DEFAULT_CHAIN ? (
+          <Button
+            text="Submit"
+            isLoading={isSending}
+            disabled={isSending}
+            onClick={() => {
+              setIsSending(true);
+              const formData = constructEvidence(message);
+              toast.info("Uploading to IPFS", toastOptions);
+              uploadFormDataToIPFS(formData)
+                .then(async (res) => {
+                  const response = await res.json();
+                  if (res.status === 200 && walletClient) {
+                    const cid = "/ipfs/" + response["cid"];
+                    const { request } = await prepareWriteDisputeKitClassic({
+                      functionName: "submitEvidence",
+                      args: [BigInt(evidenceGroup), cid],
+                    });
+                    await wrapWithToast(walletClient.writeContract(request)).then(() => {
+                      setMessage("");
+                      close();
+                    });
+                  }
+                })
+                .catch()
+                .finally(() => setIsSending(false));
+            }}
+          />
+        ) : (
+          <ConnectButton />
+        )}
       </ButtonArea>
     </StyledModal>
   );

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

@@ -1,60 +1,58 @@
 import React, { useState } from "react";
 import styled from "styled-components";
 import { useParams } from "react-router-dom";
-import { useAccount } from "wagmi";
+import { useAccount, useNetwork } from "wagmi";
 import { Button, Searchbar } from "@kleros/ui-components-library";
 import { useEvidenceGroup } from "queries/useEvidenceGroup";
 import { useEvidences } from "queries/useEvidences";
 import SubmitEvidenceModal from "./SubmitEvidenceModal";
 import EvidenceCard from "components/EvidenceCard";
+import ConnectButton from "components/ConnectButton";
+import { DEFAULT_CHAIN } from "consts/chains";
+
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  align-items: center;
+`;
+
+const StyledButton = styled(Button)`
+  align-self: flex-end;
+`;
 
 const Evidence: React.FC<{ arbitrable?: string }> = ({ arbitrable }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const { id } = useParams();
   const { data: evidenceGroup } = useEvidenceGroup(id, arbitrable);
   const { data } = useEvidences(evidenceGroup);
   const { address } = useAccount();
+  const { chain } = useNetwork();
   return (
     <Container>
       {evidenceGroup && (
-        <SubmitEvidenceModal
-          isOpen={isModalOpen}
-          close={() => setIsModalOpen(false)}
-          {...{ evidenceGroup }}
-        />
+        <SubmitEvidenceModal isOpen={isModalOpen} close={() => setIsModalOpen(false)} {...{ evidenceGroup }} />
       )}
       <Searchbar />
-      <StyledButton
-        small
-        text="Submit Evidence"
-        disabled={typeof address === "undefined" || isModalOpen}
-        isLoading={isModalOpen}
-        onClick={() => setIsModalOpen(true)}
-      />
+      {chain && chain.id === DEFAULT_CHAIN ? (
+        <StyledButton
+          small
+          text="Submit Evidence"
+          disabled={typeof address === "undefined" || isModalOpen}
+          isLoading={isModalOpen}
+          onClick={() => setIsModalOpen(true)}
+        />
+      ) : (
+        <ConnectButton />
+      )}
       {data &&
         data.evidences.map(({ evidence, sender }, i) => (
-          <EvidenceCard
-            key={i}
-            index={i + 1}
-            sender={sender?.id}
-            {...{ evidence }}
-          />
+          <EvidenceCard key={i} index={i + 1} sender={sender?.id} {...{ evidence }} />
         ))}
     </Container>
   );
 };
 
-const Container = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-
-  align-items: center;
-`;
-
-const StyledButton = styled(Button)`
-  align-self: flex-end;
-`;
-
 export default Evidence;

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

@@ -4,8 +4,10 @@ import { useParams } from "react-router-dom";
 import { Button, Textarea } from "@kleros/ui-components-library";
 import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
 import { wrapWithToast } from "utils/wrapWithToast";
-import { useWalletClient } from "wagmi";
+import { useWalletClient, useNetwork } from "wagmi";
 import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
+import { DEFAULT_CHAIN } from "consts/chains";
+import ConnectButton from "components/ConnectButton";
 
 const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrable, voteIDs }) => {
   const { id } = useParams();
@@ -16,6 +18,7 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
   const [isSending, setIsSending] = useState(false);
   const [justification, setJustification] = useState("");
   const { data: walletClient } = useWalletClient();
+  const { chain } = useNetwork();
 
   return id ? (
     <Container>
@@ -31,51 +34,59 @@ const Binary: React.FC<{ arbitrable?: string; voteIDs: string[] }> = ({ arbitrab
           variant="info"
         />
         <OptionsContainer>
-          {metaEvidence?.rulingOptions?.titles?.map((answer: string, i: number) => (
-            <Button
-              key={i}
-              text={answer}
-              disabled={isSending}
-              isLoading={chosenOption === i + 1}
-              onClick={async () => {
-                setIsSending(true);
-                setChosenOption(i + 1);
-                const { request } = await prepareWriteDisputeKitClassic({
-                  functionName: "castVote",
-                  args: [parsedDisputeID, parsedVoteIDs, BigInt(i + 1), 0n, justification],
-                });
-                if (walletClient) {
-                  wrapWithToast(walletClient?.writeContract(request)).finally(() => {
-                    setChosenOption(-1);
-                    setIsSending(false);
+          {metaEvidence?.rulingOptions?.titles?.map((answer: string, i: number) => {
+            chain && chain.id === DEFAULT_CHAIN ? (
+              <Button
+                key={i}
+                text={answer}
+                disabled={isSending}
+                isLoading={chosenOption === i + 1}
+                onClick={async () => {
+                  setIsSending(true);
+                  setChosenOption(i + 1);
+                  const { request } = await prepareWriteDisputeKitClassic({
+                    functionName: "castVote",
+                    args: [parsedDisputeID, parsedVoteIDs, BigInt(i + 1), 0n, justification],
                   });
-                }
-              }}
-            />
-          ))}
+                  if (walletClient) {
+                    wrapWithToast(walletClient?.writeContract(request)).finally(() => {
+                      setChosenOption(-1);
+                      setIsSending(false);
+                    });
+                  }
+                }}
+              />
+            ) : (
+              <ConnectButton />
+            );
+          })}
         </OptionsContainer>
       </MainContainer>
       <RefuseToArbitrateContainer>
-        <Button
-          variant="secondary"
-          text="Refuse to Arbitrate"
-          disabled={isSending}
-          isLoading={chosenOption === 0}
-          onClick={async () => {
-            setIsSending(true);
-            setChosenOption(0);
-            const { request } = await prepareWriteDisputeKitClassic({
-              functionName: "castVote",
-              args: [parsedDisputeID, parsedVoteIDs, 0n, 0n, justification],
-            });
-            if (walletClient) {
-              wrapWithToast(walletClient.writeContract(request)).finally(() => {
-                setChosenOption(-1);
-                setIsSending(false);
+        {chain && chain.id === DEFAULT_CHAIN ? (
+          <Button
+            variant="secondary"
+            text="Refuse to Arbitrate"
+            disabled={isSending}
+            isLoading={chosenOption === 0}
+            onClick={async () => {
+              setIsSending(true);
+              setChosenOption(0);
+              const { request } = await prepareWriteDisputeKitClassic({
+                functionName: "castVote",
+                args: [parsedDisputeID, parsedVoteIDs, 0n, 0n, justification],
               });
-            }
-          }}
-        />
+              if (walletClient) {
+                wrapWithToast(walletClient.writeContract(request)).finally(() => {
+                  setChosenOption(-1);
+                  setIsSending(false);
+                });
+              }
+            }}
+          />
+        ) : (
+          <ConnectButton />
+        )}
       </RefuseToArbitrateContainer>
     </Container>
   ) : (