Merge pull request #1759 from kleros/refactor/UI-UX-improvements

Refactor/UI ux improvements

Author: alcercu

web/src/components/ClaimPnkButton.tsx

@@ -51,7 +51,7 @@ const ClaimPnkButton: React.FC = () => {
     const { request } = await simulatePnkFaucet(wagmiConfig, {
       functionName: "request",
     });
-    if (walletClient) {
+    if (walletClient && publicClient) {
       wrapWithToast(async () => await walletClient.writeContract(request), publicClient)
         .finally(() => {
           setIsSending(false);

web/src/components/Popup/index.tsx

@@ -236,9 +236,14 @@ const Popup: React.FC<PopupProps & IPopup> = ({
       break;
   }
 
+  const closePopup = () => {
+    setIsOpen(false);
+    resetValue();
+  };
+
   return (
-    <Overlay>
-      <Container ref={containerRef}>
+    <Overlay onClick={closePopup}>
+      <Container ref={containerRef} onClick={(e) => e.stopPropagation()}>
         {popupType === PopupType.SWAP_SUCCESS && (
           <SVGContainer>
             <CloseIcon onClick={() => setIsOpen(false)} />
@@ -259,8 +264,7 @@ const Popup: React.FC<PopupProps & IPopup> = ({
             variant="secondary"
             text={popupType === PopupType.DISPUTE_CREATED ? "Check the case" : "Close"}
             onClick={() => {
-              setIsOpen(false);
-              resetValue();
+              closePopup();
               if (popupType === PopupType.DISPUTE_CREATED) {
                 const { disputeId } = props as IDisputeCreated;
                 navigate(`/cases/${disputeId}`);

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

@@ -137,9 +137,7 @@ const Fund: React.FC<IFund> = ({ amount, setAmount, setIsOpen }) => {
               if (fundAppeal && fundAppealConfig && publicClient) {
                 setIsSending(true);
                 wrapWithToast(async () => await fundAppeal(fundAppealConfig.request), publicClient)
-                  .then((res) => {
-                    res.status && setIsOpen(true);
-                  })
+                  .then((res) => setIsOpen(res.status))
                   .finally(() => {
                     setIsSending(false);
                   });

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

@@ -91,7 +91,7 @@ const SubmitEvidenceModal: React.FC<{
   }, [publicClient, wagmiConfig, walletClient, close, evidenceGroup, file, message, setIsSending, uploadFile]);
 
   return (
-    <StyledModal {...{ isOpen }}>
+    <StyledModal {...{ isOpen }} shouldCloseOnEsc shouldCloseOnOverlayClick onRequestClose={close}>
       <h1>Submit New Evidence</h1>
       <StyledTextArea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Your Arguments" />
       <StyledFileUploader callback={(file: File) => setFile(file)} />

web/src/pages/Courts/CourtDetails/StakePanel/InputDisplay.tsx

@@ -104,7 +104,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
     },
     args: [address ?? "0x", BigInt(id ?? "0")],
   });
-  const parsedStake = formatPNK(jurorBalance?.[2] || 0n, 0, true);
+  const parsedStake = formatPNK(jurorBalance?.[2] ?? 0n, 0, true);
   const isStaking = useMemo(() => action === ActionType.stake, [action]);
 
   useEffect(() => {
@@ -153,6 +153,7 @@ const InputDisplay: React.FC<IInputDisplay> = ({
                 isSending,
                 setIsSending,
                 setIsPopupOpen,
+                setErrorMsg,
               }}
             />
           </EnsureChainContainer>

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 
 import { useParams } from "react-router-dom";
 import { useAccount, usePublicClient } from "wagmi";
@@ -36,17 +36,14 @@ const Container = styled.div`
   flex-direction: column;
 `;
 
-const ErrorLabel = styled.label`
-  color: ${({ theme }) => theme.error};
-`;
-
 interface IActionButton {
   isSending: boolean;
   parsedAmount: bigint;
   action: ActionType;
   setIsSending: (arg0: boolean) => void;
   setAmount: (arg0: string) => void;
   setIsPopupOpen: (arg0: boolean) => void;
+  setErrorMsg: (msg: string) => void;
 }
 
 const StakeWithdrawButton: React.FC<IActionButton> = ({
@@ -55,6 +52,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   isSending,
   setIsSending,
   setIsPopupOpen,
+  setErrorMsg,
 }) => {
   const { id } = useParams();
   const { address } = useAccount();
@@ -104,9 +102,11 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     },
     args: [klerosCoreAddress[DEFAULT_CHAIN], BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)],
   });
+
   const { writeContractAsync: increaseAllowance } = useWritePnkIncreaseAllowance();
+
   const handleAllowance = useCallback(() => {
-    if (increaseAllowanceConfig) {
+    if (increaseAllowanceConfig && publicClient) {
       setIsSending(true);
       wrapWithToast(async () => await increaseAllowance(increaseAllowanceConfig.request), publicClient).finally(() => {
         setIsSending(false);
@@ -116,16 +116,18 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
 
   const { data: setStakeConfig, error: setStakeError } = useSimulateKlerosCoreSetStake({
     query: {
-      enabled: !isUndefined(targetStake) && !isUndefined(id) && !isAllowance && parsedAmount !== 0n,
+      enabled:
+        !isUndefined(targetStake) && !isUndefined(id) && !isAllowance && parsedAmount !== 0n && targetStake >= 0n,
     },
     args: [BigInt(id ?? 0), targetStake],
   });
   const { writeContractAsync: setStake } = useWriteKlerosCoreSetStake();
+
   const handleStake = useCallback(() => {
-    if (setStakeConfig) {
+    if (setStakeConfig && publicClient) {
       setIsSending(true);
       wrapWithToast(async () => await setStake(setStakeConfig.request), publicClient)
-        .then((res) => res.status && setIsPopupOpen(true))
+        .then((res) => setIsPopupOpen(res.status))
         .finally(() => {
           setIsSending(false);
         });
@@ -135,7 +137,7 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
   const buttonProps = {
     [ActionType.allowance]: {
       text: "Allow PNK",
-      checkDisabled: () => !balance || targetStake! > balance,
+      checkDisabled: () => !balance || targetStake > balance,
       onClick: handleAllowance,
     },
     [ActionType.stake]: {
@@ -150,6 +152,12 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
     },
   };
 
+  useEffect(() => {
+    if (setStakeError) {
+      setErrorMsg(setStakeError?.shortMessage ?? setStakeError.message);
+    }
+  }, [setStakeError]);
+
   const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
   return (
     <EnsureChain>
@@ -168,7 +176,6 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
           }
           onClick={onClick}
         />
-        {setStakeError && <ErrorLabel> {setStakeError.message}</ErrorLabel>}
       </Container>
     </EnsureChain>
   );

web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx

@@ -43,7 +43,7 @@ const SubmitDisputeButton: React.FC = () => {
   }, [userBalance, disputeData]);
 
   // TODO: decide which dispute kit to use
-  const { data: submitCaseConfig } = useSimulateDisputeResolverCreateDisputeForTemplate({
+  const { data: submitCaseConfig, error } = useSimulateDisputeResolverCreateDisputeForTemplate({
     query: {
       enabled: !insufficientBalance && isTemplateValid(disputeTemplate),
     },
@@ -63,6 +63,14 @@ const SubmitDisputeButton: React.FC = () => {
     [isSubmittingCase, insufficientBalance, isBalanceLoading, disputeTemplate]
   );
 
+  const errorMsg = useMemo(() => {
+    if (insufficientBalance) return "Insufficient balance";
+    else if (error) {
+      return error?.shortMessage ?? error.message;
+    }
+    return null;
+  }, [error, insufficientBalance]);
+
   return (
     <>
       {" "}
@@ -91,9 +99,9 @@ const SubmitDisputeButton: React.FC = () => {
               }
             }}
           />
-          {insufficientBalance && (
+          {errorMsg && (
             <ErrorButtonMessage>
-              <ClosedCircleIcon /> Insufficient balance
+              <ClosedCircleIcon /> {errorMsg}
             </ErrorButtonMessage>
           )}
         </div>