fix: cleanup ssr markup mismatch errors (#26)

* fix: cleanup ssr markup mismatch errors

* feat: DRY with useIsMounted hook

* small nitpicks

* add notes about hydration workaround

Co-authored-by: Kevin Ingersoll <kingersoll@gmail.com>

packages/app/src/Inventory.tsx

@@ -4,6 +4,7 @@ import { useAccount, useNetwork } from "wagmi";
 import { useInventoryQuery } from "./codegen/subgraph";
 import { exampleNFTContract } from "./contracts";
 import { PendingIcon } from "./PendingIcon";
+import { useIsMounted } from "./useIsMounted";
 
 gql`
   query Inventory($owner: Bytes!) {
@@ -25,6 +26,14 @@ export const Inventory = () => {
     },
   });
 
+  // Temporarily workaround hydration issues where server-rendered markup
+  // doesn't match the client due to localStorage caching in wagmi
+  // See https://github.com/holic/web3-scaffold/pull/26
+  const isMounted = useIsMounted();
+  if (!isMounted) {
+    return null;
+  }
+
   if (!address) {
     return null;
   }

packages/app/src/pages/index.tsx

@@ -4,13 +4,16 @@ import type { NextPage } from "next";
 import { useExampleNFTContractRead } from "../contracts";
 import { Inventory } from "../Inventory";
 import { MintButton } from "../MintButton";
+import { useIsMounted } from "../useIsMounted";
 
 const HomePage: NextPage = () => {
   const totalSupply = useExampleNFTContractRead("totalSupply", {
     watch: true,
   });
   const maxSupply = useExampleNFTContractRead("MAX_SUPPLY");
 
+  const isMounted = useIsMounted();
+
   return (
     <div className="min-h-screen flex flex-col">
       <div className="self-end p-2">
@@ -19,9 +22,16 @@ const HomePage: NextPage = () => {
       <div className="flex-grow flex flex-col gap-4 items-center justify-center p-8 pb-[50vh]">
         <h1 className="text-4xl">Example NFT</h1>
 
+        {/* Use isMounted to temporarily workaround hydration issues where
+        server-rendered markup doesn't match the client due to localStorage
+        caching in wagmi. See https://github.com/holic/web3-scaffold/pull/26 */}
         <p>
-          {totalSupply.data?.toNumber().toLocaleString() ?? "??"}/
-          {maxSupply.data?.toNumber().toLocaleString() ?? "??"} minted
+          {(isMounted ? totalSupply.data?.toNumber().toLocaleString() : null) ??
+            "??"}
+          /
+          {(isMounted ? maxSupply.data?.toNumber().toLocaleString() : null) ??
+            "??"}{" "}
+          minted
         </p>
 
         <MintButton />

packages/app/src/useIsMounted.tsx

@@ -0,0 +1,9 @@
+import { useEffect, useState } from "react";
+
+export function useIsMounted() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  return mounted;
+}