From ed638105b70bc316c1dbbd9d5675ebc96d55d3b8 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 20 Jan 2025 10:56:47 +0100 Subject: [PATCH 01/15] feat: initial jurors page setup, jurors explore navlink, small styling tweak, dashboard to profile --- web/src/app.tsx | 15 +++- web/src/components/EvidenceCard.tsx | 5 +- .../Popup/MiniGuides/JurorLevels.tsx | 4 +- web/src/layout/Header/navbar/Explore.tsx | 2 +- .../Voting/VotesDetails/AccordionTitle.tsx | 4 +- .../pages/Courts/CourtDetails/TopSearch.tsx | 3 + .../Home/TopJurors/JurorCard/JurorLevel.tsx | 2 +- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 4 +- web/src/pages/Home/TopJurors/index.tsx | 4 +- web/src/pages/Jurors/Search.tsx | 76 +++++++++++++++++++ web/src/pages/Jurors/Stats.tsx | 28 +++++++ web/src/pages/Jurors/StatsAndFilters.tsx | 22 ++++++ web/src/pages/Jurors/index.tsx | 65 ++++++++++++++++ .../Courts/CourtCard/CourtName.tsx | 0 .../Courts/CourtCard/Stake.tsx | 0 .../Courts/CourtCard/index.tsx | 0 .../{Dashboard => Profile}/Courts/Header.tsx | 0 .../{Dashboard => Profile}/Courts/index.tsx | 0 .../JurorInfo/Coherence.tsx | 0 .../JurorInfo/Header.tsx | 2 +- .../JurorInfo/JurorRewards.tsx | 0 .../JurorInfo/PixelArt.tsx | 0 .../JurorInfo/StakingRewards.tsx | 0 .../JurorInfo/TokenRewards.tsx | 0 .../JurorInfo/index.tsx | 0 .../pages/{Dashboard => Profile}/index.tsx | 6 +- 26 files changed, 222 insertions(+), 20 deletions(-) create mode 100644 web/src/pages/Jurors/Search.tsx create mode 100644 web/src/pages/Jurors/Stats.tsx create mode 100644 web/src/pages/Jurors/StatsAndFilters.tsx create mode 100644 web/src/pages/Jurors/index.tsx rename web/src/pages/{Dashboard => Profile}/Courts/CourtCard/CourtName.tsx (100%) rename web/src/pages/{Dashboard => Profile}/Courts/CourtCard/Stake.tsx (100%) rename web/src/pages/{Dashboard => Profile}/Courts/CourtCard/index.tsx (100%) rename web/src/pages/{Dashboard => Profile}/Courts/Header.tsx (100%) rename web/src/pages/{Dashboard => Profile}/Courts/index.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/Coherence.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/Header.tsx (99%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/JurorRewards.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/PixelArt.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/StakingRewards.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/TokenRewards.tsx (100%) rename web/src/pages/{Dashboard => Profile}/JurorInfo/index.tsx (100%) rename web/src/pages/{Dashboard => Profile}/index.tsx (97%) diff --git a/web/src/app.tsx b/web/src/app.tsx index f55365693..641c1e3d1 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -14,8 +14,9 @@ import QueryClientProvider from "context/QueryClientProvider"; import StyledComponentsProvider from "context/StyledComponentsProvider"; const Home = lazy(() => import("./pages/Home")); const Cases = lazy(() => import("./pages/Cases")); -const Dashboard = lazy(() => import("./pages/Dashboard")); +const Profile = lazy(() => import("./pages/Profile")); const Courts = lazy(() => import("./pages/Courts")); +const Jurors = lazy(() => import("./pages/Jurors")); const DisputeResolver = lazy(() => import("./pages/Resolver")); const GetPnk = lazy(() => import("./pages/GetPnk")); const Settings = lazy(() => import("./pages/Settings")); @@ -64,10 +65,18 @@ const App: React.FC = () => { } /> }> - + + + } + /> + }> + } /> diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index 3833316dc..07c4bb955 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -8,7 +8,6 @@ import { Card } from "@kleros/ui-components-library"; import AttachmentIcon from "svgs/icons/attachment.svg"; -import { DEFAULT_CHAIN, getChain } from "consts/chains"; import { formatDate } from "utils/date"; import { getIpfsUrl } from "utils/getIpfsUrl"; import { shortenAddress } from "utils/shortenAddress"; @@ -224,7 +223,7 @@ const EvidenceCard: React.FC = ({ description, fileURI, }) => { - const dashboardLink = `/dashboard/1/desc/all?address=${sender}`; + const profileLink = `/profile/1/desc/all?address=${sender}`; const transactionExplorerLink = useMemo(() => { return getTxnExplorerLink(transactionHash ?? ""); @@ -249,7 +248,7 @@ const EvidenceCard: React.FC = ({ - +
{shortenAddress(sender)}
 diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 9e2b98c1d..7e456b8f0 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -5,8 +5,8 @@ import { Card as _Card } from "@kleros/ui-components-library"; import { landscapeStyle } from "styles/landscapeStyle"; -import Coherence from "pages/Dashboard/JurorInfo/Coherence"; -import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; +import Coherence from "pages/Profile/JurorInfo/Coherence"; +import PixelArt from "pages/Profile/JurorInfo/PixelArt"; import Template from "./MainStructureTemplate"; import { Title, ParagraphsContainer, LeftContentContainer } from "./PageContentsTemplate"; diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index b28482eee..e503fe5c8 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -54,7 +54,7 @@ const links = [ { to: "/", text: "Home" }, { to: "/cases/display/1/desc/all", text: "Cases" }, { to: "/courts", text: "Courts" }, - { to: "/dashboard/1/desc/all", text: "Dashboard" }, + { to: "/jurors", text: "Jurors" }, { to: "/get-pnk", text: "Get PNK" }, ]; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx index a8526ae0d..7fb53cd00 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx @@ -88,13 +88,13 @@ const AccordionTitle: React.FC<{ commited: boolean; hiddenVotes: boolean; }> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => { - const dashboardLink = `/dashboard/1/desc/all?address=${juror}`; + const profileLink = `/profile/1/desc/all?address=${juror}`; return ( - + {shortenAddress(juror)} diff --git a/web/src/pages/Courts/CourtDetails/TopSearch.tsx b/web/src/pages/Courts/CourtDetails/TopSearch.tsx index fed78ae7e..8c4657496 100644 --- a/web/src/pages/Courts/CourtDetails/TopSearch.tsx +++ b/web/src/pages/Courts/CourtDetails/TopSearch.tsx @@ -68,6 +68,8 @@ const SearchResultsContainer = styled(OverlayScrollbarsComponent)` overflow-y: auto; z-index: 1; background-color: ${({ theme }) => theme.whiteBackground}; + border-top-left-radius: 0; + border-top-right-radius: 0; `; const StyledCard = styled(Card)<{ selected: boolean }>` @@ -79,6 +81,7 @@ const StyledCard = styled(Card)<{ selected: boolean }>` border: none; border-left: ${({ selected, theme }) => (selected ? `3px solid ${theme.primaryBlue}` : "none")}; background-color: ${({ selected, theme }) => (selected ? theme.mediumBlue : "transparent")}; + border-radius: 0; :hover { background-color: ${({ theme }) => theme.mediumBlue}; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx index cdfce9ed2..66baf7e45 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx @@ -5,7 +5,7 @@ import { getUserLevelData } from "utils/userLevelCalculation"; import { landscapeStyle } from "styles/landscapeStyle"; -import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; +import PixelArt from "pages/Profile/JurorInfo/PixelArt"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 24d39fe76..0214b1a22 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -34,12 +34,12 @@ interface IJurorTitle { } const JurorTitle: React.FC = ({ address }) => { - const dashboardLink = `/dashboard/1/desc/all?address=${address}`; + const profileLink = `/profile/1/desc/all?address=${address}`; return ( - + diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index e547db54a..00a742cba 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -22,7 +22,7 @@ const Title = styled.h1` font-size: ${responsiveSize(20, 24)}; `; -const ListContainer = styled.div` +export const ListContainer = styled.div` display: flex; flex-direction: column; justify-content: center; @@ -35,7 +35,7 @@ const ListContainer = styled.div` )} `; -const StyledLabel = styled.label` +export const StyledLabel = styled.label` font-size: 16px; `; diff --git a/web/src/pages/Jurors/Search.tsx b/web/src/pages/Jurors/Search.tsx new file mode 100644 index 000000000..d5362b179 --- /dev/null +++ b/web/src/pages/Jurors/Search.tsx @@ -0,0 +1,76 @@ +import React, { useRef, useState } from "react"; +import styled, { css } from "styled-components"; + +import { useNavigate, useParams, useSearchParams } from "react-router-dom"; +import { useDebounce } from "react-use"; +import { Searchbar } from "@kleros/ui-components-library"; + +import { isEmpty } from "utils/index"; +import { decodeURIFilter, encodeURIFilter, useRootPath } from "utils/uri"; + +import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +const Container = styled.div` + display: flex; + flex-direction: column; + gap: ${responsiveSize(8, 16)}; + + ${landscapeStyle( + () => css` + flex-direction: row; + ` + )} +`; + +const StyledSearchbar = styled(Searchbar)` + flex: 1; + flex-basis: 310px; + + input { + font-size: 16px; + height: 45px; + padding-top: 0px; + padding-bottom: 0px; + } +`; + +const Search: React.FC = () => { + const { page, order, filter } = useParams(); + const location = useRootPath(); + const decodedFilter = decodeURIFilter(filter ?? "all"); + const { id: searchValue, ...filterObject } = decodedFilter; + const [search, setSearch] = useState(searchValue ?? ""); + const initialRenderRef = useRef(true); + const navigate = useNavigate(); + const [searchParams] = useSearchParams(); + + useDebounce( + () => { + if (initialRenderRef.current && isEmpty(search)) { + initialRenderRef.current = false; + return; + } + initialRenderRef.current = false; + const newFilters = isEmpty(search) ? { ...filterObject } : { ...filterObject, id: search }; + const encodedFilter = encodeURIFilter(newFilters); + navigate(`${location}/${page}/${order}/${encodedFilter}?${searchParams.toString()}`); + }, + 500, + [search] + ); + + return ( + + setSearch(e.target.value)} + /> + + ); +}; + +export default Search; diff --git a/web/src/pages/Jurors/Stats.tsx b/web/src/pages/Jurors/Stats.tsx new file mode 100644 index 000000000..9b6af6f4b --- /dev/null +++ b/web/src/pages/Jurors/Stats.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import styled from "styled-components"; + +const FieldWrapper = styled.div` + display: inline-flex; + gap: 8px; +`; + +const StyledLabel = styled.label` + color: ${({ theme }) => theme.primaryText}; +`; + +const Field: React.FC<{ label: string; value: string }> = ({ label, value }) => ( + + {label} + {value} + +); + +export interface IStats { + totalJurors: number; +} + +const Stats: React.FC = ({ totalJurors }) => { + return ; +}; + +export default Stats; diff --git a/web/src/pages/Jurors/StatsAndFilters.tsx b/web/src/pages/Jurors/StatsAndFilters.tsx new file mode 100644 index 000000000..e29e049e7 --- /dev/null +++ b/web/src/pages/Jurors/StatsAndFilters.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import styled from "styled-components"; + +import { responsiveSize } from "styles/responsiveSize"; +import Stats, { IStats } from "./Stats"; + +const Container = styled.div` + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-top: ${responsiveSize(4, 8)}; + margin-bottom: ${responsiveSize(16, 32)}; + justify-content: space-between; +`; + +const StatsAndFilters: React.FC = ({ totalJurors }) => ( + + + +); + +export default StatsAndFilters; diff --git a/web/src/pages/Jurors/index.tsx b/web/src/pages/Jurors/index.tsx new file mode 100644 index 000000000..251360b8d --- /dev/null +++ b/web/src/pages/Jurors/index.tsx @@ -0,0 +1,65 @@ +import React from "react"; +import styled, { css } from "styled-components"; + +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +import { isUndefined } from "utils/index"; + +import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; + +import { SkeletonDisputeListItem } from "components/StyledSkeleton"; +import Search from "./Search"; +import StatsAndFilters from "./StatsAndFilters"; +import JurorCard from "../Home/TopJurors/JurorCard"; +import { ListContainer, StyledLabel } from "../Home/TopJurors"; +import Header from "../Home/TopJurors/Header"; + +const Container = styled.div` + width: 100%; + background-color: ${({ theme }) => theme.lightBackground}; + padding: 32px 16px 40px; + max-width: ${MAX_WIDTH_LANDSCAPE}; + margin: 0 auto; + + ${landscapeStyle( + () => css` + padding: 48px ${responsiveSize(0, 132)} 60px; + ` + )} +`; + +const StyledTitle = styled.h1` + margin: 0px; + font-size: ${responsiveSize(20, 24)}; +`; + +const Jurors: React.FC = () => { + const { data: queryJurors } = useTopUsersByCoherenceScore(1000); + + const topJurors = queryJurors?.users?.map((juror, index) => ({ + ...juror, + rank: index + 1, + })); + + return ( + + Jurors Leaderboard + + + + {!isUndefined(topJurors) && topJurors.length === 0 ? ( + There are no jurors staked yet. + ) : ( + +
+ {!isUndefined(topJurors) + ? topJurors.map((juror) => ) + : [...Array(5)].map((_, i) => )} + + )} + + ); +}; + +export default Jurors; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Profile/Courts/CourtCard/CourtName.tsx similarity index 100% rename from web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx rename to web/src/pages/Profile/Courts/CourtCard/CourtName.tsx diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Profile/Courts/CourtCard/Stake.tsx similarity index 100% rename from web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx rename to web/src/pages/Profile/Courts/CourtCard/Stake.tsx diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Profile/Courts/CourtCard/index.tsx similarity index 100% rename from web/src/pages/Dashboard/Courts/CourtCard/index.tsx rename to web/src/pages/Profile/Courts/CourtCard/index.tsx diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Profile/Courts/Header.tsx similarity index 100% rename from web/src/pages/Dashboard/Courts/Header.tsx rename to web/src/pages/Profile/Courts/Header.tsx diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Profile/Courts/index.tsx similarity index 100% rename from web/src/pages/Dashboard/Courts/index.tsx rename to web/src/pages/Profile/Courts/index.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/Coherence.tsx b/web/src/pages/Profile/JurorInfo/Coherence.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/Coherence.tsx rename to web/src/pages/Profile/JurorInfo/Coherence.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Profile/JurorInfo/Header.tsx similarity index 99% rename from web/src/pages/Dashboard/JurorInfo/Header.tsx rename to web/src/pages/Profile/JurorInfo/Header.tsx index b6ba40cbc..3bdd6c878 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Profile/JurorInfo/Header.tsx @@ -87,7 +87,7 @@ const Header: React.FC = ({ return ( - Juror Dashboard - + Juror Profile - {shortenAddress(addressToQuery)} diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Profile/JurorInfo/JurorRewards.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx rename to web/src/pages/Profile/JurorInfo/JurorRewards.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/PixelArt.tsx b/web/src/pages/Profile/JurorInfo/PixelArt.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/PixelArt.tsx rename to web/src/pages/Profile/JurorInfo/PixelArt.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx b/web/src/pages/Profile/JurorInfo/StakingRewards.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx rename to web/src/pages/Profile/JurorInfo/StakingRewards.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx b/web/src/pages/Profile/JurorInfo/TokenRewards.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/TokenRewards.tsx rename to web/src/pages/Profile/JurorInfo/TokenRewards.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/index.tsx b/web/src/pages/Profile/JurorInfo/index.tsx similarity index 100% rename from web/src/pages/Dashboard/JurorInfo/index.tsx rename to web/src/pages/Profile/JurorInfo/index.tsx diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Profile/index.tsx similarity index 97% rename from web/src/pages/Dashboard/index.tsx rename to web/src/pages/Profile/index.tsx index 8901f11e2..8a329a719 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Profile/index.tsx @@ -50,7 +50,7 @@ const ConnectWalletContainer = styled.div` color: ${({ theme }) => theme.primaryText}; `; -const Dashboard: React.FC = () => { +const Profile: React.FC = () => { const { isConnected, address: connectedAddress } = useAccount(); const { page, order, filter } = useParams(); const [searchParams] = useSearchParams(); @@ -97,7 +97,7 @@ const Dashboard: React.FC = () => { ) : ( - To see your dashboard, connect first + To see your profile, connect first
@@ -108,4 +108,4 @@ const Dashboard: React.FC = () => { ); }; -export default Dashboard; +export default Profile; From 1b222944d4998e8bbfb0386ca80ef0e154104d25 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 21 Jan 2025 18:00:37 +0100 Subject: [PATCH 02/15] feat: filter by totalresolvedvotes bigger than 0, types fix --- .../hooks/queries/useTopUsersByCoherenceScore.ts | 2 +- web/src/pages/Home/CourtOverview/Stats.tsx | 2 +- .../pages/Home/TopJurors/JurorCard/Coherence.tsx | 13 ++++++++----- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 8 ++++---- .../Home/TopJurors/JurorCard/JurorLevel.tsx | 6 +++--- .../Home/TopJurors/JurorCard/MobileCard.tsx | 8 ++++---- web/src/pages/Home/TopJurors/JurorCard/index.tsx | 8 ++++---- web/src/pages/Jurors/index.tsx | 16 +++++++++++----- 8 files changed, 36 insertions(+), 27 deletions(-) diff --git a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts b/web/src/hooks/queries/useTopUsersByCoherenceScore.ts index add534914..7f4c2a3a4 100644 --- a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts +++ b/web/src/hooks/queries/useTopUsersByCoherenceScore.ts @@ -9,7 +9,7 @@ export type { TopUsersByCoherenceScoreQuery }; const topUsersByCoherenceScoreQuery = graphql(` query TopUsersByCoherenceScore($first: Int!, $orderBy: User_orderBy, $orderDirection: OrderDirection) { - users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection) { + users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection, where: { totalResolvedVotes_gt: 0 }) { id coherenceScore totalCoherentVotes diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index 503bd6a70..dd4345a78 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -37,7 +37,7 @@ const StyledCard = styled(Card)` )} `; -const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) => +export const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) => src.length > 0 ? src.at(-1)?.[stat] : 0n.toString(); interface IStat { diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx index 48b6d0d28..e08994883 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Coherence.tsx @@ -11,9 +11,14 @@ const Container = styled.div` justify-content: center; `; +const getPercent = (num: number, den: number): string => { + if (den === 0) return "0%"; + return `${Math.floor((num * 100) / den)}%`; +}; + interface ICoherence { - totalCoherentVotes: number; - totalResolvedVotes: number; + totalCoherentVotes: string; + totalResolvedVotes: string; } const Coherence: React.FC = ({ totalCoherentVotes, totalResolvedVotes }) => { @@ -21,11 +26,9 @@ const Coherence: React.FC = ({ totalCoherentVotes, totalResolvedVote return ( - {getPercent(totalCoherentVotes, totalResolvedVotes)} + {getPercent(Number(totalCoherentVotes), Number(totalResolvedVotes))} ); }; -const getPercent = (num: number, den: number): string => `${Math.floor((num * 100) / den)}%`; - export default Coherence; diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index 4185b988a..07414dda7 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -39,10 +39,10 @@ const Container = styled.div` interface IDesktopCard { rank: number; address: string; - totalCoherentVotes: number; - totalResolvedVotes: number; - totalResolvedDisputes: number; - coherenceScore: number; + totalCoherentVotes: string; + totalResolvedVotes: string; + totalResolvedDisputes: string; + coherenceScore: string; } const DesktopCard: React.FC = ({ diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx index 66baf7e45..d8ac2235f 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx @@ -39,12 +39,12 @@ const StyledLabel = styled.label` `; interface IJurorLevel { - coherenceScore: number; - totalResolvedDisputes: number; + coherenceScore: string; + totalResolvedDisputes: string; } const JurorLevel: React.FC = ({ coherenceScore, totalResolvedDisputes }) => { - const userLevelData = getUserLevelData(coherenceScore, totalResolvedDisputes); + const userLevelData = getUserLevelData(Number(coherenceScore), Number(totalResolvedDisputes)); const level = userLevelData.level; return ( diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index 7bf467191..c0c6ed8fb 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -80,10 +80,10 @@ const HeaderCoherenceAndCoherence = styled.div` interface IMobileCard { rank: number; address: string; - coherenceScore: number; - totalCoherentVotes: number; - totalResolvedVotes: number; - totalResolvedDisputes: number; + coherenceScore: string; + totalCoherentVotes: string; + totalResolvedVotes: string; + totalResolvedDisputes: string; } const MobileCard: React.FC = ({ diff --git a/web/src/pages/Home/TopJurors/JurorCard/index.tsx b/web/src/pages/Home/TopJurors/JurorCard/index.tsx index 6b6a5c973..bc5128252 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/index.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/index.tsx @@ -6,10 +6,10 @@ import MobileCard from "./MobileCard"; interface IJurorCard { rank: number; address: `0x${string}`; - coherenceScore: number; - totalCoherentVotes: number; - totalResolvedVotes: number; - totalResolvedDisputes: number; + coherenceScore: string; + totalCoherentVotes: string; + totalResolvedVotes: string; + totalResolvedDisputes: string; } const JurorCard: React.FC = ({ diff --git a/web/src/pages/Jurors/index.tsx b/web/src/pages/Jurors/index.tsx index 251360b8d..633d6d55b 100644 --- a/web/src/pages/Jurors/index.tsx +++ b/web/src/pages/Jurors/index.tsx @@ -5,8 +5,10 @@ import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import { isUndefined } from "utils/index"; +import { getOneYearAgoTimestamp } from "utils/date"; import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; +import { useHomePageQuery } from "queries/useHomePageQuery"; import { SkeletonDisputeListItem } from "components/StyledSkeleton"; import Search from "./Search"; @@ -14,6 +16,7 @@ import StatsAndFilters from "./StatsAndFilters"; import JurorCard from "../Home/TopJurors/JurorCard"; import { ListContainer, StyledLabel } from "../Home/TopJurors"; import Header from "../Home/TopJurors/Header"; +import { getLastOrZero } from "../Home/CourtOverview/Stats"; const Container = styled.div` width: 100%; @@ -37,25 +40,28 @@ const StyledTitle = styled.h1` const Jurors: React.FC = () => { const { data: queryJurors } = useTopUsersByCoherenceScore(1000); - const topJurors = queryJurors?.users?.map((juror, index) => ({ + const jurors = queryJurors?.users?.map((juror, index) => ({ ...juror, rank: index + 1, })); + // const { data } = useHomePageQuery(getOneYearAgoTimestamp()); + // const totalActiveJurors = data && getLastOrZero(data["counters"], "activeJurors"); + return ( Jurors Leaderboard - {!isUndefined(topJurors) && topJurors.length === 0 ? ( + {!isUndefined(jurors) && jurors.length === 0 ? ( There are no jurors staked yet. ) : (
- {!isUndefined(topJurors) - ? topJurors.map((juror) => ) - : [...Array(5)].map((_, i) => )} + {!isUndefined(jurors) + ? jurors.map((juror) => ) + : [...Array(14)].map((_, i) => )} )} From 63c308b257ab65e8f85b2bb409e189c28c880764 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 22 Jan 2025 06:54:27 +0100 Subject: [PATCH 03/15] fix: subgraph bug which has not counting missed votes --- subgraph/core/src/KlerosCore.ts | 17 ++++++++++------- subgraph/package.json | 2 +- 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/subgraph/core/src/KlerosCore.ts b/subgraph/core/src/KlerosCore.ts index e6c06a354..78b9dd467 100644 --- a/subgraph/core/src/KlerosCore.ts +++ b/subgraph/core/src/KlerosCore.ts @@ -139,13 +139,18 @@ export function handleNewPeriod(event: NewPeriod): void { const draw = Draw.load(draws[j].id); if (!draw) continue; + const juror = ensureUser(draw.juror); + juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE); + // Since this is a ClassicVote entity, this will only work for the Classic DisputeKit (which has ID "1"). const vote = ClassicVote.load(`${round.disputeKit}-${draw.id}`); - if (!vote) continue; - - const juror = ensureUser(draw.juror); - juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE); + if (!vote) { + // Recalculate coherenceScore + juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes); + juror.save(); + continue; + } if (vote.choice === null) continue; @@ -155,9 +160,7 @@ export function handleNewPeriod(event: NewPeriod): void { } // Recalculate coherenceScore - if (juror.totalResolvedVotes.gt(ZERO)) { - juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes); - } + juror.coherenceScore = computeCoherenceScore(juror.totalCoherentVotes, juror.totalResolvedVotes); juror.save(); } diff --git a/subgraph/package.json b/subgraph/package.json index c6f1294ad..acfb1cae2 100644 --- a/subgraph/package.json +++ b/subgraph/package.json @@ -1,6 +1,6 @@ { "name": "@kleros/kleros-v2-subgraph", - "version": "0.10.1", + "version": "0.10.2", "license": "MIT", "scripts": { "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml", From db29a3dc41197779310e60d28e481276166dfb50 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Sat, 25 Jan 2025 15:48:05 +0100 Subject: [PATCH 04/15] feat: myprofile links, subgraph changes, pagination, query optimization, levels miniguides tweak etc --- subgraph/core/schema.graphql | 1 + subgraph/core/src/KlerosCore.ts | 15 +++- subgraph/core/src/datapoint.ts | 6 ++ web/src/app.tsx | 2 +- .../Popup/MiniGuides/JurorLevels.tsx | 6 +- .../queries/useJurorsByCoherenceScore.ts | 50 ++++++++++++ .../queries/useTopUsersByCoherenceScore.ts | 43 ---------- .../queries/useTotalLeaderboardJurors.ts | 32 ++++++++ web/src/layout/Header/navbar/Explore.tsx | 2 +- .../Settings/General/WalletAndProfile.tsx | 54 +++++++++++++ .../{General.tsx => General/index.tsx} | 51 ++---------- .../Header/navbar/Menu/Settings/index.tsx | 6 +- .../Home/TopJurors/JurorCard/Coherence.tsx | 2 +- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 2 +- .../Home/TopJurors/JurorCard/JurorLevel.tsx | 9 ++- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 25 ++++-- .../Home/TopJurors/JurorCard/MobileCard.tsx | 2 +- web/src/pages/Home/TopJurors/index.tsx | 4 +- web/src/pages/Jurors/DisplayJurors.tsx | 81 +++++++++++++++++++ web/src/pages/Jurors/Search.tsx | 36 +++------ web/src/pages/Jurors/Stats.tsx | 21 ++++- web/src/pages/Jurors/StatsAndFilters.tsx | 2 +- web/src/pages/Jurors/index.tsx | 63 ++++++++------- web/src/pages/Profile/JurorInfo/index.tsx | 7 +- web/src/utils/userLevelCalculation.ts | 23 +++--- 25 files changed, 362 insertions(+), 183 deletions(-) create mode 100644 web/src/hooks/queries/useJurorsByCoherenceScore.ts delete mode 100644 web/src/hooks/queries/useTopUsersByCoherenceScore.ts create mode 100644 web/src/hooks/queries/useTotalLeaderboardJurors.ts create mode 100644 web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx rename web/src/layout/Header/navbar/Menu/Settings/{General.tsx => General/index.tsx} (57%) create mode 100644 web/src/pages/Jurors/DisplayJurors.tsx diff --git a/subgraph/core/schema.graphql b/subgraph/core/schema.graphql index dc34b33b3..59915a2ed 100644 --- a/subgraph/core/schema.graphql +++ b/subgraph/core/schema.graphql @@ -237,6 +237,7 @@ type Counter @entity { casesVoting: BigInt! casesRuled: BigInt! casesAppealing: BigInt! + totalLeaderboardJurors: BigInt! } type FeeToken @entity { diff --git a/subgraph/core/src/KlerosCore.ts b/subgraph/core/src/KlerosCore.ts index 78b9dd467..1fc194de7 100644 --- a/subgraph/core/src/KlerosCore.ts +++ b/subgraph/core/src/KlerosCore.ts @@ -18,13 +18,19 @@ import { createCourtFromEvent } from "./entities/Court"; import { createDisputeKitFromEvent, filterSupportedDisputeKits } from "./entities/DisputeKit"; import { createDisputeFromEvent } from "./entities/Dispute"; import { createRoundFromRoundInfo, updateRoundTimeline } from "./entities/Round"; -import { updateCases, updateCasesAppealing, updateCasesRuled, updateCasesVoting } from "./datapoint"; +import { + updateCases, + updateCasesAppealing, + updateCasesRuled, + updateCasesVoting, + updateTotalLeaderboardJurors, +} from "./datapoint"; import { addUserActiveDispute, computeCoherenceScore, ensureUser } from "./entities/User"; import { updateJurorStake } from "./entities/JurorTokensPerCourt"; import { createDrawFromEvent } from "./entities/Draw"; import { updateTokenAndEthShiftFromEvent } from "./entities/TokenAndEthShift"; import { updateArbitrableCases } from "./entities/Arbitrable"; -import { ClassicVote, Court, Dispute, Draw, Round, User } from "../generated/schema"; +import { ClassicVote, Counter, Court, Dispute, Draw, Round, User } from "../generated/schema"; import { BigInt } from "@graphprotocol/graph-ts"; import { updatePenalty } from "./entities/Penalty"; import { ensureFeeToken } from "./entities/FeeToken"; @@ -142,6 +148,11 @@ export function handleNewPeriod(event: NewPeriod): void { const juror = ensureUser(draw.juror); juror.totalResolvedVotes = juror.totalResolvedVotes.plus(ONE); + // Increment totalLeaderboardJurors in the Counter entity if this is the first resolved vote for the juror + if (juror.totalResolvedVotes.equals(ONE)) { + updateTotalLeaderboardJurors(ONE, event.block.timestamp); + } + // Since this is a ClassicVote entity, this will only work for the Classic DisputeKit (which has ID "1"). const vote = ClassicVote.load(`${round.disputeKit}-${draw.id}`); diff --git a/subgraph/core/src/datapoint.ts b/subgraph/core/src/datapoint.ts index 2b098c64c..7ddc149ce 100644 --- a/subgraph/core/src/datapoint.ts +++ b/subgraph/core/src/datapoint.ts @@ -15,6 +15,7 @@ const VARIABLES = [ "casesVoting", "casesRuled", "casesAppealing", + "totalLeaderboardJurors", ]; function updateDataPoint(delta: BigInt, timestamp: BigInt, variable: string): void { @@ -43,6 +44,7 @@ function checkFirstDayActivity(): void { counter.casesVoting = ZERO; counter.casesRuled = ZERO; counter.casesAppealing = ZERO; + counter.totalLeaderboardJurors = ZERO; counter.save(); } } @@ -86,3 +88,7 @@ export function updateCasesRuled(delta: BigInt, timestamp: BigInt): void { export function updateCasesAppealing(delta: BigInt, timestamp: BigInt): void { updateDataPoint(delta, timestamp, "casesAppealing"); } + +export function updateTotalLeaderboardJurors(delta: BigInt, timestamp: BigInt): void { + updateDataPoint(delta, timestamp, "totalLeaderboardJurors"); +} diff --git a/web/src/app.tsx b/web/src/app.tsx index 641c1e3d1..7fc3b8af8 100644 --- a/web/src/app.tsx +++ b/web/src/app.tsx @@ -65,7 +65,7 @@ const App: React.FC = () => { } /> }> diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 7e456b8f0..b8043e26f 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -35,16 +35,16 @@ const leftPageContents = [ title: "Juror Level 1: Pythagoras", paragraphs: [ "Jurors are classified into distinct levels according to their performance starting from Level 1.", - "Level 1: Jurors with 0 cases arbitrated, OR Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.", + "Level 1: Jurors with ≥ 1 case arbitrated with 0-70% of coherent votes.", ], }, { title: "Juror Level 2: Socrates", - paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with 70%-80% of coherent votes."], + paragraphs: ["Level 2: Jurors with ≥ 3 cases arbitrated with more than 70% coherent votes."], }, { title: "Juror Level 3: Plato", - paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with 80%-90% of coherent votes."], + paragraphs: ["Level 3: Jurors with ≥ 7 cases arbitrated with more than 80% of coherent votes."], }, { title: "Juror Level 4: Aristotle", diff --git a/web/src/hooks/queries/useJurorsByCoherenceScore.ts b/web/src/hooks/queries/useJurorsByCoherenceScore.ts new file mode 100644 index 000000000..c22586847 --- /dev/null +++ b/web/src/hooks/queries/useJurorsByCoherenceScore.ts @@ -0,0 +1,50 @@ +import { useQuery } from "@tanstack/react-query"; + +import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { isUndefined } from "utils/index"; + +import { graphql } from "src/graphql"; +import { JurorsByCoherenceScoreQuery } from "src/graphql/graphql"; +export type { JurorsByCoherenceScoreQuery }; + +const jurorsByCoherenceScoreQuery = graphql(` + query JurorsByCoherenceScore($skip: Int, $first: Int, $orderBy: User_orderBy, $orderDirection: OrderDirection) { + users( + first: $first + skip: $skip + orderBy: $orderBy + orderDirection: $orderDirection + where: { totalResolvedVotes_gt: 0 } + ) { + id + coherenceScore + totalCoherentVotes + totalResolvedVotes + totalResolvedDisputes + } + } +`); + +export const useJurorsByCoherenceScore = (skip = 0, first = 20, orderBy: string, orderDirection: string) => { + const isEnabled = !isUndefined(first); + const { graphqlBatcher } = useGraphqlBatcher(); + + return useQuery({ + queryKey: [`JurorsByCoherenceScore`, skip, first, orderBy, orderDirection], + enabled: isEnabled, + staleTime: Infinity, + queryFn: async () => + isEnabled + ? await graphqlBatcher.fetch({ + id: crypto.randomUUID(), + document: jurorsByCoherenceScoreQuery, + variables: { + skip, + first, + orderBy, + orderDirection, + }, + }) + : undefined, + }); +}; diff --git a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts b/web/src/hooks/queries/useTopUsersByCoherenceScore.ts deleted file mode 100644 index 7f4c2a3a4..000000000 --- a/web/src/hooks/queries/useTopUsersByCoherenceScore.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; - -import { useGraphqlBatcher } from "context/GraphqlBatcher"; -import { isUndefined } from "utils/index"; - -import { graphql } from "src/graphql"; -import { TopUsersByCoherenceScoreQuery } from "src/graphql/graphql"; -export type { TopUsersByCoherenceScoreQuery }; - -const topUsersByCoherenceScoreQuery = graphql(` - query TopUsersByCoherenceScore($first: Int!, $orderBy: User_orderBy, $orderDirection: OrderDirection) { - users(first: $first, orderBy: $orderBy, orderDirection: $orderDirection, where: { totalResolvedVotes_gt: 0 }) { - id - coherenceScore - totalCoherentVotes - totalResolvedVotes - totalResolvedDisputes - } - } -`); - -export const useTopUsersByCoherenceScore = (first = 5) => { - const isEnabled = !isUndefined(first); - const { graphqlBatcher } = useGraphqlBatcher(); - - return useQuery({ - queryKey: [`TopUsersByCoherenceScore${first}`], - enabled: isEnabled, - staleTime: Infinity, - queryFn: async () => - isEnabled - ? await graphqlBatcher.fetch({ - id: crypto.randomUUID(), - document: topUsersByCoherenceScoreQuery, - variables: { - first: first, - orderBy: "coherenceScore", - orderDirection: "desc", - }, - }) - : undefined, - }); -}; diff --git a/web/src/hooks/queries/useTotalLeaderboardJurors.ts b/web/src/hooks/queries/useTotalLeaderboardJurors.ts new file mode 100644 index 000000000..ff2cd8ea9 --- /dev/null +++ b/web/src/hooks/queries/useTotalLeaderboardJurors.ts @@ -0,0 +1,32 @@ +import { useQuery } from "@tanstack/react-query"; + +import { useGraphqlBatcher } from "context/GraphqlBatcher"; + +import { graphql } from "src/graphql"; +import { TotalLeaderboardJurorsQuery } from "src/graphql/graphql"; +export type { TotalLeaderboardJurorsQuery }; + +const totalLeaderboardJurorsQuery = graphql(` + query TotalLeaderboardJurors($id: ID!) { + counter(id: $id) { + totalLeaderboardJurors + } + } +`); + +export const useTotalLeaderboardJurors = () => { + const { graphqlBatcher } = useGraphqlBatcher(); + + return useQuery({ + queryKey: [`TotalLeaderboardJurors`], + staleTime: Infinity, + queryFn: async () => + await graphqlBatcher.fetch({ + id: crypto.randomUUID(), + document: totalLeaderboardJurorsQuery, + variables: { + id: 0, + }, + }), + }); +}; diff --git a/web/src/layout/Header/navbar/Explore.tsx b/web/src/layout/Header/navbar/Explore.tsx index e503fe5c8..8c4960d7a 100644 --- a/web/src/layout/Header/navbar/Explore.tsx +++ b/web/src/layout/Header/navbar/Explore.tsx @@ -54,7 +54,7 @@ const links = [ { to: "/", text: "Home" }, { to: "/cases/display/1/desc/all", text: "Cases" }, { to: "/courts", text: "Courts" }, - { to: "/jurors", text: "Jurors" }, + { to: "/jurors/1/desc/all", text: "Jurors" }, { to: "/get-pnk", text: "Get PNK" }, ]; diff --git a/web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx b/web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx new file mode 100644 index 000000000..fb02e979f --- /dev/null +++ b/web/src/layout/Header/navbar/Menu/Settings/General/WalletAndProfile.tsx @@ -0,0 +1,54 @@ +import React from "react"; +import styled from "styled-components"; + +import ArrowIcon from "svgs/icons/arrow.svg"; + +import { AddressOrName, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay"; +import { StyledArrowLink } from "components/StyledArrowLink"; +import { ISettings } from "../../../index"; + +const Container = styled.div` + display: flex; + justify-content: center; + align-items: center; + padding: 16px 32px; + gap: 24px; + border: 1px solid ${({ theme }) => theme.stroke}; + border-radius: 30px; + + > label { + color: ${({ theme }) => theme.primaryText}; + font-size: 16px; + font-weight: 600; + } +`; + +const AvatarAndAddressContainer = styled.div` + display: flex; + flex-direction: row; + gap: 8px; +`; + +const ReStyledArrowLink = styled(StyledArrowLink)` + font-size: 14px; + + > svg { + height: 14px; + width: 14px; + } +`; + +const WalletAndProfile: React.FC = ({ toggleIsSettingsOpen }) => { + return ( + + + + + + + My Profile + + + ); +}; +export default WalletAndProfile; diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General/index.tsx similarity index 57% rename from web/src/layout/Header/navbar/Menu/Settings/General.tsx rename to web/src/layout/Header/navbar/Menu/Settings/General/index.tsx index 398f6673d..ee4941c5a 100644 --- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx +++ b/web/src/layout/Header/navbar/Menu/Settings/General/index.tsx @@ -1,12 +1,14 @@ -import React, { useMemo } from "react"; +import React from "react"; import styled from "styled-components"; import { useAccount, useDisconnect } from "wagmi"; import { Button } from "@kleros/ui-components-library"; -import { AddressOrName, ChainDisplay, IdenticonOrAvatar } from "components/ConnectWallet/AccountDisplay"; +import { ChainDisplay } from "components/ConnectWallet/AccountDisplay"; import { EnsureChain } from "components/EnsureChain"; +import WalletAndProfile from "./WalletAndProfile"; +import { ISettings } from "../../../index"; const Container = styled.div` display: flex; @@ -33,22 +35,6 @@ const StyledChainContainer = styled.div` } `; -const StyledAddressContainer = styled.div` - display: flex; - justify-content: center; - > label { - color: ${({ theme }) => theme.primaryText}; - font-size: 16px; - font-weight: 600; - } -`; - -const StyledAvatarContainer = styled.div` - display: flex; - justify-content: center; - margin-top: 12px; -`; - const StyledButton = styled.div` display: flex; justify-content: center; @@ -67,29 +53,13 @@ const UserContainer = styled.div` gap: 12px; `; -const StyledA = styled.a` - text-decoration: none; - label { - cursor: pointer; - color: ${({ theme }) => theme.primaryBlue}; - } - - :hover { - text-decoration: underline; - } -`; - export const DisconnectWalletButton: React.FC = () => { const { disconnect } = useDisconnect(); return