fix(build): add suspense boundary, auth check

guildxyz · Jul 8, 2024 · 8577e1a · 8577e1a
1 parent 8418b4d
commit 8577e1a
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 34 deletions.
diff --git a/src/app/explorer/page.tsx b/src/app/explorer/page.tsx
@@ -19,6 +19,7 @@ import {
 } from "./atoms"
 import { useAtom, useAtomValue, useSetAtom } from "jotai"
 import { YourGuilds } from "@/components/YourGuilds"
+import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
 
 const HeaderBackground = () => {
   const isNavStuck = useAtomValue(isNavStuckAtom)
@@ -63,7 +64,7 @@ const Nav = () => {
 }
 
 const Page = () => {
-  const isAuthenticated = false
+  const { isWeb3Connected } = useWeb3ConnectionManager()
   const setIsNavStuck = useSetAtom(isNavStuckAtom)
   const setIsSearchStuck = useSetAtom(isSeachStuckAtom)
   const { ref: navToggleRef } = useIsStuck(setIsNavStuck)
@@ -83,7 +84,7 @@ const Page = () => {
           <div className="sticky top-0 z-10 my-1 py-2" ref={navToggleRef}>
             <div className="relative flex items-start justify-between">
               <Nav />
-              {isAuthenticated && (
+              {isWeb3Connected && (
                 <Button variant="ghost" className="space-x-2">
                   <Plus />
                   <span>Create guild</span>

diff --git a/src/v2/components/GuildSeachBar.tsx b/src/v2/components/GuildSeachBar.tsx
@@ -4,7 +4,7 @@ import { MagnifyingGlass, PushPin, Sparkle } from "@phosphor-icons/react"
 import { Input } from "./ui/Input"
 import { ToggleGroup, ToggleGroupItem } from "./ui/ToggleGroup"
 import { PrimitiveAtom, useSetAtom } from "jotai"
-import React, { useEffect, useState } from "react"
+import React, { Suspense, useEffect, useState } from "react"
 import { useSearchParams, usePathname } from "next/navigation"
 import { ActiveSection } from "app/explorer/types"
 import useDebouncedState from "hooks/useDebouncedState"
@@ -44,37 +44,39 @@ export const GuildSearchBar = ({
   }, [debouncedSearch, order, setGuildQuery, pathName])
 
   return (
-    <div className="relative flex flex-col gap-3 py-4 sm:flex-row sm:gap-0">
-      <Input
-        className="text-md relative h-12 grow rounded-xl border pl-10 pr-6 sm:rounded-r-none"
-        placeholder="Search verified guilds"
-        onChange={({ currentTarget }) => setSearch(currentTarget.value)}
-        value={search}
-      />
-      <div className="absolute left-4 flex h-12 items-center justify-center">
-        <MagnifyingGlass className="text-muted-foreground" />
+    <Suspense>
+      <div className="relative flex flex-col gap-3 py-4 sm:flex-row sm:gap-0">
+        <Input
+          className="text-md relative h-12 grow rounded-xl border pl-10 pr-6 sm:rounded-r-none"
+          placeholder="Search verified guilds"
+          onChange={({ currentTarget }) => setSearch(currentTarget.value)}
+          value={search}
+        />
+        <div className="absolute left-4 flex h-12 items-center justify-center">
+          <MagnifyingGlass className="text-muted-foreground" />
+        </div>
+        <ToggleGroup
+          type="single"
+          className="self-start sm:h-12 sm:rounded-r-lg sm:border sm:border-l-0 sm:bg-card sm:px-4"
+          size="sm"
+          variant="outline"
+          onValueChange={(value) => value && setOrder(value as Order)}
+          value={order}
+        >
+          <ToggleGroupItem value={Order.Featured} className="space-x-2" asChild>
+            <a href={`#${ActiveSection.ExploreGuilds}`}>
+              <PushPin />
+              <span>featured</span>
+            </a>
+          </ToggleGroupItem>
+          <ToggleGroupItem value={Order.Newest} className="space-x-2" asChild>
+            <a href={`#${ActiveSection.ExploreGuilds}`}>
+              <Sparkle />
+              <span>newest</span>
+            </a>
+          </ToggleGroupItem>
+        </ToggleGroup>
       </div>
-      <ToggleGroup
-        type="single"
-        className="self-start sm:h-12 sm:rounded-r-lg sm:border sm:border-l-0 sm:bg-card sm:px-4"
-        size="sm"
-        variant="outline"
-        onValueChange={(value) => value && setOrder(value as Order)}
-        value={order}
-      >
-        <ToggleGroupItem value={Order.Featured} className="space-x-2" asChild>
-          <a href={`#${ActiveSection.ExploreGuilds}`}>
-            <PushPin />
-            <span>featured</span>
-          </a>
-        </ToggleGroupItem>
-        <ToggleGroupItem value={Order.Newest} className="space-x-2" asChild>
-          <a href={`#${ActiveSection.ExploreGuilds}`}>
-            <Sparkle />
-            <span>newest</span>
-          </a>
-        </ToggleGroupItem>
-      </ToggleGroup>
-    </div>
+    </Suspense>
   )
 }