feat(web): add parameters field, improve styling, small mapping adjus…

kleros-sdk/config/v2-disputetemplate/reality/example4/DisputeMappings.json.mustache

@@ -0,0 +1,40 @@
+[
+    {
+        "type": "graphql",
+        "endpoint": "https://api.thegraph.com/subgraphs/name/kemuru/escrow-v2-devnet",
+        "query": "query GetTransaction($transactionId: ID!) { escrow(id: $transactionId) { transactionUri buyer seller amount asset deadline } }",
+        "variables": {
+            "transactionId": "{{externalDisputeID}}"
+        },
+        "seek": [
+            "escrow.transactionUri",
+            "escrow.buyer",
+            "escrow.seller",
+            "escrow.amount",
+            "escrow.asset",
+            "escrow.deadline"
+        ],
+        "populate": [
+            "transactionUri",
+            "address",
+            "sendingRecipientAddress",
+            "amount",
+            "asset",
+            "deadline"
+        ]
+    },
+    {
+        "type": "fetch/ipfs/json",
+        "ipfsUri": "{{transactionUri}}",
+        "seek": [
+            "title",
+            "description",
+            "extraDescriptionUri"
+        ],
+        "populate": [
+            "escrowTitle",
+            "deliverableText",
+            "extraDescriptionUri"
+        ]
+    }
+]

kleros-sdk/config/v2-disputetemplate/reality/example4/DisputeTemplate.json.mustache

@@ -0,0 +1,40 @@
+{
+    "title": "{{escrowTitle}}",
+    "description": "{{deliverableText}}",
+    "question": "Which party abided by the terms of the contract?",
+    "answers": [
+        {
+            "title": "Refund the Buyer",
+            "description": "Select this to return the funds to the Buyer."
+        },
+        {
+            "title": "Pay the Seller",
+            "description": "Select this to release the funds to the Seller."
+        }
+    ],
+    "policyURI": "ipfs://TODO",
+    "attachment": {
+        "label": "Transaction Terms",
+        "uri": "{{extraDescriptionUri}}"
+    },
+    "frontendUrl": "https://escrow-v2.kleros.builders/#/myTransactions/{{externalDisputeID}}",
+    "arbitrableChainID": "421614",
+    "arbitrableAddress": "{{arbitrator}}",
+    "arbitratorChainID": "421614",
+    "arbitratorAddress": "{{arbitrable}}",
+    "metadata": {
+        "buyer": "{{address}}",
+        "seller": "{{sendingRecipientAddress}}",
+        "amount": "{{sendingQuantity}}",
+        "asset": "{{asset}}",
+        "deadline": "{{deadline}}",
+        "transactionUri": "{{transactionUri}}"
+    },
+    "category": "Escrow",
+    "specification": "KIPXXX",
+    "aliases": {
+        "Buyer": "{{address}}",
+        "Seller": "{{sendingRecipientAddress}}"
+    },
+    "version": "1.0"
+}

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

@@ -9,7 +9,7 @@ import {
 } from "./actionTypes";
 
 export const validateSubgraphMapping = (mapping: ActionMapping) => {
-  if ((mapping as SubgraphMapping).endpoint !== undefined) {
+  if ((mapping as SubgraphMapping).endpoint === undefined) {
     throw new Error("Invalid mapping for graphql action.");
   }
   return mapping as SubgraphMapping;

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

@@ -1,12 +1,26 @@
 // Can this be replaced by Mustache ?
 export const createResultObject = (sourceData, seek, populate) => {
   const result = {};
+
   seek.forEach((key, idx) => {
-    let foundValue;
-    if (typeof sourceData !== "object" || key === "0") {
-      foundValue = sourceData;
+    let foundValue = sourceData;
+
+    if (key.includes(".")) {
+      const keyParts = key.split(".");
+      for (const part of keyParts) {
+        if (foundValue[part] !== undefined) {
+          foundValue = foundValue[part];
+        } else {
+          foundValue = undefined;
+          break;
+        }
+      }
     } else {
-      foundValue = sourceData[key];
+      if (typeof sourceData !== "object" || key === "0") {
+        foundValue = sourceData;
+      } else {
+        foundValue = sourceData[key];
+      }
     }
 
     console.log(`Seek key: ${key}, Found value:`, foundValue);

web/src/hooks/useContractAddress.tsx

@@ -1,7 +1,16 @@
 import { Abi, PublicClient } from "viem";
 import { usePublicClient } from "wagmi";
 import { GetContractArgs, GetContractResult } from "wagmi/actions";
-import { getPinakionV2, pinakionV2ABI, getWeth, getPnkFaucet, wethABI, pnkFaucetABI } from "./contracts/generated";
+import {
+  getPinakionV2,
+  pinakionV2ABI,
+  getWeth,
+  getPnkFaucet,
+  wethABI,
+  pnkFaucetABI,
+  klerosCoreABI,
+  getKlerosCore,
+} from "./contracts/generated";
 
 type Config = Omit<GetContractArgs<Abi, unknown>, "abi" | "address"> & {
   chainId?: any;
@@ -25,3 +34,7 @@ export const useWETHAddress = () => {
 export const usePNKFaucetAddress = () => {
   return useContractAddress<typeof pnkFaucetABI>(getPnkFaucet)?.address;
 };
+
+export const useKlerosCoreAddress = () => {
+  return useContractAddress<typeof klerosCoreABI>(getKlerosCore)?.address;
+};

web/src/layout/Header/TestnetBanner.tsx

@@ -9,11 +9,11 @@ const Container = styled.div`
   background-color: ${({ theme }) => theme.tintPurple};
   color: ${({ theme }) => theme.primaryText};
 
-  padding: 6px 2px;
+  padding: 5px 2px;
 
   ${landscapeStyle(
     () => css`
-      padding: 8px 10px;
+      padding: 5px 10px;
     `
   )}
 `;

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

@@ -48,6 +48,10 @@ const StyledLink = styled(Link)<{ isActive: boolean }>`
   )};
 `;
 
+const HiddenLink = styled(StyledLink)<{ isActive: boolean }>`
+  color: ${({ isActive, theme }) => (isActive ? theme.primaryText : theme.primaryPurple)};
+`;
+
 const links = [
   { to: "/", text: "Home" },
   { to: "/cases/display/1/desc/all", text: "Cases" },
@@ -73,6 +77,15 @@ const Explore: React.FC = () => {
           </StyledLink>
         </LinkContainer>
       ))}
+      <LinkContainer>
+        <HiddenLink
+          to="/disputeTemplate"
+          onClick={toggleIsOpen}
+          isActive={location.pathname.startsWith("/disputeTemplate")}
+        >
+          Dev
+        </HiddenLink>
+      </LinkContainer>
     </Container>
   );
 };