meta: migrate client storage

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
 }

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/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">

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} />

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">

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

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`

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) {

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"