bugfix: get rid of hydration error for user profile

jk-labs-inc · Sep 10, 2024 · 8834d78 · 8834d78
1 parent 9570ac3
commit 8834d78
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 8 deletions.
diff --git a/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx b/packages/react-app-revamp/components/Header/CreateFlowHeader/DesktopLayout/index.tsx
@@ -4,7 +4,7 @@ import { ROUTE_CREATE_CONTEST, ROUTE_VIEW_LIVE_CONTESTS, ROUTE_VIEW_USER } from
 import { PageAction } from "@hooks/useCreateFlowAction/store";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 interface CreateFlowHeaderDesktopLayoutProps {
   address: string;
@@ -19,8 +19,13 @@ const CreateFlowHeaderDesktopLayout: FC<CreateFlowHeaderDesktopLayoutProps> = ({
   isSuccess,
   pageAction,
 }) => {
+  const [isClient, setIsClient] = useState(false);
   const router = useRouter();
 
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   const handleNavigation = (action: "play" | "create") => {
     if (action === "play") {
       router.push(ROUTE_VIEW_LIVE_CONTESTS);
@@ -56,7 +61,7 @@ const CreateFlowHeaderDesktopLayout: FC<CreateFlowHeaderDesktopLayoutProps> = ({
 
       {!isLoading && !isSuccess && (
         <div className="flex items-center gap-3">
-          {address && <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />}
+          {isClient && address && <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />}
           <ConnectButtonCustom />
         </div>
       )}

diff --git a/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx b/packages/react-app-revamp/components/Header/MainHeader/DesktopLayout/index.tsx
@@ -2,14 +2,20 @@ import { ConnectButtonCustom } from "@components/UI/ConnectButton";
 import UserProfileDisplay from "@components/UI/UserProfileDisplay";
 import { ROUTE_CREATE_CONTEST, ROUTE_VIEW_LIVE_CONTESTS, ROUTE_VIEW_USER } from "@config/routes";
 import Link from "next/link";
-import { FC } from "react";
+import { FC, useEffect, useState } from "react";
 
 interface MainHeaderDesktopLayoutProps {
   isConnected: boolean;
   address: string;
 }
 
 const MainHeaderDesktopLayout: FC<MainHeaderDesktopLayoutProps> = ({ isConnected, address }) => {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <header className="flex items-center justify-between pl-[120px] pr-[60px] mt-8">
       <Link href="/">
@@ -31,11 +37,7 @@ const MainHeaderDesktopLayout: FC<MainHeaderDesktopLayoutProps> = ({ isConnected
       </div>
 
       <div className="flex gap-3 items-center">
-        {address ? (
-          <Link href={`${ROUTE_VIEW_USER.replace("[address]", address)}`}>
-            <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion />
-          </Link>
-        ) : null}
+        {isClient && address ? <UserProfileDisplay ethereumAddress={address} shortenOnFallback avatarVersion /> : null}
         <ConnectButtonCustom />
       </div>
     </header>