feat: add support for sharing your own profile, variable renaming

Author: kemuru

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

@@ -21,10 +21,10 @@ const StyledCasesDisplay = styled(CasesDisplay)`
 `;
 
 interface ICases {
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
-const Cases: React.FC<ICases> = ({ addressToQuery }) => {
+const Cases: React.FC<ICases> = ({ searchParamAddress }) => {
   const { page, order, filter } = useParams();
   const [searchParams] = useSearchParams();
   const location = useRootPath();
@@ -35,13 +35,13 @@ const Cases: React.FC<ICases> = ({ addressToQuery }) => {
   const disputeSkip = casesPerPage * (pageNumber - 1);
   const decodedFilter = decodeURIFilter(filter ?? "all");
   const { data: disputesData } = useMyCasesQuery(
-    addressToQuery,
+    searchParamAddress,
     disputeSkip,
     decodedFilter,
     order === "asc" ? OrderDirection.Asc : OrderDirection.Desc
   );
 
-  const { data: userData } = useUserQuery(addressToQuery, decodedFilter);
+  const { data: userData } = useUserQuery(searchParamAddress, decodedFilter);
   const totalCases = userData?.user?.disputes.length;
   const totalResolvedCases = parseInt(userData?.user?.totalResolvedDisputes);
   const totalPages = useMemo(

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

@@ -41,11 +41,11 @@ const tooltipMsg =
   "arbitration fees (ETH) + PNK redistribution between jurors.";
 
 interface IJurorRewards {
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
-const JurorRewards: React.FC<IJurorRewards> = ({ addressToQuery }) => {
-  const { data } = useUserQuery(addressToQuery);
+const JurorRewards: React.FC<IJurorRewards> = ({ searchParamAddress }) => {
+  const { data } = useUserQuery(searchParamAddress);
   const coinIds = [CoinIds.PNK, CoinIds.ETH];
   const { prices: pricesData } = useCoinPrice(coinIds);
 

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

@@ -46,21 +46,21 @@ interface IBottomContent {
   userLevelData: ILevelCriteria;
   totalCoherentVotes: number;
   totalResolvedVotes: number;
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
 const BottomContent: React.FC<IBottomContent> = ({
   userLevelData,
   totalCoherentVotes,
   totalResolvedVotes,
-  addressToQuery,
+  searchParamAddress,
 }) => {
   return (
     <Container>
       <LeftContent>
         <PixelArt level={userLevelData.level} width="189px" height="189px" />
         <Coherence isMiniGuide={false} {...{ userLevelData, totalCoherentVotes, totalResolvedVotes }} />
-        <JurorRewards {...{ addressToQuery }} />
+        <JurorRewards {...{ searchParamAddress }} />
       </LeftContent>
       <StakingRewards />
     </Container>

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

@@ -4,7 +4,6 @@ import styled from "styled-components";
 import { responsiveSize } from "styles/responsiveSize";
 
 import { useToggle } from "react-use";
-import { useSearchParams } from "react-router-dom";
 
 import XIcon from "svgs/socialmedia/x.svg";
 
@@ -52,24 +51,21 @@ interface IHeader {
   levelNumber: number;
   totalCoherentVotes: number;
   totalResolvedVotes: number;
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
 const Header: React.FC<IHeader> = ({
   levelTitle,
   levelNumber,
   totalCoherentVotes,
   totalResolvedVotes,
-  addressToQuery,
+  searchParamAddress,
 }) => {
   const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
-  const [searchParams] = useSearchParams();
-
   const coherencePercentage = parseFloat(((totalCoherentVotes / Math.max(totalResolvedVotes, 1)) * 100).toFixed(2));
   const courtUrl = window.location.origin;
   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}`;
   const xShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(xPostText)}`;
-  const searchParamAddress = searchParams.get("address")?.toLowerCase();
 
   return (
     <Container>

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

@@ -27,11 +27,11 @@ const Card = styled(_Card)`
 `;
 
 interface IJurorCard {
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
-const JurorCard: React.FC<IJurorCard> = ({ addressToQuery }) => {
-  const { data } = useUserQuery(addressToQuery);
+const JurorCard: React.FC<IJurorCard> = ({ searchParamAddress }) => {
+  const { data } = useUserQuery(searchParamAddress);
   const totalCoherentVotes = data?.user ? parseInt(data?.user?.totalCoherentVotes) : 0;
   const totalResolvedVotes = data?.user ? parseInt(data?.user?.totalResolvedVotes) : 0;
   const totalResolvedDisputes = data?.user ? parseInt(data?.user?.totalResolvedDisputes) : 0;
@@ -43,12 +43,12 @@ const JurorCard: React.FC<IJurorCard> = ({ addressToQuery }) => {
       <Header
         levelTitle={userLevelData.title}
         levelNumber={userLevelData.level}
-        {...{ totalCoherentVotes, totalResolvedVotes, addressToQuery }}
+        {...{ totalCoherentVotes, totalResolvedVotes, searchParamAddress }}
       />
       <Card>
-        <TopContent address={addressToQuery} {...{ totalResolvedDisputes }} />
+        <TopContent address={searchParamAddress} {...{ totalResolvedDisputes }} />
         <Divider />
-        <BottomContent {...{ userLevelData, totalCoherentVotes, totalResolvedVotes, addressToQuery }} />
+        <BottomContent {...{ userLevelData, totalCoherentVotes, totalResolvedVotes, searchParamAddress }} />
       </Card>
     </Container>
   );

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

@@ -35,13 +35,13 @@ const StyledLabel = styled.label`
 `;
 
 interface IStakes {
-  addressToQuery: `0x${string}`;
+  searchParamAddress: `0x${string}`;
 }
 
-const Stakes: React.FC<IStakes> = ({ addressToQuery }) => {
-  const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(addressToQuery);
+const Stakes: React.FC<IStakes> = ({ searchParamAddress }) => {
+  const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(searchParamAddress);
   const { data: jurorBalance } = useReadSortitionModuleGetJurorBalance({
-    args: [addressToQuery, BigInt(1)],
+    args: [searchParamAddress, BigInt(1)],
   });
   const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked }) => staked > 0);
   const isStaked = stakedCourts && stakedCourts.length > 0;

web/src/pages/Profile/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Routes, Route, useNavigate, useSearchParams, useLocation, Navigate } from "react-router-dom";
 import { useAccount } from "wagmi";
 import styled, { css } from "styled-components";
@@ -69,7 +69,12 @@ const Profile: React.FC = () => {
   const { pathname } = useLocation();
   const navigate = useNavigate();
   const searchParamAddress = searchParams.get("address")?.toLowerCase();
-  const addressToQuery = searchParamAddress || connectedAddress?.toLowerCase();
+
+  useEffect(() => {
+    if (isConnected && !searchParamAddress && connectedAddress) {
+      navigate(`${pathname}?address=${connectedAddress.toLowerCase()}`, { replace: true });
+    }
+  }, [isConnected, searchParamAddress, connectedAddress, pathname, navigate]);
 
   const handleTabChange = (tabIndex: number) => {
     const selectedTab = TABS[tabIndex];
@@ -80,17 +85,17 @@ const Profile: React.FC = () => {
 
   return (
     <Container>
-      {isConnected || searchParamAddress ? (
+      {searchParamAddress ? (
         <>
-          <JurorCard {...{ addressToQuery }} />
+          <JurorCard {...{ searchParamAddress }} />
           <StyledTabs
             currentValue={getTabIndex(pathname)}
             items={TABS}
             callback={(tabIndex: number) => handleTabChange(tabIndex)}
           />
           <Routes>
-            <Route path="stakes" element={<Stakes {...{ addressToQuery }} />} />
-            <Route path="cases/:page/:order/:filter" element={<Cases {...{ addressToQuery }} />} />
+            <Route path="stakes" element={<Stakes {...{ searchParamAddress }} />} />
+            <Route path="cases/:page/:order/:filter" element={<Cases {...{ searchParamAddress }} />} />
             <Route path="votes" element={<Votes />} />
             <Route
               path="*"
@@ -100,13 +105,13 @@ const Profile: React.FC = () => {
             />
           </Routes>
         </>
-      ) : (
+      ) : !isConnected ? (
         <ConnectWalletContainer>
           To see your profile, connect first
           <hr />
           <ConnectWallet />
         </ConnectWalletContainer>
-      )}
+      ) : null}
       <FavoriteCases />
       <ScrollTop />
     </Container>