codedonus · pull · Oct 30, 2025 · Oct 30, 2025 · Oct 30, 2025
diff --git a/src/middleware.ts → src/_middleware.ts b/src/middleware.ts → src/_middleware.ts
diff --git a/src/app/explorer/_components/Explorer.tsx b/src/app/explorer/_components/Explorer.tsx
@@ -24,7 +24,7 @@ export const Explorer = ({ searchParams }: { searchParams: SearchParams }) => {
       <section id={ActiveSection.ExploreGuilds} className="flex flex-col gap-5">
         <h2 className="font-bold text-lg tracking-tight">Explore verified guilds</h2>
 
-        <div className="sticky top-12 z-10" ref={searchRef}>
+        <div ref={searchRef}>
           <Suspense>
             <GuildSearchBar />
           </Suspense>

diff --git a/src/app/explorer/_components/HeaderBackground.tsx b/src/app/explorer/_components/HeaderBackground.tsx
@@ -13,9 +13,9 @@ export const HeaderBackground = () => {
       className={cn(
         "fixed inset-x-0 top-0 z-10 h-0 bg-card shadow-md transition-all duration-200 dark:bg-background",
         {
-          "h-16": isNavStuck,
-          "h-[calc(theme(space.36)+theme(space.2))] bg-gradient-to-b from-card to-background sm:h-[calc(theme(space.28)-theme(space.2))] dark:from-background dark:to-card-secondary/50":
-            isSearchStuck,
+          "h-28": isNavStuck,
+          // "h-[calc(theme(space.36)+theme(space.2))] bg-gradient-to-b from-card to-background sm:h-[calc(theme(space.28)-theme(space.2))] dark:from-background dark:to-card-secondary/50":
+          //   isSearchStuck,
         }
       )}
     />

diff --git a/src/app/explorer/_components/StickyBar.tsx b/src/app/explorer/_components/StickyBar.tsx
@@ -7,7 +7,7 @@ import { cn } from "@/lib/utils"
 import { Plus } from "@phosphor-icons/react"
 import useIsStuck from "hooks/useIsStuck"
 import useScrollspy from "hooks/useScrollSpy"
-import { useAtom, useAtomValue, useSetAtom } from "jotai"
+import { useAtom, useAtomValue } from "jotai"
 import Link from "next/link"
 import { useEffect } from "react"
 import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms"
@@ -38,15 +38,16 @@ const Nav = () => {
     <ToggleGroup
       type="single"
       className="gap-2"
-      size={isSearchStuck ? "sm" : "lg"}
+      // size={isSearchStuck ? "sm" : "lg"}
+      size="lg"
       variant={isNavStuck ? "secondary" : "mono"}
       onValueChange={(value) => value && setActiveSection(value as ActiveSection)}
       value={activeSection}
     >
       <ToggleGroupItem
         value={ActiveSection.YourGuilds}
         className={cn("rounded-xl transition-all", {
-          "rounded-lg": isSearchStuck,
+          // "rounded-lg": isSearchStuck,
         })}
         onClick={() => smoothScrollTo(ActiveSection.YourGuilds)}
       >
@@ -55,7 +56,7 @@ const Nav = () => {
       <ToggleGroupItem
         value={ActiveSection.ExploreGuilds}
         className={cn("rounded-xl transition-all", {
-          "rounded-lg": isSearchStuck,
+          // "rounded-lg": isSearchStuck,
         })}
         onClick={() => smoothScrollTo(ActiveSection.ExploreGuilds)}
       >
@@ -92,7 +93,7 @@ const CreateGuildLink = () => {
 
 export const StickyBar = () => {
   const { isWeb3Connected } = useWeb3ConnectionManager()
-  const setIsNavStuck = useSetAtom(isNavStuckAtom)
+  const [isNavStuck, setIsNavStuck] = useAtom(isNavStuckAtom)
   const isSearchStuck = useAtomValue(isSearchStuckAtom)
   const { ref: navToggleRef } = useIsStuck(setIsNavStuck)
 
@@ -101,7 +102,8 @@ export const StickyBar = () => {
       className={cn(
         "sticky top-0 z-10 flex h-16 w-full items-center transition-all",
         {
-          "h-12": isSearchStuck,
+          // "h-12": isSearchStuck,
+          "pt-20": isNavStuck,
         }
       )}
       ref={navToggleRef}

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { dystopian, inter } from "fonts"
 import { type ReactNode, Suspense } from "react"
 import "./globals.css"
 import { OAuthResultToast } from "@/components/Providers/OAuthResultToast"
+import { ReadOnlyBanner } from "@/components/ReadOnlyBanner"
 import { TermsOfUseUpdateDialog } from "@/components/TermsOfUseUpdateDialog"
 import { cn } from "@/lib/utils"
 import type { Metadata, Viewport } from "next"
@@ -58,15 +59,19 @@ export default function RootLayout({ children }: RootLayoutProps) {
       <body className={cn(dystopian.variable, inter.variable)}>
         <NextTopLoader showSpinner={false} color="#eff6ff" height={3} />
 
-        <Providers>
-          {children}
+        <ReadOnlyBanner />
 
-          <TermsOfUseUpdateDialog />
-          <Suspense>
-            <PostHogPageViews />
-            <OAuthResultToast />
-          </Suspense>
-        </Providers>
+        <div className="relative top-12">
+          <Providers>
+            {children}
+
+            <TermsOfUseUpdateDialog />
+            <Suspense>
+              <PostHogPageViews />
+              <OAuthResultToast />
+            </Suspense>
+          </Providers>
+        </div>
 
         <canvas
           id="js-confetti-canvas"

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -21,6 +21,7 @@ import { AccountModal } from "@/components/Account/components/AccountModal"
 import { PurchaseHistoryDrawer } from "@/components/Account/components/PurchaseHistoryDrawer/PurchaseHistoryDrawer"
 import AppErrorBoundary from "@/components/AppErrorBoundary"
 import { IntercomProvider } from "@/components/Providers/IntercomProvider"
+import { ReadOnlyBanner } from "@/components/ReadOnlyBanner"
 import { TermsOfUseUpdateDialog } from "@/components/TermsOfUseUpdateDialog"
 import { Toaster } from "@/components/ui/Toaster"
 import { TooltipProvider } from "@/components/ui/Tooltip"
@@ -79,7 +80,10 @@ const App = ({
                     <LegacyPostHogProvider>
                       <IntercomProvider>
                         <AppErrorBoundary>
-                          <Component {...pageProps} />
+                          <ReadOnlyBanner />
+                          <div className="relative top-12">
+                            <Component {...pageProps} />
+                          </div>
                         </AppErrorBoundary>
 
                         <ClientOnly>

diff --git a/src/v2/components/Account/Account.tsx b/src/v2/components/Account/Account.tsx
@@ -17,8 +17,28 @@ import { Avatar } from "../ui/Avatar"
 import { Button } from "../ui/Button"
 import { Card } from "../ui/Card"
 import { Skeleton } from "../ui/Skeleton"
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip"
 
-export const Account = () => {
+export const Account = () => (
+  <Tooltip>
+    <TooltipTrigger>
+      <Card className="overflow-visible">
+        <Button
+          disabled
+          variant="ghost"
+          className="rounded-2xl"
+          leftIcon={<SignIn weight="bold" />}
+        >
+          Sign in
+        </Button>
+      </Card>
+    </TooltipTrigger>
+
+    <TooltipContent>Please use Guild v2</TooltipContent>
+  </Tooltip>
+)
+
+export const _Account = () => {
   const { address, isWeb3Connected } = useWeb3ConnectionManager()
   const setIsAccountModalOpen = useSetAtom(accountModalAtom)
   const setIsWalletSelectorModalOpen = useSetAtom(walletSelectorModalAtom)

diff --git a/src/v2/components/ReadOnlyBanner.tsx b/src/v2/components/ReadOnlyBanner.tsx
@@ -0,0 +1,15 @@
+import { ArrowRight } from "@phosphor-icons/react/dist/ssr"
+import { Anchor } from "./ui/Anchor"
+
+export const ReadOnlyBanner = () => (
+  <div className="fixed top-0 left-0 z-tooltip flex h-12 w-full items-center bg-yellow-600 p-2 font-medium text-white">
+    <span>Guild Classic is in read-only mode. Please use the new&nbsp;</span>
+    <Anchor
+      href="https://guild.xyz"
+      className="inline-flex items-center gap-1.5 font-bold"
+    >
+      <span>Guild.xyz website</span>
+      <ArrowRight weight="bold" />
+    </Anchor>
+  </div>
+)
diff --git a/src/v2/components/StickyAction.tsx b/src/v2/components/StickyAction.tsx
@@ -19,7 +19,7 @@ const StickyAction = ({ children }: PropsWithChildren) => {
         ref={ref}
         className={cn(
           "max-sm:fixed max-sm:right-0 max-sm:bottom-0 max-sm:left-0 max-sm:z-10 max-sm:border-t max-sm:bg-card max-sm:shadow-2xl",
-          "sm:sticky sm:top-3"
+          "sm:sticky sm:top-[calc(theme(space.12)+theme(space.3))]"
         )}
       >
         {children}
@@ -34,7 +34,7 @@ const DesktopHeaderBar = ({
 }: PropsWithChildren<{ isOpen: boolean }>) => (
   <div
     className={cn(
-      "fixed inset-x-0 top-0 z-10 h-0 bg-card shadow-md transition-all duration-200 max-sm:hidden dark:bg-background",
+      "fixed inset-x-0 top-12 z-10 h-0 bg-card shadow-md transition-all duration-200 max-sm:hidden dark:bg-background",
       {
         "sm:h-16": isOpen,
       }