From 6c1bb66b109494be679fa80f39ecaba21de2258a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Galley?= <contact@kirkas.ch>
Date: Mon, 26 Aug 2024 09:06:23 -0400
Subject: [PATCH] disable refetch on window focus, fix hydration error (#933)

---
 apps/web/app/(basenames)/name/[username]/page.tsx     |  4 ++--
 .../src/components/Basenames/ProfilePromo/dynamic.tsx | 11 +++++++++++
 .../Basenames/UsernameProfileContext/index.tsx        |  6 +++++-
 apps/web/src/hooks/useReadBaseEnsTextRecords.ts       |  1 +
 apps/web/src/hooks/useSetPrimaryBasename.ts           |  3 +++
 apps/web/src/utils/usernames.ts                       |  2 +-
 6 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/components/Basenames/ProfilePromo/dynamic.tsx

diff --git a/apps/web/app/(basenames)/name/[username]/page.tsx b/apps/web/app/(basenames)/name/[username]/page.tsx
index 1e8910f..6e233ff 100644
--- a/apps/web/app/(basenames)/name/[username]/page.tsx
+++ b/apps/web/app/(basenames)/name/[username]/page.tsx
@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { BaseName } from '@coinbase/onchainkit/identity';
 import UsernameProfile from 'apps/web/src/components/Basenames/UsernameProfile';
 import ErrorsProvider from 'apps/web/contexts/Errors';
-import ProfilePromo from 'apps/web/src/components/Basenames/ProfilePromo';
+import DynamicProfilePromo from 'apps/web/src/components/Basenames/ProfilePromo/dynamic';
 
 export type UsernameProfileProps = {
   params: { username: BaseName };
@@ -57,7 +57,7 @@ export default async function Username({ params }: UsernameProfileProps) {
       <ProfileProviders username={username}>
         <main className={usernameProfilePageClasses}>
           <UsernameProfile />
-          <ProfilePromo />
+          <DynamicProfilePromo />
         </main>
       </ProfileProviders>
     </ErrorsProvider>
diff --git a/apps/web/src/components/Basenames/ProfilePromo/dynamic.tsx b/apps/web/src/components/Basenames/ProfilePromo/dynamic.tsx
new file mode 100644
index 0000000..83158bc
--- /dev/null
+++ b/apps/web/src/components/Basenames/ProfilePromo/dynamic.tsx
@@ -0,0 +1,11 @@
+'use client';
+import dynamic from 'next/dynamic';
+
+const DynamicProfilePromo = dynamic(
+  async () => import('apps/web/src/components/Basenames/ProfilePromo'),
+  {
+    ssr: false,
+  },
+);
+
+export default DynamicProfilePromo;
diff --git a/apps/web/src/components/Basenames/UsernameProfileContext/index.tsx b/apps/web/src/components/Basenames/UsernameProfileContext/index.tsx
index 966f2f3..ceac0ae 100644
--- a/apps/web/src/components/Basenames/UsernameProfileContext/index.tsx
+++ b/apps/web/src/components/Basenames/UsernameProfileContext/index.tsx
@@ -75,6 +75,7 @@ export default function UsernameProfileProvider({
     universalResolverAddress: USERNAME_L2_RESOLVER_ADDRESSES[basenameChain.id],
     query: {
       retry: false,
+      refetchOnWindowFocus: false,
     },
   });
 
@@ -83,7 +84,10 @@ export default function UsernameProfileProvider({
     data: profileOwnerAddress,
     isFetching: profileOwnerAddressIsFetching,
     refetch: profileOwnerRefetch,
-  } = useReadContract(buildBasenameOwnerContract(username));
+  } = useReadContract({
+    ...buildBasenameOwnerContract(username),
+    query: { refetchOnWindowFocus: false },
+  });
 
   // Owner Basename
   const { data: profileOwnerUsername } = useBaseEnsName({
diff --git a/apps/web/src/hooks/useReadBaseEnsTextRecords.ts b/apps/web/src/hooks/useReadBaseEnsTextRecords.ts
index 79d78f1..0e41943 100644
--- a/apps/web/src/hooks/useReadBaseEnsTextRecords.ts
+++ b/apps/web/src/hooks/useReadBaseEnsTextRecords.ts
@@ -73,6 +73,7 @@ export default function useReadBaseEnsTextRecords({
     queryFn: getExistingTextRecords,
     enabled: !!address && !!username,
     retry: false,
+    refetchOnWindowFocus: false,
   });
 
   useEffect(() => {
diff --git a/apps/web/src/hooks/useSetPrimaryBasename.ts b/apps/web/src/hooks/useSetPrimaryBasename.ts
index 1139cf4..0edf841 100644
--- a/apps/web/src/hooks/useSetPrimaryBasename.ts
+++ b/apps/web/src/hooks/useSetPrimaryBasename.ts
@@ -44,6 +44,9 @@ export default function useSetPrimaryBasename({ secondaryName }: UseSetPrimaryBa
   const { data: secondaryAddress } = useEnsAddress({
     name: secondaryName,
     universalResolverAddress: USERNAME_L2_RESOLVER_ADDRESSES[secondaryBaseChain.id],
+    query: {
+      refetchOnWindowFocus: false,
+    },
   });
 
   const usernamesHaveSameOwner = secondaryAddress === address;
diff --git a/apps/web/src/utils/usernames.ts b/apps/web/src/utils/usernames.ts
index 3da1f36..4e99dbf 100644
--- a/apps/web/src/utils/usernames.ts
+++ b/apps/web/src/utils/usernames.ts
@@ -408,7 +408,7 @@ export async function formatDefaultUsername(username: string | BaseName) {
     return formatBaseEthDomain(username, base.id);
   }
 
-  return username;
+  return username as BaseName;
 }
 
 export const getTokenIdFromBasename = (username: BaseName) => {