From 2ea9933b82287765bfa40212a1b3cb48e40e65ae Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Mon, 18 Nov 2024 13:03:01 -0800
Subject: [PATCH 1/4] meta: create server store for state needed at ssr-time

---
 app/layout.tsx                                | 83 ++++++++++---------
 app/zustand/page-client.tsx                   | 31 +++++++
 app/zustand/page.tsx                          |  5 ++
 lib/constants/storage.ts                      |  2 +
 package.json                                  |  4 +-
 pnpm-lock.yaml                                | 27 ++++++
 providers/state-provider/cookie-actions.ts    | 22 +++++
 providers/state-provider/cookie-storage.ts    | 46 ++++++++++
 .../deferred-state-provider.tsx               |  0
 .../state-provider/server-store-provider.tsx  | 53 ++++++++++++
 providers/state-provider/server-store.ts      | 65 +++++++++++++++
 providers/state-provider/state-provider.tsx   |  0
 12 files changed, 296 insertions(+), 42 deletions(-)
 create mode 100644 app/zustand/page-client.tsx
 create mode 100644 app/zustand/page.tsx
 create mode 100644 providers/state-provider/cookie-actions.ts
 create mode 100644 providers/state-provider/cookie-storage.ts
 create mode 100644 providers/state-provider/deferred-state-provider.tsx
 create mode 100644 providers/state-provider/server-store-provider.tsx
 create mode 100644 providers/state-provider/server-store.ts
 create mode 100644 providers/state-provider/state-provider.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index a4356a98..021ce179 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -30,6 +30,7 @@ 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 { ServerStoreProvider } from "@/providers/state-provider/server-store-provider"
 import { ThemeProvider } from "@/providers/theme-provider"
 import { WagmiProvider } from "@/providers/wagmi-provider/wagmi-provider"
 
@@ -111,46 +112,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}>
+            <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>
         </ThemeProvider>
         <Analytics />
         <Zendesk />
diff --git a/app/zustand/page-client.tsx b/app/zustand/page-client.tsx
new file mode 100644
index 00000000..b2451c34
--- /dev/null
+++ b/app/zustand/page-client.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+
+import { Side } from "@/lib/constants/protocol"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
+
+export const PageClient = () => {
+  const { order, setSide, setAmount } = useServerStore((state) => state)
+
+  return (
+    <div>
+      Order: {JSON.stringify(order)}
+      <hr />
+      <Button
+        type="button"
+        onClick={() =>
+          void setSide(order.side === Side.BUY ? Side.SELL : Side.BUY)
+        }
+      >
+        Toggle Side
+      </Button>
+      <Button
+        type="button"
+        onClick={() => void setAmount(Math.random().toString())}
+      >
+        Random Amount
+      </Button>
+    </div>
+  )
+}
diff --git a/app/zustand/page.tsx b/app/zustand/page.tsx
new file mode 100644
index 00000000..010d2656
--- /dev/null
+++ b/app/zustand/page.tsx
@@ -0,0 +1,5 @@
+import { PageClient } from "@/app/zustand/page-client"
+
+export default function Page() {
+  return <PageClient />
+}
diff --git a/lib/constants/storage.ts b/lib/constants/storage.ts
index 7baca97e..9fdaa426 100644
--- a/lib/constants/storage.ts
+++ b/lib/constants/storage.ts
@@ -14,3 +14,5 @@ export const STORAGE_DEPOSIT_BANNER = `${STORAGE_PREFIX}.deposit-banner`
 export const STORAGE_FAVORITES = `${STORAGE_PREFIX}.favorites`
 export const STORAGE_LAST_VISIT = `${STORAGE_PREFIX}.last-visit`
 export const STORAGE_VIEWED_FILLS = `${STORAGE_PREFIX}.viewed-fills`
+
+export const STORAGE_SERVER_STORE = `${STORAGE_PREFIX}.server-store`
diff --git a/package.json b/package.json
index 6bdb0995..465d5f5c 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,8 @@
     "vaul": "0.9.1",
     "viem": "~2.15.1",
     "wagmi": "~2.12.11",
-    "zod": "^3.23.8"
+    "zod": "^3.23.8",
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
     "@tanstack/react-query-devtools": "5.29.2",
@@ -103,7 +104,6 @@
       "@types/react": "npm:types-react@19.0.0-rc.1",
       "@types/react-dom": "npm:types-react-dom@19.0.0-rc.1",
       "react-is": "^19.0.0-beta-26f2496093-20240514"
-
     }
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 653fe23c..21fd5d80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -208,6 +208,9 @@ importers:
       zod:
         specifier: ^3.23.8
         version: 3.23.8
+      zustand:
+        specifier: ^5.0.1
+        version: 5.0.1(react@19.0.0-rc-66855b96-20241106)(types-react@19.0.0-rc.1)(use-sync-external-store@1.2.2(react@19.0.0-rc-66855b96-20241106))
     devDependencies:
       '@tanstack/react-query-devtools':
         specifier: 5.29.2
@@ -8135,6 +8138,24 @@ packages:
       react:
         optional: true
 
