From f9b6c7efc8b486bf8ddf68fa0db36487bfca4131 Mon Sep 17 00:00:00 2001
From: pindaroso <me@pindaroso.com>
Date: Wed, 16 Oct 2024 08:22:35 -0400
Subject: [PATCH] Improve window.location.hash change performance

---
 packages/app/src/app/page.tsx | 17 ++++++++++++-----
 pnpm-lock.yaml                |  1 +
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/app/page.tsx b/packages/app/src/app/page.tsx
index e8fcff5..cafc6cb 100644
--- a/packages/app/src/app/page.tsx
+++ b/packages/app/src/app/page.tsx
@@ -9,6 +9,7 @@ import { useTheme } from 'next-themes'
 import { Sun, Moon } from 'lucide-react'
 import toast from 'react-hot-toast'
 import Link from 'next/link'
+import { useParams } from 'next/navigation'
 
 import {
   Tooltip,
@@ -46,6 +47,7 @@ export default function Home() {
   const { publicKey, disconnect } = useWallet()
   const { setVisible } = useWalletModal()
   const { setTheme, theme } = useTheme()
+  const params = useParams()
 
   const { endpoint, setEndpoint } = useWalletContext()
 
@@ -54,6 +56,7 @@ export default function Home() {
   const [network, setNetwork] = useState(defaultNetwork)
   const [networkActive, setNetworkActive] = useState(false)
   const [walletConnected, setWalletConnected] = useState(false)
+  const [hash, setHash] = useState(window.location.hash)
 
   useEffect(() => {
     if (publicKey && !walletConnected) {
@@ -91,6 +94,10 @@ export default function Home() {
     }
   }, [publicKey, endpoint]) // Run effect when publicKey or endpoint changes
 
+  useEffect(() => {
+    setHash(window.location.hash)
+  }, [params])
+
   return (
     <div className="flex flex-col min-h-screen">
       <nav className="p-4">
@@ -222,19 +229,19 @@ export default function Home() {
       </nav>
       <main className="flex-grow">
         <div className="flex flex-col max-w-md mx-auto p-4 gap-2">
-          {window.location.hash === '#/cost' && (
+          {hash === '#/cost' && (
             <CalculateCostButton className="flex flex-col mt-2" />
           )}
-          {window.location.hash === '#/faucet' && (
+          {hash === '#/faucet' && (
             <AirdropButton className="flex flex-col mt-2" />
           )}
-          {window.location.hash === '#/mint' && (
+          {hash === '#/mint' && (
             <>
               <CreateMintButton className="flex flex-col mt-2" />
               <SendButton className="flex flex-col mt-2" />
             </>
           )}
-          {window.location.hash === '#/counter' && (
+          {hash === '#/counter' && (
             <>
               <CreateCounterButton className="flex flex-col mt-2" />
               <IncrementCounterButton className="flex flex-col mt-2" />
@@ -242,7 +249,7 @@ export default function Home() {
               <DeleteCounterButton className="flex flex-col mt-2" />
             </>
           )}
-          {window.location.hash === '' && (
+          {hash === '' && (
             <div className="flex flex-col mt-2">
               <h1 className="text-primary text-xl text-center">
                 Solana ZK Starter
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ee0bf6d..02a517b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8938,6 +8938,7 @@ packages:
   /is-plain-obj@2.1.0:
     resolution: {integrity: sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==}
     engines: {node: '>=8'}
+    requiresBuild: true
 
   /is-plain-object@2.0.4:
     resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}