Merge branch 'dev' into feat/ui-improvements

Author: kemuru

kleros-sdk/src/dataMappings/retrieveRealityData.ts

@@ -50,7 +50,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
   };
 
   const questionData = await executeAction(questionMapping);
-  console.log("questionData", questionData);
 
   const templateMapping: AbiEventMapping = {
     type: "abi/event",
@@ -66,7 +65,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
   };
 
   const templateData = await executeAction(templateMapping);
-  console.log("templateData", templateData);
 
   if (!templateData) {
     throw new NotFoundError("Template Data", "Failed to retrieve template data");
@@ -82,8 +80,6 @@ export const retrieveRealityData = async (realityQuestionID: string, arbitrable?
     questionData.realityQuestion
   );
 
-  console.log("populatedTemplate", populatedTemplate);
-
   let answers: RealityAnswer[] = [];
   if (populatedTemplate.type === "bool") {
     answers = [

kleros-sdk/src/dataMappings/utils/populateTemplate.ts

@@ -9,10 +9,8 @@ export const populateTemplate = (mustacheTemplate: string, data: any): DisputeDe
 
   const validation = DisputeDetailsSchema.safeParse(dispute);
   if (!validation.success) {
-    console.error("Validation errors:", validation.error.errors, "\n\nDispute details:", `${JSON.stringify(dispute)}`);
-    throw new InvalidFormatError("Invalid dispute details format");
+    throw validation.error;
   }
-  console.log(dispute);
 
   return dispute;
 };

package.json

@@ -25,8 +25,7 @@
     "web-devtools",
     "eslint-config",
     "prettier-config",
-    "tsconfig",
-    "kleros-app"
+    "tsconfig"
   ],
   "packageManager": "yarn@4.5.1",
   "volta": {

web/netlify.toml

@@ -6,8 +6,6 @@ NETLIFY_YARN_WORKSPACES = "true"
 YARN_ENABLE_GLOBAL_CACHE = "true"
 # YARN_CACHE_FOLDER = "$HOME/.yarn_cache"
 # YARN_VERSION = "3.2.0"
-[build]
-command = "yarn workspace @kleros/kleros-v2-contracts install && yarn workspace @kleros/kleros-app install &&  yarn workspace @kleros/kleros-v2-web install && yarn workspace @kleros/kleros-v2-contracts build && yarn workspace @kleros/kleros-app build && yarn workspace @kleros/kleros-v2-web build-netlify"
 
 [functions]
 directory = "web/netlify/functions/"

web/package.json

@@ -78,15 +78,15 @@
   },
   "dependencies": {
     "@cyntler/react-doc-viewer": "^1.17.0",
-    "@kleros/kleros-app": "workspace:^",
+    "@kleros/kleros-app": "^2.0.1",
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^2.15.0",
+    "@kleros/ui-components-library": "^2.16.0",
     "@lifi/wallet-management": "^3.4.5",
     "@lifi/widget": "^3.12.2",
     "@sentry/react": "^7.120.0",
     "@sentry/tracing": "^7.120.0",
-    "@tanstack/react-query": "^5.61.0",
+    "@tanstack/react-query": "^5.56.2",
     "@types/react-modal": "^3.16.3",
     "@wagmi/connectors": "^5.5.0",
     "@wagmi/core": "^2.15.0",
@@ -117,7 +117,7 @@
     "react-toastify": "^9.1.3",
     "react-use": "^17.5.1",
     "styled-components": "^5.3.3",
-    "viem": "^2.21.48",
-    "wagmi": "^2.13.0"
+    "viem": "^2.21.54",
+    "wagmi": "^2.13.5"
   }
 }

web/src/assets/svgs/icons/close-circle.svg

@@ -1,6 +1,7 @@
-import { Link } from "react-router-dom";
 import styled from "styled-components";
 
+import { Link } from "react-router-dom";
+
 export const ExternalLink = styled(Link)`
   :hover {
     text-decoration: underline;

web/src/components/ExternalLink.tsx

@@ -0,0 +1,27 @@
+import styled, { keyframes } from "styled-components";
+
+import SpinnerIcon from "svgs/icons/spinner.svg";
+
+const rotating = keyframes`
+    0%{
+      transform: rotate(0deg);
+    }
+    50%{
+      transform: rotate(180deg);
+    }
+    100%{
+      transform: rotate(360deg);
+    }
+`;
+
+const Spinner = styled(SpinnerIcon)`
+  path {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+  width: 16px;
+  height: 16px;
+  margin-right: 4px;
+  animation: ${rotating} 2s ease-in-out infinite normal;
+`;
+
+export default Spinner;

web/src/components/Spinner.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+
+import NewTabIcon from "svgs/icons/new-tab.svg";
+
+import { DEFAULT_CHAIN, getChain } from "consts/chains";
+
+import { ExternalLink } from "./ExternalLink";
+
+const TxnLabel = styled.label<{ variant: string }>`
+  display: flex;
+  gap: 4px;
+  color: ${({ theme, variant }) => (variant === "pending" ? theme.primaryBlue : theme[variant])};
+  cursor: pointer;
+  path {
+    fill: ${({ theme, variant }) => (variant === "pending" ? theme.primaryBlue : theme[variant])};
+  }
+`;
+
+interface ITxnHash {
+  hash: `0x${string}`;
+  variant: "success" | "error" | "pending";
+}
+const TxnHash: React.FC<ITxnHash> = ({ hash, variant }) => {
+  const transactionExplorerLink = useMemo(() => {
+    return `${getChain(DEFAULT_CHAIN)?.blockExplorers?.default.url}/tx/${hash}`;
+  }, [hash]);
+
+  return (
+    <ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
+      <TxnLabel {...{ variant }}>
+        {" "}
+        <span>{hash.substring(0, 6) + "..." + hash.substring(hash.length - 4)}</span>
+        <NewTabIcon />
+      </TxnLabel>
+    </ExternalLink>
+  );
+};
+
+export default TxnHash;

web/src/components/TxnHash.tsx

@@ -23,6 +23,7 @@ const courtDetailsQuery = graphql(`
       paidPNK
       timesPerPeriod
       feeForJuror
+      name
     }
   }
 `);