Skip to content

Commit cc50fd3

Browse files
alcercualcercu
authoredDec 10, 2024··
Merge branch 'dev' into feat/new-stake-flow
·
v2-testnet-4.0.9@kleros/kleros-app@2.0.2
2 parents e3da0f1 + 039d745 commit cc50fd3

File tree

15 files changed

+184
-120
lines changed

15 files changed

+184
-120
lines changed
 

‎web/src/components/DisputePreview/DisputeContext.tsx

+14-4
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const QuestionAndDescription = styled.div`
2626
word-wrap: break-word;
2727
div:first-child p:first-of-type {
2828
font-size: 16px;
29-
font-weight: 600;
29+
font-weight: 400;
3030
margin: 0;
3131
}
3232
`;
@@ -56,6 +56,16 @@ const Answer = styled.div`
5656
}
5757
`;
5858

59+
const StyledSmall = styled.small`
60+
color: ${({ theme }) => theme.secondaryText};
61+
font-weight: 400;
62+
`;
63+
64+
const StyledLabel = styled.label`
65+
color: ${({ theme }) => theme.primaryText};
66+
font-weight: 600;
67+
`;
68+
5969
const AliasesContainer = styled.div`
6070
display: flex;
6171
flex-wrap: wrap;
@@ -88,11 +98,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
8898
<AnswersContainer>
8999
{disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
90100
<Answer key={answer.title}>
91-
<small>Option {i + 1}:</small>
92-
<label>
101+
<StyledSmall>{i + 1 + `.`}</StyledSmall>
102+
<StyledLabel>
93103
{answer.title}
94104
{answer.description.trim() ? ` - ${answer.description}` : null}
95-
</label>
105+
</StyledLabel>
96106
</Answer>
97107
))}
98108
</AnswersContainer>

‎web/src/components/EvidenceCard.tsx

+60-40
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,33 @@ const StyledCard = styled(Card)`
2626
height: auto;
2727
`;
2828

29-
const TextContainer = styled.div`
29+
const TopContent = styled.div`
30+
display: flex;
31+
flex-direction: column;
3032
padding: ${responsiveSize(8, 24)};
33+
gap: ${responsiveSize(4, 8)};
34+
overflow-wrap: break-word;
35+
3136
> * {
3237
overflow-wrap: break-word;
3338
margin: 0;
3439
}
35-
> h3 {
40+
p {
41+
margin: 0;
42+
}
43+
h3 {
3644
display: inline-block;
37-
margin: 0px 4px;
45+
margin: 0;
3846
}
3947
`;
4048

49+
const IndexAndName = styled.div`
50+
display: flex;
51+
flex-direction: row;
52+
align-items: center;
53+
gap: 6px;
54+
`;
55+
4156
const Index = styled.p`
4257
display: inline-block;
4358
`;
@@ -49,6 +64,9 @@ const StyledReactMarkdown = styled(ReactMarkdown)`
4964
code {
5065
color: ${({ theme }) => theme.secondaryText};
5166
}
67+
p {
68+
margin: 0;
69+
}
5270
`;
5371

5472
const BottomShade = styled.div`
@@ -65,25 +83,7 @@ const BottomShade = styled.div`
6583
}
6684
`;
6785

68-
const AccountContainer = styled.div`
69-
display: flex;
70-
flex-direction: row;
71-
gap: 8px;
72-
align-items: center;
73-
74-
canvas {
75-
width: 24px;
76-
height: 24px;
77-
}
78-
79-
> * {
80-
flex-basis: 1;
81-
flex-shrink: 0;
82-
margin: 0;
83-
}
84-
`;
85-
86-
const LeftContent = styled.div`
86+
const BottomLeftContent = styled.div`
8787
display: block;
8888
8989
& > *:not(:last-child) {
@@ -105,21 +105,45 @@ const LeftContent = styled.div`
105105
)}
106106
`;
107107

108+
const AccountContainer = styled.div`
109+
display: flex;
110+
flex-direction: row;
111+
gap: 8px;
112+
align-items: center;
113+
114+
canvas {
115+
width: 24px;
116+
height: 24px;
117+
}
118+
119+
> * {
120+
flex-basis: 1;
121+
flex-shrink: 0;
122+
margin: 0;
123+
}
124+
`;
125+
108126
const HoverStyle = css`
109127
:hover {
110128
text-decoration: underline;
111129
color: ${({ theme }) => theme.primaryBlue};
112130
cursor: pointer;
113131
}
132+
:hover {
133+
label {
134+
text-decoration: underline;
135+
color: ${({ theme }) => theme.primaryBlue};
136+
cursor: pointer;
137+
}
138+
}
114139
`;
115140

116141
const Address = styled.p`
117142
${HoverStyle}
118143
margin: 0;
119144
`;
120145

121-
const Timestamp = styled.label`
122-
color: ${({ theme }) => theme.secondaryText};
146+
const StyledExternalLink = styled(ExternalLink)`
123147
${HoverStyle}
124148
`;
125149