+  zustand@5.0.1:
+    resolution: {integrity: sha512-pRET7Lao2z+n5R/HduXMio35TncTlSW68WsYBq2Lg1ASspsNGjpwLAsij3RpouyV6+kHMwwwzP0bZPD70/Jx/w==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': npm:types-react@19.0.0-rc.1
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@adraffy/ens-normalize@1.10.0': {}
@@ -17831,3 +17852,9 @@ snapshots:
     optionalDependencies:
       '@types/react': types-react@19.0.0-rc.1
       react: 19.0.0-rc-66855b96-20241106
+
+  zustand@5.0.1(react@19.0.0-rc-66855b96-20241106)(types-react@19.0.0-rc.1)(use-sync-external-store@1.2.2(react@19.0.0-rc-66855b96-20241106)):
+    optionalDependencies:
+      '@types/react': types-react@19.0.0-rc.1
+      react: 19.0.0-rc-66855b96-20241106
+      use-sync-external-store: 1.2.2(react@19.0.0-rc-66855b96-20241106)
diff --git a/providers/state-provider/cookie-actions.ts b/providers/state-provider/cookie-actions.ts
new file mode 100644
index 00000000..2511e00d
--- /dev/null
+++ b/providers/state-provider/cookie-actions.ts
@@ -0,0 +1,22 @@
+"use server"
+
+import { cookies } from "next/headers"
+
+export async function setCookie(name: string, value: string): Promise<void> {
+  const cookieStore = await cookies()
+  cookieStore.set(name, value, {
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    path: "/",
+  })
+}
+
+export async function getCookie(name: string): Promise<string | null> {
+  const cookieStore = await cookies()
+  return cookieStore.get(name)?.value ?? null
+}
+
+export async function removeCookie(name: string): Promise<void> {
+  const cookieStore = await cookies()
+  cookieStore.delete(name)
+}
diff --git a/providers/state-provider/cookie-storage.ts b/providers/state-provider/cookie-storage.ts
new file mode 100644
index 00000000..51de1251
--- /dev/null
+++ b/providers/state-provider/cookie-storage.ts
@@ -0,0 +1,46 @@
+import { deserialize, parseCookie } from "wagmi"
+import { StateStorage } from "zustand/middleware"
+
+import {
+  getCookie,
+  setCookie,
+  removeCookie,
+} from "@/providers/state-provider/cookie-actions"
+import { ServerState } from "@/providers/state-provider/server-store"
+
+// Create a storage object that uses server actions
+export const createCookieStorage = (): StateStorage => {
+  return {
+    getItem: async (name: string): Promise<string | null> => {
+      try {
+        return await getCookie(name)
+      } catch (err) {
+        console.error("Error getting cookie:", err)
+        return null
+      }
+    },
+
+    setItem: async (name: string, value: string): Promise<void> => {
+      try {
+        await setCookie(name, value)
+      } catch (err) {
+        console.error("Error setting cookie:", err)
+      }
+    },
+
+    removeItem: async (name: string): Promise<void> => {
+      try {
+        await removeCookie(name)
+      } catch (err) {
+        console.error("Error removing cookie:", err)
+      }
+    },
+  }
+}
+
+export function cookieToInitialState(key: string, cookie?: string | null) {
+  if (!cookie) return undefined
+  const parsed = parseCookie(cookie, key)
+  if (!parsed) return undefined
+  return deserialize<{ state: ServerState }>(parsed).state
+}
diff --git a/providers/state-provider/deferred-state-provider.tsx b/providers/state-provider/deferred-state-provider.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/providers/state-provider/server-store-provider.tsx b/providers/state-provider/server-store-provider.tsx
new file mode 100644
index 00000000..6ee9938b
--- /dev/null
+++ b/providers/state-provider/server-store-provider.tsx
@@ -0,0 +1,53 @@
+"use client"
+
+import { createContext, useContext, useRef, type ReactNode } from "react"
+
+import { useStore } from "zustand"
+
+import { STORAGE_SERVER_STORE } from "@/lib/constants/storage"
+import { cookieToInitialState } from "@/providers/state-provider/cookie-storage"
+import {
+  createServerStore,
+  initServerStore,
+  type ServerStore,
+} from "@/providers/state-provider/server-store"
+
+export type ServerStoreApi = ReturnType<typeof createServerStore>
+
+const ServerStoreContext = createContext<ServerStoreApi | undefined>(undefined)
+
+export interface ServerStoreProviderProps {
+  children: ReactNode
+  cookieString?: string
+}
+
+export function ServerStoreProvider({
+  children,
+  cookieString,
+}: ServerStoreProviderProps) {
+  const storeRef = useRef<ServerStoreApi>(undefined)
+
+  if (!storeRef.current) {
+    const initialState = cookieToInitialState(
+      STORAGE_SERVER_STORE,
+      cookieString ?? "",
+    )
+    storeRef.current = createServerStore(initialState ?? initServerStore())
+  }
+
+  return (
+    <ServerStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ServerStoreContext.Provider>
+  )
+}
+
+export function useServerStore<T>(selector: (store: ServerStore) => T): T {
+  const store = useContext(ServerStoreContext)
+
+  if (!store) {
+    throw new Error("useServerStore must be used within ServerStoreProvider")
+  }
+
+  return useStore(store, selector)
+}
diff --git a/providers/state-provider/server-store.ts b/providers/state-provider/server-store.ts
new file mode 100644
index 00000000..ec6f21ce
--- /dev/null
+++ b/providers/state-provider/server-store.ts
@@ -0,0 +1,65 @@
+// src/stores/counter-store.ts
+import { createJSONStorage, persist } from "zustand/middleware"
+import { createStore } from "zustand/vanilla"
+
+import { Side } from "@/lib/constants/protocol"
+import { STORAGE_SERVER_STORE } from "@/lib/constants/storage"
+import { createCookieStorage } from "@/providers/state-provider/cookie-storage"
+
+// State that must be available during Server Component rendering
+
+export type ServerState = {
+  order: {
+    side: Side
+    amount: string
+    currency: "base" | "quote"
+    base: string
+  }
+}
+
+export type ServerActions = {
+  setSide: (side: Side) => void
+  setAmount: (amount: string) => void
+  setCurrency: (currency: "base" | "quote") => void
+  setBase: (base: string) => void
+}
+
+export type ServerStore = ServerState & ServerActions
+
+export const initServerStore = (): ServerState => {
+  return {
+    order: { side: Side.BUY, amount: "100", currency: "base", base: "SOL" },
+  }
+}
+
+export const defaultInitState: ServerState = {
+  order: { side: Side.BUY, amount: "100", currency: "base", base: "SOL" },
+}
+
+export const createServerStore = (
+  initState: ServerState = defaultInitState,
+) => {
+  return createStore<ServerStore>()(
+    persist(
+      (set) => ({
+        ...initState,
+        setSide: (side: Side) =>
+          set((state) => ({ order: { ...state.order, side } })),
+        setAmount: (amount: string) =>
+          set((state) => ({ order: { ...state.order, amount } })),
+        setCurrency: (currency: "base" | "quote") =>
+          set((state) => ({ order: { ...state.order, currency } })),
+        setBase: (base: string) =>
+          set((state) => ({ order: { ...state.order, base } })),
+      }),
+      {
+        name: STORAGE_SERVER_STORE,
+        storage: createJSONStorage(() => createCookieStorage()),
+        // Optional: Add custom serialization/deserialization
+        partialize: (state) => ({
+          order: state.order,
+        }),
+      },
+    ),
+  )
+}
diff --git a/providers/state-provider/state-provider.tsx b/providers/state-provider/state-provider.tsx
new file mode 100644
index 00000000..e69de29b

From ecda18a5f8ab8d96a28bf8f365cbeeb09458cf8a Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:27:08 -0800
Subject: [PATCH 2/4] meta: migrate to new storage

---
 app/actions.ts                                | 15 ------
 app/api/cookie/set-base/route.ts              | 19 -------
 app/components/clear-cookie.tsx               |  5 +-
 app/components/header.tsx                     | 26 +++-------
 app/components/mobile-bottom-bar.tsx          | 13 +----
 app/layout.tsx                                | 15 ++----
 app/trade/[base]/actions.ts                   | 28 ----------
 .../new-order/amount-shortcut-button.tsx      | 18 +++----
 .../components/new-order/new-order-form.tsx   | 31 ++++++-----
 .../components/new-order/new-order-panel.tsx  |  9 +---
 app/trade/[base]/page-client.tsx              | 46 +++++-----------
 app/trade/[base]/page.tsx                     | 26 +---------
 app/zustand/page-client.tsx                   | 31 -----------
 app/zustand/page.tsx                          |  5 --
 .../mobile/new-order-stepper.tsx              |  2 -
 .../order-stepper/mobile/steps/default.tsx    |  1 -
 components/dialogs/transfer/default-form.tsx  |  4 +-
 components/dialogs/transfer/usdc-form.tsx     |  4 +-
 components/dialogs/transfer/weth-form.tsx     |  4 +-
 hooks/use-order-value.ts                      | 10 ++--
 hooks/use-predicted-fees.ts                   |  6 +--
 lib/constants/storage.ts                      | 10 +---
 middleware.ts                                 |  9 ++--
 providers/side-provider.tsx                   | 52 -------------------
 providers/state-provider/cookie-storage.ts    |  3 +-
 providers/state-provider/server-store.ts      | 18 ++++---
 26 files changed, 92 insertions(+), 318 deletions(-)
 delete mode 100644 app/actions.ts
 delete mode 100644 app/api/cookie/set-base/route.ts
 delete mode 100644 app/trade/[base]/actions.ts
 delete mode 100644 app/zustand/page-client.tsx
 delete mode 100644 app/zustand/page.tsx
 delete mode 100644 providers/side-provider.tsx

diff --git a/app/actions.ts b/app/actions.ts
deleted file mode 100644
index ea3fb2b9..00000000
--- a/app/actions.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-"use server"
-
-import { cookies } from "next/headers"
-
-import { STORAGE_BASE } from "@/lib/constants/storage"
-
-export async function deleteCookie(name: string): Promise<void> {
-  const cookieStore = await cookies()
-  cookieStore.delete(name)
-}
-
-export async function getBase(): Promise<string> {
-  const cookieStore = await cookies()
-  return cookieStore.get(STORAGE_BASE)?.value || "WETH"
-}
diff --git a/app/api/cookie/set-base/route.ts b/app/api/cookie/set-base/route.ts
deleted file mode 100644
index 7c90da88..00000000
--- a/app/api/cookie/set-base/route.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { NextRequest, NextResponse } from "next/server"
-
-import { STORAGE_BASE } from "@/lib/constants/storage"
-
-export const runtime = "edge"
-
-export async function POST(request: NextRequest) {
-  const base = await request.text()
-
-  const response = new NextResponse(null, { status: 204 })
-
-  response.cookies.set(STORAGE_BASE, base, {
-    path: "/",
-    sameSite: "lax",
-    secure: process.env.NODE_ENV === "production",
-  })
-
-  return response
-}
diff --git a/app/components/clear-cookie.tsx b/app/components/clear-cookie.tsx
index af806298..db4d6211 100644
--- a/app/components/clear-cookie.tsx
+++ b/app/components/clear-cookie.tsx
@@ -2,9 +2,8 @@
 
 import React from "react"
 
-import { deleteCookie } from "@/app/actions"
-
 import { STORAGE_STORE, STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
+import { removeCookie } from "@/providers/state-provider/cookie-actions"
 
 export function ClearCookie() {
   React.useEffect(() => {
@@ -12,7 +11,7 @@ export function ClearCookie() {
       const rememberMe = localStorage.getItem(STORAGE_REMEMBER_ME)
       if (rememberMe !== "true") {
         document.cookie = `${STORAGE_STORE}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`
-        deleteCookie(STORAGE_STORE)
+        removeCookie(STORAGE_STORE)
       }
     }
     window.addEventListener("beforeunload", handleBeforeUnload)
diff --git a/app/components/header.tsx b/app/components/header.tsx
index a7bb6b45..148d9490 100644
--- a/app/components/header.tsx
+++ b/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>
diff --git a/app/components/mobile-bottom-bar.tsx b/app/components/mobile-bottom-bar.tsx
index 8e5b0bd1..8b72b392 100644
--- a/app/components/mobile-bottom-bar.tsx
+++ b/app/components/mobile-bottom-bar.tsx
@@ -6,13 +6,7 @@ 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 (
@@ -20,10 +14,7 @@ export function MobileBottomBar({
       <div className="flex gap-2">
         {walletReadyState === "READY" ? (
           <>
-            <NewOrderStepper
-              base={base}
-              isUSDCDenominated={isUSDCDenominated}
-            >
+            <NewOrderStepper base={base}>
               <Button
                 className="font-extended"
                 variant="default"
diff --git a/app/layout.tsx b/app/layout.tsx
index 021ce179..ab1b1fd4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -24,11 +24,9 @@ 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 { ServerStoreProvider } from "@/providers/state-provider/server-store-provider"
 import { ThemeProvider } from "@/providers/theme-provider"
@@ -96,7 +94,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
@@ -124,13 +121,11 @@ export default async function RootLayout({
                       delayDuration={0}
                       skipDelayDuration={0}
                     >
-                      <SideProvider cookieString={cookieString}>
-                        <SidebarInset className="max-w-full">
-                          <Header defaultBase={defaultBase} />
-                          {children}
-                          <Footer />
-                        </SidebarInset>
-                      </SideProvider>
+                      <SidebarInset className="max-w-full">
+                        <Header />
+                        {children}
+                        <Footer />
+                      </SidebarInset>
                     </TooltipProvider>
                     <Toaster
                       className="pointer-events-auto"
diff --git a/app/trade/[base]/actions.ts b/app/trade/[base]/actions.ts
deleted file mode 100644
index c64cf947..00000000
--- a/app/trade/[base]/actions.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-"use server"
-
-import { cookies } from "next/headers"
-
-import {
-  STORAGE_BASE,
-  STORAGE_IS_USDC_DENOMINATED,
-  STORAGE_SIDE,
-} from "@/lib/constants/storage"
-
-async function setCookie(key: string, value: string) {
-  const cookieStore = await cookies()
-  cookieStore.set(key, value, {
-    path: "/",
-    sameSite: "strict",
-    // Disable secure flag in development
-    secure: process.env.NODE_ENV === "production",
-    maxAge: 31536000,
-  })
-}
-
-export async function setSide(side: "buy" | "sell") {
-  setCookie(STORAGE_SIDE, side)
-}
-
-export async function setIsUSDCDenominated(isUSDCDenominated: boolean) {
-  setCookie(STORAGE_IS_USDC_DENOMINATED, isUSDCDenominated ? "true" : "false")
-}
diff --git a/app/trade/[base]/components/new-order/amount-shortcut-button.tsx b/app/trade/[base]/components/new-order/amount-shortcut-button.tsx
index 3c891ea4..9cce6758 100644
--- a/app/trade/[base]/components/new-order/amount-shortcut-button.tsx
+++ b/app/trade/[base]/components/new-order/amount-shortcut-button.tsx
@@ -32,7 +32,7 @@ export function AmountShortcutButton({
   onSetAmount,
   percentage,
   isSell,
-  isUSDCDenominated,
+  isQuoteCurrency,
 }: AmountShortcutButtonProps) {
   const baseToken = Token.findByTicker(base)
   const quoteToken = Token.findByTicker("USDC")
@@ -58,7 +58,7 @@ export function AmountShortcutButton({
     if (priceBigInt instanceof Error) return BigInt(0)
 
     if (isSell) {
-      if (isUSDCDenominated) {
+      if (isQuoteCurrency) {
         // Selling base token: calculate USDC equivalent of base balance
         const usdcValue =
           (baseBalance * priceBigInt) /
@@ -78,7 +78,7 @@ export function AmountShortcutButton({
           10 ** (baseToken.decimals + PRICE_DECIMALS - quoteToken.decimals),
         )
       const baseAmount = numerator / priceBigInt
-      if (isUSDCDenominated) {
+      if (isQuoteCurrency) {
         // Convert base amount back to USDC
         return quoteBalance
       } else {
@@ -90,7 +90,7 @@ export function AmountShortcutButton({
     baseToken.decimals,
     data,
     isSell,
-    isUSDCDenominated,
+    isQuoteCurrency,
     price,
     quoteToken.address,
     quoteToken.decimals,
@@ -105,7 +105,7 @@ export function AmountShortcutButton({
   const usdPrice = useUSDPrice(baseToken, shortcut)
 
   const formattedShortcut = React.useMemo(() => {
-    if (isUSDCDenominated && shortcut < MIN_FILL_SIZE) {
+    if (isQuoteCurrency && shortcut < MIN_FILL_SIZE) {
       return 0
     }
     const formattedUsdPrice = parseFloat(
@@ -114,18 +114,18 @@ export function AmountShortcutButton({
     const minFillSize = parseFloat(
       formatUnits(MIN_FILL_SIZE, quoteToken.decimals),
     )
-    if (!isUSDCDenominated && formattedUsdPrice < minFillSize) {
+    if (!isQuoteCurrency && formattedUsdPrice < minFillSize) {
       return 0
     }
     // Adjust by # of other token's decimals
     const value = formatUnits(
       shortcut,
-      isUSDCDenominated ? quoteToken.decimals : baseToken.decimals,
+      isQuoteCurrency ? quoteToken.decimals : baseToken.decimals,
     )
     return value
   }, [
     baseToken.decimals,
-    isUSDCDenominated,
+    isQuoteCurrency,
     quoteToken.decimals,
     shortcut,
     usdPrice,
@@ -133,7 +133,7 @@ export function AmountShortcutButton({
 
   const isDisabled = !formattedShortcut
 
-  let tooltip = `${formattedShortcut} ${isUSDCDenominated ? quoteToken.ticker : baseToken.ticker}`
+  let tooltip = `${formattedShortcut} ${isQuoteCurrency ? quoteToken.ticker : baseToken.ticker}`
 
   return (
     <Tooltip>
diff --git a/app/trade/[base]/components/new-order/new-order-form.tsx b/app/trade/[base]/components/new-order/new-order-form.tsx
index 8714c1e8..c4cb1094 100644
--- a/app/trade/[base]/components/new-order/new-order-form.tsx
+++ b/app/trade/[base]/components/new-order/new-order-form.tsx
@@ -6,7 +6,6 @@ import { ArrowRightLeft, ChevronDown } from "lucide-react"
 import { useForm } from "react-hook-form"
 import { z } from "zod"
 
-import { setIsUSDCDenominated } from "@/app/trade/[base]/actions"
 import { ConnectButton } from "@/app/trade/[base]/components/connect-button"
 import { AmountShortcutButton } from "@/app/trade/[base]/components/new-order/amount-shortcut-button"
 import { DepositWarning } from "@/app/trade/[base]/components/new-order/deposit-warning"
@@ -44,7 +43,7 @@ import { HELP_CENTER_ARTICLES } from "@/lib/constants/articles"
 import { Side } from "@/lib/constants/protocol"
 import { MIDPOINT_TOOLTIP } from "@/lib/constants/tooltips"
 import { formatCurrencyFromString } from "@/lib/format"
-import { useSide } from "@/providers/side-provider"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 
 const formSchema = z.object({
   amount: z
@@ -59,23 +58,25 @@ const formSchema = z.object({
     ),
   base: z.string(),
   isSell: z.boolean(),
-  isUSDCDenominated: z.boolean(),
+  isQuoteCurrency: z.boolean(),
 })
 
 export type NewOrderFormProps = z.infer<typeof formSchema>
 
 export function NewOrderForm({
   base,
-  isUSDCDenominated,
   onSubmit,
   closeButton,
 }: {
   base: string
-  isUSDCDenominated?: boolean
   onSubmit: (values: NewOrderConfirmationProps) => void
   closeButton?: React.ReactNode
 }) {
-  const { side, setSide } = useSide()
+  const {
+    order: { side, currency },
+    setSide,
+    setCurrency,
+  } = useServerStore((state) => state)
 
   const isMaxOrders = useIsMaxOrders()
   const { walletReadyState } = useWallets()
@@ -83,7 +84,7 @@ export function NewOrderForm({
     amount: "",
     base,
     isSell: side === Side.SELL,
-    isUSDCDenominated: isUSDCDenominated ?? false,
+    isQuoteCurrency: currency === "quote",
   }
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
@@ -101,11 +102,15 @@ export function NewOrderForm({
     form.setValue("isSell", side === Side.SELL)
   }, [form, side])
 
+  React.useEffect(() => {
+    form.setValue("isQuoteCurrency", currency === "quote")
+  }, [currency, form])
+
   React.useEffect(() => {
     const subscription = form.watch((value, { name, type }) => {
-      if (name === "isUSDCDenominated") {
-        setIsUSDCDenominated(value.isUSDCDenominated ?? false)
-        if (value.isUSDCDenominated) {
+      if (name === "isQuoteCurrency") {
+        setCurrency(value.isQuoteCurrency ? "quote" : "base")
+        if (value.isQuoteCurrency) {
           if (Number(priceInUsd) > 0) {
             form.setValue("amount", priceInUsd)
           }
@@ -120,7 +125,7 @@ export function NewOrderForm({
       }
     })
     return () => subscription.unsubscribe()
-  }, [form, price, priceInBase, priceInUsd, setSide])
+  }, [form, priceInBase, priceInUsd, setCurrency, setSide])
 
   React.useEffect(() => {
     const unbind = orderFormEvents.on("reset", () => {
@@ -158,7 +163,7 @@ export function NewOrderForm({
         onSubmit({
           ...values,
           ...fees,
-          amount: values.isUSDCDenominated ? priceInBase : values.amount,
+          amount: values.isQuoteCurrency ? priceInBase : values.amount,
         })
       }
     })
@@ -233,7 +238,7 @@ export function NewOrderForm({
             />
             <FormField
               control={form.control}
-              name="isUSDCDenominated"
+              name="isQuoteCurrency"
               render={({ field }) => (
                 <FormItem>
                   <FormControl>
diff --git a/app/trade/[base]/components/new-order/new-order-panel.tsx b/app/trade/[base]/components/new-order/new-order-panel.tsx
index 8c35669d..0d8cffee 100644
--- a/app/trade/[base]/components/new-order/new-order-panel.tsx
+++ b/app/trade/[base]/components/new-order/new-order-panel.tsx
@@ -14,13 +14,7 @@ import { Separator } from "@/components/ui/separator"
 
 import { HELP_CENTER_ARTICLES } from "@/lib/constants/articles"
 
-export function NewOrderPanel({
-  base,
-  isUSDCDenominated,
-}: {
-  base: string
-  isUSDCDenominated?: boolean
-}) {
+export function NewOrderPanel({ base }: { base: string }) {
   const [open, setOpen] = React.useState(false)
   const [lockedFormValues, setLockedFormValues] =
     React.useState<NewOrderConfirmationProps | null>(null)
@@ -38,7 +32,6 @@ export function NewOrderPanel({
       <Separator />
       <NewOrderForm
         base={base}
-        isUSDCDenominated={isUSDCDenominated}
         onSubmit={handleSubmit}
       />
       {lockedFormValues && (
diff --git a/app/trade/[base]/page-client.tsx b/app/trade/[base]/page-client.tsx
index 36f0a2a4..703e1952 100644
--- a/app/trade/[base]/page-client.tsx
+++ b/app/trade/[base]/page-client.tsx
@@ -22,33 +22,19 @@ import { ScrollArea } from "@/components/ui/scroll-area"
 import { Separator } from "@/components/ui/separator"
 
 import { useOrderTableData } from "@/hooks/use-order-table-data"
-import { STORAGE_LAYOUT } from "@/lib/constants/storage"
-
-const DEFAULT_LAYOUT = [22, 78]
+import { defaultInitState } from "@/providers/state-provider/server-store"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 
 // Prevents re-render when side changes
 const PriceChartMemo = React.memo(PriceChart)
 
-export function PageClient({
-  defaultLayout = DEFAULT_LAYOUT,
-  base,
-  isUSDCDenominated,
-}: {
-  defaultLayout?: number[]
-  base: string
-  isUSDCDenominated?: boolean
-}) {
+export function PageClient({ base }: { base: string }) {
   const data = useOrderTableData()
+  const { setBase, panels, setPanels } = useServerStore((state) => state)
 
   React.useEffect(() => {
-    const updateBase = async () => {
-      await fetch("/api/cookie/set-base", {
-        method: "POST",
-        body: base.toUpperCase(),
-      })
-    }
-    updateBase()
-  }, [base])
+    setBase(base)
+  }, [base, setBase])
 
   return (
     <>
@@ -58,24 +44,23 @@ export function PageClient({
       <MobileAssetPriceAccordion base={base} />
       <ScrollArea className="flex-grow">
         <ResizablePanelGroup
-          autoSaveId={STORAGE_LAYOUT}
           direction="horizontal"
+          onLayout={(layout) => {
+            setPanels(layout)
+          }}
         >
           <ResizablePanel
             className="hidden lg:block"
-            defaultSize={defaultLayout[0]}
+            defaultSize={panels.layout[0]}
             maxSize={50}
-            minSize={DEFAULT_LAYOUT[0]}
+            minSize={defaultInitState.panels.layout[0]}
             order={1}
           >
-            <NewOrderPanel
-              base={base}
-              isUSDCDenominated={isUSDCDenominated}
-            />
+            <NewOrderPanel base={base} />
           </ResizablePanel>
           <ResizableHandle />
           <ResizablePanel
-            defaultSize={defaultLayout[1]}
+            defaultSize={panels.layout[1]}
             order={2}
           >
             <main>
@@ -99,10 +84,7 @@ export function PageClient({
         </ResizablePanelGroup>
       </ScrollArea>
       <FavoritesBanner />
-      <MobileBottomBar
-        base={base}
-        isUSDCDenominated={isUSDCDenominated}
-      />
+      <MobileBottomBar base={base} />
     </>
   )
 }
diff --git a/app/trade/[base]/page.tsx b/app/trade/[base]/page.tsx
index 766a6872..6005c36b 100644
--- a/app/trade/[base]/page.tsx
+++ b/app/trade/[base]/page.tsx
@@ -1,6 +1,3 @@
-import { cookies } from "next/headers"
-
-import { Token } from "@renegade-fi/react"
 import {
   HydrationBoundary,
   QueryClient,
@@ -9,7 +6,6 @@ import {
 
 import { PageClient } from "@/app/trade/[base]/page-client"
 
-import { STORAGE_IS_USDC_DENOMINATED } from "@/lib/constants/storage"
 import { DISPLAY_TOKENS } from "@/lib/token"
 
 export async function generateStaticParams() {
@@ -26,28 +22,10 @@ export default async function Page({
 }) {
   const queryClient = new QueryClient()
 
-  const [[base, mint], { layout, denomination }] = await Promise.all([
-    params.then(
-      ({ base }) =>
-        [base, Token.findByTicker(base.toUpperCase()).address] as const,
-    ),
-    cookies().then((store) => ({
-      layout: store.get("react-resizable-panels:layout"),
-      denomination: store.get(STORAGE_IS_USDC_DENOMINATED),
-    })),
-  ])
-
-  // Parse user preferences with defaults
-  const defaultLayout = layout?.value ? JSON.parse(layout.value) : undefined
-  const isUSDCDenominated = denomination?.value === "true"
-
+  const [base] = await Promise.all([params.then(({ base }) => base)])
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <PageClient
-        base={base}
-        defaultLayout={defaultLayout}
-        isUSDCDenominated={isUSDCDenominated}
-      />
+      <PageClient base={base} />
     </HydrationBoundary>
   )
 }
diff --git a/app/zustand/page-client.tsx b/app/zustand/page-client.tsx
deleted file mode 100644
index b2451c34..00000000
--- a/app/zustand/page-client.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-"use client"
-
-import { Button } from "@/components/ui/button"
-
-import { Side } from "@/lib/constants/protocol"
-import { useServerStore } from "@/providers/state-provider/server-store-provider"
-
-export const PageClient = () => {
-  const { order, setSide, setAmount } = useServerStore((state) => state)
-
-  return (
-    <div>
-      Order: {JSON.stringify(order)}
-      <hr />
-      <Button
-        type="button"
-        onClick={() =>
-          void setSide(order.side === Side.BUY ? Side.SELL : Side.BUY)
-        }
-      >
-        Toggle Side
-      </Button>
-      <Button
-        type="button"
-        onClick={() => void setAmount(Math.random().toString())}
-      >
-        Random Amount
-      </Button>
-    </div>
-  )
-}
diff --git a/app/zustand/page.tsx b/app/zustand/page.tsx
deleted file mode 100644
index 010d2656..00000000
--- a/app/zustand/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PageClient } from "@/app/zustand/page-client"
-
-export default function Page() {
-  return <PageClient />
-}
diff --git a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
index 8557ba81..955d4467 100644
--- a/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
+++ b/components/dialogs/order-stepper/mobile/new-order-stepper.tsx
@@ -11,7 +11,6 @@ export function NewOrderStepperInner({
   ...props
 }: React.PropsWithChildren<{
   base: string
-  isUSDCDenominated?: boolean
 }>) {
   const { step, onNext, setStep, setTaskId } = useStepper()
   const [lockedFormValues, setLockedFormValues] =
@@ -103,7 +102,6 @@ export function NewOrderStepper({
   ...props
 }: React.PropsWithChildren<{
   base: string
-  isUSDCDenominated?: boolean
 }>) {
   return (
     <StepperProvider>
diff --git a/components/dialogs/order-stepper/mobile/steps/default.tsx b/components/dialogs/order-stepper/mobile/steps/default.tsx
index 20882a85..f6c1dad2 100644
--- a/components/dialogs/order-stepper/mobile/steps/default.tsx
+++ b/components/dialogs/order-stepper/mobile/steps/default.tsx
@@ -16,7 +16,6 @@ import { Separator } from "@/components/ui/separator"
 
 export function DefaultStep(props: {
   base: string
-  isUSDCDenominated?: boolean
   onSubmit: (values: NewOrderConfirmationProps) => void
 }) {
   return (
diff --git a/components/dialogs/transfer/default-form.tsx b/components/dialogs/transfer/default-form.tsx
index ba08eb62..357eb4b0 100644
--- a/components/dialogs/transfer/default-form.tsx
+++ b/components/dialogs/transfer/default-form.tsx
@@ -74,7 +74,7 @@ import { catchErrorWithToast } from "@/lib/constants/toast"
 import { TRANSFER_DIALOG_L1_BALANCE_TOOLTIP } from "@/lib/constants/tooltips"
 import { useWriteErc20Approve } from "@/lib/generated"
 import { cn } from "@/lib/utils"
-import { useSide } from "@/providers/side-provider"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 
 const catchError = (error: Error, message: string) => {
   console.error("Error in USDC form", error)
@@ -98,7 +98,7 @@ export function DefaultForm({
   const isTradePage = usePathname().includes("/trade")
   const queryClient = useQueryClient()
   const router = useRouter()
-  const { setSide } = useSide()
+  const { setSide } = useServerStore((state) => state)
   const [currentStep, setCurrentStep] = React.useState(0)
   const [steps, setSteps] = React.useState<string[]>([])
   const isDeposit = direction === ExternalTransferDirection.Deposit
diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx
index 25215037..ce746acf 100644
--- a/components/dialogs/transfer/usdc-form.tsx
+++ b/components/dialogs/transfer/usdc-form.tsx
@@ -80,7 +80,7 @@ import { useReadErc20Allowance, useWriteErc20Approve } from "@/lib/generated"
 import { ADDITIONAL_TOKENS, ETHEREUM_TOKENS, SOLANA_TOKENS } from "@/lib/token"
 import { cn } from "@/lib/utils"
 import { chain, getFormattedChainName, solana } from "@/lib/viem"
-import { useSide } from "@/providers/side-provider"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 import { mainnetConfig } from "@/providers/wagmi-provider/config"
 
 import { EVMStep, STEP_CONFIGS, SVMStep, TransferStep } from "./types"
@@ -107,7 +107,7 @@ export function USDCForm({
   const isMaxBalances = useIsMaxBalances(USDC_L2_TOKEN.address)
   const isDesktop = useMediaQuery("(min-width: 1024px)")
   const queryClient = useQueryClient()
-  const { setSide } = useSide()
+  const { setSide } = useServerStore((state) => state)
   const [network, setNetwork] = React.useState<number>(chain.id)
   const [steps, setSteps] = React.useState<TransferStep[]>([])
   const [currentStep, setCurrentStep] = React.useState(0)
diff --git a/components/dialogs/transfer/weth-form.tsx b/components/dialogs/transfer/weth-form.tsx
index 466b5d94..b1702e60 100644
--- a/components/dialogs/transfer/weth-form.tsx
+++ b/components/dialogs/transfer/weth-form.tsx
@@ -86,7 +86,7 @@ import {
 } from "@/lib/generated"
 import { ETHEREUM_TOKENS } from "@/lib/token"
 import { cn } from "@/lib/utils"
-import { useSide } from "@/providers/side-provider"
+import { useServerStore } from "@/providers/state-provider/server-store-provider"
 import {
   arbitrumConfig,
   mainnetConfig,
@@ -203,7 +203,7 @@ export function WETHForm({
   const wrapRequired =
     parseEther(amount) > (l2Balance ?? BigInt(0)) &&
     parseEther(amount) <= combinedBalance
-  const { setSide } = useSide()
+  const { setSide } = useServerStore((state) => state)
 
   const catchError = (error: Error, message: string) => {
     console.error("Error in WETH form", error)
diff --git a/hooks/use-order-value.ts b/hooks/use-order-value.ts
index 313a9e7e..d8c36f9d 100644
--- a/hooks/use-order-value.ts
+++ b/hooks/use-order-value.ts
@@ -12,7 +12,7 @@ import { safeParseUnits } from "@/lib/format"
 export function useOrderValue({
   amount,
   base,
-  isUSDCDenominated,
+  isQuoteCurrency,
 }: NewOrderFormProps) {
   const baseToken = Token.findByTicker(base)
   const quoteToken = Token.findByTicker("USDC")
@@ -24,7 +24,7 @@ export function useOrderValue({
 
   const priceInUsd = React.useMemo(() => {
     if (!usdPerBase) return ""
-    if (isUSDCDenominated) {
+    if (isQuoteCurrency) {
       return amount
     }
     const parsedAmount = safeParseUnits(amount, baseToken.decimals)
@@ -35,11 +35,11 @@ export function useOrderValue({
       amountTimesPrice(parsedAmount, usdPerBase),
       baseToken.decimals,
     )
-  }, [amount, baseToken.decimals, isUSDCDenominated, usdPerBase])
+  }, [amount, baseToken.decimals, isQuoteCurrency, usdPerBase])
 
   const priceInBase = React.useMemo(() => {
     if (!basePerUsd) return ""
-    if (!isUSDCDenominated) {
+    if (!isQuoteCurrency) {
       return amount
     }
     const parsedAmount = safeParseUnits(amount, quoteToken.decimals)
@@ -50,7 +50,7 @@ export function useOrderValue({
       amountTimesPrice(parsedAmount, basePerUsd),
       quoteToken.decimals,
     )
-  }, [amount, basePerUsd, isUSDCDenominated, quoteToken.decimals])
+  }, [amount, basePerUsd, isQuoteCurrency, quoteToken.decimals])
 
   return {
     priceInUsd,
diff --git a/hooks/use-predicted-fees.ts b/hooks/use-predicted-fees.ts
index d50ff554..bbf8dc55 100644
--- a/hooks/use-predicted-fees.ts
+++ b/hooks/use-predicted-fees.ts
@@ -11,13 +11,13 @@ export function usePredictedFees({
   amount,
   base,
   isSell,
-  isUSDCDenominated,
+  isQuoteCurrency,
 }: NewOrderFormProps) {
   const { priceInBase, priceInUsd } = useOrderValue({
     amount,
     base,
     isSell,
-    isUSDCDenominated,
+    isQuoteCurrency,
   })
 
   const feesCalculation = React.useMemo(() => {
@@ -36,7 +36,7 @@ export function usePredictedFees({
     amount: priceInBase,
     base,
     isSell,
-    isUSDCDenominated,
+    isQuoteCurrency,
   })
   const [predictedSavings, setPredictedSavings] = React.useState(0)
   React.useEffect(() => {
diff --git a/lib/constants/storage.ts b/lib/constants/storage.ts
index 9fdaa426..93f44449 100644
--- a/lib/constants/storage.ts
+++ b/lib/constants/storage.ts
@@ -1,18 +1,10 @@
 const STORAGE_PREFIX = "trade.renegade"
 
 export const STORAGE_STORE = `${STORAGE_PREFIX}.store`
-
-export const STORAGE_SIDE = `${STORAGE_PREFIX}.side`
-export const STORAGE_LAYOUT = `${STORAGE_PREFIX}.layout`
-
-export const STORAGE_AMOUNT = `${STORAGE_PREFIX}.order.amount`
-export const STORAGE_IS_USDC_DENOMINATED = `${STORAGE_PREFIX}.order.isUSDCDenominated`
-export const STORAGE_BASE = `${STORAGE_PREFIX}.base`
+export const STORAGE_SERVER_STORE = `${STORAGE_PREFIX}.server-store`
 
 export const STORAGE_REMEMBER_ME = `${STORAGE_PREFIX}.remember-me`
 export const STORAGE_DEPOSIT_BANNER = `${STORAGE_PREFIX}.deposit-banner`
 export const STORAGE_FAVORITES = `${STORAGE_PREFIX}.favorites`
 export const STORAGE_LAST_VISIT = `${STORAGE_PREFIX}.last-visit`
 export const STORAGE_VIEWED_FILLS = `${STORAGE_PREFIX}.viewed-fills`
-
-export const STORAGE_SERVER_STORE = `${STORAGE_PREFIX}.server-store`
diff --git a/middleware.ts b/middleware.ts
index 11ab6b0a..828a5ff5 100644
--- a/middleware.ts
+++ b/middleware.ts
@@ -1,14 +1,18 @@
 import { NextRequest, NextResponse } from "next/server"
 
-import { STORAGE_BASE } from "@/lib/constants/storage"
+import { STORAGE_SERVER_STORE } from "@/lib/constants/storage"
+import { cookieToInitialState } from "@/providers/state-provider/cookie-storage"
 
 export function middleware(request: NextRequest) {
+  const cookieString = request.cookies.toString()
+  const serverState = cookieToInitialState(STORAGE_SERVER_STORE, cookieString)
+  const currentBase = serverState?.order.base || "WETH"
+
   // Redirect root and /trade paths
   if (
     request.nextUrl.pathname === "/" ||
     request.nextUrl.pathname === "/trade"
   ) {
-    const currentBase = request.cookies.get(STORAGE_BASE)?.value || "WETH"
     return NextResponse.redirect(new URL(`/trade/${currentBase}`, request.url))
   }
 
@@ -17,7 +21,6 @@ export function middleware(request: NextRequest) {
   if (baseMatch) {
     const base = baseMatch[1]
     if (base === "USDC") {
-      const currentBase = request.cookies.get(STORAGE_BASE)?.value || "WETH"
       return NextResponse.redirect(
         new URL(`/trade/${currentBase}`, request.url),
       )
diff --git a/providers/side-provider.tsx b/providers/side-provider.tsx
deleted file mode 100644
index 4c37b538..00000000
--- a/providers/side-provider.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-"use client"
-
-import React from "react"
-
-import { parseCookie } from "@renegade-fi/react"
-
-import { setSide as setSideCookie } from "@/app/trade/[base]/actions"
-
-import { Side } from "@/lib/constants/protocol"
-import { STORAGE_SIDE } from "@/lib/constants/storage"
-
-type SideContextType = {
-  side: Side
-  setSide: (side: Side) => void
-}
-
-const SideContext = React.createContext<SideContextType | undefined>(undefined)
-
-interface SideProviderProps {
-  children: React.ReactNode
-  cookieString?: string
-}
-
-export function SideProvider({ children, cookieString }: SideProviderProps) {
-  const [side, setSideState] = React.useState<Side>(() => {
-    if (cookieString) {
-      const parsed = parseCookie(cookieString, STORAGE_SIDE)
-      return parsed === Side.BUY ? Side.BUY : Side.SELL
-    }
-    const randomSide = Math.random() < 0.5 ? Side.BUY : Side.SELL
-    return randomSide
-  })
-
-  const setSide = (newSide: Side) => {
-    setSideState(newSide)
-    setSideCookie(newSide)
-  }
-
-  return (
-    <SideContext.Provider value={{ side, setSide }}>
-      {children}
-    </SideContext.Provider>
-  )
-}
-
-export function useSide() {
-  const context = React.useContext(SideContext)
-  if (context === undefined) {
-    throw new Error("useSide must be used within a SideProvider")
-  }
-  return context
-}
diff --git a/providers/state-provider/cookie-storage.ts b/providers/state-provider/cookie-storage.ts
index 51de1251..c3168169 100644
--- a/providers/state-provider/cookie-storage.ts
+++ b/providers/state-provider/cookie-storage.ts
@@ -8,7 +8,6 @@ import {
 } from "@/providers/state-provider/cookie-actions"
 import { ServerState } from "@/providers/state-provider/server-store"
 
-// Create a storage object that uses server actions
 export const createCookieStorage = (): StateStorage => {
   return {
     getItem: async (name: string): Promise<string | null> => {
@@ -40,7 +39,7 @@ export const createCookieStorage = (): StateStorage => {
 
 export function cookieToInitialState(key: string, cookie?: string | null) {
   if (!cookie) return undefined
-  const parsed = parseCookie(cookie, key)
+  const parsed = parseCookie(decodeURIComponent(cookie), key)
   if (!parsed) return undefined
   return deserialize<{ state: ServerState }>(parsed).state
 }
diff --git a/providers/state-provider/server-store.ts b/providers/state-provider/server-store.ts
index ec6f21ce..2eb10784 100644
--- a/providers/state-provider/server-store.ts
+++ b/providers/state-provider/server-store.ts
@@ -1,4 +1,3 @@
-// src/stores/counter-store.ts
 import { createJSONStorage, persist } from "zustand/middleware"
 import { createStore } from "zustand/vanilla"
 
@@ -7,7 +6,6 @@ import { STORAGE_SERVER_STORE } from "@/lib/constants/storage"
 import { createCookieStorage } from "@/providers/state-provider/cookie-storage"
 
 // State that must be available during Server Component rendering
-
 export type ServerState = {
   order: {
     side: Side
@@ -15,6 +13,9 @@ export type ServerState = {
     currency: "base" | "quote"
     base: string
   }
+  panels: {
+    layout: number[]
+  }
 }
 
 export type ServerActions = {
@@ -22,18 +23,21 @@ export type ServerActions = {
   setAmount: (amount: string) => void
   setCurrency: (currency: "base" | "quote") => void
   setBase: (base: string) => void
+  setPanels: (layout: number[]) => void
 }
 
 export type ServerStore = ServerState & ServerActions
 
 export const initServerStore = (): ServerState => {
   return {
-    order: { side: Side.BUY, amount: "100", currency: "base", base: "SOL" },
+    order: { side: Side.BUY, amount: "", currency: "base", base: "WBTC" },
+    panels: { layout: [22, 78] },
   }
 }
 
 export const defaultInitState: ServerState = {
-  order: { side: Side.BUY, amount: "100", currency: "base", base: "SOL" },
+  order: { side: Side.BUY, amount: "", currency: "base", base: "WBTC" },
+  panels: { layout: [22, 78] },
 }
 
 export const createServerStore = (
@@ -51,14 +55,12 @@ export const createServerStore = (
           set((state) => ({ order: { ...state.order, currency } })),
         setBase: (base: string) =>
           set((state) => ({ order: { ...state.order, base } })),
+        setPanels: (layout: number[]) =>
+          set((state) => ({ panels: { layout } })),
       }),
       {
         name: STORAGE_SERVER_STORE,
         storage: createJSONStorage(() => createCookieStorage()),
-        // Optional: Add custom serialization/deserialization
-        partialize: (state) => ({
-          order: state.order,
-        }),
       },
     ),
   )

From 019f2489b0d18fc1079e87c760b8734a3de7956f Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:04:30 -0800
Subject: [PATCH 3/4] meta: add client store

---
 app/layout.tsx                                | 79 ++++++++++---------
 lib/constants/storage.ts                      |  1 +
 .../client-store-provider.tsx.tsx             | 47 +++++++++++
 providers/state-provider/client-store.ts      | 54 +++++++++++++
 .../deferred-state-provider.tsx               |  0
 5 files changed, 143 insertions(+), 38 deletions(-)
 create mode 100644 providers/state-provider/client-store-provider.tsx.tsx
 create mode 100644 providers/state-provider/client-store.ts
 delete mode 100644 providers/state-provider/deferred-state-provider.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index ab1b1fd4..6230a356 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,6 +28,7 @@ import { constructMetadata } from "@/lib/utils"
 import { isTestnet } from "@/lib/viem"
 import { RenegadeProvider } from "@/providers/renegade-provider/renegade-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"
@@ -110,44 +111,46 @@ export default async function RootLayout({
           defaultTheme="dark"
         >
           <ServerStoreProvider cookieString={cookieString}>
-            <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>
+              <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 />
diff --git a/lib/constants/storage.ts b/lib/constants/storage.ts
index 93f44449..22bfb5bc 100644
--- a/lib/constants/storage.ts
+++ b/lib/constants/storage.ts
@@ -2,6 +2,7 @@ const STORAGE_PREFIX = "trade.renegade"
 
 export const STORAGE_STORE = `${STORAGE_PREFIX}.store`
 export const STORAGE_SERVER_STORE = `${STORAGE_PREFIX}.server-store`
+export const STORAGE_CLIENT_STORE = `${STORAGE_PREFIX}.client-store`
 
 export const STORAGE_REMEMBER_ME = `${STORAGE_PREFIX}.remember-me`
 export const STORAGE_DEPOSIT_BANNER = `${STORAGE_PREFIX}.deposit-banner`
diff --git a/providers/state-provider/client-store-provider.tsx.tsx b/providers/state-provider/client-store-provider.tsx.tsx
new file mode 100644
index 00000000..d62743a1
--- /dev/null
+++ b/providers/state-provider/client-store-provider.tsx.tsx
@@ -0,0 +1,47 @@
+"use client"
+
+import { createContext, useContext, useRef, type ReactNode } from "react"
+
+import { useStore } from "zustand"
+
+import {
+  createClientStore,
+  initClientStore,
+  type ClientStore,
+} from "@/providers/state-provider/client-store"
+
+export type ClientStoreApi = ReturnType<typeof createClientStore>
+
+const ClientStoreContext = createContext<ClientStoreApi | undefined>(undefined)
+
+export interface ClientStoreProviderProps {
+  children: ReactNode
+  cookieString?: string
+}
+
+export function ClientStoreProvider({
+  children,
+  cookieString,
+}: ClientStoreProviderProps) {
+  const storeRef = useRef<ClientStoreApi>(undefined)
+
+  if (!storeRef.current) {
+    storeRef.current = createClientStore(initClientStore())
+  }
+
+  return (
+    <ClientStoreContext.Provider value={storeRef.current}>
+      {children}
+    </ClientStoreContext.Provider>
+  )
+}
+
+export function useClientStore<T>(selector: (store: ClientStore) => T): T {
+  const store = useContext(ClientStoreContext)
+
+  if (!store) {
+    throw new Error("useClientStore must be used within ClientStoreProvider")
+  }
+
+  return useStore(store, selector)
+}
diff --git a/providers/state-provider/client-store.ts b/providers/state-provider/client-store.ts
new file mode 100644
index 00000000..8c3e3021
--- /dev/null
+++ b/providers/state-provider/client-store.ts
@@ -0,0 +1,54 @@
+import { createJSONStorage, persist } from "zustand/middleware"
+import { createStore } from "zustand/vanilla"
+
+import { STORAGE_CLIENT_STORE } from "@/lib/constants/storage"
+
+// State that can be hydrated after initial render, as opposed to ServerState
+export type ClientState = {
+  rememberMe: boolean
+  favorites: string[]
+  lastVisitTs: string
+  viewedFills: string[]
+}
+
+export type ClientActions = {
+  setRememberMe: (rememberMe: boolean) => void
+  setFavorites: (favorites: string[]) => void
+  setLastVisitTs: (lastVisitTs: string) => void
+  setViewedFills: (viewedFills: string[]) => void
+}
+
+export type ClientStore = ClientState & ClientActions
+
+export const initClientStore = (): ClientState => {
+  return defaultInitState
+}
+
+export const defaultInitState: ClientState = {
+  rememberMe: false,
+  favorites: [],
+  lastVisitTs: "",
+  viewedFills: [],
+}
+
+export const createClientStore = (
+  initState: ClientState = defaultInitState,
+) => {
+  return createStore<ClientStore>()(
+    persist(
+      (set) => ({
+        ...initState,
+        setRememberMe: (rememberMe: boolean) =>
+          set((state) => ({ rememberMe })),
+        setFavorites: (favorites: string[]) => set((state) => ({ favorites })),
+        setLastVisitTs: (lastVisitTs: string) =>
+          set((state) => ({ lastVisitTs })),
+        setViewedFills: (viewedFills: string[]) =>
+          set((state) => ({ viewedFills })),
+      }),
+      {
+        name: STORAGE_CLIENT_STORE,
+      },
+    ),
+  )
+}
diff --git a/providers/state-provider/deferred-state-provider.tsx b/providers/state-provider/deferred-state-provider.tsx
deleted file mode 100644
index e69de29b..00000000

From 246eb0e4421085e0a092bb4aa1e6c0243a3ef783 Mon Sep 17 00:00:00 2001
From: sehyunc <41171808+sehyunc@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:20:12 -0800
Subject: [PATCH 4/4] meta: migrate client storage

---
 app/components/clear-cookie.tsx               |  9 ++++---
 app/components/track-last-visit.tsx           | 19 +++-----------
 .../hooks/use-unviewed-fills.ts               |  7 +++---
 .../wallet-sidebar/hooks/use-viewed-fills.ts  |  9 ++-----
 .../renegade-wallet-actions-dropdown.tsx      | 17 ++++---------
 .../[base]/components/favorites-banner.tsx    |  8 ++----
 app/trade/[base]/page.tsx                     |  2 +-
 .../dialogs/onboarding/sign-in-dialog.tsx     | 17 ++++---------
 components/dialogs/token-select-dialog.tsx    | 25 ++++++++-----------
 lib/constants/storage.ts                      |  6 -----
 .../client-store-provider.tsx.tsx             |  6 +----
 providers/state-provider/client-store.ts      |  2 +-
 providers/state-provider/state-provider.tsx   |  0
 13 files changed, 39 insertions(+), 88 deletions(-)
 delete mode 100644 providers/state-provider/state-provider.tsx

diff --git a/app/components/clear-cookie.tsx b/app/components/clear-cookie.tsx
index db4d6211..da85612a 100644
--- a/app/components/clear-cookie.tsx
+++ b/app/components/clear-cookie.tsx
@@ -2,14 +2,15 @@
 
 import React from "react"
 
-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=/;`
         removeCookie(STORAGE_STORE)
       }
@@ -18,6 +19,6 @@ export function ClearCookie() {
     return () => {
       window.removeEventListener("beforeunload", handleBeforeUnload)
     }
-  }, [])
+  }, [rememberMe])
   return null
 }
diff --git a/app/components/track-last-visit.tsx b/app/components/track-last-visit.tsx
index 2a307571..38aa9d61 100644
--- a/app/components/track-last-visit.tsx
+++ b/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)
diff --git a/app/components/wallet-sidebar/hooks/use-unviewed-fills.ts b/app/components/wallet-sidebar/hooks/use-unviewed-fills.ts
index 88233f4b..7f73c079 100644
--- a/app/components/wallet-sidebar/hooks/use-unviewed-fills.ts
+++ b/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],
diff --git a/app/components/wallet-sidebar/hooks/use-viewed-fills.ts b/app/components/wallet-sidebar/hooks/use-viewed-fills.ts
index 8ff8b5b9..71fc505a 100644
--- a/app/components/wallet-sidebar/hooks/use-viewed-fills.ts
+++ b/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)) {
diff --git a/app/components/wallet-sidebar/renegade-wallet-actions-dropdown.tsx b/app/components/wallet-sidebar/renegade-wallet-actions-dropdown.tsx
index c29ac3a6..9ab613e2 100644
--- a/app/components/wallet-sidebar/renegade-wallet-actions-dropdown.tsx
+++ b/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) {
diff --git a/app/trade/[base]/components/favorites-banner.tsx b/app/trade/[base]/components/favorites-banner.tsx
index d1462bdb..31f12c1b 100644
--- a/app/trade/[base]/components/favorites-banner.tsx
+++ b/app/trade/[base]/components/favorites-banner.tsx
@@ -2,19 +2,15 @@ import Link from "next/link"
 
 import { Token } from "@renegade-fi/react"
 import { Star } from "lucide-react"
-import { useReadLocalStorage } from "usehooks-ts"
 import { isAddress } from "viem/utils"
 
 import { AnimatedPrice } from "@/components/animated-price"
-import { Button } from "@/components/ui/button"
 import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
 
-import { STORAGE_FAVORITES } from "@/lib/constants/storage"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export function FavoritesBanner() {
-  const favorites = useReadLocalStorage<string[]>(STORAGE_FAVORITES, {
-    initializeWithValue: false,
-  })
+  const { favorites } = useClientStore((state) => state)
   if (!favorites || !favorites.length) return null
   return (
     <div className="hidden min-h-marquee overflow-hidden lg:block">
diff --git a/app/trade/[base]/page.tsx b/app/trade/[base]/page.tsx
index 6005c36b..55cd6625 100644
--- a/app/trade/[base]/page.tsx
+++ b/app/trade/[base]/page.tsx
@@ -22,7 +22,7 @@ export default async function Page({
 }) {
   const queryClient = new QueryClient()
 
-  const [base] = await Promise.all([params.then(({ base }) => base)])
+  const base = await params.then(({ base }) => base)
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
       <PageClient base={base} />
diff --git a/components/dialogs/onboarding/sign-in-dialog.tsx b/components/dialogs/onboarding/sign-in-dialog.tsx
index d3ff7243..0ab9a33b 100644
--- a/components/dialogs/onboarding/sign-in-dialog.tsx
+++ b/components/dialogs/onboarding/sign-in-dialog.tsx
@@ -12,7 +12,6 @@ import { MutationStatus, useMutation } from "@tanstack/react-query"
 import { useModal } from "connectkit"
 import { Check, Loader2, X } from "lucide-react"
 import { toast } from "sonner"
-import { useLocalStorage } from "usehooks-ts"
 import { BaseError } from "viem"
 import {
   useChainId,
@@ -40,7 +39,6 @@ import {
 import { Label } from "@/components/ui/label"
 
 import { useMediaQuery } from "@/hooks/use-media-query"
-import { STORAGE_REMEMBER_ME } from "@/lib/constants/storage"
 import {
   CREATE_WALLET_START,
   CREATE_WALLET_SUCCESS,
@@ -50,6 +48,7 @@ import {
 import { sidebarEvents } from "@/lib/events"
 import { cn } from "@/lib/utils"
 import { chain } from "@/lib/viem"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export function SignInDialog({
   open,
@@ -261,7 +260,7 @@ export function SignInDialog({
               {getSteps(steps, currentStep)}
             </div>
             <ErrorWarning steps={steps} />
-            <SignInContent />
+            <RememberMe />
           </div>
           <DialogFooter>
             <Button
@@ -309,7 +308,7 @@ export function SignInDialog({
               {getSteps(steps, currentStep)}
             </div>
             <ErrorWarning steps={steps} />
-            <SignInContent />
+            <RememberMe />
           </div>
         </DialogFooter>
       </DialogContent>
@@ -329,14 +328,8 @@ function ErrorWarning({ steps }: { steps: Step[] }) {
   )
 }
 
-function SignInContent() {
-  const [rememberMe, setRememberMe] = useLocalStorage(
-    STORAGE_REMEMBER_ME,
-    false,
-    {
-      initializeWithValue: false,
-    },
-  )
+function RememberMe() {
+  const { rememberMe, setRememberMe } = useClientStore((state) => state)
 
   return (
     <div className="flex items-center space-x-2">
diff --git a/components/dialogs/token-select-dialog.tsx b/components/dialogs/token-select-dialog.tsx
index 0f603d81..829cf222 100644
--- a/components/dialogs/token-select-dialog.tsx
+++ b/components/dialogs/token-select-dialog.tsx
@@ -4,7 +4,7 @@ import Link from "next/link"
 
 import { useBackOfQueueWallet } from "@renegade-fi/react"
 import { Star } from "lucide-react"
-import { useDebounceValue, useLocalStorage } from "usehooks-ts"
+import { useDebounceValue } from "usehooks-ts"
 import { fromHex } from "viem/utils"
 
 import { TokenIcon } from "@/components/token-icon"
@@ -23,9 +23,9 @@ import { Input } from "@/components/ui/input"
 import { ScrollArea } from "@/components/ui/scroll-area"
 
 import { useMediaQuery } from "@/hooks/use-media-query"
-import { STORAGE_FAVORITES } from "@/lib/constants/storage"
 import { formatNumber } from "@/lib/format"
 import { DISPLAY_TOKENS } from "@/lib/token"
+import { useClientStore } from "@/providers/state-provider/client-store-provider.tsx"
 
 export function TokenSelectDialog({
   children,
@@ -140,11 +140,7 @@ function TokenList({
     },
   })
 
-  const [favorites, setFavorites] = useLocalStorage<string[]>(
-    STORAGE_FAVORITES,
-    [],
-    { initializeWithValue: false },
-  )
+  const { favorites, setFavorites } = useClientStore((state) => state)
 
   const processedTokens = React.useMemo(() => {
     return DISPLAY_TOKENS({
@@ -212,14 +208,13 @@ function TokenList({
                 size="icon"
                 variant="ghost"
                 onClick={() => {
-                  setFavorites((favorites) => {
-                    if (favorites.includes(token.address)) {
-                      return favorites.filter(
-                        (address) => address !== token.address,
-                      )
-                    }
-                    return [...favorites, token.address]
-                  })
+                  if (favorites.includes(token.address)) {
+                    setFavorites(
+                      favorites.filter((address) => address !== token.address),
+                    )
+                  } else {
+                    setFavorites([...favorites, token.address])
+                  }
                 }}
               >
                 <Star
diff --git a/lib/constants/storage.ts b/lib/constants/storage.ts
index 22bfb5bc..e6d97e7b 100644
--- a/lib/constants/storage.ts
+++ b/lib/constants/storage.ts
@@ -3,9 +3,3 @@ const STORAGE_PREFIX = "trade.renegade"
 export const STORAGE_STORE = `${STORAGE_PREFIX}.store`
 export const STORAGE_SERVER_STORE = `${STORAGE_PREFIX}.server-store`
 export const STORAGE_CLIENT_STORE = `${STORAGE_PREFIX}.client-store`
-
-export const STORAGE_REMEMBER_ME = `${STORAGE_PREFIX}.remember-me`
-export const STORAGE_DEPOSIT_BANNER = `${STORAGE_PREFIX}.deposit-banner`
-export const STORAGE_FAVORITES = `${STORAGE_PREFIX}.favorites`
-export const STORAGE_LAST_VISIT = `${STORAGE_PREFIX}.last-visit`
-export const STORAGE_VIEWED_FILLS = `${STORAGE_PREFIX}.viewed-fills`
diff --git a/providers/state-provider/client-store-provider.tsx.tsx b/providers/state-provider/client-store-provider.tsx.tsx
index d62743a1..a5a416bd 100644
--- a/providers/state-provider/client-store-provider.tsx.tsx
+++ b/providers/state-provider/client-store-provider.tsx.tsx
@@ -16,13 +16,9 @@ const ClientStoreContext = createContext<ClientStoreApi | undefined>(undefined)
 
 export interface ClientStoreProviderProps {
   children: ReactNode
-  cookieString?: string
 }
 
-export function ClientStoreProvider({
-  children,
-  cookieString,
-}: ClientStoreProviderProps) {
+export function ClientStoreProvider({ children }: ClientStoreProviderProps) {
   const storeRef = useRef<ClientStoreApi>(undefined)
 
   if (!storeRef.current) {
diff --git a/providers/state-provider/client-store.ts b/providers/state-provider/client-store.ts
index 8c3e3021..aa238dba 100644
--- a/providers/state-provider/client-store.ts
+++ b/providers/state-provider/client-store.ts
@@ -1,4 +1,4 @@
-import { createJSONStorage, persist } from "zustand/middleware"
+import { persist } from "zustand/middleware"
 import { createStore } from "zustand/vanilla"
 
 import { STORAGE_CLIENT_STORE } from "@/lib/constants/storage"
diff --git a/providers/state-provider/state-provider.tsx b/providers/state-provider/state-provider.tsx
deleted file mode 100644
index e69de29b..00000000