chore: update @kleros/ui-components-library

package.json

@@ -11,7 +11,7 @@
     "generate": "wagmi generate"
   },
   "dependencies": {
-    "@kleros/ui-components-library": "^3.4.5",
+    "@kleros/ui-components-library": "^3.6.0",
     "@reown/appkit": "^1.7.6",
     "@reown/appkit-adapter-wagmi": "^1.7.6",
     "@tanstack/react-query": "^5.76.1",

src/components/CreateTransactionWizard/Preview/Preview.tsx

@@ -11,7 +11,7 @@ import Agreement from "components/Transactions/TransactionDetails/Agreement/Agre
 import TitleAndType from "components/Transactions/TransactionDetails/TitleAndType/TitleAndType";
 import { DefaultDivider } from "components/Common/Dividers/DefaultDivider";
 import { StyledDisplaySmall } from "components/Common/Form/StyledDisplaySmall";
-import { ONE_WEEK_BUFFER_IN_SECONDS } from "model/Transaction";
+import { BUFFER_PERIOD_IN_SECONDS } from "model/Transaction";
 
 interface Props {
   back: () => void;
@@ -123,7 +123,7 @@ export default function Preview({ back }: Props) {
           label="Estimated escrow expiry (UTC)"
           text={formatDeadlineDate(
             parseZonedDateTime(deadline)
-              .add({ seconds: ONE_WEEK_BUFFER_IN_SECONDS })
+              .add({ seconds: BUFFER_PERIOD_IN_SECONDS })
               .toDate()
           )}
           Icon={() => <></>}

src/components/CreateTransactionWizard/Template/Template.tsx

@@ -55,7 +55,7 @@ const CardContainer = styled.div`
   text-align: center;
 `;
 
-const StyledCard = styled(Card)<{ active: boolean }>`
+const StyledCard = styled(Card)<{ selected: boolean }>`
   display: flex;
   flex-direction: column;
   height: 150px;
@@ -64,8 +64,8 @@ const StyledCard = styled(Card)<{ active: boolean }>`
   padding: 4px;
   justify-content: space-around;
   align-items: center;
-  border-color: ${({ theme, active }) =>
-    active ? theme.colors.tint : "transparent"};
+  border-color: ${({ theme, selected }) =>
+    selected ? theme.colors.tint : "transparent"};
 `;
 
 const StyledDescription = styled.p`
@@ -107,7 +107,7 @@ export default function Template({ next }: Props) {
         {ESCROW_TEMPLATES.map((template) => (
           <StyledCard
             key={template.title}
-            active={selectedTemplate.id === template.id}
+            selected={selectedTemplate.id === template.id}
             onClick={() => handleSelectTemplate(template)}
             round
             hover

src/components/CreateTransactionWizard/Terms/Terms.tsx

@@ -17,7 +17,6 @@ import {
   now,
   parseZonedDateTime,
 } from "@internationalized/date";
-import { formatFileName } from "utils/common";
 import { IconButton } from "components/Common/Buttons/IconButton";
 import InfoCircleOutline from "assets/info-circle-outline.svg?react";
 
@@ -89,14 +88,6 @@ export default function Terms({ next, back }: Props) {
     next();
   };
 
-  const handleFileUpload = (file: File) => {
-    if (file.type !== "application/pdf") {
-      return;
-    }
-
-    setAgreementFile(file);
-  };
-
   return (
     <StyledForm onSubmit={handleSubmit}>
       <StyledTextArea
@@ -138,13 +129,15 @@ export default function Terms({ next, back }: Props) {
           Upload an agreement PDF (optional)
         </StyledLabel>
         <StyledFileUploader
-          callback={handleFileUpload}
-          msg={
-            agreementFile
-              ? `Current file: ${formatFileName(agreementFile.name)}`
-              : "Non PDF files will be ignored"
-          }
+          callback={setAgreementFile}
+          selectedFile={agreementFile}
           acceptedFileTypes={["application/pdf"]}
+          validationFunction={(file) => {
+            if (!file || file.type !== "application/pdf") {
+              return false;
+            }
+            return true;
+          }}
         />
       </CustomFormFieldContainer>
 

src/components/Transactions/TransactionDetails/TransactionDetails.tsx

@@ -66,7 +66,7 @@ export default function TransactionDetails({ id, contractAddress }: Props) {
 
   const { address } = useAccount();
 
-  //This can be simplified if the CustomTimeline component is updated and no longer expects a tuple
+  //This can be simplified if the CustomTimeline component is updated and no longer expects a tuple or exports the ICustomTimelineProps interface
   const timelineItems = useMemo<TimelineItems>(() => {
     if (!transaction) {
       return [

src/config/reown.ts

@@ -10,13 +10,12 @@ const projectId = import.meta.env.VITE_REOWN_PROJECT_ID;
 
 const networks = Object.values(SUPPORTED_CHAINS) as [
   AppKitNetwork,
-  ...AppKitNetwork[]
+  ...AppKitNetwork[],
 ];
 
 export const wagmiAdapter = new WagmiAdapter({
   networks: networks,
   projectId,
-  ssr: true,
   transports: TRANSPORTS,
 });
 

src/hooks/useCreateTransaction.ts

@@ -18,7 +18,7 @@ import {
 import { useAccount, useWriteContract, useClient } from "wagmi";
 import { getBalance } from "wagmi/actions";
 import { parseZonedDateTime } from "@internationalized/date";
-import { ONE_WEEK_BUFFER_IN_SECONDS } from "model/Transaction";
+import { BUFFER_PERIOD_IN_SECONDS } from "model/Transaction";
 import { wagmiConfig } from "config/reown";
 import { MULTIPLE_ARBITRABLE_TOKEN_TRANSACTION_ABI } from "config/contracts/abi/mutlipleArbitrableTokenTransaction";
 import { MULTIPLE_ARBITRABLE_TRANSACTION_ABI } from "config/contracts/abi/multipleArbitrableTransaction";
@@ -78,7 +78,7 @@ export function useCreateTransaction() {
   const now = Math.floor(Date.now() / 1000);
   const deadlineInSeconds = Math.floor(deadlineDate.getTime() / 1000);
   const secondsUntilDeadline = deadlineInSeconds - now;
-  const timeoutWithBuffer = secondsUntilDeadline + ONE_WEEK_BUFFER_IN_SECONDS;
+  const timeoutWithBuffer = secondsUntilDeadline + BUFFER_PERIOD_IN_SECONDS;
 
   const handleIPFSUploads = async () => {
     //Upload agreement file to IPFS, if it exists
@@ -225,6 +225,13 @@ export function useCreateTransaction() {
       return;
     }
 
+    //Check if the deadline is still in the future, for situations where the user stays in the form long enough for the selected deadline to now be in the past
+    if (deadlineDate.getTime() < new Date().getTime()) {
+      setError("Deadline is in the past");
+      setIsCreating(false);
+      return;
+    }
+
     try {
       const metaEvidenceURI = await handleIPFSUploads();
 

src/model/Transaction.ts

@@ -20,10 +20,12 @@ export enum DisputeRuling {
   "Jurors ruled in favor of the sender",
   "Jurors ruled in favor of the receiver",
 }
+
 //This value is used in the old frontend to indicate no timeout, so it is necessary to maintain backwards compatibility.
 export const NO_TIMEOUT_VALUE_OLD_FRONTEND = 8640000000000000;
 
-export const ONE_WEEK_BUFFER_IN_SECONDS = 604800;
+//1 week buffer period in seconds
+export const BUFFER_PERIOD_IN_SECONDS = 604800;
 
 interface BaseTransaction {
   id: bigint;

src/utils/common.ts

@@ -48,14 +48,6 @@ export function validateAddress(input: string) {
   return ethAddressPattern.test(input);
 }
 
-export function formatFileName(fileName: string) {
-  if (fileName.length <= 15) {
-    return fileName;
-  }
-
-  return `${fileName.slice(0, 8)}...${fileName.slice(-6)}`;
-}
-
 //Workaround to check if the error is a user rejected request error, as it is known that viem's UserRejectedRequestError does not catch this...
 export function isUserRejectedRequestError(error: unknown) {
   return (

yarn.lock

@@ -1341,9 +1341,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@kleros/ui-components-library@npm:^3.4.5":
-  version: 3.4.5
-  resolution: "@kleros/ui-components-library@npm:3.4.5"
+"@kleros/ui-components-library@npm:^3.6.0":
+  version: 3.6.0
+  resolution: "@kleros/ui-components-library@npm:3.6.0"
   dependencies:
     "@internationalized/date": "npm:^3.7.0"
     bignumber.js: "npm:^9.1.2"
@@ -1364,7 +1364,7 @@ __metadata:
     react-dom: ^18.0.0
     react-is: ^18.0.0
     tailwindcss: ^4.0.11
-  checksum: 10c0/ef3d0851dabe2454444cfe5ea43bb74db65a0257321165e41c3b26128bf99ef43d44baf67735246237b9345aee280431d3d88f5088d5cf0103edce47e03fe9ff
+  checksum: 10c0/d76e481f3e72f76d40037a784ac65f97c411ce287fb7720aebb084f81032681b7f19cad0bd5269a719db148069dd18f17280083bd44938225e7e1dd3d51547d4
   languageName: node
   linkType: hard
 
@@ -6325,7 +6325,7 @@ __metadata:
   resolution: "escrow-v1-ui@workspace:."
   dependencies:
     "@eslint/js": "npm:^9.25.0"
-    "@kleros/ui-components-library": "npm:^3.4.5"
+    "@kleros/ui-components-library": "npm:^3.6.0"
     "@reown/appkit": "npm:^1.7.6"
     "@reown/appkit-adapter-wagmi": "npm:^1.7.6"
     "@tanstack/react-query": "npm:^5.76.1"