Skip to content

Commit f2867a2

Browse files
kemurukemuru
committed
feat: add subgraph field, ranking icon, fix extra stats bug, filters, new button, fx, etc
1 parent c95ee8a commit f2867a2

File tree

22 files changed

+204
-109
lines changed

22 files changed

+204
-109
lines changed

‎subgraph/core/schema.graphql

+1
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,7 @@ interface Evidence {
6969

7070
type User @entity {
7171
id: ID! # address
72+
userAddress: String!
7273
tokens: [JurorTokensPerCourt!]! @derivedFrom(field: "juror")
7374
totalStake: BigInt!
7475
totalDelayed: BigInt!

‎subgraph/core/src/entities/User.ts

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ export function ensureUser(id: string): User {
2727

2828
export function createUserFromAddress(id: string): User {
2929
const user = new User(id);
30+
user.userAddress = id.toLowerCase();
3031
user.totalStake = ZERO;
3132
user.totalDelayed = ZERO;
3233
user.activeDisputes = ZERO;

‎web/src/assets/svgs/icons/ranking.svg

+3
Loading

‎web/src/components/BlueIconTextButtonContainer.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import styled from "styled-components";
2+
import { hoverShortTransitionTiming } from "styles/commonStyles";
3+
4+
export const BlueIconTextButtonContainer = styled.div`
5+
${hoverShortTransitionTiming}
6+
display: flex;
7+
align-items: center;
8+
font-size: 14px;
9+
font-weight: 400;
10+
gap: 8px;
11+
cursor: pointer;
12+
color: ${({ theme }) => theme.primaryBlue};
13+
14+
svg path {
15+
fill: ${({ theme }) => theme.primaryBlue};
16+
}
17+
18+
&:hover {
19+
color: ${({ theme }) => theme.secondaryBlue};
20+
svg path {
21+
fill: ${({ theme }) => theme.secondaryBlue};
22+
}
23+
}
24+
`;

‎web/src/components/ExtraStatsDisplay.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,13 @@ import { InternalLink } from "./InternalLink";
88
const Container = styled.div`
99
display: flex;
1010
gap: 8px;
11-
align-items: center;
11+
justify-content: center;
12+
flex-wrap: wrap;
13+
`;
14+
15+
const TitleContainer = styled.div`
16+
display: flex;
17+
gap: 8px;
1218
`;
1319

1420
const SVGContainer = styled.div`
@@ -22,12 +28,12 @@ const SVGContainer = styled.div`
2228
}
2329
`;
2430

25-
const TextContainer = styled.div`
31+
const ContentContainer = styled.div`
2632
display: flex;
2733
align-items: center;
2834
gap: 8px;
2935
flex-wrap: wrap;
30-
justify-content: center;
36+
text-align: center;
3137
`;
3238

3339
const StyledInternalLink = styled(InternalLink)`
@@ -49,17 +55,19 @@ export interface IExtraStatsDisplay {
4955
const ExtraStatsDisplay: React.FC<IExtraStatsDisplay> = ({ title, courtId, text, content, icon: Icon, ...props }) => {
5056
return (
5157
<Container {...props}>
52-
<SVGContainer>{<Icon />}</SVGContainer>
53-
<TextContainer>
58+
<TitleContainer>
59+
<SVGContainer>{<Icon />}</SVGContainer>
5460
<label>{title}:</label>
61+
</TitleContainer>
62+
<ContentContainer>
5563
{content ? (
5664
content
5765
) : (
5866
<StyledInternalLink to={`/courts/${courtId?.toString()}`}>
5967
{!isUndefined(text) ? text : <StyledExtraStatTitleSkeleton />}
6068
</StyledInternalLink>
6169
)}
62-
</TextContainer>
70+
</ContentContainer>
6371
</Container>
6472
);
6573
};

‎web/src/components/HowItWorks.tsx

+3-26
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,8 @@
11
import React from "react";
2-
import styled from "styled-components";
3-
4-
import { hoverShortTransitionTiming } from "styles/commonStyles";
52

63
import BookOpenIcon from "svgs/icons/book-open.svg";
74

8-
const Container = styled.div`
9-
${hoverShortTransitionTiming}
10-
display: flex;
11-
align-items: center;
12-
font-size: 14px;
13-
font-weight: 400;
14-
gap: 8px;
15-
cursor: pointer;
16-
color: ${({ theme }) => theme.primaryBlue};
17-
18-
svg path {
19-
fill: ${({ theme }) => theme.primaryBlue};
20-
}
21-
22-
&:hover {
23-
color: ${({ theme }) => theme.secondaryBlue};
24-
svg path {
25-
fill: ${({ theme }) => theme.secondaryBlue};
26-
}
27-
}
28-
`;
5+
import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
296

307
interface IHowItWorks {
318
isMiniGuideOpen: boolean;
@@ -36,10 +13,10 @@ interface IHowItWorks {
3613
const HowItWorks: React.FC<IHowItWorks> = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => {
3714
return (
3815
<>
39-
<Container onClick={toggleMiniGuide}>
16+
<BlueIconTextButtonContainer onClick={toggleMiniGuide}>
4017
<BookOpenIcon />
4118
How it works
42-
</Container>
19+
</BlueIconTextButtonContainer>
4320
{isMiniGuideOpen && <MiniGuideComponent toggleMiniGuide={toggleMiniGuide} />}
4421
</>
4522
);

‎web/src/components/JurorsLeaderboardButton.tsx

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from "react";
2+
3+
import RankingIcon from "svgs/icons/ranking.svg";
4+
5+
import { BlueIconTextButtonContainer } from "./BlueIconTextButtonContainer";
6+
import { InternalLink } from "./InternalLink";
7+
8+
const JurorsLeaderboardButton: React.FC = () => {
9+
return (
10+
<>
11+
<InternalLink to={"/jurors/1/desc/all"}>
12+
<BlueIconTextButtonContainer>
13+
<RankingIcon />
14+
Jurors Leaderboard
15+
</BlueIconTextButtonContainer>
16+
</InternalLink>
17+
</>
18+
);
19+
};
20+
21+
export default JurorsLeaderboardButton;

‎web/src/hooks/queries/useJurorsByCoherenceScore.ts

+21-22
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
11
import { useQuery } from "@tanstack/react-query";
2-
32
import { useGraphqlBatcher } from "context/GraphqlBatcher";
4-
import { isUndefined } from "utils/index";
5-
63
import { graphql } from "src/graphql";
74
import { JurorsByCoherenceScoreQuery } from "src/graphql/graphql";
8-
export type { JurorsByCoherenceScoreQuery };
95

106
const jurorsByCoherenceScoreQuery = graphql(`
11-
query JurorsByCoherenceScore($skip: Int, $first: Int, $orderBy: User_orderBy, $orderDirection: OrderDirection) {
7+
query JurorsByCoherenceScore(
8+
$skip: Int
9+
$first: Int
10+
$orderBy: User_orderBy
11+
$orderDirection: OrderDirection
12+
$search: String
13+
) {
1214
users(
1315
first: $first
1416
skip: $skip
1517
orderBy: $orderBy
1618
orderDirection: $orderDirection
17-
where: { totalResolvedVotes_gt: 0 }
19+
where: { totalResolvedVotes_gt: 0, userAddress_contains: $search }
1820
) {
1921
id
2022
coherenceScore
@@ -25,26 +27,23 @@ const jurorsByCoherenceScoreQuery = graphql(`
2527
}
2628
`);
2729

28-
export const useJurorsByCoherenceScore = (skip = 0, first = 20, orderBy: string, orderDirection: string) => {
29-
const isEnabled = !isUndefined(first);
30+
export const useJurorsByCoherenceScore = (
31+
skip = 0,
32+
first = 20,
33+
orderBy: string,
34+
orderDirection: string,
35+
search = ""
36+
) => {
3037
const { graphqlBatcher } = useGraphqlBatcher();
3138

3239
return useQuery<JurorsByCoherenceScoreQuery>({
33-
queryKey: [`JurorsByCoherenceScore`, skip, first, orderBy, orderDirection],
34-
enabled: isEnabled,
40+
queryKey: ["JurorsByCoherenceScore", skip, first, orderBy, orderDirection, search],
3541
staleTime: Infinity,
3642
queryFn: async () =>
37-
isEnabled
38-
? await graphqlBatcher.fetch({
39-
id: crypto.randomUUID(),
40-
document: jurorsByCoherenceScoreQuery,
41-
variables: {
42-
skip,
43-
first,
44-
orderBy,
45-
orderDirection,
46-
},
47-
})
48-
: undefined,
43+
await graphqlBatcher.fetch({
44+
id: crypto.randomUUID(),
45+
document: jurorsByCoherenceScoreQuery,
46+
variables: { skip, first, orderBy, orderDirection, search },
47+
}),
4948
});
5049
};

‎web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import React from "react";
22
import styled from "styled-components";
33

4+
import { hoverLongTransitionTiming } from "styles/commonStyles";
5+
46
import ArrowIcon from "svgs/icons/arrow.svg";
57

68
import { AddressOrName, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay";
79
import { StyledArrowLink } from "components/StyledArrowLink";
810
import { ISettings } from "../../../index";
911

1012
const Container = styled.div`
13+
${hoverLongTransitionTiming}
1114
display: flex;
1215
justify-content: center;
1316
align-items: center;
@@ -21,6 +24,10 @@ const Container = styled.div`
2124
font-size: 16px;
2225
font-weight: 600;
2326
}
27+
28+
:hover {
29+
background-color: ${({ theme }) => theme.lightBlue};
30+
}
2431
`;
2532

2633
const AvatarAndAddressContainer = styled.div`

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

+4-5
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,10 @@ const Container = styled.div`
1414
display: flex;
1515
flex-direction: column;
1616
justify-content: center;
17-
margin-top: 12px;
1817
`;
1918

2019
const StyledChainContainer = styled.div`
2120
display: flex;
22-
height: 34px;
2321
gap: 0.5rem;
2422
justify-content: center;
2523
align-items: center;
@@ -38,19 +36,20 @@ const StyledChainContainer = styled.div`
3836
const StyledButton = styled.div`
3937
display: flex;
4038
justify-content: center;
41-
margin-top: 16px;
39+
margin-top: 8px;
4240
`;
4341

4442
const EnsureChainContainer = styled.div`
4543
display: flex;
4644
justify-content: center;
47-
padding: 16px;
45+
padding-top: 24px;
46+
padding-bottom: 20px;
4847
`;
4948

5049
const UserContainer = styled.div`
5150
display: flex;
5251
flex-direction: column;
53-
gap: 12px;
52+
gap: 16px;
5453
`;
5554

5655
export const DisconnectWalletButton: React.FC = () => {

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@ const HeaderNotifs: React.FC = () => {
3636
const EnsureChainContainer = styled.div`
3737
display: flex;
3838
justify-content: center;
39-
padding-top: 16px;
40-
padding-bottom: 16px;
39+
padding-top: 20px;
40+
padding-bottom: 20px;
4141
`;
4242

4343
const StyledSvg = styled.svg`

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

+2-5
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,12 @@ import styled, { css } from "styled-components";
33

44
import { landscapeStyle } from "styles/landscapeStyle";
55

6-
import Identicon from "react-identicons";
7-
86
import { Answer } from "context/NewDisputeContext";
97
import { getVoteChoice } from "utils/getVoteChoice";
108
import { isUndefined } from "utils/index";
11-
import { shortenAddress } from "utils/shortenAddress";
129

1310
import { InternalLink } from "components/InternalLink";
11+
import JurorTitle from "pages/Home/TopJurors/JurorCard/JurorTitle";
1412

1513
const TitleContainer = styled.div`
1614
display: flex;
@@ -93,9 +91,8 @@ const AccordionTitle: React.FC<{
9391
return (
9492
<TitleContainer>
9593
<AddressContainer>
96-
<Identicon size="20" string={juror} />
9794
<StyledInternalLink to={profileLink}>
98-
<StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
95+
<JurorTitle address={juror} showArrow={false} />
9996
</StyledInternalLink>
10097
</AddressContainer>
10198
<VoteStatus {...{ choice, period, answers, isActiveRound, commited, hiddenVotes }} />

‎web/src/pages/Home/Community/index.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { responsiveSize } from "styles/responsiveSize";
1111
import { Element } from "./Element";
1212

1313
const Container = styled.div`
14-
margin-top: ${responsiveSize(24, 48)};
14+
margin-top: ${responsiveSize(28, 48)};
1515
1616
h1 {
1717
margin-bottom: ${responsiveSize(12, 24)};

‎web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useToggle } from "react-use";
66
import { landscapeStyle } from "styles/landscapeStyle";
77
import { responsiveSize } from "styles/responsiveSize";
88

9+
import RankingIcon from "svgs/icons/ranking.svg";
10+
911
import HowItWorks from "components/HowItWorks";
1012
import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
1113

@@ -34,6 +36,12 @@ const Container = styled.div`
3436
)}
3537
`;
3638

39+
const StyledRankingIcon = styled(RankingIcon)`
40+
path {
41+
fill: ${({ theme }) => theme.primaryText};
42+
}
43+
`;
44+
3745
const StyledLabel = styled.label`
3846
font-size: 16px;
3947
`;
@@ -48,7 +56,7 @@ export const DesktopHeader: React.FC = () => {
4856

4957
return (
5058
<Container>
51-
<StyledLabel>#</StyledLabel>
59+
<StyledRankingIcon />
5260
<StyledLabel>Juror</StyledLabel>
5361
<Rewards />
5462
<Coherence />

‎web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -38,9 +38,10 @@ export const ReStyledArrowLink = styled(StyledArrowLink)`
3838

3939
interface IJurorTitle {
4040
address: string;
41+
showArrow?: boolean;
4142
}
4243

43-
const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
44+
const JurorTitle: React.FC<IJurorTitle> = ({ address, showArrow = true }) => {
4445
const { isConnected, address: connectedAddress } = useAccount();
4546
const profileLink =
4647
isConnected && connectedAddress?.toLowerCase() === address.toLowerCase()
@@ -52,7 +53,7 @@ const JurorTitle: React.FC<IJurorTitle> = ({ address }) => {
5253
<IdenticonOrAvatar address={address} />
5354
<ReStyledArrowLink to={profileLink}>
5455
<AddressOrName address={address} />
55-
<ArrowIcon />
56+
{showArrow ? <ArrowIcon /> : null}
5657
</ReStyledArrowLink>
5758
</Container>
5859
);

0 commit comments

Comments
 (0)