Skip to content

Commit 3e2b100

Browse files
kemurukemuru
committed
feat(web): add parameters field, improve styling, small mapping adjustments
1 parent 4d20ee9 commit 3e2b100

File tree

3 files changed

+152
-26
lines changed

3 files changed

+152
-26
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from "./actionTypes";
1010

1111
export const validateSubgraphMapping = (mapping: ActionMapping) => {
12-
if ((mapping as SubgraphMapping).endpoint !== undefined) {
12+
if ((mapping as SubgraphMapping).endpoint === undefined) {
1313
throw new Error("Invalid mapping for graphql action.");
1414
}
1515
return mapping as SubgraphMapping;

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

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,26 @@
11
// Can this be replaced by Mustache ?
22
export const createResultObject = (sourceData, seek, populate) => {
33
const result = {};
4+
45
seek.forEach((key, idx) => {
5-
let foundValue;
6-
if (typeof sourceData !== "object" || key === "0") {
7-
foundValue = sourceData;
6+
let foundValue = sourceData;
7+
8+
if (key.includes(".")) {
9+
const keyParts = key.split(".");
10+
for (const part of keyParts) {
11+
if (foundValue[part] !== undefined) {
12+
foundValue = foundValue[part];
13+
} else {
14+
foundValue = undefined;
15+
break;
16+
}
17+
}
818
} else {
9-
foundValue = sourceData[key];
19+
if (typeof sourceData !== "object" || key === "0") {
20+
foundValue = sourceData;
21+
} else {
22+
foundValue = sourceData[key];
23+
}
1024
}
1125

1226
console.log(`Seek key: ${key}, Found value:`, foundValue);

‎web/src/pages/DisputeTemplateView.tsx

Lines changed: 133 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useEffect, useState } from "react";
22
import styled from "styled-components";
3-
import { Textarea } from "@kleros/ui-components-library";
3+
import { Field, Textarea } from "@kleros/ui-components-library";
44
import PolicyIcon from "svgs/icons/policy.svg";
55
import ReactMarkdown from "components/ReactMarkdown";
66
import { INVALID_DISPUTE_DATA_ERROR, IPFS_GATEWAY } from "consts/index";
@@ -69,32 +69,69 @@ const LinkContainer = styled.div`
6969
justify-content: space-between;
7070
`;
7171

72-
const Wrapper = styled.div`
72+
const LongTextSections = styled.div`
7373
min-height: calc(100vh - 144px);
7474
margin: 24px;
7575
display: flex;
7676
gap: 12px;
7777
`;
7878

7979
const StyledTextArea = styled(Textarea)`
80-
width: 50%;
80+
width: 30vw;
8181
height: calc(100vh - 300px);
8282
`;
8383

84+
const StyledForm = styled.form`
85+
display: flex;
86+
flex-direction: column;
87+
justify-content: center;
88+
margin-top: 24px;
89+
margin-left: 24px;
90+
`;
91+
92+
const StyledRow = styled.div`
93+
display: flex;
94+
flex-direction: row;
95+
gap: 24px;
96+
`;
97+
98+
const StyledP = styled.p`
99+
font-style: italic;
100+
`;
101+
102+
const StyledHeader = styled.h1`
103+
margin-left: 24px;
104+
margin-top 24px;
105+
`;
106+
107+
const LongText = styled.div`
108+
display: flex;
109+
flex-direction: column;
110+
width: auto;
111+
`;
112+
84113
const DisputeTemplateView: React.FC = () => {
85114
const [disputeDetails, setDisputeDetails] = useState<DisputeDetails | undefined>(undefined);
86115
const [disputeTemplateInput, setDisputeTemplateInput] = useState<string>("");
87116
const [dataMappingsInput, setDataMappingsInput] = useState<string>("");
88117

89-
// TODO: add some input fields for the IArbitrableV2.DisputeRequest event which is available to the SDK in a real case
90-
// - arbitrable (= the address which emitted DisputeRequest)
91-
// - the DisputeRequest event params: arbitrator, arbitrableDisputeID, externalDisputeID, templateId, templateUri
92-
const arbitrable = "0xdaf749DABE7be6C6894950AE69af35c20a00ABd9";
118+
const [arbitrator, setArbitrator] = useState("");
119+
const [arbitrable, setArbitrable] = useState("");
120+
const [arbitrableDisputeID, setArbitrableDisputeID] = useState("");
121+
const [externalDisputeID, setExternalDisputeID] = useState("");
122+
const [templateID, setTemplateID] = useState("");
123+
const [templateUri, setTemplateUri] = useState("");
93124

94125
useEffect(() => {
95126
configureSDK({ apiKey: alchemyApiKey });
127+
96128
const initialContext = {
129+
arbitrator: arbitrator,
97130
arbitrable: arbitrable,
131+
arbitrableDisputeID: parseInt(arbitrableDisputeID),
132+
externalDisputeID: parseInt(externalDisputeID),
133+
templateID: parseInt(templateID),
134+
templateUri: templateUri,
98135
};
99136

100137
if (!disputeTemplateInput || !dataMappingsInput) return;
@@ -113,22 +150,97 @@ const DisputeTemplateView: React.FC = () => {
113150
};
114151

115152
fetchData();
116-
}, [disputeTemplateInput, dataMappingsInput, arbitrable]);
153+
}, [
154+
disputeTemplateInput,
155+
dataMappingsInput,
156+
arbitrable,
157+
arbitrator,
158+
arbitrableDisputeID,
159+
externalDisputeID,
160+
templateID,
161+
templateUri,
162+
]);
117163

118164
return (
119-
<Wrapper>
120-
<StyledTextArea
121-
value={disputeTemplateInput}
122-
onChange={(e) => setDisputeTemplateInput(e.target.value)}
123-
placeholder="Enter dispute template"
124-
/>
125-
<StyledTextArea
126-
value={dataMappingsInput}
127-
onChange={(e) => setDataMappingsInput(e.target.value)}
128-
placeholder="Enter data mappings"
129-
/>
130-
<Overview disputeDetails={disputeDetails} />
131-
</Wrapper>
165+
<>
166+
<StyledHeader>Dispute Preview</StyledHeader>
167+
<StyledForm>
168+
<StyledP>Dispute Request event parameters</StyledP>
169+
<StyledRow>
170+
<p>Arbitrator</p>
171+
<Field
172+
type="text"
173+
value={arbitrator}
174+
onChange={(e) => setArbitrator(e.target.value)}
175+
placeholder="Enter arbitrator address"
176+
/>
177+
</StyledRow>
178+
<StyledRow>
179+
<p>Arbitrable</p>
180+
<Field
181+
type="text"
182+
value={arbitrable}
183+
onChange={(e) => setArbitrable(e.target.value)}
184+
placeholder="Enter arbitrable address"
185+
/>
186+
</StyledRow>
187+
<StyledRow>
188+
<p>ArbitrableDisputeID</p>
189+
<Field
190+
type="text"
191+
value={arbitrableDisputeID}
192+
onChange={(e) => setArbitrableDisputeID(e.target.value)}
193+
placeholder="Enter arbitrableDisputeID"
194+
/>
195+
</StyledRow>
196+
<StyledRow>
197+
<p>ExternalDisputeID</p>
198+
<Field
199+
type="text"
200+
value={externalDisputeID}
201+
onChange={(e) => setExternalDisputeID(e.target.value)}
202+
placeholder="Enter externalDisputeID"
203+
/>
204+
</StyledRow>
205+
<StyledRow>
206+
<p>TemplateID</p>
207+
<Field
208+
type="text"
209+
value={templateID}
210+
onChange={(e) => setTemplateID(e.target.value)}
211+
placeholder="Enter templateID"
212+
/>
213+
</StyledRow>
214+
<StyledRow>
215+
<p>TemplateUri</p>
216+
<Field
217+
type="text"
218+
value={templateUri}
219+
onChange={(e) => setTemplateUri(e.target.value)}
220+
placeholder="Enter templateUri"
221+
/>
222+
</StyledRow>
223+
</StyledForm>
224+
<LongTextSections>
225+
<LongText>
226+
<p>Template</p>
227+
<StyledTextArea
228+
value={disputeTemplateInput}
229+
onChange={(e) => setDisputeTemplateInput(e.target.value)}
230+
placeholder="Enter dispute template"
231+
/>
232+
</LongText>
233+
<LongText>
234+
<p>Data Mapping</p>
235+
<StyledTextArea
236+
value={dataMappingsInput}
237+
onChange={(e) => setDataMappingsInput(e.target.value)}
238+
placeholder="Enter data mappings"
239+
/>
240+
</LongText>
241+
<Overview disputeDetails={disputeDetails} />
242+
</LongTextSections>
243+
</>
132244
);
133245
};
134246

0 commit comments

Comments
 (0)