🍪 Implement wagmi storage in cookies

packages/frontend/package.json

@@ -39,7 +39,7 @@
     "sonner": "^1.4.41",
     "styled-components": "^6.1.8",
     "viem": "^2.9.3",
-    "wagmi": "^2.7.1",
+    "wagmi": "^2.10.2",
     "zod": "^3.22.4"
   },
   "devDependencies": {

packages/frontend/src/config/wagmiConfig.ts

@@ -1,9 +1,13 @@
-import { createConfig, webSocket } from 'wagmi'
+import { cookieStorage, createConfig, createStorage, webSocket } from 'wagmi'
 import { arbitrum, arbitrumSepolia, hardhat } from 'wagmi/chains'
 import { coinbaseWallet, walletConnect } from 'wagmi/connectors'
 import { environment } from '@/config/environment'
 import { SupportedChains } from '@/blockchain/chain'
 
+const storage = createStorage({
+  storage: cookieStorage,
+})
+
 export const wagmiConfig = createConfig({
   chains: SupportedChains,
   ssr: true,
@@ -16,6 +20,7 @@ export const wagmiConfig = createConfig({
     walletConnect({ projectId: environment.walletConnectProjectId }),
     coinbaseWallet({ appName: 'Devcon Auction/Raffle' }),
   ],
+  storage,
 })
 
 declare module 'wagmi' {

packages/frontend/src/pages/_app.tsx

@@ -1,15 +1,19 @@
 import { GlobalStyles } from '@/styles/GobalStyles'
-import type { AppProps } from 'next/app'
+import type { AppContext, AppProps } from 'next/app'
 import { BlockchainProviders } from '@/providers/wagmi'
 import { BidsProvider } from '@/providers/BidsProvider/provider'
 import { ReactNode } from 'react'
 import { TopBar } from '@/components/topBar/TopBar'
 import { Footer } from '@/components/footer/Footer'
 import { Toaster } from 'sonner'
+import { cookieToInitialState } from 'wagmi'
+import { wagmiConfig } from '@/config/wagmiConfig'
+
+export default function App({ Component, pageProps, cookie }: AppProps & CustomProps) {
+  const initialState = cookieToInitialState(wagmiConfig, cookie)
 
-export default function App({ Component, pageProps }: AppProps) {
   return (
-    <BlockchainProviders>
+    <BlockchainProviders initialState={initialState}>
       <BidsProvider>
         <GlobalStyles />
         <Layout>
@@ -28,3 +32,11 @@ const Layout = ({ children }: { children: ReactNode }) => (
     <Footer />
   </>
 )
+
+interface CustomProps {
+  cookie: string | undefined
+}
+
+App.getInitialProps = async (context: AppContext): Promise<CustomProps> => {
+  return { cookie: context.ctx.req?.headers.cookie }
+}

packages/frontend/src/pages/api/frames/index.tsx

@@ -14,7 +14,7 @@ const handleRequest = frames(async (req) => {
       image: `/images?status=ended`,
       imageOptions: {
         headers: {
-          "Cache-Control": "public, max-age=0",
+          'Cache-Control': 'public, max-age=0',
         },
       },
       buttons: [
@@ -34,7 +34,7 @@ const handleRequest = frames(async (req) => {
       image: `/images?status=withdrawal`,
       imageOptions: {
         headers: {
-          "Cache-Control": "public, max-age=0",
+          'Cache-Control': 'public, max-age=0',
         },
       },
       buttons: [
@@ -52,7 +52,7 @@ const handleRequest = frames(async (req) => {
     image: `/images?status=active`,
     imageOptions: {
       headers: {
-        "Cache-Control": "public, max-age=0",
+        'Cache-Control': 'public, max-age=0',
       },
     },
     buttons: [

packages/frontend/src/providers/wagmi.tsx

@@ -1,4 +1,4 @@
-import { WagmiProvider } from 'wagmi'
+import { State, WagmiProvider } from 'wagmi'
 import { ReactNode } from 'react'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { wagmiConfig } from '@/config/wagmiConfig'
@@ -7,6 +7,7 @@ import { environment } from '@/config/environment'
 
 interface ProviderProps {
   children: ReactNode
+  initialState: State | undefined
 }
 
 const queryClient = new QueryClient()
@@ -16,9 +17,9 @@ createWeb3Modal({
   wagmiConfig,
 })
 
-export const BlockchainProviders = ({ children }: ProviderProps) => {
+export const BlockchainProviders = ({ children, initialState }: ProviderProps) => {
   return (
-    <WagmiProvider config={wagmiConfig}>
+    <WagmiProvider config={wagmiConfig} initialState={initialState} reconnectOnMount>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   )