Fix @/hooks and add suspense so nextjs can handle useSearchParams (#212)

ChewingGlass · web-flow · commit bb52adc3503b · 2025-03-06T13:14:00.000-06:00
* Fix @/hooks

* Fix build for useSearchParams by adding suspense
diff --git a/components.json b/components.json
@@ -12,6 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
+    "utils": "@/lib/utils",
+    "hooks": "@/hooks"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import { formMetaTags } from "@/lib/utils";
 import { Providers } from "@/providers/providers";
 import { Inter } from "next/font/google";
-import React from "react";
+import React, { Suspense } from "react";
 import { Toaster } from "sonner";
 import "./globals.css";
 
@@ -18,20 +18,22 @@ export default function RootLayout({
       <body
         className={`${inter.className} dark text-foreground bg-background w-full min-h-screen`}
       >
-        <main className="flex flex-col min-h-screen w-full">
-          <Providers>{children}</Providers>
-          <Toaster
+        <Suspense>
+          <main className="flex flex-col min-h-screen w-full">
+            <Providers>{children}</Providers>
+            <Toaster
             toastOptions={{
               unstyled: false,
               classNames: {
                 toast:
                   "!bg-slate-500 border-2 !border-slate-900/40 !text-foreground",
                 error:
-                  "!bg-destructive !border-destructive/40 !text-foreground",
-              },
-            }}
-          />
-        </main>
+                    "!bg-destructive !border-destructive/40 !text-foreground",
+                },
+              }}
+            />
+          </main>
+        </Suspense>
       </body>
     </html>
   );
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
@@ -0,0 +1,14 @@
+import { useWallet as useWalletAdapter } from "@solana/wallet-adapter-react";
+import { PublicKey } from "@solana/web3.js";
+import { useSearchParams } from "next/navigation";
+
+export const useWallet = () => {
+  const searchParams = useSearchParams();
+  const { publicKey, ...rest } = useWalletAdapter();
+  return {
+    publicKey: searchParams.get("viewAs")
+      ? new PublicKey(searchParams.get("viewAs") as string)
+      : publicKey,
+    ...rest,
+  };
+};

Original file line number	Diff line number	Diff line change
`@@ -12,6 +12,7 @@`
`12`	`12`	`},`
`13`	`13`	`"aliases": {`
`14`	`14`	`"components": "@/components",`
`15`		`- "utils": "@/lib/utils"`
	`15`	`+ "utils": "@/lib/utils",`
	`16`	`+ "hooks": "@/hooks"`
`16`	`17`	`}`
`17`	`18`	`}`