1
1
import React , { useMemo } from "react" ;
2
2
import styled , { useTheme } from "styled-components" ;
3
3
4
- import { responsiveSize } from "styles/responsiveSize" ;
5
-
4
+ import Skeleton from "react-loading-skeleton" ;
6
5
import { useParams } from "react-router-dom" ;
7
6
8
7
import { _TimelineItem1 , CustomTimeline } from "@kleros/ui-components-library" ;
9
8
10
9
import CalendarIcon from "svgs/icons/calendar.svg" ;
11
10
import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg" ;
11
+ import NewTabIcon from "svgs/icons/new-tab.svg" ;
12
12
13
13
import { Periods } from "consts/periods" ;
14
14
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData" ;
@@ -19,9 +19,14 @@ import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeD
19
19
import { useVotingHistory } from "queries/useVotingHistory" ;
20
20
21
21
import { ClassicRound } from "src/graphql/graphql" ;
22
+ import { getTxnExplorerLink } from "src/utils" ;
23
+
24
+ import { responsiveSize } from "styles/responsiveSize" ;
22
25
23
26
import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon" ;
24
27
28
+ import { ExternalLink } from "../ExternalLink" ;
29
+
25
30
const Container = styled . div `
26
31
display: flex;
27
32
position: relative;
@@ -50,6 +55,18 @@ const StyledCalendarIcon = styled(CalendarIcon)`
50
55
height: 14px;
51
56
` ;
52
57
58
+ const StyledNewTabIcon = styled ( NewTabIcon ) `
59
+ margin-bottom: 2px;
60
+ path {
61
+ fill: ${ ( { theme } ) => theme . primaryBlue } ;
62
+ }
63
+ :hover {
64
+ path {
65
+ fill: ${ ( { theme } ) => theme . secondaryBlue } ;
66
+ }
67
+ }
68
+ ` ;
69
+
53
70
const formatDate = ( date : string ) => {
54
71
const options : Intl . DateTimeFormatOptions = { year : "numeric" , month : "long" , day : "numeric" } ;
55
72
const startingDate = new Date ( parseInt ( date ) * 1000 ) ;
@@ -67,6 +84,9 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
67
84
const localRounds : ClassicRound [ ] = getLocalRounds ( votingHistory ?. dispute ?. disputeKitDispute ) as ClassicRound [ ] ;
68
85
const rounds = votingHistory ?. dispute ?. rounds ;
69
86
const theme = useTheme ( ) ;
87
+ const txnExplorerLink = useMemo ( ( ) => {
88
+ return getTxnExplorerLink ( votingHistory ?. dispute ?. transactionHash ?? "" ) ;
89
+ } , [ votingHistory ] ) ;
70
90
71
91
return useMemo < TimelineItems | undefined > ( ( ) => {
72
92
const dispute = disputeDetails ?. dispute ;
@@ -119,7 +139,11 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
119
139
[
120
140
{
121
141
title : "Dispute created" ,
122
- party : "" ,
142
+ party : (
143
+ < ExternalLink to = { txnExplorerLink } rel = "noopener noreferrer" target = "_blank" >
144
+ < StyledNewTabIcon />
145
+ </ ExternalLink >
146
+ ) ,
123
147
subtitle : formatDate ( votingHistory ?. dispute ?. createdAt ) ,
124
148
rightSided : true ,
125
149
variant : theme . secondaryPurple ,
@@ -128,7 +152,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string
128
152
) ;
129
153
}
130
154
return ;
131
- } , [ disputeDetails , disputeData , localRounds , theme ] ) ;
155
+ } , [ disputeDetails , disputeData , localRounds , theme , rounds , votingHistory , txnExplorerLink ] ) ;
132
156
} ;
133
157
134
158
interface IDisputeTimeline {
@@ -138,15 +162,30 @@ interface IDisputeTimeline {
138
162
const DisputeTimeline : React . FC < IDisputeTimeline > = ( { arbitrable } ) => {
139
163
const { id } = useParams ( ) ;
140
164
const { data : disputeDetails } = useDisputeDetailsQuery ( id ) ;
165
+ const { data : votingHistory } = useVotingHistory ( id ) ;
141
166
const items = useItems ( disputeDetails , arbitrable ) ;
142
167
168
+ const transactionExplorerLink = useMemo ( ( ) => {
169
+ return getTxnExplorerLink ( disputeDetails ?. dispute ?. rulingTransactionHash ?? "" ) ;
170
+ } , [ disputeDetails ] ) ;
171
+
143
172
return (
144
173
< Container >
145
174
{ items && < StyledTimeline { ...{ items } } /> }
146
- { disputeDetails ?. dispute ?. ruled && items && (
175
+ { disputeDetails ?. dispute ?. ruled && (
147
176
< EnforcementContainer >
148
177
< StyledCalendarIcon />
149
- < small > Enforcement: { items . at ( - 1 ) ?. subtitle } </ small >
178
+ < small >
179
+ Enforcement:{ " " }
180
+ { disputeDetails . dispute . rulingTimestamp ? (
181
+ < ExternalLink to = { transactionExplorerLink } rel = "noopener noreferrer" target = "_blank" >
182
+ { formatDate ( disputeDetails . dispute . rulingTimestamp ) }
183
+ </ ExternalLink >
184
+ ) : (
185
+ < Skeleton height = { 16 } width = { 56 } />
186
+ ) } { " " }
187
+ / { votingHistory ?. dispute ?. rounds . at ( - 1 ) ?. court . name }
188
+ </ small >
150
189
</ EnforcementContainer >
151
190
) }
152
191
</ Container >
0 commit comments