diff --git a/web-devtools/scripts/runEnv.sh b/web-devtools/scripts/runEnv.sh index acbc1fe3c..25f8a2031 100755 --- a/web-devtools/scripts/runEnv.sh +++ b/web-devtools/scripts/runEnv.sh @@ -21,7 +21,7 @@ if [[ ! " ${valid_deployments[*]} " =~ ${deployment} ]]; then fi function sourceEnvFile() { #envFile - envFile="$1" + local envFile="$1" if [ -f "$envFile" ]; then echo -e "${GREEN}✔${NC} $(basename "$envFile")" # shellcheck source=SCRIPTDIR/../.env.devnet @@ -32,7 +32,7 @@ function sourceEnvFile() { #envFile } envFile="$SCRIPT_DIR/../.env.${deployment}" -sourceEnvFile "$envFile" sourceEnvFile "$envFile.public" +sourceEnvFile "$envFile" eval "$commands" diff --git a/web/package.json b/web/package.json index 285127b16..f89a6fcf9 100644 --- a/web/package.json +++ b/web/package.json @@ -118,7 +118,6 @@ "react-use": "^17.4.3", "siwe": "^2.3.1", "styled-components": "^5.3.11", - "vanilla-jsoneditor": "^0.21.4", "viem": "^2.1.0", "wagmi": "^2.12.8" } diff --git a/web/scripts/runEnv.sh b/web/scripts/runEnv.sh index acbc1fe3c..25f8a2031 100755 --- a/web/scripts/runEnv.sh +++ b/web/scripts/runEnv.sh @@ -21,7 +21,7 @@ if [[ ! " ${valid_deployments[*]} " =~ ${deployment} ]]; then fi function sourceEnvFile() { #envFile - envFile="$1" + local envFile="$1" if [ -f "$envFile" ]; then echo -e "${GREEN}✔${NC} $(basename "$envFile")" # shellcheck source=SCRIPTDIR/../.env.devnet @@ -32,7 +32,7 @@ function sourceEnvFile() { #envFile } envFile="$SCRIPT_DIR/../.env.${deployment}" -sourceEnvFile "$envFile" sourceEnvFile "$envFile.public" +sourceEnvFile "$envFile" eval "$commands" diff --git a/web/src/app.tsx b/web/src/app.tsx index 650e2823d..a2212f39c 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -13,7 +13,6 @@ const Home = lazy(() => import("./pages/Home")); const Cases = lazy(() => import("./pages/Cases")); const Dashboard = lazy(() => import("./pages/Dashboard")); const Courts = lazy(() => import("./pages/Courts")); -const DisputeTemplateView = lazy(() => import("./pages/DisputeTemplateView")); const DisputeResolver = lazy(() => import("./pages/Resolver")); const GetPnk = lazy(() => import("./pages/GetPnk")); import Web3Provider from "context/Web3Provider"; @@ -65,14 +64,6 @@ const App: React.FC = () => { } /> - }> - - - } - /> 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-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}; - --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/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index 5e345283e..b3f597dc9 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -51,10 +51,6 @@ const StyledLink = styled(Link)<{ isActive: boolean }>` )}; `; -const HiddenLink = styled(StyledLink)<{ isActive: boolean }>` - color: ${({ isActive, theme }) => (isActive ? theme.primaryText : "transparent")}; -`; - const links = [ { to: "/", text: "Home" }, { to: "/cases/display/1/desc/all", text: "Cases" }, @@ -65,7 +61,7 @@ const links = [ const Explore: React.FC = () => { const location = useLocation(); - const { isOpen, toggleIsOpen } = useOpenContext(); + const { toggleIsOpen } = useOpenContext(); return ( @@ -81,17 +77,6 @@ const Explore: React.FC = () => { ))} - {!isOpen && ( - - - Dev - - - )} ); }; diff --git a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx b/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx deleted file mode 100644 index 4022bd726..000000000 --- a/web/src/pages/DisputeTemplateView/FetchDisputeRequestInput.tsx +++ /dev/null @@ -1,131 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; - -import { useDebounce } from "react-use"; -import { GetEventArgs } from "viem/_types/types/contract"; - -import { Field } from "@kleros/ui-components-library"; - -import { DEFAULT_CHAIN } from "consts/chains"; -import { iArbitrableV2ABI } from "hooks/contracts/generated"; -import { getDisputeRequestParamsFromTxn } from "utils/getDisputeRequestParamsFromTxn"; -import { isUndefined } from "utils/index"; - -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; -`; - -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: "0x85e60cb407c9a38e625263cc762ff4283d01f38201825e1d20109d8664cfa7d4", - chainId: 421614, - }, - { - title: "Curated Lists", - txnHash: "0x6e5ad6f7436ef8570b50b0fbec76a11ccedbed85030c670e59d8f6617a499108", - chainId: 421614, - }, - { - title: "Trump-Biden", - txnHash: "0x9a3a420174f3c55c2b3eb2e77266777b74028b845e528a90142b5b57aafbdb90", - chainId: 421614, - }, -]; - -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))} - /> - - Presets - - {presets.map((preset) => ( - { - setTxnHash(preset.txnHash); - setChainId(preset.chainId); - }} - > - {preset.title} - - ))} - - - ); -}; - -export default FetchDisputeRequestInput; diff --git a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx b/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx deleted file mode 100644 index 8fb0aa4f2..000000000 --- a/web/src/pages/DisputeTemplateView/FetchFromIdInput.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styled from "styled-components"; - -import { useDebounce } from "react-use"; - -import { Field } from "@kleros/ui-components-library"; - -import { useDisputeTemplateFromId } from "hooks/queries/useDisputeTemplateFromId"; -import { isUndefined } from "utils/index"; - -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; - defaultTemplateID: string; -} - -const FetchFromIDInput: React.FC = ({ - setDisputeTemplateInput, - setDataMappingsInput, - defaultTemplateID = "", -}) => { - const [templateId, setTemplateId] = useState(""); - const [debouncedTemplateId, setDebouncedTemplateId] = useState(""); - useDebounce( - () => { - setDebouncedTemplateId(templateId); - }, - 1000, - [templateId] - ); - useEffect(() => setTemplateId(defaultTemplateID), [defaultTemplateID]); - const { data: templateFromId, isLoading } = useDisputeTemplateFromId(debouncedTemplateId); - - useEffect(() => { - const templateData = templateFromId?.disputeTemplate?.templateData; - const templateDataMappings = templateFromId?.disputeTemplate?.templateDataMappings; - if (!isUndefined(templateData)) setDisputeTemplateInput(tryPrettify(templateData)); - if (!isUndefined(templateDataMappings)) setDataMappingsInput(tryPrettify(templateDataMappings)); - }, [templateFromId]); - - return ( - - Fetch dispute template from template ID - setTemplateId(e.target.value)} - /> - - ); -}; -// 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; diff --git a/web/src/pages/DisputeTemplateView/index.tsx b/web/src/pages/DisputeTemplateView/index.tsx deleted file mode 100644 index 510cf6fbc..000000000 --- a/web/src/pages/DisputeTemplateView/index.tsx +++ /dev/null @@ -1,348 +0,0 @@ -import React, { useEffect, useState } from "react"; -import styled, { css } from "styled-components"; - -import Skeleton from "react-loading-skeleton"; -import { useDebounce } from "react-use"; -import { Mode } from "vanilla-jsoneditor"; - -import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions"; -import { Answer, DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; -import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; -import { Field } from "@kleros/ui-components-library"; - -import PolicyIcon from "svgs/icons/policy.svg"; - -import { DEFAULT_CHAIN } from "consts/chains"; -import { INVALID_DISPUTE_DATA_ERROR } from "consts/index"; -import { klerosCoreConfig } from "hooks/contracts/generated"; -import { getIpfsUrl } from "utils/getIpfsUrl"; - -import { landscapeStyle } from "styles/landscapeStyle"; - -import JSONEditor from "components/JSONEditor"; -import ReactMarkdown from "components/ReactMarkdown"; - -import FetchDisputeRequestInput, { DisputeRequest } from "./FetchDisputeRequestInput"; -import FetchFromIDInput from "./FetchFromIdInput"; - -const Container = styled.div` - height: auto; - display: flex; - flex-direction: column; - gap: 16px; - - > h1 { - margin: 0; - } - - > hr { - width: 100%; - } -`; - -const QuestionAndDescription = styled.div` - display: flex; - flex-direction: column; - > * { - margin: 0px; - } -`; - -const VotingOptions = styled(QuestionAndDescription)` - display: flex; - flex-direction: column; - > span { - margin: 0px; - display: flex; - gap: 8px; - } -`; - -const ShadeArea = styled.div` - width: 100%; - padding: 16px; - margin-top: 16px; - background-color: ${({ theme }) => theme.mediumBlue}; - > p { - margin-top: 0; - } -`; - -const StyledA = styled.a` - display: flex; - align-items: center; - gap: 4px; - > svg { - width: 16px; - fill: ${({ theme }) => theme.primaryBlue}; - } -`; - -const LinkContainer = styled.div` - display: flex; - justify-content: space-between; -`; - -const LongTextSections = styled.div` - min-height: calc(100vh - 144px); - margin: 24px; - display: flex; - gap: 12px; - flex-direction: column; - ${landscapeStyle( - () => css` - flex-direction: row; - ` - )} -`; -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; - justify-content: center; - margin-top: 24px; - margin-left: 24px; -`; - -const StyledRow = styled.div` - display: flex; - flex-direction: row; - gap: 24px; -`; - -const StyledP = styled.p` - font-family: "Roboto Mono", monospace; -`; - -const StyledHeader = styled.h2` - margin-top: 24px; -`; - -const LongText = styled.div` - display: flex; - flex-direction: column; - width: auto; -`; - -const DisputeTemplateView = () => { - const klerosCoreAddress = klerosCoreConfig.address[DEFAULT_CHAIN]; - const [disputeDetails, setDisputeDetails] = useState(undefined); - const [disputeTemplateInput, setDisputeTemplateInput] = useState(""); - const [dataMappingsInput, setDataMappingsInput] = useState(""); - - const [params, setParams] = useState({ - _arbitrable: "0x10f7A6f42Af606553883415bc8862643A6e63fdA", - _arbitrator: klerosCoreAddress as `0x${string}`, - }); - const [debouncedParams, setDebouncedParams] = useState(params); - const [loading, setLoading] = useState(false); - - 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; - - const scheduleFetchData = () => { - if (!isFetchDataScheduled) { - isFetchDataScheduled = true; - - setLoading(true); - - setTimeout(() => { - const initialContext = { - arbitratorAddress: debouncedParams._arbitrator, - arbitrableAddress: debouncedParams._arbitrable, - arbitrableDisputeID: debouncedParams._arbitrableDisputeID, - externalDisputeID: debouncedParams._externalDisputeID, - templateID: debouncedParams._templateId, - templateUri: debouncedParams._templateUri, - alchemyApiKey: import.meta.env.ALCHEMY_API_KEY, - }; - - const fetchData = async () => { - try { - const data = dataMappingsInput ? await executeActions(JSON.parse(dataMappingsInput), initialContext) : {}; - const finalDisputeDetails = populateTemplate(disputeTemplateInput, data); - - setDisputeDetails(finalDisputeDetails); - } catch (e) { - console.error(e); - setDisputeDetails(undefined); - } finally { - setLoading(false); - } - }; - - fetchData(); - - isFetchDataScheduled = false; - }, 350); - } - }; - - if (disputeTemplateInput || dataMappingsInput || debouncedParams) { - scheduleFetchData(); - } - }, [disputeTemplateInput, dataMappingsInput, debouncedParams]); - - return ( - <> - - - Dispute Request event parameters - - {"{{ arbitrator }}"} - - - - {"{{ arbitrable }}"} - - - - {"{{ arbitrableDisputeID }}"} - - - - {"{{ externalDisputeID }}"} - - - - {"{{ templateID }}"} - - - - {"{{ templateUri }}"} - - - -
- - -
- - - - - Template - { - setDisputeTemplateInput(val.text); - }} - /> - - - Data Mapping - { - setDataMappingsInput(val.text); - }} - /> - - - Dispute Preview -
- {loading ? : } - - - - ); -}; - -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 - - )} - - - - ); -}; - -export default DisputeTemplateView; diff --git a/yarn.lock b/yarn.lock index b6f27624b..ca6feb5e5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8125,7 +8125,6 @@ __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:^2.1.0" vite: "npm:^5.4.2" vite-plugin-node-polyfills: "npm:^0.21.0"