Merge pull request #42 from kleros/feat(web)/update-routes-paths-to-k…

…ebab-case

feat(web): update-routes-paths-to-kebab-case

web/src/app.tsx

@@ -25,9 +25,9 @@ const App: React.FC = () => {
               <NewTransactionProvider>
                 <SentryRoutes>
                   <Route path="/" element={<Layout />}>
-                    <Route index element={<Navigate to="newTransaction" replace />} />
-                    <Route path="newTransaction/*" element={<NewTransaction />} />
-                    <Route path="myTransactions/*" element={<MyTransactions />} />
+                    <Route index element={<Navigate to="new-transaction" replace />} />
+                    <Route path="new-transaction/*" element={<NewTransaction />} />
+                    <Route path="my-transactions/*" element={<MyTransactions />} />
                     <Route path="*" element={<h1>404 not found</h1>} />
                   </Route>
                 </SentryRoutes>

web/src/components/TransactionCard/index.tsx

@@ -77,7 +77,7 @@ const TransactionCard: React.FC<ITransactionCard> = ({
   return (
     <>
       {!isList || overrideIsList ? (
-        <StyledCard hover onClick={() => navigateAndScrollTop(`/myTransactions/${id.toString()}`)}>
+        <StyledCard hover onClick={() => navigateAndScrollTop(`/my-transactions/${id.toString()}`)}>
           <StatusBanner id={parseInt(id)} status={currentStatusEnum} />
           <CardContainer>
             {!isUndefined(title) ? <StyledTitle>{title}</StyledTitle> : <StyledSkeleton />}
@@ -92,7 +92,7 @@ const TransactionCard: React.FC<ITransactionCard> = ({
           </CardContainer>
         </StyledCard>
       ) : (
-        <StyledListItem hover onClick={() => navigateAndScrollTop(`/myTransactions/${id.toString()}`)}>
+        <StyledListItem hover onClick={() => navigateAndScrollTop(`/my-transactions/${id.toString()}`)}>
           <StatusBanner isCard={false} id={parseInt(id)} status={currentStatusEnum} />
           <ListContainer>
             {!isUndefined(title) ? (

web/src/context/TransactionDetailsContext.tsx

@@ -2,14 +2,11 @@ import React, { createContext, useContext, useState, ReactNode } from "react";
 import { TransactionDetailsFragment } from "src/graphql/graphql";
 
 interface TransactionDetailsContextType {
-  transactionDetails: TransactionDetailsFragment | null;
-  setTransactionDetails: (details: TransactionDetailsFragment | null) => void;
+  transactionDetails: TransactionDetailsFragment | undefined;
+  setTransactionDetails: (details: TransactionDetailsFragment | undefined) => void;
 }
 
-const TransactionDetailsContext = createContext<TransactionDetailsContextType>({
-  transactionDetails: null,
-  setTransactionDetails: () => {},
-});
+const TransactionDetailsContext = createContext<TransactionDetailsContextType | undefined>(undefined);
 
 export const useTransactionDetailsContext = () => {
   const context = useContext(TransactionDetailsContext);
@@ -22,7 +19,7 @@ export const useTransactionDetailsContext = () => {
 };
 
 export const TransactionDetailsProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [transactionDetails, setTransactionDetails] = useState<TransactionDetailsFragment | null>(null);
+  const [transactionDetails, setTransactionDetails] = useState<TransactionDetailsFragment | undefined>(undefined);
 
   return (
     <TransactionDetailsContext.Provider value={{ transactionDetails, setTransactionDetails }}>

web/src/layout/Header/navbar/Explore.tsx

@@ -48,8 +48,8 @@ const StyledLink = styled(Link)<{ isActive: boolean }>`
 `;
 
 const links = [
-  { to: "/newTransaction", text: "New Transaction" },
-  { to: "/myTransactions/display/1/desc/all", text: "My Transactions" },
+  { to: "/new-transaction", text: "New Transaction" },
+  { to: "/my-transactions/display/1/desc/all", text: "My Transactions" },
 ];
 
 const Explore: React.FC = () => {

web/src/pages/MyTransactions/Modal/PaymentReleased/index.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 import { useClickAway } from "react-use";
-import { StyledModal } from "~src/pages/MyTransactions/Modal/StyledModal";
+import { StyledModal } from "pages/MyTransactions/Modal/StyledModal";
 import VerifiedLogo from "./VerifiedLogo";
 import Header from "./Header";
 import Description from "./Description";

web/src/pages/MyTransactions/Modal/ProposeSettlementModal/Buttons/index.tsx

@@ -25,4 +25,5 @@ const Buttons: React.FC<IButtons> = ({ toggleModal, amountProposed, isAmountVali
     </Container>
   );
 };
+
 export default Buttons;

web/src/pages/MyTransactions/TransactionDetails/index.tsx

@@ -52,9 +52,7 @@ const TransactionDetails: React.FC = () => {
   const transactionInfo = useFetchIpfsJson(transactionUri);
 
   useEffect(() => {
-    if (transactionDetails) {
-      setTransactionDetails(transactionDetails.escrow);
-    } else setTransactionDetails({});
+    setTransactionDetails(transactionDetails?.escrow);
   }, [transactionDetails, setTransactionDetails]);
 
   return (

web/src/pages/NewTransaction/EscrowDetails/Title/index.tsx

@@ -15,7 +15,7 @@ const Title: React.FC = () => {
     <Container>
       <Header text="Title" />
       <TextField />
-      <NavigationButtons prevRoute="/newTransaction/typeOfEscrow" nextRoute="/newTransaction/deliverable" />
+      <NavigationButtons prevRoute="/new-transaction/escrow-type" nextRoute="/new-transaction/deliverable" />
     </Container>
   );
 };

web/src/pages/NewTransaction/EscrowDetails/TypeOfEscrow/index.tsx

@@ -17,7 +17,7 @@ const TypeOfEscrow: React.FC = () => {
       <Header text="What kind of escrow do you want to create?" />
       <EscrowOptions />
       <Info />
-      <NavigationButtons prevRoute="" nextRoute="/newTransaction/title" />
+      <NavigationButtons prevRoute="" nextRoute="/new-transaction/title" />
     </Container>
   );
 };

web/src/pages/NewTransaction/NavigationButtons/DepositPaymentButton.tsx

@@ -69,7 +69,7 @@ const DepositPaymentButton: React.FC = () => {
       label: "Transaction Terms",
       uri: extraDescriptionUri,
     },
-    frontendUrl: `https://escrow-v2.kleros.builders/#/myTransactions/%s`,
+    frontendUrl: `https://escrow-v2.kleros.builders/#/my-transactions/%s`,
     arbitrableChainID: "421614",
     arbitrableAddress: "0x250AB0477346aDFC010585b58FbF61cff1d8f3ea",
     arbitratorChainID: "421614",
@@ -115,7 +115,7 @@ const DepositPaymentButton: React.FC = () => {
         .then((wrapResult) => {
           if (wrapResult.status) {
             resetContext();
-            navigate("/myTransactions/display/1/desc/all");
+            navigate("/my-transactions/display/1/desc/all");
           }
         })
         .catch((error) => {

web/src/pages/NewTransaction/NavigationButtons/NextButton.tsx

@@ -56,19 +56,19 @@ const NextButton: React.FC<INextButton> = ({ nextRoute }) => {
 
   const isButtonDisabled =
     escrowType === "swap" ||
-    (location.pathname.includes("/newTransaction/title") && !escrowTitle) ||
-    (location.pathname.includes("/newTransaction/deliverable") && !isDeliverableValid) ||
-    (location.pathname.includes("/newTransaction/payment") &&
+    (location.pathname.includes("/new-transaction/title") && !escrowTitle) ||
+    (location.pathname.includes("/new-transaction/deliverable") && !isDeliverableValid) ||
+    (location.pathname.includes("/new-transaction/payment") &&
       (areSendingFieldsEmpty ||
         !isSellerAddressValid ||
         !isRecipientAddressResolved ||
         !hasSufficientNativeBalance)) ||
-    (location.pathname.includes("/newTransaction/deadline") && (!deadline || isDeadlineInPast)) ||
-    (location.pathname.includes("/newTransaction/notifications") && !isEmailValid);
+    (location.pathname.includes("/new-transaction/deadline") && (!deadline || isDeadlineInPast)) ||
+    (location.pathname.includes("/new-transaction/notifications") && !isEmailValid);
 
   const handleNextClick = async () => {
     try {
-      if (location.pathname.includes("/newTransaction/deliverable") && escrowType === "general") {
+      if (location.pathname.includes("/new-transaction/deliverable") && escrowType === "general") {
         const transactionUri = await handleFileUpload(
           escrowTitle,
           deliverableText,

web/src/pages/NewTransaction/NavigationButtons/index.tsx

@@ -21,7 +21,7 @@ const NavigationButtons: React.FC<NavigationButtonsProps> = ({ prevRoute, nextRo
   return (
     <Container>
       <PreviousButton prevRoute={prevRoute} />
-      {prevRoute === "/newTransaction/notifications" ? <DepositPaymentButton /> : <NextButton nextRoute={nextRoute} />}
+      {prevRoute === "/new-transaction/notifications" ? <DepositPaymentButton /> : <NextButton nextRoute={nextRoute} />}
     </Container>
   );
 };

web/src/pages/NewTransaction/Preview/index.tsx

@@ -51,7 +51,7 @@ const Preview: React.FC = () => {
         extraDescriptionUri={extraDescriptionUri}
         isPreview={true}
       />
-      <NavigationButtons prevRoute="/newTransaction/notifications" nextRoute="/newTransaction/deliverable" />
+      <NavigationButtons prevRoute="/new-transaction/notifications" nextRoute="/new-transaction/deliverable" />
     </Container>
   );
 };

web/src/pages/NewTransaction/Terms/Deadline/index.tsx

@@ -24,7 +24,7 @@ const Deadline: React.FC = () => {
     <Container>
       <Header text="Delivery Deadline" />
       <StyledDatepicker time onSelect={handleDateSelect} />
-      <NavigationButtons prevRoute="/newTransaction/payment" nextRoute="/newTransaction/notifications" />
+      <NavigationButtons prevRoute="/new-transaction/payment" nextRoute="/new-transaction/notifications" />
     </Container>
   );
 };

web/src/pages/NewTransaction/Terms/Deliverable/index.tsx

@@ -82,13 +82,13 @@ const Deliverable: React.FC = () => {
             placeholder="eg. I should receive a website created in React with the following specification: x,y,z."
           />
           <StyledFileUploader callback={handleAttachFile} variant="info" msg={fileFootMessage} />
-          <NavigationButtons prevRoute="/newTransaction/title" nextRoute="/newTransaction/payment" />
+          <NavigationButtons prevRoute="/new-transaction/title" nextRoute="/new-transaction/payment" />
         </>
       ) : (
         <TokenTransaction
           headerText="I should receive"
-          prevRoute="/newTransaction/title"
-          nextRoute="/newTransaction/payment"
+          prevRoute="/new-transaction/title"
+          nextRoute="/new-transaction/payment"
           quantity={receivingQuantity}
           setQuantity={setReceivingQuantity}
           token={receivingToken}

web/src/pages/NewTransaction/Terms/Notifications/index.tsx

@@ -15,7 +15,7 @@ const Notifications: React.FC = () => {
     <Container>
       <Header text="Subscribe for Email Notifications" />
       <EmailField />
-      <NavigationButtons prevRoute="/newTransaction/deadline" nextRoute="/newTransaction/preview" />
+      <NavigationButtons prevRoute="/new-transaction/deadline" nextRoute="/new-transaction/preview" />
     </Container>
   );
 };

web/src/pages/NewTransaction/Terms/Payment/GeneralTransaction/index.tsx

@@ -27,7 +27,7 @@ const GeneralTransaction: React.FC = () => {
       <TokenAndAmount quantity={sendingQuantity} setQuantity={setSendingQuantity} />
       <ToDivider />
       <DestinationAddress recipientAddress={sellerAddress} setRecipientAddress={setSellerAddress} />
-      <NavigationButtons prevRoute="/newTransaction/deliverable" nextRoute="/newTransaction/deadline" />
+      <NavigationButtons prevRoute="/new-transaction/deliverable" nextRoute="/new-transaction/deadline" />
     </Container>
   );
 };

web/src/pages/NewTransaction/Terms/Payment/index.tsx

@@ -19,8 +19,8 @@ const Payment: React.FC = () => {
   ) : (
     <TokenTransaction
       headerText="I am paying"
-      prevRoute="/newTransaction/deliverable"
-      nextRoute="/newTransaction/deadline"
+      prevRoute="/new-transaction/deliverable"
+      nextRoute="/new-transaction/deadline"
       quantity={sendingQuantity}
       setQuantity={setSendingQuantity}
       token={sendingToken}

web/src/pages/NewTransaction/Timeline.tsx

@@ -27,13 +27,13 @@ const Timeline: React.FC = () => {
   const location = useLocation();
 
   const routeToIndexMap = {
-    "/newTransaction/typeOfEscrow": 0,
-    "/newTransaction/title": 0,
-    "/newTransaction/deliverable": 1,
-    "/newTransaction/payment": 1,
-    "/newTransaction/deadline": 1,
-    "/newTransaction/notifications": 1,
-    "/newTransaction/preview": 2,
+    "/new-transaction/escrow-type": 0,
+    "/new-transaction/title": 0,
+    "/new-transaction/deliverable": 1,
+    "/new-transaction/payment": 1,
+    "/new-transaction/deadline": 1,
+    "/new-transaction/notifications": 1,
+    "/new-transaction/preview": 2,
   };
 
   const currentItemIndex = Object.entries(routeToIndexMap).reduce(

web/src/pages/NewTransaction/index.tsx

@@ -52,8 +52,8 @@ const NewTransaction: React.FC = () => {
         {isConnected && isOnSupportedChain ? (
           <MiddleContentContainer>
             <Routes>
-              <Route index element={<Navigate to="typeOfEscrow" replace />} />
-              <Route path="/typeOfEscrow/*" element={<TypeOfEscrow />} />
+              <Route index element={<Navigate to="escrow-type" replace />} />
+              <Route path="/escrow-type/*" element={<TypeOfEscrow />} />
               <Route path="/title/*" element={<Title />} />
               <Route path="/deliverable/*" element={<Deliverable />} />
               <Route path="/payment/*" element={<Payment />} />