Skip to content

Commit f701d8f

Browse files
committed
feat: add support for sharing your own profile, variable renaming
1 parent c3213ca commit f701d8f

File tree

7 files changed

+35
-34
lines changed

7 files changed

+35
-34
lines changed

web/src/pages/Profile/Cases/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,10 +21,10 @@ const StyledCasesDisplay = styled(CasesDisplay)`
2121
`;
2222

2323
interface ICases {
24-
addressToQuery: `0x${string}`;
24+
searchParamAddress: `0x${string}`;
2525
}
2626

27-
const Cases: React.FC<ICases> = ({ addressToQuery }) => {
27+
const Cases: React.FC<ICases> = ({ searchParamAddress }) => {
2828
const { page, order, filter } = useParams();
2929
const [searchParams] = useSearchParams();
3030
const location = useRootPath();
@@ -35,13 +35,13 @@ const Cases: React.FC<ICases> = ({ addressToQuery }) => {
3535
const disputeSkip = casesPerPage * (pageNumber - 1);
3636
const decodedFilter = decodeURIFilter(filter ?? "all");
3737
const { data: disputesData } = useMyCasesQuery(
38-
addressToQuery,
38+
searchParamAddress,
3939
disputeSkip,
4040
decodedFilter,
4141
order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
4242
);
4343

44-
const { data: userData } = useUserQuery(addressToQuery, decodedFilter);
44+
const { data: userData } = useUserQuery(searchParamAddress, decodedFilter);
4545
const totalCases = userData?.user?.disputes.length;
4646
const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes);
4747
const totalPages = useMemo(

web/src/pages/Profile/JurorCard/BottomContent/JurorRewards.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,11 +41,11 @@ const tooltipMsg =
4141
"arbitration fees (ETH) + PNK redistribution between jurors.";
4242

4343
interface IJurorRewards {
44-
addressToQuery: `0x${string}`;
44+
searchParamAddress: `0x${string}`;
4545
}
4646

47-
const JurorRewards: React.FC<IJurorRewards> = ({ addressToQuery }) => {
48-
const { data } = useUserQuery(addressToQuery);
47+
const JurorRewards: React.FC<IJurorRewards> = ({ searchParamAddress }) => {
48+
const { data } = useUserQuery(searchParamAddress);
4949
const coinIds = [CoinIds.PNK, CoinIds.ETH];
5050
const { prices: pricesData } = useCoinPrice(coinIds);
5151

web/src/pages/Profile/JurorCard/BottomContent/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,21 +46,21 @@ interface IBottomContent {
4646
userLevelData: ILevelCriteria;
4747
totalCoherentVotes: number;
4848
totalResolvedVotes: number;
49-
addressToQuery: `0x${string}`;
49+
searchParamAddress: `0x${string}`;
5050
}
5151

5252
const BottomContent: React.FC<IBottomContent> = ({
5353
userLevelData,
5454
totalCoherentVotes,
5555
totalResolvedVotes,
56-
addressToQuery,
56+
searchParamAddress,
5757
}) => {
5858
return (
5959
<Container>
6060
<LeftContent>
6161
<PixelArt level={userLevelData.level} width="189px" height="189px" />
6262
<Coherence isMiniGuide={false} {...{ userLevelData, totalCoherentVotes, totalResolvedVotes }} />
63-
<JurorRewards {...{ addressToQuery }} />
63+
<JurorRewards {...{ searchParamAddress }} />
6464
</LeftContent>
6565
<StakingRewards />
6666
</Container>

web/src/pages/Profile/JurorCard/Header.tsx

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import styled from "styled-components";
44
import { responsiveSize } from "styles/responsiveSize";
55

66
import { useToggle } from "react-use";
7-
import { useSearchParams } from "react-router-dom";
87

98
import XIcon from "svgs/socialmedia/x.svg";
109

@@ -52,24 +51,21 @@ interface IHeader {
5251
levelNumber: number;
5352
totalCoherentVotes: number;
5453
totalResolvedVotes: number;
55-
addressToQuery: `0x${string}`;
54+
searchParamAddress: `0x${string}`;
5655
}
5756

5857
const Header: React.FC<IHeader> = ({
5958
levelTitle,
6059
levelNumber,
6160
totalCoherentVotes,
6261
totalResolvedVotes,
63-
addressToQuery,
62+
searchParamAddress,
6463
}) => {
6564
const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
66-
const [searchParams] = useSearchParams();
67-
6865
const coherencePercentage = parseFloat(((totalCoherentVotes / Math.max(totalResolvedVotes, 1)) * 100).toFixed(2));
6966
const courtUrl = window.location.origin;
7067
const xPostText = `Hey I've been busy as a Juror on the Kleros court, check out my score: \n\nLevel: ${levelNumber} (${levelTitle})\nCoherence Percentage: ${coherencePercentage}%\nCoherent Votes: ${totalCoherentVotes}/${totalResolvedVotes}\n\nBe a juror with me! ➡️ ${courtUrl}`;
7168
const xShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(xPostText)}`;
72-
const searchParamAddress = searchParams.get("address")?.toLowerCase();
7369

7470
return (
7571
<Container>

web/src/pages/Profile/JurorCard/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,11 @@ const Card = styled(_Card)`
2727
`;
2828

2929
interface IJurorCard {
30-
addressToQuery: `0x${string}`;
30+
searchParamAddress: `0x${string}`;
3131
}
3232

33-
const JurorCard: React.FC<IJurorCard> = ({ addressToQuery }) => {
34-
const { data } = useUserQuery(addressToQuery);
33+
const JurorCard: React.FC<IJurorCard> = ({ searchParamAddress }) => {
34+
const { data } = useUserQuery(searchParamAddress);
3535
const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0;
3636
const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0;
3737
const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0;
@@ -43,12 +43,12 @@ const JurorCard: React.FC<IJurorCard> = ({ addressToQuery }) => {
4343
<Header
4444
levelTitle={userLevelData.title}
4545
levelNumber={userLevelData.level}
46-
{...{ totalCoherentVotes, totalResolvedVotes, addressToQuery }}
46+
{...{ totalCoherentVotes, totalResolvedVotes, searchParamAddress }}
4747
/>
4848
<Card>
49-
<TopContent address={addressToQuery} {...{ totalResolvedDisputes }} />
49+
<TopContent address={searchParamAddress} {...{ totalResolvedDisputes }} />
5050
<Divider />
51-
<BottomContent {...{ userLevelData, totalCoherentVotes, totalResolvedVotes, addressToQuery }} />
51+
<BottomContent {...{ userLevelData, totalCoherentVotes, totalResolvedVotes, searchParamAddress }} />
5252
</Card>
5353
</Container>
5454
);

web/src/pages/Profile/Stakes/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,13 @@ const StyledLabel = styled.label`
3535
`;
3636

3737
interface IStakes {
38-
addressToQuery: `0x${string}`;
38+
searchParamAddress: `0x${string}`;
3939
}
4040

41-
const Stakes: React.FC<IStakes> = ({ addressToQuery }) => {
42-
const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(addressToQuery);
41+
const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => {
42+
const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(searchParamAddress);
4343
const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({
44-
args: [addressToQuery, BigInt(1)],
44+
args: [searchParamAddress, BigInt(1)],
4545
});
4646
const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
4747
const isStaked = stakedCourts && stakedCourts.length > 0;

web/src/pages/Profile/index.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useEffect } from "react";
22
import { Routes, Route, useNavigate, useSearchParams, useLocation, Navigate } from "react-router-dom";
33
import { useAccount } from "wagmi";
44
import styled, { css } from "styled-components";
@@ -69,7 +69,12 @@ const Profile: React.FC = () => {
6969
const { pathname } = useLocation();
7070
const navigate = useNavigate();
7171
const searchParamAddress = searchParams.get("address")?.toLowerCase();
72-
const addressToQuery = searchParamAddress || connectedAddress?.toLowerCase();
72+
73+
useEffect(() => {
74+
if (isConnected && !searchParamAddress && connectedAddress) {
75+
navigate(`${pathname}?address=${connectedAddress.toLowerCase()}`, { replace: true });
76+
}
77+
}, [isConnected, searchParamAddress, connectedAddress, pathname, navigate]);
7378

7479
const handleTabChange = (tabIndex: number) => {
7580
const selectedTab = TABS[tabIndex];
@@ -80,17 +85,17 @@ const Profile: React.FC = () => {
8085

8186
return (
8287
<Container>
83-
{isConnected || searchParamAddress ? (
88+
{searchParamAddress ? (
8489
<>
85-
<JurorCard {...{ addressToQuery }} />
90+
<JurorCard {...{ searchParamAddress }} />
8691
<StyledTabs
8792
currentValue={getTabIndex(pathname)}
8893
items={TABS}
8994
callback={(tabIndex: number) => handleTabChange(tabIndex)}
9095
/>
9196
<Routes>
92-
<Route path="stakes" element={<Stakes {...{ addressToQuery }} />} />
93-
<Route path="cases/:page/:order/:filter" element={<Cases {...{ addressToQuery }} />} />
97+
<Route path="stakes" element={<Stakes {...{ searchParamAddress }} />} />
98+
<Route path="cases/:page/:order/:filter" element={<Cases {...{ searchParamAddress }} />} />
9499
<Route path="votes" element={<Votes />} />
95100
<Route
96101
path="*"
@@ -100,13 +105,13 @@ const Profile: React.FC = () => {
100105
/>
101106
</Routes>
102107
</>
103-
) : (
108+
) : !isConnected ? (
104109
<ConnectWalletContainer>
105110
To see your profile, connect first
106111
<hr />
107112
<ConnectWallet />
108113
</ConnectWalletContainer>
109-
)}
114+
) : null}
110115
<FavoriteCases />
111116
<ScrollTop />
112117
</Container>

0 commit comments

Comments
 (0)