@@ -2,6 +2,8 @@ import React, { useMemo } from "react";
2
2
import styled from "styled-components" ;
3
3
4
4
import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes" ;
5
+ import { useParams } from "react-router-dom" ;
6
+ import { useAccount } from "wagmi" ;
5
7
6
8
import { INVALID_DISPUTE_DATA_ERROR , RPC_ERROR } from "consts/index" ;
7
9
import { Answer as IAnswer } from "context/NewDisputeContext" ;
@@ -19,6 +21,7 @@ import { ExternalLink } from "../ExternalLink";
19
21
20
22
import AliasDisplay from "./Alias" ;
21
23
import RulingAndRewardsIndicators from "../Verdict/RulingAndRewardsIndicators" ;
24
+ import CardLabel from "../DisputeView/CardLabels" ;
22
25
23
26
const StyledH1 = styled . h1 `
24
27
margin: 0;
@@ -75,6 +78,13 @@ const AliasesContainer = styled.div`
75
78
gap: ${ responsiveSize ( 8 , 20 ) } ;
76
79
` ;
77
80
81
+ const RulingAndRewardsAndLabels = styled . div `
82
+ display: flex;
83
+ flex-direction: row;
84
+ flex-wrap: wrap;
85
+ gap: 8px;
86
+ ` ;
87
+
78
88
interface IDisputeContext {
79
89
disputeDetails ?: DisputeDetails ;
80
90
dispute : DisputeDetailsQuery | undefined ;
@@ -88,6 +98,8 @@ export const DisputeContext: React.FC<IDisputeContext> = ({
88
98
isRpcError = false ,
89
99
votingHistory,
90
100
} ) => {
101
+ const { id } = useParams ( ) ;
102
+ const { isDisconnected } = useAccount ( ) ;
91
103
const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR ;
92
104
const rounds = votingHistory ?. dispute ?. rounds ;
93
105
const jurorRewardsDispersed = useMemo ( ( ) => Boolean ( rounds ?. every ( ( round ) => round . jurorRewardsDispersed ) ) , [ rounds ] ) ;
@@ -99,12 +111,17 @@ export const DisputeContext: React.FC<IDisputeContext> = ({
99
111
< StyledH1 dir = "auto" >
100
112
{ isUndefined ( disputeDetails ) ? < StyledSkeleton /> : ( disputeDetails ?. title ?? errMsg ) }
101
113
</ StyledH1 >
102
- { ! isUndefined ( Boolean ( dispute ?. dispute ?. ruled ) ) || jurorRewardsDispersed ? (
103
- < RulingAndRewardsIndicators
104
- ruled = { Boolean ( dispute ?. dispute ?. ruled ) }
105
- jurorRewardsDispersed = { jurorRewardsDispersed }
106
- />
107
- ) : null }
114
+ < RulingAndRewardsAndLabels >
115
+ { ! isUndefined ( Boolean ( dispute ?. dispute ?. ruled ) ) || jurorRewardsDispersed ? (
116
+ < RulingAndRewardsIndicators
117
+ ruled = { Boolean ( dispute ?. dispute ?. ruled ) }
118
+ jurorRewardsDispersed = { jurorRewardsDispersed }
119
+ />
120
+ ) : null }
121
+ { ! isDisconnected ? (
122
+ < CardLabel disputeId = { id } round = { rounds ?. length - 1 } isList = { false } isOverview = { true } />
123
+ ) : null }
124
+ </ RulingAndRewardsAndLabels >
108
125
< Divider />
109
126
</ TitleSection >
110
127
{ disputeDetails ?. question ?. trim ( ) || disputeDetails ?. description ?. trim ( ) ? (
0 commit comments