meta: use zustand for persistant state

app/components/clear-cookie.tsx

@@ -2,23 +2,23 @@
 
 import React from "react"
 
-import { deleteCookie } from "@/app/actions"
-
-import { STORAGE_STORE, STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
+import { STORAGE_STORE } from "@/lib/constants/storage"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
+import { removeCookie } from "@/providers/state-provider/cookie-actions"
 
 export function ClearCookie() {
+  const { rememberMe } = useClientStore((state) => state)
   React.useEffect(() => {
     const handleBeforeUnload = () => {
-      const rememberMe = localStorage.getItem(STORAGE_REMEMBER_ME)
-      if (rememberMe !== "true") {
+      if (!rememberMe) {
         document.cookie = `${STORAGE_STORE}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
-        deleteCookie(STORAGE_STORE)
+        removeCookie(STORAGE_STORE)
       }
     }
     window.addEventListener("beforeunload", handleBeforeUnload)
     return () => {
       window.removeEventListener("beforeunload", handleBeforeUnload)
     }
-  }, [])
+  }, [rememberMe])
   return null
 }

app/components/header.tsx

@@ -1,14 +1,11 @@
 "use client"
 
-import React from "react"
-
 import Image from "next/image"
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 
 import { Menu } from "lucide-react"
 
-import { getBase } from "@/app/actions"
 import { ConnectWalletButton } from "@/app/components/connect-wallet-button"
 import { MobileNavSheet } from "@/app/components/mobile-nav-sheet"
 import { SidebarTrigger } from "@/app/components/wallet-sidebar/trigger"
@@ -22,25 +19,16 @@ import {
   ContextMenuTrigger,
 } from "@/components/ui/context-menu"
 
-import { WalletReadyState, useWallets } from "@/hooks/use-wallets"
+import { useWallets } from "@/hooks/use-wallets"
 import { cn } from "@/lib/utils"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 
-interface HeaderProps {
-  defaultBase: string
-}
-
-export function Header({ defaultBase }: HeaderProps) {
+export function Header() {
   const pathname = usePathname()
   const { walletReadyState, arbitrumWallet } = useWallets()
-  const [latestBase, setLatestBase] = React.useState(defaultBase)
-
-  React.useEffect(() => {
-    const getCurrentBase = async () => {
-      const base = await getBase()
-      setLatestBase(base)
-    }
-    getCurrentBase()
-  }, [pathname])
+  const {
+    order: { base },
+  } = useServerStore((state) => state)
 
   return (
     <header className="sticky top-0 z-10 h-20 min-w-full shrink-0 border-b bg-background">
@@ -118,7 +106,7 @@ export function Header({ defaultBase }: HeaderProps) {
               "flex items-center gap-2 text-muted-foreground transition-colors hover:text-foreground",
               pathname.startsWith("/trade") && "text-foreground",
             )}
-            href={`/trade/${latestBase}`}
+            href={`/trade/${base}`}
           >
             Trade
           </Link>

app/components/mobile-bottom-bar.tsx

@@ -6,24 +6,15 @@ import { Button } from "@/components/ui/button"
 import { useSignInAndConnect } from "@/hooks/use-sign-in-and-connect"
 import { useWallets } from "@/hooks/use-wallets"
 
-export function MobileBottomBar({
-  base,
-  isUSDCDenominated,
-}: {
-  base: string
-  isUSDCDenominated?: boolean
-}) {
+export function MobileBottomBar({ base }: { base: string }) {
   const { walletReadyState } = useWallets()
   const { handleClick, content, open, onOpenChange } = useSignInAndConnect()
   return (
     <div className="fixed bottom-0 z-10 min-w-full border-t bg-background p-4 lg:hidden">
       <div className="flex gap-2">
         {walletReadyState === "READY" ? (
           <>
-            <NewOrderStepper
-              base={base}
-              isUSDCDenominated={isUSDCDenominated}
-            >
+            <NewOrderStepper base={base}>
               <Button
                 className="font-extended"
                 variant="default"

app/components/track-last-visit.tsx

@@ -2,27 +2,14 @@
 
 import React from "react"
 
-import { useLocalStorage } from "usehooks-ts"
-
-import { STORAGE_LAST_VISIT } from "@/lib/constants/storage"
-
-export function useLastVisit() {
-  const [lastVisitTs, setLastVisitTs] = useLocalStorage<number>(
-    STORAGE_LAST_VISIT,
-    Date.now(),
-    {
-      initializeWithValue: false,
-    },
-  )
-  return { lastVisitTs, setLastVisitTs }
-}
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export function TrackLastVisit() {
-  const { setLastVisitTs } = useLastVisit()
+  const { setLastVisitTs } = useClientStore((state) => state)
 
   React.useEffect(() => {
     const handleBeforeUnload = () => {
-      setLastVisitTs(Date.now())
+      setLastVisitTs(Date.now().toString())
     }
 
     window.addEventListener("beforeunload", handleBeforeUnload)

app/components/wallet-sidebar/hooks/use-unviewed-fills.ts

@@ -2,14 +2,15 @@ import React from "react"
 
 import { OrderMetadata, useOrderHistory } from "@renegade-fi/react"
 
-import { useLastVisit } from "@/app/components/track-last-visit"
 import {
-  useViewedFills,
   generateFillIdentifier,
+  useViewedFills,
 } from "@/app/components/wallet-sidebar/hooks/use-viewed-fills"
 
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
+
 export function useRecentUnviewedFills() {
-  const { lastVisitTs } = useLastVisit()
+  const { lastVisitTs } = useClientStore((state) => state)
   const lastVisitBigInt = React.useMemo(
     () => (lastVisitTs ? BigInt(lastVisitTs) : null),
     [lastVisitTs],

app/components/wallet-sidebar/hooks/use-viewed-fills.ts

@@ -1,6 +1,4 @@
-import { useLocalStorage } from "usehooks-ts"
-
-import { STORAGE_VIEWED_FILLS } from "@/lib/constants/storage"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export type FillIdentifier = string
 
@@ -12,10 +10,7 @@ export function generateFillIdentifier(
 }
 
 export function useViewedFills() {
-  const [viewedFills, setViewedFills] = useLocalStorage<FillIdentifier[]>(
-    STORAGE_VIEWED_FILLS,
-    [],
-  )
+  const { viewedFills, setViewedFills } = useClientStore((state) => state)
 
   const markFillAsViewed = (fillId: FillIdentifier) => {
     if (!viewedFills.includes(fillId)) {

app/components/wallet-sidebar/renegade-wallet-actions-dropdown.tsx

@@ -1,10 +1,9 @@
-import { useConfig, useStatus } from "@renegade-fi/react"
+import { useConfig } from "@renegade-fi/react"
 import {
   disconnect as disconnectRenegade,
   refreshWallet,
 } from "@renegade-fi/react/actions"
-import { Clipboard, RefreshCw, UserCheck, SquareX } from "lucide-react"
-import { useLocalStorage } from "usehooks-ts"
+import { Clipboard, RefreshCw, SquareX, UserCheck } from "lucide-react"
 import { useDisconnect } from "wagmi"
 
 import { Checkbox } from "@/components/ui/checkbox"
@@ -16,8 +15,8 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Label } from "@/components/ui/label"
 
-import { useWallets, type Wallet } from "@/hooks/use-wallets"
-import { STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
+import { type Wallet } from "@/hooks/use-wallets"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 interface RenegadeWalletActionsDropdownProps {
   wallet: Wallet
@@ -28,13 +27,7 @@ export function RenegadeWalletActionsDropdown({
 }: RenegadeWalletActionsDropdownProps) {
   const config = useConfig()
   const { disconnect } = useDisconnect()
-  const [rememberMe, setRememberMe] = useLocalStorage(
-    STORAGE_REMEMBER_ME,
-    false,
-    {
-      initializeWithValue: false,
-    },
-  )
+  const { rememberMe, setRememberMe } = useClientStore((state) => state)
 
   const handleRefreshWallet = async () => {
     if (wallet.isConnected) {

app/layout.tsx

@@ -24,12 +24,12 @@ import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar"
 import { Toaster } from "@/components/ui/sonner"
 import { TooltipProvider } from "@/components/ui/tooltip"
 
-import { STORAGE_BASE } from "@/lib/constants/storage"
 import { constructMetadata } from "@/lib/utils"
 import { isTestnet } from "@/lib/viem"
 import { RenegadeProvider } from "@/providers/renegade-provider/renegade-provider"
-import { SideProvider } from "@/providers/side-provider"
 import { SolanaProvider } from "@/providers/solana-provider"
+import { ClientStoreProvider } from "@/providers/state-provider/client-store-provider.tsx"
+import { ServerStoreProvider } from "@/providers/state-provider/server-store-provider"
 import { ThemeProvider } from "@/providers/theme-provider"
 import { WagmiProvider } from "@/providers/wagmi-provider/wagmi-provider"
 
@@ -95,7 +95,6 @@ export default async function RootLayout({
 
   const cookieStore = await cookies()
   const defaultOpen = cookieStore.get("sidebar:state")?.value === "true"
-  const defaultBase = cookieStore.get(STORAGE_BASE)?.value || "WETH"
 
   return (
     <html
@@ -111,46 +110,48 @@ export default async function RootLayout({
           attribute="class"
           defaultTheme="dark"
         >
-          <RenegadeProvider cookieString={cookieString}>
-            <SolanaProvider>
-              <WagmiProvider cookieString={cookieString}>
-                <SidebarProvider defaultOpen={defaultOpen}>
-                  <TrackLastVisit />
-                  <WalletSidebarSync />
-                  <TailwindIndicator />
-                  <TooltipProvider
-                    delayDuration={0}
-                    skipDelayDuration={0}
-                  >
-                    <SideProvider cookieString={cookieString}>
-                      <SidebarInset className="max-w-full">
-                        <Header defaultBase={defaultBase} />
-                        {children}
-                        <Footer />
-                      </SidebarInset>
-                    </SideProvider>
-                  </TooltipProvider>
-                  <Toaster
-                    className="pointer-events-auto"
-                    theme="light"
-                    toastOptions={{ duration: 5000 }}
-                    visibleToasts={MAX_ORDERS}
-                  />
-                  <InvalidateQueries />
-                  <OrderToaster />
-                  <TaskToaster />
-                  <ReactQueryDevtools
-                    buttonPosition="bottom-left"
-                    initialIsOpen={false}
-                  />
-                  <Faucet />
-                  <LazyDatadog />
-                  <ClearCookie />
-                  <WalletSidebar side="right" />
-                </SidebarProvider>
-              </WagmiProvider>
-            </SolanaProvider>
-          </RenegadeProvider>
+          <ServerStoreProvider cookieString={cookieString}>
+            <ClientStoreProvider>
+              <RenegadeProvider cookieString={cookieString}>
+                <SolanaProvider>
+                  <WagmiProvider cookieString={cookieString}>
+                    <SidebarProvider defaultOpen={defaultOpen}>
+                      <TrackLastVisit />
+                      <WalletSidebarSync />
+                      <TailwindIndicator />
+                      <TooltipProvider
+                        delayDuration={0}
+                        skipDelayDuration={0}
+                      >
+                        <SidebarInset className="max-w-full">
+                          <Header />
+                          {children}
+                          <Footer />
+                        </SidebarInset>
+                      </TooltipProvider>
+                      <Toaster
+                        className="pointer-events-auto"
+                        theme="light"
+                        toastOptions={{ duration: 5000 }}
+                        visibleToasts={MAX_ORDERS}
+                      />
+                      <InvalidateQueries />
+                      <OrderToaster />
+                      <TaskToaster />
+                      <ReactQueryDevtools
+                        buttonPosition="bottom-left"
+                        initialIsOpen={false}
+                      />
+                      <Faucet />
+                      <LazyDatadog />
+                      <ClearCookie />
+                      <WalletSidebar side="right" />
+                    </SidebarProvider>
+                  </WagmiProvider>
+                </SolanaProvider>
+              </RenegadeProvider>
+            </ClientStoreProvider>
+          </ServerStoreProvider>
         </ThemeProvider>
         <Analytics />
         <Zendesk />