@@ -191,29 +215,25 @@ const EvidenceCard: React.FC<IEvidenceCard> = ({
191215

192216
return (
193217
<StyledCard>
194-
<TextContainer>
195-
<Index>#{index}:</Index>
196-
{name && description ? (
197-
<>
198-
<h3>{name}</h3>
199-
<StyledReactMarkdown>{description}</StyledReactMarkdown>
200-
</>
201-
) : (
202-
<p>{evidence}</p>
203-
)}
204-
</TextContainer>
218+
<TopContent>
219+
<IndexAndName>
220+
<Index>#{index}: </Index>
221+
<h3>{name}</h3>
222+
</IndexAndName>
223+
{name && description ? <StyledReactMarkdown>{description}</StyledReactMarkdown> : <p>{evidence}</p>}
224+
</TopContent>
205225
<BottomShade>
206-
<LeftContent>
226+
<BottomLeftContent>
207227
<AccountContainer>
208228
<Identicon size="24" string={sender} />
209229
<ExternalLink to={addressExplorerLink} rel="noopener noreferrer" target="_blank">
210230
<Address>{shortenAddress(sender)}</Address>
211231
</ExternalLink>
212232
</AccountContainer>
213-
<ExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
214-
<Timestamp>{formatDate(Number(timestamp), true)}</Timestamp>
215-
</ExternalLink>
216-
</LeftContent>
233+
<StyledExternalLink to={transactionExplorerLink} rel="noopener noreferrer" target="_blank">
234+
<label>{formatDate(Number(timestamp), true)}</label>
235+
</StyledExternalLink>
236+
</BottomLeftContent>
217237
{fileURI && fileURI !== "-" ? (
218238
<FileLinkContainer>
219239
<StyledInternalLink to={`attachment/?url=${getIpfsUrl(fileURI)}`}>

‎web/src/components/Verdict/Answer.tsx

+6-15
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,6 @@ const Container = styled.div`
1111
gap: 6px;
1212
`;
1313

14-
const AnswerTitle = styled.h3`
15-
margin: 0;
16-
`;
17-
18-
const AnswerDescription = styled.h4`
19-
margin: 0;
20-
font-size: 15px;
21-
color: ${({ theme }) => theme.primaryText};
22-
padding-bottom: 0.5px;
23-
`;
24-
2514
interface IAnswer {
2615
answer?: Answer;
2716
currentRuling: number;
@@ -32,14 +21,16 @@ const AnswerDisplay: React.FC<IAnswer> = ({ answer, currentRuling }) => {
3221
<>
3322
{answer ? (
3423
<Container>
35-
<AnswerTitle>
24+
<small>
3625
{answer.title}
3726
{answer.description.trim() ? " -" : null}
38-
</AnswerTitle>
39-
<AnswerDescription>{answer.description.trim()}</AnswerDescription>
27+
</small>
28+
<small>{answer.description.trim()}</small>
4029
</Container>
4130
) : (
42-
<Container>{currentRuling !== 0 ? <h3>Answer 0x{currentRuling}</h3> : <h3>Refuse to Arbitrate</h3>}</Container>
31+
<Container>
32+
{currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}
33+
</Container>
4334
)}
4435
</>
4536
);

‎web/src/components/Verdict/DisputeTimeline.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ import { responsiveSize } from "styles/responsiveSize";
2424
const Container = styled.div`
2525
display: flex;
2626
position: relative;
27-
margin-left: 8px;
2827
flex-direction: column;
2928
`;
3029

‎web/src/components/Verdict/FinalDecision.tsx

+36-16
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import ArrowIcon from "svgs/icons/arrow.svg";
99

1010
import { REFETCH_INTERVAL } from "consts/index";
1111
import { Periods } from "consts/periods";
12+
import { DEFAULT_CHAIN } from "consts/chains";
1213
import { useReadKlerosCoreCurrentRuling } from "hooks/contracts/generated";
1314
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
1415
import { useVotingHistory } from "hooks/queries/useVotingHistory";
@@ -41,6 +42,14 @@ const JuryContainer = styled.div`
4142
}
4243
`;
4344

45+
const VerdictContainer = styled.div`
46+
display: flex;
47+
flex-direction: row;
48+
align-items: center;
49+
flex-wrap: wrap;
50+
gap: ${responsiveSize(6, 8)};
51+
`;
52+
4453
const JuryDecisionTag = styled.small`
4554
font-weight: 400;
4655
line-height: 19px;
@@ -51,6 +60,15 @@ const StyledDivider = styled(Divider)`
5160
margin: ${responsiveSize(16, 24)} 0px;
5261
`;
5362

63+
const ReStyledArrowLink = styled(StyledArrowLink)`
64+
font-size: 14px;
65+
66+
> svg {
67+
height: 15px;
68+
width: 15px;
69+
}
70+
`;
71+
5472
interface IFinalDecision {
5573
arbitrable?: `0x${string}`;
5674
}
@@ -68,6 +86,7 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
6886
const { data: currentRulingArray } = useReadKlerosCoreCurrentRuling({
6987
query: { refetchInterval: REFETCH_INTERVAL },
7088
args: [BigInt(id ?? 0)],
89+
chainId: DEFAULT_CHAIN,
7190
});
7291
const currentRuling = Number(currentRulingArray?.[0]);
7392
const answer = populatedDisputeData?.answers?.[currentRuling! - 1];
@@ -81,27 +100,28 @@ const FinalDecision: React.FC<IFinalDecision> = ({ arbitrable }) => {
81100

82101
return (
83102
<Container>
84-
<VerdictBanner ruled={ruled} />
85-
86-
{ruled && (
87-
<JuryContainer>
88-
<JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
89-
<AnswerDisplay {...{ answer, currentRuling }} />
90-
</JuryContainer>
91-
)}
92-
{!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
93-
<JuryContainer>
94-
<JuryDecisionTag>This option is winning:</JuryDecisionTag>
95-
<AnswerDisplay {...{ answer, currentRuling }} />
96-
</JuryContainer>
97-
)}
103+
<VerdictContainer>
104+
<VerdictBanner ruled={ruled} />
105+
{ruled && (
106+
<JuryContainer>
107+
<JuryDecisionTag>The jury decided in favor of:</JuryDecisionTag>
108+
<AnswerDisplay {...{ answer, currentRuling }} />
109+
</JuryContainer>
110+
)}
111+
{!ruled && periodIndex > 1 && localRounds?.at(localRounds.length - 1)?.totalVoted > 0 && (
112+
<JuryContainer>
113+
<JuryDecisionTag>This option is winning:</JuryDecisionTag>
114+
<AnswerDisplay {...{ answer, currentRuling }} />
115+
</JuryContainer>
116+
)}
117+
</VerdictContainer>
98118
<StyledDivider />
99119
{isLoading && !isDisconnected ? (
100120
<Skeleton width={250} height={20} />
101121
) : (
102-
<StyledArrowLink to={`/cases/${id?.toString()}/voting`}>
122+
<ReStyledArrowLink to={`/cases/${id?.toString()}/voting`}>
103123
{buttonText} <ArrowIcon />
104-
</StyledArrowLink>
124+
</ReStyledArrowLink>
105125
)}
106126
</Container>
107127
);

‎web/src/components/Verdict/VerdictBanner.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import HourglassIcon from "svgs/icons/hourglass.svg";
77
const BannerContainer = styled.div`
88
display: flex;
99
gap: 8px;
10-
margin-bottom: 8px;
10+
align-items: center;
1111
svg {
1212
width: 16px;
1313
height: 16px;

‎web/src/layout/Header/navbar/Menu/index.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
44
import DarkModeIcon from "svgs/menu-icons/dark-mode.svg";
55
import HelpIcon from "svgs/menu-icons/help.svg";
66
import LightModeIcon from "svgs/menu-icons/light-mode.svg";
7-
import NotificationsIcon from "svgs/menu-icons/notifications.svg";
7+
// import NotificationsIcon from "svgs/menu-icons/notifications.svg";
88
import SettingsIcon from "svgs/menu-icons/settings.svg";
99

1010
import { useToggleTheme } from "hooks/useToggleThemeContext";
@@ -57,7 +57,7 @@ const Menu: React.FC<ISettings & IHelp & IMenu> = ({ toggleIsHelpOpen, toggleIsS
5757
const isLightTheme = theme === "light";
5858

5959
const buttons = [
60-
{ text: "Notifications", Icon: NotificationsIcon },
60+
// { text: "Notifications", Icon: NotificationsIcon },
6161
{
6262
text: "Settings",
6363
Icon: SettingsIcon,

‎web/src/pages/Cases/CaseDetails/Evidence/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ const ScrollButton = styled(Button)`
4141
background-color: transparent;
4242
padding: 0;
4343
flex-direction: row-reverse;
44-
margin: 0 0 18px;
4544
gap: 8px;
4645
.button-text {
4746
color: ${({ theme }) => theme.primaryBlue};

‎web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const StyledBox = styled(Box)`
1414
display: flex;
1515
gap: 8px;
1616
align-items: center;
17+
margin-bottom: -4px;
1718
> p {
1819
margin: 0;
1920
}

‎web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -17,22 +17,26 @@ import AccordionTitle from "./AccordionTitle";
1717
const Container = styled.div`
1818
display: flex;
1919
flex-direction: column;
20-
margin-top: 8px;
2120
`;
2221

2322
const StyledAccordion = styled(CustomAccordion)`
2423
width: 100%;
25-
> * > button {
26-
justify-content: unset;
24+
25+
[class*="accordion-item"] {
26+
margin: 0;
27+
}
28+
29+
[class*="accordion-button"] {
2730
padding: 11.5px ${responsiveSize(8, 18)} !important;
2831
background-color: ${({ theme }) => theme.whiteBackground} !important;
2932
border: 1px solid ${({ theme }) => theme.stroke} !important;
33+
margin: 4px 0;
3034
> svg {
3135
fill: ${({ theme }) => theme.primaryText} !important;
3236
}
3337
}
34-
//adds padding to body container
35-
> * > div > div {
38+
39+
[class*="Body"] {
3640
padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 16)};
3741
}
3842
`;
@@ -41,13 +45,14 @@ const StyledCard = styled(Card)`
4145
width: 100%;
4246
height: auto;
4347
padding: 11.5px ${responsiveSize(8, 18)};
44-
margin: 8px 0;
48+
border: 1px solid ${({ theme }) => theme.stroke};
49+
margin: 4px 0;
4550
`;
4651

4752
const AccordionContentContainer = styled.div`
4853
display: flex;
4954
flex-direction: column;
50-
gap: 16px;
55+
gap: 12px;
5156
`;
5257

5358
const JustificationText = styled.div`

‎web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx

+41-28
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@ import PendingVotesBox from "./PendingVotesBox";
2525
import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
2626
import VotesAccordion from "./VotesDetails";
2727

28-
const Container = styled.div``;
28+
const Container = styled.div`
29+
display: flex;
30+
flex-direction: column;
31+
gap: ${responsiveSize(16, 24)};
32+
`;
2933

3034
const StyledTabs = styled(Tabs)`
3135
width: 100%;
32-
margin-bottom: 16px;
33-
margin-top: 48px;
3436
`;
3537

3638
const Header = styled.div`
@@ -40,7 +42,6 @@ const Header = styled.div`
4042
align-items: center;
4143
justify-content: space-between;
4244
gap: 16px;
43-
margin-bottom: ${responsiveSize(16, 32)};
4445
`;
4546

4647
const StyledTitle = styled.h1`
@@ -50,6 +51,14 @@ const StyledTitle = styled.h1`
5051
const StyledReactMarkDown = styled(ReactMarkdown)`
5152
max-width: inherit;
5253
word-wrap: break-word;
54+
p {
55+
margin: 0;
56+
}
57+
`;
58+
59+
const TabsContainer = styled.div`
60+
display: flex;
61+
flex-direction: column;
5362
`;
5463

5564
const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => {
@@ -75,6 +84,12 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
7584

7685
return (
7786
<Container>
87+
{Boolean(disputeData?.dispute?.ruled) || jurorRewardsDispersed ? (
88+
<RulingAndRewardsIndicators
89+
ruled={Boolean(disputeData?.dispute?.ruled)}
90+
jurorRewardsDispersed={jurorRewardsDispersed}
91+
/>
92+
) : null}
7893
<Header>
7994
<StyledTitle>Voting History</StyledTitle>
8095
<HowItWorks
@@ -94,30 +109,28 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
94109
)}
95110
</>
96111
)}
97-
<RulingAndRewardsIndicators
98-
ruled={Boolean(disputeData?.dispute?.ruled)}
99-
jurorRewardsDispersed={jurorRewardsDispersed}
100-
/>
101-
<StyledTabs
102-
currentValue={currentTab}
103-
items={rounds.map((_, i) => ({
104-
text: `Round ${i + 1}`,
105-
value: i,
106-
}))}
107-
callback={(i: number) => setCurrentTab(i)}
108-
/>
109-
<PendingVotesBox
110-
current={localRounds.at(currentTab)?.totalVoted}
111-
total={rounds.at(currentTab)?.nbVotes}
112-
court={rounds.at(currentTab)?.court.name ?? ""}
113-
/>
114-
<VotesAccordion
115-
drawnJurors={drawnJurors}
116-
period={disputeData?.dispute?.period}
117-
answers={answers}
118-
isActiveRound={localRounds?.length - 1 === currentTab}
119-
hiddenVotes={Boolean(disputeData?.dispute?.court.hiddenVotes)}
120-
/>
112+
<TabsContainer>
113+
<StyledTabs
114+
currentValue={currentTab}
115+
items={rounds.map((_, i) => ({
116+
text: `Round ${i + 1}`,
117+
value: i,
118+
}))}
119+
callback={(i: number) => setCurrentTab(i)}
120+
/>
121+
<PendingVotesBox
122+
current={localRounds.at(currentTab)?.totalVoted}
123+
total={rounds.at(currentTab)?.nbVotes}
124+
court={rounds.at(currentTab)?.court.name ?? ""}
125+
/>
126+
<VotesAccordion
127+
drawnJurors={drawnJurors}
128+
period={disputeData?.dispute?.period}
129+
answers={answers}
130+
isActiveRound={localRounds?.length - 1 === currentTab}
131+
hiddenVotes={Boolean(disputeData?.dispute?.court.hiddenVotes)}
132+
/>
133+
</TabsContainer>
121134
</>
122135
) : (
123136
<Skeleton height={140} />

‎web/src/pages/Cases/CaseDetails/Voting/index.tsx

+7-3
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ const Container = styled.div`
3131
padding-bottom: ${responsiveSize(8, 16)};
3232
`;
3333

34+
const InfoCardContainer = styled.div`
35+
display: flex;
36+
margin-bottom: ${responsiveSize(16, 24)};
37+
`;
38+
3439
const useFinalDate = (lastPeriodChange: string, currentPeriodIndex?: number, timesPerPeriod?: string[]) =>
3540
useMemo(() => {
3641
if (!isUndefined(currentPeriodIndex) && !isUndefined(timesPerPeriod))
@@ -70,14 +75,13 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
7075
)}
7176

7277
{userWasDrawn || isDisconnected ? null : (
73-
<>
78+
<InfoCardContainer>
7479
{isDrawDataLoading ? (
7580
<Skeleton width={300} height={20} />
7681
) : (
7782
<InfoCard msg="You were not drawn in current round." />
7883
)}
79-
<br />
80-
</>
84+
</InfoCardContainer>
8185
)}
8286

8387
{isPopupOpen && (

‎web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ const Simulator: React.FC<ISimulator> = ({ amountToStake, isStaking }) => {
232232
<StyledDivider />
233233
<QuantityToSimulate {...{ jurorCurrentEffectiveStake, jurorCurrentSpecificStake, isStaking, amountToStake }} />
234234
<ItemsContainer>
235-
{simulatorItems.map((item, index) => (
235+
{simulatorItems.map((item) => (
236236
<SimulatorItem key={item.title}>
237237
<LeftContent>
238238
<IconWrapper>{item.icon}</IconWrapper>

‎web/src/pages/Resolver/Parameters/Jurors.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { DisplaySmall, Field } from "@kleros/ui-components-library";
66
import ETH from "svgs/icons/eth.svg";
77

88
import { REFETCH_INTERVAL } from "consts/index";
9+
import { DEFAULT_CHAIN } from "consts/chains";
910
import { useNewDisputeContext } from "context/NewDisputeContext";
1011
import { useReadKlerosCoreArbitrationCost } from "hooks/contracts/generated";
1112
import { formatETH } from "utils/format";
@@ -58,6 +59,7 @@ const Jurors: React.FC = () => {
5859
refetchInterval: REFETCH_INTERVAL,
5960
},
6061
args: [prepareArbitratorExtradata(disputeData.courtId ?? "", disputeData.numberOfJurors ?? "")],
62+
chainId: DEFAULT_CHAIN,
6163
});
6264

6365
const arbitrationFee = formatETH(data ?? BigInt(0), 5);

‎web/src/utils/beautifyStatNumber.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export function beautifyStatNumber(value: number, invertValue: boolean = false):
1818
}
1919
}
2020

21-
return commify(value.toFixed(0));
21+
return commify(value.toFixed(2));
2222
}
2323

2424
export function unbeautifyStatNumber(value: string): number {

0 commit comments

Comments
 (0)
Please sign in to comment.