From 62d90a812fefcbba80ee4be4df8513069f7e6893 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 16 Oct 2024 17:06:45 +0530 Subject: [PATCH 1/4] feat(web-devtools): custom-context-input --- .../utils/disputeDetailsSchema.ts | 6 ++-- .../FetchDisputeRequestInput.tsx | 6 ++-- .../src/app/(main)/dispute-template/page.tsx | 28 +++++++++++++++++-- web-devtools/src/components/JSONEditor.tsx | 2 +- 4 files changed, 32 insertions(+), 10 deletions(-) diff --git a/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts b/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts index d9948ea70..8c65a1f37 100644 --- a/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts +++ b/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts @@ -5,7 +5,7 @@ import { normalize } from "viem/ens"; export const isHexAddress = (str: string): boolean => /^0x[a-fA-F0-9]{40}$/.test(str); export const isHexId = (str: string): boolean => /^0x[a-fA-F0-9]{1,64}$/.test(str); export const isMultiaddr = (str: string): boolean => - /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion|ipfs)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)?$/.test( + /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+(\/[^\s]*)?$/.test( str ); @@ -56,9 +56,7 @@ const DisputeDetailsSchema = z.object({ description: z.string(), question: z.string(), answers: z.array(AnswerSchema), - policyURI: z.string().refine((value) => isMultiaddr(value), { - message: "Provided policy URI is not a valid multiaddr.", - }), + policyURI: z.string(), attachment: AttachmentSchema.optional(), frontendUrl: z.string().optional(), metadata: MetadataSchema.optional(), diff --git a/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx b/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx index 3347ca670..c471d8a08 100644 --- a/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx +++ b/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx @@ -46,17 +46,17 @@ const StyledA = styled.a` const presets = [ { title: "Escrow", - txnHash: "0x85e60cb407c9a38e625263cc762ff4283d01f38201825e1d20109d8664cfa7d4", + txnHash: "0x2565b756e500240544f7fc36f938462c7efbbd2e343c57979f81fecdf1054e23", chainId: 421614, }, { title: "Curated Lists", - txnHash: "0x6e5ad6f7436ef8570b50b0fbec76a11ccedbed85030c670e59d8f6617a499108", + txnHash: "0xa7981830bf8144ab2070f3a639bd36b204c4c48ee1fafef66abaf60272418ed4", chainId: 421614, }, { title: "Trump-Biden", - txnHash: "0x9a3a420174f3c55c2b3eb2e77266777b74028b845e528a90142b5b57aafbdb90", + txnHash: "0x83934c07f6476b2fd8c43cf856819134a58c007cb6938c6990fb3058b243ba0c", chainId: 421614, }, ]; diff --git a/web-devtools/src/app/(main)/dispute-template/page.tsx b/web-devtools/src/app/(main)/dispute-template/page.tsx index 4489fbe0f..df846f614 100644 --- a/web-devtools/src/app/(main)/dispute-template/page.tsx +++ b/web-devtools/src/app/(main)/dispute-template/page.tsx @@ -105,6 +105,11 @@ const UpperContainer = styled.div` ` )} `; + +const StyledJSONEditor = styled(JSONEditor)` + height: 300px; + width: 100%; +`; const StyledForm = styled.form` display: flex; flex-direction: column; @@ -150,6 +155,7 @@ const DisputeTemplateView = () => { const [disputeDetails, setDisputeDetails] = useState(undefined); const [disputeTemplateInput, setDisputeTemplateInput] = useState(""); const [dataMappingsInput, setDataMappingsInput] = useState(""); + const [customContextInput, setCustomContextInput] = useState("{}"); const [params, setParams] = useState({ _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA", @@ -178,7 +184,13 @@ const DisputeTemplateView = () => { setLoading(true); setTimeout(() => { - const initialContext = { + let customContext = null; + try { + customContext = JSON.parse(customContextInput); + } catch (error) { + console.log("Error parsing custom context", error); + } + let initialContext = { arbitrator: debouncedParams._arbitrator, arbitrable: debouncedParams._arbitrable, arbitratorDisputeID: debouncedParams._arbitratorDisputeID, @@ -187,6 +199,8 @@ const DisputeTemplateView = () => { templateUri: debouncedParams._templateUri, }; + if (customContext) initialContext = { ...initialContext, ...customContext }; + const fetchData = async () => { try { const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {}; @@ -210,7 +224,7 @@ const DisputeTemplateView = () => { if (disputeTemplateInput || dataMappingsInput || debouncedParams) { scheduleFetchData(); } - }, [disputeTemplateInput, dataMappingsInput, debouncedParams]); + }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContextInput]); return ( <> @@ -280,6 +294,16 @@ const DisputeTemplateView = () => { placeholder="ipfs://... (optional)" /> + + {"Custom Context :"} + { + setCustomContextInput(val.text); + }} + /> +
{ } }, [props]); - return ; + return ; }; export default JSONEditor; From e95090546ae269d20720a14ecb7a68d76158f44e Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 18 Oct 2024 15:09:04 +0530 Subject: [PATCH 2/4] chore(kleros-sdk): revert-policy-check-change --- kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts b/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts index 8c65a1f37..d9948ea70 100644 --- a/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts +++ b/kleros-sdk/src/dataMappings/utils/disputeDetailsSchema.ts @@ -5,7 +5,7 @@ import { normalize } from "viem/ens"; export const isHexAddress = (str: string): boolean => /^0x[a-fA-F0-9]{40}$/.test(str); export const isHexId = (str: string): boolean => /^0x[a-fA-F0-9]{1,64}$/.test(str); export const isMultiaddr = (str: string): boolean => - /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+(\/[^\s]*)?$/.test( + /^\/(?:ip4|ip6|dns4|dns6|dnsaddr|tcp|udp|utp|tls|ws|wss|p2p-circuit|p2p-webrtc-star|p2p-webrtc-direct|p2p-websocket-star|onion|ipfs)(\/[^\s\/]+)+$|^ipfs:\/\/[a-zA-Z0-9]+\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)?$/.test( str ); @@ -56,7 +56,9 @@ const DisputeDetailsSchema = z.object({ description: z.string(), question: z.string(), answers: z.array(AnswerSchema), - policyURI: z.string(), + policyURI: z.string().refine((value) => isMultiaddr(value), { + message: "Provided policy URI is not a valid multiaddr.", + }), attachment: AttachmentSchema.optional(), frontendUrl: z.string().optional(), metadata: MetadataSchema.optional(), From 0e1e8e5da13215a0f48c851ace8d0bc53042b148 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 25 Oct 2024 18:04:42 +0530 Subject: [PATCH 3/4] feat(web-devtools): dynamic-custom-context-input --- .../dispute-template/CustomContextInputs.tsx | 82 +++++++++++++++++++ .../FetchDisputeRequestInput.tsx | 4 +- .../src/app/(main)/dispute-template/page.tsx | 26 ++---- web-devtools/tsconfig.json | 1 - 4 files changed, 89 insertions(+), 24 deletions(-) create mode 100644 web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx diff --git a/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx b/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx new file mode 100644 index 000000000..ed3fc1d47 --- /dev/null +++ b/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx @@ -0,0 +1,82 @@ +import retrieveVariables from "@kleros/kleros-sdk/src/dataMappings/utils/retrieveVariables"; +import { Field } from "@kleros/ui-components-library"; +import { useMemo, useState } from "react"; +import styled from "styled-components"; +import { useDebounce } from "react-use"; +import WithHelpTooltip from "components/WithHelpTooltip"; + +const Container = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 32px; +`; + +const Header = styled.h2` + margin: 0; +`; + +const InputContainer = styled.div` + display: flex; + gap: 16px; + flex-wrap: wrap; +`; +const VariableName = styled.p` + font-family: "Roboto Mono", monospace; +`; + +// prevent duplicating input fields +const DisputeRequestParams = [ + "arbitrator", + "arbitrable", + "arbitratorDisputeID", + "externalDisputeID", + "templateID", + "templateUri", +]; + +interface ICustomContextInputs { + dataMapping: string; + setCustomContext: (context: Record) => void; +} +const CustomContextInputs: React.FC = ({ dataMapping, setCustomContext }) => { + const [customContext, setCustomContextInputs] = useState>(); + + const requiredVariables = useMemo(() => retrieveVariables(dataMapping), [dataMapping]); + + useDebounce( + () => { + if (!customContext) return; + setCustomContext(customContext); + }, + 300, + [customContext] + ); + + return requiredVariables.length ? ( + + +
Additional Context
+ + {requiredVariables.map((variable, index) => + DisputeRequestParams.includes(variable) ? null : ( + + {variable}: + { + setCustomContextInputs((prev) => ({ ...prev, [variable]: e.target.value })); + }} + placeholder="0x..." + /> + + ) + )} + + ) : null; +}; + +export default CustomContextInputs; diff --git a/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx b/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx index c471d8a08..911a041e5 100644 --- a/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx +++ b/web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx @@ -55,8 +55,8 @@ const presets = [ chainId: 421614, }, { - title: "Trump-Biden", - txnHash: "0x83934c07f6476b2fd8c43cf856819134a58c007cb6938c6990fb3058b243ba0c", + title: "Trump-Harris", + txnHash: "0x86db91678cf3f8c4503e37340cf2cd93bffcba84f9c43a98c090f6a4c76d8793", chainId: 421614, }, ]; diff --git a/web-devtools/src/app/(main)/dispute-template/page.tsx b/web-devtools/src/app/(main)/dispute-template/page.tsx index df846f614..ff9802520 100644 --- a/web-devtools/src/app/(main)/dispute-template/page.tsx +++ b/web-devtools/src/app/(main)/dispute-template/page.tsx @@ -25,6 +25,7 @@ import ReactMarkdown from "components/ReactMarkdown"; import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput"; import FetchFromIDInput from "./FetchFromIdInput"; +import CustomContextInputs from "./CustomContextInputs"; const Container = styled.div` height: auto; @@ -106,10 +107,6 @@ const UpperContainer = styled.div` )} `; -const StyledJSONEditor = styled(JSONEditor)` - height: 300px; - width: 100%; -`; const StyledForm = styled.form` display: flex; flex-direction: column; @@ -155,7 +152,7 @@ const DisputeTemplateView = () => { const [disputeDetails, setDisputeDetails] = useState(undefined); const [disputeTemplateInput, setDisputeTemplateInput] = useState(""); const [dataMappingsInput, setDataMappingsInput] = useState(""); - const [customContextInput, setCustomContextInput] = useState("{}"); + const [customContext, setCustomContext] = useState>(); const [params, setParams] = useState({ _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA", @@ -184,12 +181,6 @@ const DisputeTemplateView = () => { setLoading(true); setTimeout(() => { - let customContext = null; - try { - customContext = JSON.parse(customContextInput); - } catch (error) { - console.log("Error parsing custom context", error); - } let initialContext = { arbitrator: debouncedParams._arbitrator, arbitrable: debouncedParams._arbitrable, @@ -224,7 +215,7 @@ const DisputeTemplateView = () => { if (disputeTemplateInput || dataMappingsInput || debouncedParams) { scheduleFetchData(); } - }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContextInput]); + }, [disputeTemplateInput, dataMappingsInput, debouncedParams, customContext]); return ( <> @@ -291,18 +282,11 @@ const DisputeTemplateView = () => { name="_templateUri" value={params._templateUri} onChange={handleFormUpdate} - placeholder="ipfs://... (optional)" + placeholder="/ipfs/... (optional)" /> - {"Custom Context :"} - { - setCustomContextInput(val.text); - }} - /> +
diff --git a/web-devtools/tsconfig.json b/web-devtools/tsconfig.json index f1f3ae56a..95fbe7e82 100644 --- a/web-devtools/tsconfig.json +++ b/web-devtools/tsconfig.json @@ -32,7 +32,6 @@ "./*" ], "src*": [ - "../../kleros-sdk/src/*", "./*" ], "svgs*": [ From ff618c09da338aa7c64081d5bd4bdc1a8650df4d Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 28 Oct 2024 11:28:03 +0530 Subject: [PATCH 4/4] fix(web-devtools): rabbit-ai-feedback --- .../dispute-template/CustomContextInputs.tsx | 21 ++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx b/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx index ed3fc1d47..5fdfbc414 100644 --- a/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx +++ b/web-devtools/src/app/(main)/dispute-template/CustomContextInputs.tsx @@ -41,17 +41,24 @@ interface ICustomContextInputs { setCustomContext: (context: Record) => void; } const CustomContextInputs: React.FC = ({ dataMapping, setCustomContext }) => { - const [customContext, setCustomContextInputs] = useState>(); + const [customContextInputs, setCustomContextInputs] = useState>(); - const requiredVariables = useMemo(() => retrieveVariables(dataMapping), [dataMapping]); + const requiredVariables = useMemo(() => { + try { + return retrieveVariables(dataMapping); + } catch (error) { + console.error("Failed to parse dataMapping:", error); + return []; + } + }, [dataMapping]); useDebounce( () => { - if (!customContext) return; - setCustomContext(customContext); + if (!customContextInputs) return; + setCustomContext(customContextInputs); }, 300, - [customContext] + [customContextInputs] ); return requiredVariables.length ? ( @@ -61,12 +68,12 @@ const CustomContextInputs: React.FC = ({ dataMapping, setC {requiredVariables.map((variable, index) => DisputeRequestParams.includes(variable) ? null : ( - + {variable}: { setCustomContextInputs((prev) => ({ ...prev, [variable]: e.target.value })); }}