From e0a112d78e6a867e70fc3045d64332aa61408780 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sun, 4 Feb 2024 21:01:02 +0530 Subject: [PATCH 01/10] feat(web): json-format-prettify-and-syntax-coloring --- web/package.json | 1 + web/src/components/JSONEditor.tsx | 59 ++++ web/src/pages/DisputeTemplateView.tsx | 45 +-- yarn.lock | 434 +++++++++++++++++++++++++- 4 files changed, 512 insertions(+), 27 deletions(-) create mode 100644 web/src/components/JSONEditor.tsx diff --git a/web/package.json b/web/package.json index 3b4ba1f3c..ac33f2d45 100644 --- a/web/package.json +++ b/web/package.json @@ -107,6 +107,7 @@ "react-toastify": "^9.1.3", "react-use": "^17.4.3", "styled-components": "^5.3.11", + "vanilla-jsoneditor": "^0.21.4", "viem": "^1.21.4", "wagmi": "^1.4.13" } diff --git a/web/src/components/JSONEditor.tsx b/web/src/components/JSONEditor.tsx new file mode 100644 index 000000000..6bffb6681 --- /dev/null +++ b/web/src/components/JSONEditor.tsx @@ -0,0 +1,59 @@ +import React, { useEffect, useRef } from "react"; +import styled, { css } from "styled-components"; +import { JSONEditor as Editor, JSONEditorPropsOptional } from "vanilla-jsoneditor"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const Container = styled.div` + width: 100%; + height: calc(100vh - 180px); + + --text-color: ${({ theme }) => theme.primaryText}; + --jse-text-readonly: ${({ theme }) => theme.primaryText}; + --jse-theme-color: ${({ theme }) => theme.primaryPurple}; + --jse-background-color: ${({ theme }) => theme.whiteBackground}; + --jse-panel-background: ${({ theme }) => theme.hoveredShadow}; + --jse-theme-color-highlight: ${({ theme }) => theme.lightPurple}; + --jse-main-border: 1px solid ${({ theme }) => theme.stroke}; + --jse-key-color: ${({ theme }) => theme.tint}; + --jse-value-color: ${({ theme }) => theme.success}; + --jse-delimiter-color: ${({ theme }) => theme.primaryText}; + .cm-gutter-lint { + width: 0.6em; + } + ${landscapeStyle( + () => css` + width: 30vw; + height: calc(100vh - 300px); + ` + )} +`; + +const JSONEditor = (props: JSONEditorPropsOptional) => { + const refContainer = useRef(null); + const refEditor = useRef(null); + + useEffect(() => { + refEditor.current = new Editor({ + target: refContainer.current, + props: { + ...props, + }, + }); + + return () => { + if (refEditor.current) { + refEditor.current.destroy(); + refEditor.current = null; + } + }; + }, []); + + useEffect(() => { + if (refEditor.current) { + refEditor.current.updateProps(props); + } + }, [props]); + + return ; +}; +export default JSONEditor; diff --git a/web/src/pages/DisputeTemplateView.tsx b/web/src/pages/DisputeTemplateView.tsx index 02c8cc11c..992426fd8 100644 --- a/web/src/pages/DisputeTemplateView.tsx +++ b/web/src/pages/DisputeTemplateView.tsx @@ -1,9 +1,8 @@ import React, { useEffect, useState } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { useDebounce } from "react-use"; import Skeleton from "react-loading-skeleton"; -import { Field, Textarea } from "@kleros/ui-components-library"; -import { configureSDK } from "@kleros/kleros-sdk/src/sdk"; +import { Field } from "@kleros/ui-components-library"; import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions"; import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; import { Answer, DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; @@ -13,7 +12,9 @@ import { useKlerosCoreAddress } from "hooks/useContractAddress"; import { getIpfsUrl } from "utils/getIpfsUrl"; import ReactMarkdown from "components/ReactMarkdown"; - +import SvelteJSONEditor from "components/JSONEditor"; +import { Mode } from "vanilla-jsoneditor"; +import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` height: auto; display: flex; @@ -77,12 +78,12 @@ const LongTextSections = styled.div` margin: 24px; display: flex; gap: 12px; -`; - -const StyledTextArea = styled(Textarea)` - width: 30vw; - height: calc(100vh - 300px); - font-family: "Roboto Mono", monospace; + flex-direction: column; + ${landscapeStyle( + () => css` + flex-direction: row; + ` + )} `; const StyledForm = styled.form` @@ -161,9 +162,9 @@ const DisputeTemplateView = () => { const fetchData = async () => { try { - const parsedMappings = JSON.parse(dataMappingsInput); - const data = await executeActions(parsedMappings, initialContext); + const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {}; const finalDisputeDetails = populateTemplate(disputeTemplateInput, data); + setDisputeDetails(finalDisputeDetails); } catch (e) { console.error(e); @@ -249,18 +250,22 @@ const DisputeTemplateView = () => { Template - setDisputeTemplateInput(e.target.value)} - placeholder="Enter dispute template" + { + setDisputeTemplateInput(val.text); + }} /> Data Mapping - setDataMappingsInput(e.target.value)} - placeholder="Enter data mappings" + { + setDataMappingsInput(val.text); + }} /> diff --git a/yarn.lock b/yarn.lock index c87dcba7d..45d5937b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -51,7 +51,7 @@ __metadata: languageName: node linkType: hard -"@ampproject/remapping@npm:^2.2.0": +"@ampproject/remapping@npm:^2.2.0, @ampproject/remapping@npm:^2.2.1": version: 2.2.1 resolution: "@ampproject/remapping@npm:2.2.1" dependencies: @@ -3056,6 +3056,99 @@ __metadata: languageName: node linkType: hard +"@codemirror/autocomplete@npm:^6.12.0": + version: 6.12.0 + resolution: "@codemirror/autocomplete@npm:6.12.0" + dependencies: + "@codemirror/language": "npm:^6.0.0" + "@codemirror/state": "npm:^6.0.0" + "@codemirror/view": "npm:^6.17.0" + "@lezer/common": "npm:^1.0.0" + peerDependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + "@lezer/common": ^1.0.0 + checksum: d01fa7e5b965285e7c26116c716c2f85d8fc4810f69abb9432dd97d60bf3a05cac547fe9dc6eaf8c7723a8621c017ff41a0b5df0e635c5a7cc37b041c7676ce8 + languageName: node + linkType: hard + +"@codemirror/commands@npm:^6.3.3": + version: 6.3.3 + resolution: "@codemirror/commands@npm:6.3.3" + dependencies: + "@codemirror/language": "npm:^6.0.0" + "@codemirror/state": "npm:^6.4.0" + "@codemirror/view": "npm:^6.0.0" + "@lezer/common": "npm:^1.1.0" + checksum: 4b398b102d6afcbf0e0018b426287a7458867497811c9155790a3cc679b880765cd756bdb96bf35abc28fecb85c0938e618d39469ce8bc0724d4dea5d88f6ac2 + languageName: node + linkType: hard + +"@codemirror/lang-json@npm:^6.0.1": + version: 6.0.1 + resolution: "@codemirror/lang-json@npm:6.0.1" + dependencies: + "@codemirror/language": "npm:^6.0.0" + "@lezer/json": "npm:^1.0.0" + checksum: 7ce35d345bf9b2f5d96e2502a9693c8b2e74981ccf3a7a20da48e405c2bd6067b39acfd9b31fe3bbb5f9f28ccdde5ff7c52253c6d5b3be84b29df6d5db0b3b9b + languageName: node + linkType: hard + +"@codemirror/language@npm:^6.0.0, @codemirror/language@npm:^6.10.0": + version: 6.10.0 + resolution: "@codemirror/language@npm:6.10.0" + dependencies: + "@codemirror/state": "npm:^6.0.0" + "@codemirror/view": "npm:^6.23.0" + "@lezer/common": "npm:^1.1.0" + "@lezer/highlight": "npm:^1.0.0" + "@lezer/lr": "npm:^1.0.0" + style-mod: "npm:^4.0.0" + checksum: 674f87a5f7cae19a5e0cbdd0e06beade7f3694809cc30b31939aa04790dd43008942e3cd3b537ba5729fd14fed81c8ff62b7dcf51800db815cbf8d19d1d6a763 + languageName: node + linkType: hard + +"@codemirror/lint@npm:^6.4.2": + version: 6.5.0 + resolution: "@codemirror/lint@npm:6.5.0" + dependencies: + "@codemirror/state": "npm:^6.0.0" + "@codemirror/view": "npm:^6.0.0" + crelt: "npm:^1.0.5" + checksum: 6e369db9a1e36dbc6e7fcf34ff3f304e9c5cf2acb91f31f317430dc5c6574a7035e75b0f4e67383825ef1a31e3f76fbc202fe022f279f569a67cacf3fa06dda0 + languageName: node + linkType: hard + +"@codemirror/search@npm:^6.5.5": + version: 6.5.5 + resolution: "@codemirror/search@npm:6.5.5" + dependencies: + "@codemirror/state": "npm:^6.0.0" + "@codemirror/view": "npm:^6.0.0" + crelt: "npm:^1.0.5" + checksum: 61707efa563edaea1d83f0680db63a953f3f1c125e50bd912d84d07129aa5ba1f3a775f62339f7931c01f5afd69db777c0571215bd0aaef51964c37ee932f6df + languageName: node + linkType: hard + +"@codemirror/state@npm:^6.0.0, @codemirror/state@npm:^6.4.0": + version: 6.4.0 + resolution: "@codemirror/state@npm:6.4.0" + checksum: d9129c456d1589ca376594620bad10c51d3dcdb57950f34637cea0e2ea073a695d426dc1cfc9b909b07365c236a6312da1eaf740c384c853009742493b8c9935 + languageName: node + linkType: hard + +"@codemirror/view@npm:^6.0.0, @codemirror/view@npm:^6.17.0, @codemirror/view@npm:^6.23.0, @codemirror/view@npm:^6.23.1": + version: 6.23.1 + resolution: "@codemirror/view@npm:6.23.1" + dependencies: + "@codemirror/state": "npm:^6.4.0" + style-mod: "npm:^4.1.0" + w3c-keyname: "npm:^2.2.4" + checksum: 42e6b73bcad6bf5d2e9578c54d166c63c4b1c7c7c7806b6f6b4bead8683dc7fcca52201a02a1f9b8ccf120a4ad87e7dcd68f09d9d3e416304dad41a75e20da82 + languageName: node + linkType: hard + "@coinbase/wallet-sdk@npm:^3.6.6": version: 3.7.1 resolution: "@coinbase/wallet-sdk@npm:3.7.1" @@ -4437,6 +4530,31 @@ __metadata: languageName: node linkType: hard +"@fortawesome/fontawesome-common-types@npm:6.5.1": + version: 6.5.1 + resolution: "@fortawesome/fontawesome-common-types@npm:6.5.1" + checksum: 9f0ece2ada614348271bede64e3392937aca3ffad7bea0c94a982f1fc36297a586908248e32afb2ab6148f9edac863d9f67ed025d7b3636c2edb2ae79a9b90d5 + languageName: node + linkType: hard + +"@fortawesome/free-regular-svg-icons@npm:^6.5.1": + version: 6.5.1 + resolution: "@fortawesome/free-regular-svg-icons@npm:6.5.1" + dependencies: + "@fortawesome/fontawesome-common-types": "npm:6.5.1" + checksum: 58a9f4dcf5b08c1fad4f4353cb4c280f3a1919f3c7fe3b9b411d24f82b1e75a1edc12f5521721f8b01c3d080e6f12953353ceb3876d045f214f3a1ff1357a29d + languageName: node + linkType: hard + +"@fortawesome/free-solid-svg-icons@npm:^6.5.1": + version: 6.5.1 + resolution: "@fortawesome/free-solid-svg-icons@npm:6.5.1" + dependencies: + "@fortawesome/fontawesome-common-types": "npm:6.5.1" + checksum: 0d70064bfcde97f62240b58d25cd719c863e09c5b4fce612c26823e006fc09559203eed47ba4e318dcdfbd040cf745cf4186ba0fb79148e2f9db5879c14661bd + languageName: node + linkType: hard + "@graphprotocol/graph-cli@npm:0.64.1": version: 0.64.1 resolution: "@graphprotocol/graph-cli@npm:0.64.1" @@ -5546,7 +5664,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/resolve-uri@npm:^3.0.3": +"@jridgewell/resolve-uri@npm:^3.0.3, @jridgewell/resolve-uri@npm:^3.1.0": version: 3.1.1 resolution: "@jridgewell/resolve-uri@npm:3.1.1" checksum: 64d59df8ae1a4e74315eb1b61e012f1c7bc8aac47a3a1e683f6fe7008eab07bc512a742b7aa7c0405685d1421206de58c9c2e6adbfe23832f8bd69408ffc183e @@ -5577,7 +5695,7 @@ __metadata: languageName: node linkType: hard -"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.15": +"@jridgewell/sourcemap-codec@npm:^1.4.10, @jridgewell/sourcemap-codec@npm:^1.4.14, @jridgewell/sourcemap-codec@npm:^1.4.15": version: 1.4.15 resolution: "@jridgewell/sourcemap-codec@npm:1.4.15" checksum: 89960ac087781b961ad918978975bcdf2051cd1741880469783c42de64239703eab9db5230d776d8e6a09d73bb5e4cb964e07d93ee6e2e7aea5a7d726e865c09 @@ -5604,6 +5722,16 @@ __metadata: languageName: node linkType: hard +"@jridgewell/trace-mapping@npm:^0.3.18": + version: 0.3.22 + resolution: "@jridgewell/trace-mapping@npm:0.3.22" + dependencies: + "@jridgewell/resolve-uri": "npm:^3.1.0" + "@jridgewell/sourcemap-codec": "npm:^1.4.14" + checksum: 48d3e3db00dbecb211613649a1849876ba5544a3f41cf5e6b99ea1130272d6cf18591b5b67389bce20f1c871b4ede5900c3b6446a7aab6d0a3b2fe806a834db7 + languageName: node + linkType: hard + "@juggle/resize-observer@npm:^3.3.1": version: 3.4.0 resolution: "@juggle/resize-observer@npm:3.4.0" @@ -5800,6 +5928,7 @@ __metadata: styled-components: "npm:^5.3.11" supabase: "npm:^1.133.3" typescript: "npm:^5.3.3" + vanilla-jsoneditor: "npm:^0.21.4" viem: "npm:^1.21.4" wagmi: "npm:^1.4.13" languageName: unknown @@ -5851,6 +5980,33 @@ __metadata: languageName: node linkType: hard +"@lezer/common@npm:^1.0.0, @lezer/common@npm:^1.1.0, @lezer/common@npm:^1.2.0": + version: 1.2.1 + resolution: "@lezer/common@npm:1.2.1" + checksum: b362ed2e97664e4b36b3dbff49b52d1bfc5accc0152b577fefd46e585d012ff685d1fd336d75d80066e01c0505b1135d4cf69be5e330b5bfec2e2650c437bcae + languageName: node + linkType: hard + +"@lezer/highlight@npm:^1.0.0, @lezer/highlight@npm:^1.2.0": + version: 1.2.0 + resolution: "@lezer/highlight@npm:1.2.0" + dependencies: + "@lezer/common": "npm:^1.0.0" + checksum: 14a80cbfb0cd1ce716decb4f3a045d42e7146f539cfd483b62ce46c4586a26d2f4fbdc35ace1cad81645304be4d30eafb95a2b057c34dfd471d56c7fbd82df3a + languageName: node + linkType: hard + +"@lezer/json@npm:^1.0.0": + version: 1.0.2 + resolution: "@lezer/json@npm:1.0.2" + dependencies: + "@lezer/common": "npm:^1.2.0" + "@lezer/highlight": "npm:^1.0.0" + "@lezer/lr": "npm:^1.0.0" + checksum: f899d13765d95599c9199fc3404cb57969031dc40ce07de30f4e648979153966581f0bee02e2f8f70463b0a5322206a97c2fe8d5d14f218888c72a6dcedf90ef + languageName: node + linkType: hard + "@lezer/lr@npm:^0.15.4": version: 0.15.8 resolution: "@lezer/lr@npm:0.15.8" @@ -5860,6 +6016,15 @@ __metadata: languageName: node linkType: hard +"@lezer/lr@npm:^1.0.0": + version: 1.4.0 + resolution: "@lezer/lr@npm:1.4.0" + dependencies: + "@lezer/common": "npm:^1.0.0" + checksum: 7391d0d08e54cd9e4f4d46e6ee6aa81fbaf079b22ed9c13d01fc9928e0ffd16d0c2d21b2cedd55675ad6c687277db28349ea8db81c9c69222cd7e7c40edd026e + languageName: node + linkType: hard + "@libp2p/crypto@npm:^1.0.11": version: 1.0.17 resolution: "@libp2p/crypto@npm:1.0.17" @@ -8197,6 +8362,17 @@ __metadata: languageName: node linkType: hard +"@replit/codemirror-indentation-markers@npm:^6.5.0": + version: 6.5.0 + resolution: "@replit/codemirror-indentation-markers@npm:6.5.0" + peerDependencies: + "@codemirror/language": ^6.0.0 + "@codemirror/state": ^6.0.0 + "@codemirror/view": ^6.0.0 + checksum: b49f7aa64ef96f5a114482a44cf484034717dbedce2bc584a9a5df5e45fdcd4985042b29d9f7ac1d059e07f8b6747ac645c3a7ed117fdf4715d085b89ba5ed7a + languageName: node + linkType: hard + "@rescript/std@npm:9.0.0": version: 9.0.0 resolution: "@rescript/std@npm:9.0.0" @@ -8785,6 +8961,13 @@ __metadata: languageName: node linkType: hard +"@sphinxxxx/color-conversion@npm:^2.2.2": + version: 2.2.2 + resolution: "@sphinxxxx/color-conversion@npm:2.2.2" + checksum: 60be08eb37d873a7e8e7987d348d09363237934e2827ded6df6322a113aa30b19de36edb6ce74749aad3039fdf3ccc386cdd6b30b74d2f0ba8c772d5cfa5b3fc + languageName: node + linkType: hard + "@stablelib/aead@npm:^1.0.1": version: 1.0.1 resolution: "@stablelib/aead@npm:1.0.1" @@ -9822,7 +10005,7 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:1.0.5": +"@types/estree@npm:1.0.5, @types/estree@npm:^1.0.1": version: 1.0.5 resolution: "@types/estree@npm:1.0.5" checksum: 7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408 @@ -12332,6 +12515,15 @@ __metadata: languageName: node linkType: hard +"aria-query@npm:^5.3.0": + version: 5.3.0 + resolution: "aria-query@npm:5.3.0" + dependencies: + dequal: "npm:^2.0.3" + checksum: c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e + languageName: node + linkType: hard + "array-back@npm:^3.0.1, array-back@npm:^3.1.0": version: 3.1.0 resolution: "array-back@npm:3.1.0" @@ -12782,6 +12974,15 @@ __metadata: languageName: node linkType: hard +"axobject-query@npm:^4.0.0": + version: 4.0.0 + resolution: "axobject-query@npm:4.0.0" + dependencies: + dequal: "npm:^2.0.3" + checksum: 5b0bc6a1b1e9701811adc7682953617f40859838275a68584579b0668902111fd16aef3ec9de3855de1065d8c3c0a1af62f6edc9db25395c722cc21c91780587 + languageName: node + linkType: hard + "babel-jest@npm:^27.4.2, babel-jest@npm:^27.5.1": version: 27.5.1 resolution: "babel-jest@npm:27.5.1" @@ -14119,7 +14320,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:3.5.3, chokidar@npm:^3.4.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3": +"chokidar@npm:3.5.3, chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.4.0, chokidar@npm:^3.4.2, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3": version: 3.5.3 resolution: "chokidar@npm:3.5.3" dependencies: @@ -14497,6 +14698,30 @@ __metadata: languageName: node linkType: hard +"code-red@npm:^1.0.3": + version: 1.0.4 + resolution: "code-red@npm:1.0.4" + dependencies: + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + "@types/estree": "npm:^1.0.1" + acorn: "npm:^8.10.0" + estree-walker: "npm:^3.0.3" + periscopic: "npm:^3.1.0" + checksum: c3afdcb6d4042156c53b6dc58e63825a2439af9cbe3d2a14a51275be1dc3cf3b3bb438cb6af5e99a8af1e8741978e39febf21d4dd5b8c144bc8bc297c045ed02 + languageName: node + linkType: hard + +"codemirror-wrapped-line-indent@npm:^1.0.3": + version: 1.0.3 + resolution: "codemirror-wrapped-line-indent@npm:1.0.3" + peerDependencies: + "@codemirror/language": ^6.9.0 + "@codemirror/state": ^6.2.1 + "@codemirror/view": ^6.17.1 + checksum: e0fd887980ccb542e133e9937b789d2fa8cd5c6fc500a3d1565fa7b97f9019274a16b4519abb2fb15116642987da3946477ee77d8337f16af0c182767b63309a + languageName: node + linkType: hard + "collect-v8-coverage@npm:^1.0.0": version: 1.0.1 resolution: "collect-v8-coverage@npm:1.0.1" @@ -15256,6 +15481,13 @@ __metadata: languageName: node linkType: hard +"crelt@npm:^1.0.5": + version: 1.0.6 + resolution: "crelt@npm:1.0.6" + checksum: 5ed326ca6bd243b1dba6b943f665b21c2c04be03271824bc48f20dba324b0f8233e221f8c67312526d24af2b1243c023dc05a41bd8bd05d1a479fd2c72fb39c3 + languageName: node + linkType: hard + "cross-fetch@npm:^3.0.4, cross-fetch@npm:^3.1.4, cross-fetch@npm:^3.1.5": version: 3.1.6 resolution: "cross-fetch@npm:3.1.6" @@ -15490,6 +15722,16 @@ __metadata: languageName: node linkType: hard +"css-tree@npm:^2.3.1": + version: 2.3.1 + resolution: "css-tree@npm:2.3.1" + dependencies: + mdn-data: "npm:2.0.30" + source-map-js: "npm:^1.0.1" + checksum: e5e39b82eb4767c664fa5c2cd9968c8c7e6b7fd2c0079b52680a28466d851e2826d5e64699c449d933c0e8ca0554beca43c41a9fcb09fb6a46139d462dbdf0df + languageName: node + linkType: hard + "css-what@npm:^3.2.1": version: 3.4.2 resolution: "css-what@npm:3.4.2" @@ -17790,7 +18032,7 @@ __metadata: languageName: node linkType: hard -"estree-walker@npm:^3.0.3": +"estree-walker@npm:^3.0.0, estree-walker@npm:^3.0.3": version: 3.0.3 resolution: "estree-walker@npm:3.0.3" dependencies: @@ -20800,6 +21042,13 @@ __metadata: languageName: node linkType: hard +"immutable-json-patch@npm:6.0.1": + version: 6.0.1 + resolution: "immutable-json-patch@npm:6.0.1" + checksum: b290571b392f6166ffc2d54324266092d9f0a247b15f5592c9b1f40b5c7c0f5cb665173154b84dd184e7b9c2b5c875905ab871b63e8121c5dab7c9edd2f214f8 + languageName: node + linkType: hard + "immutable@npm:4.2.1": version: 4.2.1 resolution: "immutable@npm:4.2.1" @@ -20807,6 +21056,13 @@ __metadata: languageName: node linkType: hard +"immutable@npm:^4.0.0": + version: 4.3.5 + resolution: "immutable@npm:4.3.5" + checksum: dbc1b8c808b9aa18bfce2e0c7bc23714a47267bc311f082145cc9220b2005e9b9cd2ae78330f164a19266a2b0f78846c60f4f74893853ac16fd68b5ae57092d2 + languageName: node + linkType: hard + "immutable@npm:^4.0.0-rc.12": version: 4.3.0 resolution: "immutable@npm:4.3.0" @@ -21838,6 +22094,15 @@ __metadata: languageName: node linkType: hard +"is-reference@npm:^3.0.0, is-reference@npm:^3.0.1": + version: 3.0.2 + resolution: "is-reference@npm:3.0.2" + dependencies: + "@types/estree": "npm:*" + checksum: ac3bf5626fe9d0afbd7454760d73c47f16b9f471401b9749721ad3b66f0a39644390382acf88ca9d029c95782c1e2ec65662855e3ba91acf52d82231247a7fd3 + languageName: node + linkType: hard + "is-regex@npm:^1.1.4": version: 1.1.4 resolution: "is-regex@npm:1.1.4" @@ -23084,6 +23349,13 @@ __metadata: languageName: node linkType: hard +"jmespath@npm:^0.16.0": + version: 0.16.0 + resolution: "jmespath@npm:0.16.0" + checksum: cc8b4a5cd2a22a79fc2695d66e5a43bc0020ec1ebdbe648440e796764751af2f495771ce877dea45ee6545530f0a1528450c3c3026bc0e9d976a93447af9fb74 + languageName: node + linkType: hard + "jose@npm:^4.11.4": version: 4.14.4 resolution: "jose@npm:4.14.4" @@ -23342,6 +23614,13 @@ __metadata: languageName: node linkType: hard +"json-source-map@npm:^0.6.1": + version: 0.6.1 + resolution: "json-source-map@npm:0.6.1" + checksum: 211a330bc2819b5c4061ce5c091c787595084d9ee31f3bc5369acf04d017612cc1306e84727c31182fd06bbc1aa619d45dcd979062f6796df49d015673dd32b2 + languageName: node + linkType: hard + "json-stable-stringify-without-jsonify@npm:^1.0.1": version: 1.0.1 resolution: "json-stable-stringify-without-jsonify@npm:1.0.1" @@ -23460,6 +23739,15 @@ __metadata: languageName: node linkType: hard +"jsonrepair@npm:^3.5.1": + version: 3.5.1 + resolution: "jsonrepair@npm:3.5.1" + bin: + jsonrepair: bin/cli.js + checksum: c2a521093a1497297ef727d5680ebb3f07da35b4c5013a0b403ee99c23baebcb03f306439b51a6de9e0e44fb6bda26f41bdd1c5d9597cbaeffc9514ee1b38288 + languageName: node + linkType: hard + "jsonschema@npm:^1.2.4": version: 1.4.1 resolution: "jsonschema@npm:1.4.1" @@ -24097,6 +24385,13 @@ __metadata: languageName: node linkType: hard +"locate-character@npm:^3.0.0": + version: 3.0.0 + resolution: "locate-character@npm:3.0.0" + checksum: 2d9e9f45e2dce7464c016ed6d81ebc938bc9c656392f7d6858308ab6fdaa57bcd4b6b479291d49e7db4047e3f321ddadbe78355f349b7974b203f19674e277cc + languageName: node + linkType: hard + "locate-path@npm:^2.0.0": version: 2.0.0 resolution: "locate-path@npm:2.0.0" @@ -24559,6 +24854,15 @@ __metadata: languageName: node linkType: hard +"magic-string@npm:^0.30.4": + version: 0.30.6 + resolution: "magic-string@npm:0.30.6" + dependencies: + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + checksum: 046fbf11614a271e7214d32ca02a2af8d18b268403db9d50580f421ff2222261f1cd8bb02a938206130e3c43deefa6423ee4622c4f161212298570f22b4059bb + languageName: node + linkType: hard + "magic-string@npm:^0.30.5": version: 0.30.5 resolution: "magic-string@npm:0.30.5" @@ -24750,6 +25054,13 @@ __metadata: languageName: node linkType: hard +"mdn-data@npm:2.0.30": + version: 2.0.30 + resolution: "mdn-data@npm:2.0.30" + checksum: e4944322bf3e0461a2daa2aee7e14e208960a036289531e4ef009e53d32bd41528350c070c4a33be867980443fe4c0523518d99318423cffa7c825fe7b1154e2 + languageName: node + linkType: hard + "mdn-data@npm:2.0.4": version: 2.0.4 resolution: "mdn-data@npm:2.0.4" @@ -24773,6 +25084,13 @@ __metadata: languageName: node linkType: hard +"memoize-one@npm:^6.0.0": + version: 6.0.0 + resolution: "memoize-one@npm:6.0.0" + checksum: 28feaf7e9a870efef1187df110b876ce42deaf86c955f4111d72d23b96e44eed573469316e6ad0d2cc7fa3b1526978215617b126158015f957242c7493babca9 + languageName: node + linkType: hard + "memory-level@npm:^1.0.0": version: 1.0.0 resolution: "memory-level@npm:1.0.0" @@ -27244,6 +27562,17 @@ __metadata: languageName: node linkType: hard +"periscopic@npm:^3.1.0": + version: 3.1.0 + resolution: "periscopic@npm:3.1.0" + dependencies: + "@types/estree": "npm:^1.0.0" + estree-walker: "npm:^3.0.0" + is-reference: "npm:^3.0.0" + checksum: 088a85a6de42e2f34414392dec8348218508609389ecb8002b009c357fa26bdfb67c385d9ec0e4e1089e27748ddc0789254073ef78fd576a32b5e641474c56ba + languageName: node + linkType: hard + "picocolors@npm:^0.2.1": version: 0.2.1 resolution: "picocolors@npm:0.2.1" @@ -30451,6 +30780,19 @@ __metadata: languageName: node linkType: hard +"sass@npm:^1.70.0": + version: 1.70.0 + resolution: "sass@npm:1.70.0" + dependencies: + chokidar: "npm:>=3.0.0 <4.0.0" + immutable: "npm:^4.0.0" + source-map-js: "npm:>=0.6.2 <2.0.0" + bin: + sass: sass.js + checksum: f933545d72a932f4a82322dd4ca9f3ea7d3e9d08852d695f76d419939cbdf7f8db3dd894b059ed77bf76811b07319b75b3ef8bb077bf9f52f8fbdfd8cee162f6 + languageName: node + linkType: hard + "sax@npm:~1.2.4": version: 1.2.4 resolution: "sax@npm:1.2.4" @@ -31285,7 +31627,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": +"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.0.2": version: 1.0.2 resolution: "source-map-js@npm:1.0.2" checksum: 38e2d2dd18d2e331522001fc51b54127ef4a5d473f53b1349c5cca2123562400e0986648b52e9407e348eaaed53bce49248b6e2641e6d793ca57cb2c360d6d51 @@ -32083,6 +32425,13 @@ __metadata: languageName: node linkType: hard +"style-mod@npm:^4.0.0, style-mod@npm:^4.1.0": + version: 4.1.0 + resolution: "style-mod@npm:4.1.0" + checksum: e0bf199d699f15d382c31ae7f18b1508f426b35346002dd1b9072db2cd32fdb0ba3ce7a4629e2fa867a79ffe4830ebf11cb9bce6500815f6a0534fac763e94f4 + languageName: node + linkType: hard + "style-to-object@npm:^0.4.0": version: 0.4.1 resolution: "style-to-object@npm:0.4.1" @@ -32248,6 +32597,28 @@ __metadata: languageName: node linkType: hard +"svelte@npm:^4.2.9": + version: 4.2.9 + resolution: "svelte@npm:4.2.9" + dependencies: + "@ampproject/remapping": "npm:^2.2.1" + "@jridgewell/sourcemap-codec": "npm:^1.4.15" + "@jridgewell/trace-mapping": "npm:^0.3.18" + "@types/estree": "npm:^1.0.1" + acorn: "npm:^8.9.0" + aria-query: "npm:^5.3.0" + axobject-query: "npm:^4.0.0" + code-red: "npm:^1.0.3" + css-tree: "npm:^2.3.1" + estree-walker: "npm:^3.0.3" + is-reference: "npm:^3.0.1" + locate-character: "npm:^3.0.0" + magic-string: "npm:^0.30.4" + periscopic: "npm:^3.1.0" + checksum: 24023607ed41b7334aa02f3e56d7def82979f1208246d740d77dca9f8beb6eb183a59959dac100cea9b9e7d014741e1e478400d8353d705d90c3242fca31bb7d + languageName: node + linkType: hard + "svg-parser@npm:^2.0.2, svg-parser@npm:^2.0.4": version: 2.0.4 resolution: "svg-parser@npm:2.0.4" @@ -34042,6 +34413,48 @@ __metadata: languageName: node linkType: hard +"vanilla-jsoneditor@npm:^0.21.4": + version: 0.21.4 + resolution: "vanilla-jsoneditor@npm:0.21.4" + dependencies: + "@codemirror/autocomplete": "npm:^6.12.0" + "@codemirror/commands": "npm:^6.3.3" + "@codemirror/lang-json": "npm:^6.0.1" + "@codemirror/language": "npm:^6.10.0" + "@codemirror/lint": "npm:^6.4.2" + "@codemirror/search": "npm:^6.5.5" + "@codemirror/state": "npm:^6.4.0" + "@codemirror/view": "npm:^6.23.1" + "@fortawesome/free-regular-svg-icons": "npm:^6.5.1" + "@fortawesome/free-solid-svg-icons": "npm:^6.5.1" + "@lezer/highlight": "npm:^1.2.0" + "@replit/codemirror-indentation-markers": "npm:^6.5.0" + ajv: "npm:^8.12.0" + codemirror-wrapped-line-indent: "npm:^1.0.3" + diff-sequences: "npm:^29.6.3" + immutable-json-patch: "npm:6.0.1" + jmespath: "npm:^0.16.0" + json-source-map: "npm:^0.6.1" + jsonrepair: "npm:^3.5.1" + lodash-es: "npm:^4.17.21" + memoize-one: "npm:^6.0.0" + natural-compare-lite: "npm:^1.4.0" + sass: "npm:^1.70.0" + svelte: "npm:^4.2.9" + vanilla-picker: "npm:^2.12.2" + checksum: d42e5462f2270edd580fbb35ca051e97d981002d1250efcd677be34e91fe6cd355e1698e4580b7844b061cc082ecbe68f7de4022e73ab95fe43ab6d593f3ce2c + languageName: node + linkType: hard + +"vanilla-picker@npm:^2.12.2": + version: 2.12.2 + resolution: "vanilla-picker@npm:2.12.2" + dependencies: + "@sphinxxxx/color-conversion": "npm:^2.2.2" + checksum: 29046fdbdf579c72e405971413a6ddb8d8c3fe752c33341508e6c0cc6d658f3d446d35c6b91d0ccb8375b692d253a7ea434185b9d65f2a5787f832c9b489fd89 + languageName: node + linkType: hard + "varint@npm:^6.0.0": version: 6.0.0 resolution: "varint@npm:6.0.0" @@ -34316,6 +34729,13 @@ __metadata: languageName: node linkType: hard +"w3c-keyname@npm:^2.2.4": + version: 2.2.8 + resolution: "w3c-keyname@npm:2.2.8" + checksum: 95bafa4c04fa2f685a86ca1000069c1ec43ace1f8776c10f226a73296caeddd83f893db885c2c220ebeb6c52d424e3b54d7c0c1e963bbf204038ff1a944fbb07 + languageName: node + linkType: hard + "w3c-xmlserializer@npm:^2.0.0": version: 2.0.0 resolution: "w3c-xmlserializer@npm:2.0.0" From 2e2f6bfc592a5d576ee0940d529c40a03dd949f8 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Sun, 4 Feb 2024 22:52:54 +0530 Subject: [PATCH 02/10] feat(web): fetch-dispute-template-from-id --- .../hooks/queries/useDisputeTemplateFromId.ts | 27 +++++ .../DisputeTemplateView/FetchFromIdInput.tsx | 56 +++++++++ .../index.tsx} | 109 ++++++++++-------- 3 files changed, 144 insertions(+), 48 deletions(-) create mode 100644 web/src/hooks/queries/useDisputeTemplateFromId.ts create mode 100644 web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx rename web/src/pages/{DisputeTemplateView.tsx => DisputeTemplateView/index.tsx} (79%) diff --git a/web/src/hooks/queries/useDisputeTemplateFromId.ts b/web/src/hooks/queries/useDisputeTemplateFromId.ts new file mode 100644 index 000000000..8cf47c545 --- /dev/null +++ b/web/src/hooks/queries/useDisputeTemplateFromId.ts @@ -0,0 +1,27 @@ +import { graphql } from "src/graphql"; +import { useQuery } from "@tanstack/react-query"; +import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper"; +import { isUndefined } from "utils/index"; +import { DisputeTemplateQuery } from "src/graphql/graphql"; + +const disputeTemplateQuery = graphql(` + query DisputeTemplate($id: ID!) { + disputeTemplate(id: $id) { + id + templateTag + templateData + templateDataMappings + } + } +`); + +export const useDisputeTemplateFromId = (templateId?: string) => { + const isEnabled = !isUndefined(templateId); + + return useQuery({ + queryKey: [`disputeTemplate${templateId}`], + enabled: isEnabled, + staleTime: Infinity, + queryFn: async () => await graphqlQueryFnHelper(disputeTemplateQuery, { id: templateId?.toString() }, true), + }); +}; diff --git a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx new file mode 100644 index 000000000..b325a9be9 --- /dev/null +++ b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx @@ -0,0 +1,56 @@ +import { Field } from "@kleros/ui-components-library"; +import React, { useEffect, useState } from "react"; +import styled from "styled-components"; +import { useDisputeTemplateFromId } from "hooks/queries/useDisputeTemplateFromId"; +import { isUndefined } from "utils/index"; +import { useDebounce } from "react-use"; + +const Container = styled.div` + display: flex; + flex-direction: column; + margin-top: 24px; + margin-left: 24px; +`; + +const StyledInput = styled(Field)``; +const StyledHeader = styled.h2` + margin-top: 24px; +`; + +interface IFetchFromID { + setDisputeTemplateInput: (templateData: string) => void; + setDataMappingsInput: (dataMappings: string) => void; +} + +const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, setDataMappingsInput }) => { + const [templateId, setTemplateId] = useState(""); + const [debouncedTemplateId, setDebouncedTemplateId] = useState(""); + useDebounce( + () => { + setDebouncedTemplateId(templateId); + }, + 1000, + [templateId] + ); + const { data: templateFromId, isLoading } = useDisputeTemplateFromId(debouncedTemplateId); + + useEffect(() => { + const templateData = templateFromId?.disputeTemplate?.templateData; + const templateDataMappings = templateFromId?.disputeTemplate?.templateDataMappings; + if (!isUndefined(templateData)) setDisputeTemplateInput(templateData); + if (!isUndefined(templateDataMappings)) setDataMappingsInput(templateDataMappings); + }, [templateFromId]); + + return ( + + Fetch dispute template from template ID + setTemplateId(e.target.value)} + /> + + ); +}; + +export default FetchFromIDInput; diff --git a/web/src/pages/DisputeTemplateView.tsx b/web/src/pages/DisputeTemplateView/index.tsx similarity index 79% rename from web/src/pages/DisputeTemplateView.tsx rename to web/src/pages/DisputeTemplateView/index.tsx index 992426fd8..f62a14dd3 100644 --- a/web/src/pages/DisputeTemplateView.tsx +++ b/web/src/pages/DisputeTemplateView/index.tsx @@ -11,10 +11,11 @@ import { INVALID_DISPUTE_DATA_ERROR } from "consts/index"; import { useKlerosCoreAddress } from "hooks/useContractAddress"; import { getIpfsUrl } from "utils/getIpfsUrl"; import ReactMarkdown from "components/ReactMarkdown"; - -import SvelteJSONEditor from "components/JSONEditor"; +import JSONEditor from "components/JSONEditor"; import { Mode } from "vanilla-jsoneditor"; import { landscapeStyle } from "styles/landscapeStyle"; +import FetchFromIDInput from "./FetchFromIdInput"; + const Container = styled.div` height: auto; display: flex; @@ -85,7 +86,15 @@ const LongTextSections = styled.div` ` )} `; - +const UpperContainer = styled.div` + display: grid; + grid-template-columns: 1fr; + ${landscapeStyle( + () => css` + grid-template-columns: 1fr 1fr; + ` + )} +`; const StyledForm = styled.form` display: flex; flex-direction: column; @@ -105,7 +114,7 @@ const StyledP = styled.p` `; const StyledHeader = styled.h2` - margin-top 24px; + margin-top: 24px; `; const LongText = styled.div` @@ -205,52 +214,56 @@ const DisputeTemplateView = () => { ]); return ( <> - - Dispute Request event parameters - - {"{{ arbitrator }}"} - setArbitrator(e.target.value)} placeholder="0x..." /> - - - {"{{ arbitrable }}"} - setArbitrable(e.target.value)} placeholder="0x..." /> - - - {"{{ arbitrableDisputeID }}"} - setArbitrableDisputeID(e.target.value)} - placeholder="0" - /> - - - {"{{ externalDisputeID }}"} - setExternalDisputeID(e.target.value)} - placeholder="0" - /> - - - {"{{ templateID }}"} - setTemplateID(e.target.value)} placeholder="0" /> - - - {"{{ templateUri }}"} - setTemplateUri(e.target.value)} - placeholder="ipfs://... (optional)" - /> - - + + + Dispute Request event parameters + + {"{{ arbitrator }}"} + setArbitrator(e.target.value)} placeholder="0x..." /> + + + {"{{ arbitrable }}"} + setArbitrable(e.target.value)} placeholder="0x..." /> + + + {"{{ arbitrableDisputeID }}"} + setArbitrableDisputeID(e.target.value)} + placeholder="0" + /> + + + {"{{ externalDisputeID }}"} + setExternalDisputeID(e.target.value)} + placeholder="0" + /> + + + {"{{ templateID }}"} + setTemplateID(e.target.value)} placeholder="0" /> + + + {"{{ templateUri }}"} + setTemplateUri(e.target.value)} + placeholder="ipfs://... (optional)" + /> + + + + + Template - { @@ -260,7 +273,7 @@ const DisputeTemplateView = () => { Data Mapping - { From 5a52795982c5a1404081f1c1f792e775f9120ec4 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 17:24:56 +0530 Subject: [PATCH 03/10] feat(web): fetch-dispute-request-event-params-from-txn-hash --- .../FetchDisputeRequestInput.tsx | 82 +++++++++++++ web/src/pages/DisputeTemplateView/index.tsx | 112 +++++++++--------- .../utils/getDisputeRequestParamsFromTxn.ts | 28 +++++ 3 files changed, 168 insertions(+), 54 deletions(-) create mode 100644 web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx create mode 100644 web/src/utils/getDisputeRequestParamsFromTxn.ts diff --git a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx new file mode 100644 index 000000000..1fc46f557 --- /dev/null +++ b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx @@ -0,0 +1,82 @@ +import { Field } from "@kleros/ui-components-library"; +import React, { useEffect, useState } from "react"; +import { useDebounce } from "react-use"; +import styled from "styled-components"; +import { DEFAULT_CHAIN } from "consts/chains"; +import { getDisputeRequestParamsFromTxn } from "utils/getDisputeRequestParamsFromTxn"; +import { isUndefined } from "utils/index"; +import { GetEventArgs } from "viem/_types/types/contract"; +import { iArbitrableV2ABI } from "hooks/contracts/generated"; + +const Container = styled.div` + display: flex; + flex-direction: column; + margin-top: 24px; + margin-left: 24px; +`; +const InputContainer = styled.div` + display: flex; + flex-wrap: wrap; + gap: 8px; +`; +const StyledChainInput = styled(Field)` + width: 120px; +`; +const StyledHeader = styled.h2` + margin-top: 24px; +`; + +export type DisputeRequest = GetEventArgs & { + _arbitrable: `0x${string}`; +}; + +interface IFetchDisputeRequestInput { + setParams: (params: DisputeRequest) => void; +} + +const FetchDisputeRequestInput: React.FC = ({ setParams }) => { + const [chainId, setChainId] = useState(DEFAULT_CHAIN); + const [txnHash, setTxnHash] = useState(""); + const [debouncedTxnHash, setDebouncedTxnHash] = useState(""); + const [loading, setLoading] = useState(false); + + useDebounce( + () => { + setDebouncedTxnHash(txnHash); + }, + 1000, + [txnHash] + ); + + useEffect(() => { + const fetchData = async () => { + setLoading(true); + const params = await getDisputeRequestParamsFromTxn(debouncedTxnHash as `0x${string}`, chainId); + setLoading(false); + if (!isUndefined(params)) setParams(params); + }; + if (debouncedTxnHash && chainId) fetchData(); + }, [debouncedTxnHash]); + + return ( + + Fetch Dispute Request params from transaction + + setTxnHash(e.target.value)} + message={loading ? "fetching ..." : ""} + /> + setChainId(Number(e.target.value))} + /> + + + ); +}; + +export default FetchDisputeRequestInput; diff --git a/web/src/pages/DisputeTemplateView/index.tsx b/web/src/pages/DisputeTemplateView/index.tsx index f62a14dd3..163c7d93d 100644 --- a/web/src/pages/DisputeTemplateView/index.tsx +++ b/web/src/pages/DisputeTemplateView/index.tsx @@ -15,6 +15,7 @@ import JSONEditor from "components/JSONEditor"; import { Mode } from "vanilla-jsoneditor"; import { landscapeStyle } from "styles/landscapeStyle"; import FetchFromIDInput from "./FetchFromIdInput"; +import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput"; const Container = styled.div` height: auto; @@ -128,27 +129,23 @@ const DisputeTemplateView = () => { const [disputeDetails, setDisputeDetails] = useState(undefined); const [disputeTemplateInput, setDisputeTemplateInput] = useState(""); const [dataMappingsInput, setDataMappingsInput] = useState(""); - const [arbitrator, setArbitrator] = useState(klerosCoreAddress as string); - const [arbitrable, setArbitrable] = useState("0x10f7A6f42Af606553883415bc8862643A6e63fdA"); // Escrow devnet - const [arbitrableDisputeID, setArbitrableDisputeID] = useState("0"); - const [externalDisputeID, setExternalDisputeID] = useState("0"); - const [templateID, setTemplateID] = useState("0"); - const [templateUri, setTemplateUri] = useState(""); - const [debouncedArbitrator, setDebouncedArbitrator] = useState(arbitrator); - const [debouncedArbitrable, setDebouncedArbitrable] = useState(arbitrable); - const [debouncedArbitrableDisputeID, setDebouncedArbitrableDisputeID] = useState(arbitrableDisputeID); - const [debouncedExternalDisputeID, setDebouncedExternalDisputeID] = useState(externalDisputeID); - const [debouncedTemplateID, setDebouncedTemplateID] = useState(templateID); - const [debouncedTemplateUri, setDebouncedTemplateUri] = useState(templateUri); + const [params, setParams] = useState({ + _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA", + _arbitrator: klerosCoreAddress as `0x${string}`, + }); + const [debouncedParams, setDebouncedParams] = useState(params); const [loading, setLoading] = useState(false); - useDebounce(() => setDebouncedArbitrator(arbitrator), 350, [arbitrator]); - useDebounce(() => setDebouncedArbitrable(arbitrable), 350, [arbitrable]); - useDebounce(() => setDebouncedArbitrableDisputeID(arbitrableDisputeID), 350, [arbitrableDisputeID]); - useDebounce(() => setDebouncedExternalDisputeID(externalDisputeID), 350, [externalDisputeID]); - useDebounce(() => setDebouncedTemplateID(templateID), 350, [templateID]); - useDebounce(() => setDebouncedTemplateUri(templateUri), 350, [templateUri]); + useDebounce(() => setDebouncedParams(params), 350, [params]); + + const handleFormUpdate = (event: React.ChangeEvent) => { + const value = ["_arbitrator", "_arbitrable", "_templateUri"].includes(event.target.name) + ? event.target.value + : BigInt(event.target.value); + + setParams({ ...params, [event.target.name]: value }); + }; useEffect(() => { let isFetchDataScheduled = false; @@ -161,12 +158,12 @@ const DisputeTemplateView = () => { setTimeout(() => { const initialContext = { - arbitrator: debouncedArbitrator, - arbitrable: debouncedArbitrable, - arbitrableDisputeID: debouncedArbitrableDisputeID, - externalDisputeID: debouncedExternalDisputeID, - templateID: debouncedTemplateID, - templateUri: debouncedTemplateUri, + arbitrator: debouncedParams._arbitrator, + arbitrable: debouncedParams._arbitrable, + arbitrableDisputeID: debouncedParams._arbitrableDisputeID, + externalDisputeID: debouncedParams._externalDisputeID, + templateID: debouncedParams._templateId, + templateUri: debouncedParams._templateUri, }; const fetchData = async () => { @@ -190,28 +187,11 @@ const DisputeTemplateView = () => { } }; - if ( - disputeTemplateInput || - dataMappingsInput || - debouncedArbitrator || - debouncedArbitrable || - debouncedArbitrableDisputeID || - debouncedExternalDisputeID || - debouncedTemplateID || - debouncedTemplateUri - ) { + if (disputeTemplateInput || dataMappingsInput || debouncedParams) { scheduleFetchData(); } - }, [ - disputeTemplateInput, - dataMappingsInput, - debouncedArbitrator, - debouncedArbitrable, - debouncedArbitrableDisputeID, - debouncedExternalDisputeID, - debouncedTemplateID, - debouncedTemplateUri, - ]); + }, [disputeTemplateInput, dataMappingsInput, debouncedParams]); + return ( <> @@ -219,18 +199,31 @@ const DisputeTemplateView = () => { Dispute Request event parameters {"{{ arbitrator }}"} - setArbitrator(e.target.value)} placeholder="0x..." /> + {"{{ arbitrable }}"} - setArbitrable(e.target.value)} placeholder="0x..." /> + {"{{ arbitrableDisputeID }}"} setArbitrableDisputeID(e.target.value)} + name="_arbitrableDisputeID" + value={params._arbitrableDisputeID?.toString()} + onChange={handleFormUpdate} placeholder="0" /> @@ -238,26 +231,37 @@ const DisputeTemplateView = () => { {"{{ externalDisputeID }}"} setExternalDisputeID(e.target.value)} + name="_externalDisputeID" + value={params._externalDisputeID?.toString()} + onChange={handleFormUpdate} placeholder="0" /> {"{{ templateID }}"} - setTemplateID(e.target.value)} placeholder="0" /> + {"{{ templateUri }}"} setTemplateUri(e.target.value)} + name="_templateUri" + value={params._templateUri} + onChange={handleFormUpdate} placeholder="ipfs://... (optional)" /> - +
+ + +
diff --git a/web/src/utils/getDisputeRequestParamsFromTxn.ts b/web/src/utils/getDisputeRequestParamsFromTxn.ts new file mode 100644 index 000000000..46b3bef2d --- /dev/null +++ b/web/src/utils/getDisputeRequestParamsFromTxn.ts @@ -0,0 +1,28 @@ +import { GetTransactionReceiptReturnType, decodeEventLog } from "viem"; +import { getPublicClient } from "wagmi/dist/actions"; +import { iArbitrableV2ABI } from "hooks/contracts/generated"; + +export const getDisputeRequestParamsFromTxn = async (hash: `0x${string}`, chainId: number) => { + try { + const publicClient = getPublicClient({ chainId }); + + const txn: GetTransactionReceiptReturnType = await publicClient.getTransactionReceipt({ + hash, + }); + + const topics = decodeEventLog({ + abi: iArbitrableV2ABI, + eventName: "DisputeRequest", + topics: txn.logs[2].topics, + data: txn.logs[2].data, + }); + + return { + ...topics?.args, + _arbitrable: txn.logs[2].address, + }; + } catch (e) { + console.log("getDisputeRequestParamsFromTxn :", e); + return undefined; + } +}; From 36d30d758c9fb7ec5c9263bcbbd858332fb2cecc Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 18:51:36 +0530 Subject: [PATCH 04/10] feat(web): automatically-format-json --- .../pages/DisputeTemplateView/FetchFromIdInput.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx index b325a9be9..8ba0f2f13 100644 --- a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx +++ b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx @@ -37,8 +37,8 @@ const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, set useEffect(() => { const templateData = templateFromId?.disputeTemplate?.templateData; const templateDataMappings = templateFromId?.disputeTemplate?.templateDataMappings; - if (!isUndefined(templateData)) setDisputeTemplateInput(templateData); - if (!isUndefined(templateDataMappings)) setDataMappingsInput(templateDataMappings); + if (!isUndefined(templateData)) setDisputeTemplateInput(tryPrettify(templateData)); + if (!isUndefined(templateDataMappings)) setDataMappingsInput(tryPrettify(templateDataMappings)); }, [templateFromId]); return ( @@ -52,5 +52,12 @@ const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, set ); }; - +// will try to format else will be repaired in editor +const tryPrettify = (text: string) => { + try { + return JSON.stringify(JSON.parse(text), null, 2); + } catch { + return text; + } +}; export default FetchFromIDInput; From 62197ad2fd710a37c9cb5c448854d3d880dfbd24 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 19:29:05 +0530 Subject: [PATCH 05/10] fix(web): fix-dispute-request-fetch-from-txn-hash --- web/src/utils/getDisputeRequestParamsFromTxn.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/web/src/utils/getDisputeRequestParamsFromTxn.ts b/web/src/utils/getDisputeRequestParamsFromTxn.ts index 46b3bef2d..e5dd13195 100644 --- a/web/src/utils/getDisputeRequestParamsFromTxn.ts +++ b/web/src/utils/getDisputeRequestParamsFromTxn.ts @@ -1,6 +1,7 @@ -import { GetTransactionReceiptReturnType, decodeEventLog } from "viem"; +import { GetTransactionReceiptReturnType, decodeEventLog, getEventSelector, parseAbi } from "viem"; import { getPublicClient } from "wagmi/dist/actions"; import { iArbitrableV2ABI } from "hooks/contracts/generated"; +import { isUndefined } from "."; export const getDisputeRequestParamsFromTxn = async (hash: `0x${string}`, chainId: number) => { try { @@ -10,16 +11,20 @@ export const getDisputeRequestParamsFromTxn = async (hash: `0x${string}`, chainI hash, }); + const selector = getEventSelector("DisputeRequest(address,uint256,uint256,uint256,string)"); + const disputeRequestEvent = txn.logs.find((log) => log.topics[0] === selector); + if (isUndefined(disputeRequestEvent)) return undefined; + const topics = decodeEventLog({ abi: iArbitrableV2ABI, eventName: "DisputeRequest", - topics: txn.logs[2].topics, - data: txn.logs[2].data, + topics: disputeRequestEvent?.topics, + data: disputeRequestEvent?.data, }); return { ...topics?.args, - _arbitrable: txn.logs[2].address, + _arbitrable: disputeRequestEvent.address, }; } catch (e) { console.log("getDisputeRequestParamsFromTxn :", e); From 6a1ca6d438d845ed342c42fc48f0a45dd9a7a616 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 20:20:18 +0530 Subject: [PATCH 06/10] fix(web): fetch-template-data-on-event-param-fetch --- web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx | 9 ++++++++- web/src/pages/DisputeTemplateView/index.tsx | 5 ++++- web/src/utils/getDisputeRequestParamsFromTxn.ts | 2 +- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx index 8ba0f2f13..ddaa34938 100644 --- a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx +++ b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx @@ -20,9 +20,14 @@ const StyledHeader = styled.h2` interface IFetchFromID { setDisputeTemplateInput: (templateData: string) => void; setDataMappingsInput: (dataMappings: string) => void; + defaultTemplateID: string; } -const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, setDataMappingsInput }) => { +const FetchFromIDInput: React.FC = ({ + setDisputeTemplateInput, + setDataMappingsInput, + defaultTemplateID = "", +}) => { const [templateId, setTemplateId] = useState(""); const [debouncedTemplateId, setDebouncedTemplateId] = useState(""); useDebounce( @@ -32,6 +37,7 @@ const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, set 1000, [templateId] ); + useEffect(() => setTemplateId(defaultTemplateID), [defaultTemplateID]); const { data: templateFromId, isLoading } = useDisputeTemplateFromId(debouncedTemplateId); useEffect(() => { @@ -45,6 +51,7 @@ const FetchFromIDInput: React.FC = ({ setDisputeTemplateInput, set Fetch dispute template from template ID setTemplateId(e.target.value)} diff --git a/web/src/pages/DisputeTemplateView/index.tsx b/web/src/pages/DisputeTemplateView/index.tsx index 163c7d93d..2a442882b 100644 --- a/web/src/pages/DisputeTemplateView/index.tsx +++ b/web/src/pages/DisputeTemplateView/index.tsx @@ -259,7 +259,10 @@ const DisputeTemplateView = () => {
- +
diff --git a/web/src/utils/getDisputeRequestParamsFromTxn.ts b/web/src/utils/getDisputeRequestParamsFromTxn.ts index e5dd13195..58d4d1ab7 100644 --- a/web/src/utils/getDisputeRequestParamsFromTxn.ts +++ b/web/src/utils/getDisputeRequestParamsFromTxn.ts @@ -1,4 +1,4 @@ -import { GetTransactionReceiptReturnType, decodeEventLog, getEventSelector, parseAbi } from "viem"; +import { GetTransactionReceiptReturnType, decodeEventLog, getEventSelector } from "viem"; import { getPublicClient } from "wagmi/dist/actions"; import { iArbitrableV2ABI } from "hooks/contracts/generated"; import { isUndefined } from "."; From e1e8df6096a9e810186c9456735abae2e159a2c6 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 22:45:28 +0530 Subject: [PATCH 07/10] feat(web): add-presets --- .../FetchDisputeRequestInput.tsx | 46 +++++++++++++ web/src/pages/DisputeTemplateView/index.tsx | 68 +++++++++---------- 2 files changed, 79 insertions(+), 35 deletions(-) diff --git a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx index 1fc46f557..074790261 100644 --- a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx +++ b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx @@ -26,6 +26,38 @@ const StyledHeader = styled.h2` margin-top: 24px; `; +const StyledH3 = styled.h3` + margin-top: 28px; +`; + +const PresetsContainer = styled.div` + display: flex; + gap: 16px; + flex-wrap: wrap; +`; + +const StyledA = styled.a` + cursor: pointer; +`; + +const presets = [ + { + title: "Escrow", + txnHash: "0xfa24d589a0c26c71d06f6e0a151460783f70b51c174a08c04768f458c7817cd1", + chainId: 421614, + }, + { + title: "Curated Lists", + txnHash: "0xd9ab4908fc5447d532bc287f49e2f2beb754fc62024b806f05a9abf706be7c06", + chainId: 421614, + }, + { + title: "Trump-Biden", + txnHash: "0x9a3a420174f3c55c2b3eb2e77266777b74028b845e528a90142b5b57aafbdb90", + chainId: 421614, + }, +]; + export type DisputeRequest = GetEventArgs & { _arbitrable: `0x${string}`; }; @@ -75,6 +107,20 @@ const FetchDisputeRequestInput: React.FC = ({ setPara onChange={(e) => setChainId(Number(e.target.value))} /> + Presets + + {presets.map((preset) => ( + { + setTxnHash(preset.txnHash); + setChainId(preset.chainId); + }} + > + {preset.title} + + ))} + ); }; diff --git a/web/src/pages/DisputeTemplateView/index.tsx b/web/src/pages/DisputeTemplateView/index.tsx index 2a442882b..b3699fa43 100644 --- a/web/src/pages/DisputeTemplateView/index.tsx +++ b/web/src/pages/DisputeTemplateView/index.tsx @@ -300,41 +300,39 @@ const DisputeTemplateView = () => { const Overview: React.FC<{ disputeDetails: DisputeDetails | undefined }> = ({ disputeDetails }) => { return ( - <> - -

{disputeDetails?.title ?? INVALID_DISPUTE_DATA_ERROR}

- - {disputeDetails?.question ?? INVALID_DISPUTE_DATA_ERROR} - {disputeDetails?.description ?? INVALID_DISPUTE_DATA_ERROR} - - {disputeDetails?.frontendUrl && ( - - Go to arbitrable - - )} - - {disputeDetails &&

Voting Options

} - {disputeDetails?.answers?.map((answer: Answer, i: number) => ( - - Option {i + 1}: - - - - ))} - - -

Make sure you read and understand the Policies

- - {disputeDetails?.policyURI && ( - - - Dispute Policy - - )} - - - - + +

{disputeDetails?.title ?? INVALID_DISPUTE_DATA_ERROR}

+ + {disputeDetails?.question ?? INVALID_DISPUTE_DATA_ERROR} + {disputeDetails?.description ?? INVALID_DISPUTE_DATA_ERROR} + + {disputeDetails?.frontendUrl && ( + + Go to arbitrable + + )} + + {disputeDetails &&

Voting Options

} + {disputeDetails?.answers?.map((answer: Answer, i: number) => ( + + Option {i + 1}: + + + + ))} + + +

Make sure you read and understand the Policies

+ + {disputeDetails?.policyURI && ( + + + Dispute Policy + + )} + + + ); }; From c760ce8e95b3b73654e761be3d37f0c3086a6de5 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Mon, 5 Feb 2024 22:54:17 +0530 Subject: [PATCH 08/10] fix(web): better-hide-distupe-template-view-link --- web/src/layout/Header/navbar/Explore.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 812862c45..53ab7d69c 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -49,7 +49,7 @@ const StyledLink = styled(Link)<{ isActive: boolean }>` `; const HiddenLink = styled(StyledLink)<{ isActive: boolean }>` - color: ${({ isActive, theme }) => (isActive ? theme.primaryText : theme.primaryPurple)}; + color: ${({ isActive, theme }) => (isActive ? theme.primaryText : "transparent")}; `; const links = [ From d05bbfd0549ca93a1a7b6e9e313c5358e1edbf12 Mon Sep 17 00:00:00 2001 From: jaybuidl Date: Mon, 5 Feb 2024 16:32:08 +0000 Subject: [PATCH 09/10] chore: json editor color --- web/src/components/JSONEditor.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/src/components/JSONEditor.tsx b/web/src/components/JSONEditor.tsx index 6bffb6681..fbf6b9d0d 100644 --- a/web/src/components/JSONEditor.tsx +++ b/web/src/components/JSONEditor.tsx @@ -13,6 +13,9 @@ const Container = styled.div` --jse-background-color: ${({ theme }) => theme.whiteBackground}; --jse-panel-background: ${({ theme }) => theme.hoveredShadow}; --jse-theme-color-highlight: ${({ theme }) => theme.lightPurple}; + --jse-value-color-string: ${({ theme }) => theme.primaryText}; + --jse-value-color-number: ${({ theme }) => theme.primaryBlue}; + --jse-value-color-null: ${({ theme }) => theme.error}; --jse-main-border: 1px solid ${({ theme }) => theme.stroke}; --jse-key-color: ${({ theme }) => theme.tint}; --jse-value-color: ${({ theme }) => theme.success}; From b2eccc65bf5841d72206c8ed5079ad2a84a74ffd Mon Sep 17 00:00:00 2001 From: jaybuidl Date: Mon, 5 Feb 2024 17:40:13 +0000 Subject: [PATCH 10/10] fix: hidden link in portrait style --- web/src/layout/Header/navbar/Explore.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 53ab7d69c..378f85389 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -61,7 +61,7 @@ const links = [ const Explore: React.FC = () => { const location = useLocation(); - const { toggleIsOpen } = useOpenContext(); + const { isOpen, toggleIsOpen } = useOpenContext(); return ( @@ -77,15 +77,17 @@ const Explore: React.FC = () => { ))} - - - Dev - - + {!isOpen && ( + + + Dev + + + )} ); };