@@ -3,70 +3,12 @@ import styled from "styled-components";
33import { Link , useParams } from "react-router-dom" ;
44import { formatEther } from "viem" ;
55import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery" ;
6- import { useGetMetaEvidence } from "queries/useGetMetaEvidence " ;
6+ import { useDisputeTemplate } from "queries/useDisputeTemplate " ;
77import { useCourtPolicy } from "queries/useCourtPolicy" ;
88import { useCourtPolicyURI } from "queries/useCourtPolicyURI" ;
99import PolicyIcon from "svgs/icons/policy.svg" ;
1010import DisputeInfo from "components/DisputeCard/DisputeInfo" ;
1111
12- const Overview : React . FC < { arbitrable ?: string ; courtID ?: string } > = ( { arbitrable, courtID } ) => {
13- const { id } = useParams ( ) ;
14- const { data : metaEvidence } = useGetMetaEvidence ( id , arbitrable ) ;
15- const { data : disputeDetails } = useDisputeDetailsQuery ( id ) ;
16- const { data : courtPolicyURI } = useCourtPolicyURI ( courtID ) ;
17- const { data : courtPolicy } = useCourtPolicy ( courtID ) ;
18- const courtName = courtPolicy ?. name ;
19- const court = disputeDetails ?. dispute ?. court ;
20- const rewards = court ? `≥ ${ formatEther ( court . feeForJuror ) } ETH` : undefined ;
21- const category = metaEvidence ? metaEvidence . category : undefined ;
22- return (
23- < >
24- < Container >
25- < h1 > { metaEvidence ?. title } </ h1 >
26- < QuestionAndDescription >
27- < h3 > { metaEvidence ?. question } </ h3 >
28- < p > { metaEvidence ?. description } </ p >
29- </ QuestionAndDescription >
30- < a
31- href = "https://app.proofofhumanity.id/profile/0x00de4b13153673bcae2616b67bf822500d325fc3"
32- target = "_blank"
33- rel = "noreferrer"
34- >
35- View profile on Proof of Humanity
36- </ a >
37- < VotingOptions >
38- { metaEvidence && < h3 > Voting Options</ h3 > }
39- { metaEvidence ?. rulingOptions ?. titles ?. map ( ( answer : string , i : number ) => (
40- < span key = { i } >
41- < small > Option { i + 1 } :</ small >
42- < label > { answer } </ label >
43- </ span >
44- ) ) }
45- </ VotingOptions >
46- < hr />
47- < DisputeInfo courtId = { court ?. id } court = { courtName } { ...{ rewards, category } } />
48- </ Container >
49- < ShadeArea >
50- < p > Make sure you understand the Policies</ p >
51- < LinkContainer >
52- { metaEvidence ?. fileURI && (
53- < StyledA href = { `https://cloudflare-ipfs.com${ metaEvidence . fileURI } ` } target = "_blank" rel = "noreferrer" >
54- < PolicyIcon />
55- Dispute Policy
56- </ StyledA >
57- ) }
58- { courtPolicy && (
59- < StyledA href = { `https://cloudflare-ipfs.com${ courtPolicyURI } ` } target = "_blank" rel = "noreferrer" >
60- < PolicyIcon />
61- Court Policy
62- </ StyledA >
63- ) }
64- </ LinkContainer >
65- </ ShadeArea >
66- </ >
67- ) ;
68- } ;
69-
7012const Container = styled . div `
7113 width: 100%;
7214 height: auto;
@@ -126,4 +68,66 @@ const LinkContainer = styled.div`
12668 justify-content: space-between;
12769` ;
12870
71+ const Overview : React . FC < { arbitrable ?: string ; courtID ?: string } > = ( { arbitrable, courtID } ) => {
72+ const { id } = useParams ( ) ;
73+ const { data : disputeTemplate } = useDisputeTemplate ( id , arbitrable ) ;
74+ const { data : disputeDetails } = useDisputeDetailsQuery ( id ) ;
75+ const { data : courtPolicyURI } = useCourtPolicyURI ( courtID ) ;
76+ const { data : courtPolicy } = useCourtPolicy ( courtID ) ;
77+ const courtName = courtPolicy ?. name ;
78+ const court = disputeDetails ?. dispute ?. court ;
79+ const rewards = court ? `≥ ${ formatEther ( court . feeForJuror ) } ETH` : undefined ;
80+ const category = disputeTemplate ? disputeTemplate . category : undefined ;
81+ return (
82+ < >
83+ < Container >
84+ < h1 >
85+ { disputeTemplate
86+ ? disputeTemplate ?. title
87+ : "The dispute's template is not correct please vote refuse to arbitrate" }
88+ </ h1 >
89+ < QuestionAndDescription >
90+ < h3 > { disputeTemplate ?. question } </ h3 >
91+ < p > { disputeTemplate ?. description } </ p >
92+ </ QuestionAndDescription >
93+ < a
94+ href = "https://app.proofofhumanity.id/profile/0x00de4b13153673bcae2616b67bf822500d325fc3"
95+ target = "_blank"
96+ rel = "noreferrer"
97+ >
98+ View profile on Proof of Humanity
99+ </ a >
100+ < VotingOptions >
101+ { disputeTemplate && < h3 > Voting Options</ h3 > }
102+ { disputeTemplate ?. answers ?. map ( ( answer : { title : string ; description : string } , i : number ) => (
103+ < span key = { i } >
104+ < small > Option { i + 1 } :</ small >
105+ < label > { answer . title } </ label >
106+ </ span >
107+ ) ) }
108+ </ VotingOptions >
109+ < hr />
110+ < DisputeInfo courtId = { court ?. id } court = { courtName } { ...{ rewards, category } } />
111+ </ Container >
112+ < ShadeArea >
113+ < p > Make sure you understand the Policies</ p >
114+ < LinkContainer >
115+ { disputeTemplate ?. policyURI && (
116+ < StyledA href = { `https://cloudflare-ipfs.com${ disputeTemplate . policyURI } ` } target = "_blank" rel = "noreferrer" >
117+ < PolicyIcon />
118+ Dispute Policy
119+ </ StyledA >
120+ ) }
121+ { courtPolicy && (
122+ < StyledA href = { `https://cloudflare-ipfs.com${ courtPolicyURI } ` } target = "_blank" rel = "noreferrer" >
123+ < PolicyIcon />
124+ Court Policy
125+ </ StyledA >
126+ ) }
127+ </ LinkContainer >
128+ </ ShadeArea >
129+ </ >
130+ ) ;
131+ } ;
132+
129133export default Overview ;
0 commit comments