fix: bridge ui cookie hydration issue

bridge-ui/src/app/page.tsx

@@ -1,6 +1,6 @@
 import BridgeLayout from "@/components/bridge/BridgeLayout";
 
-export default async function Home() {
+export default function Home() {
   return (
     <div className="min-w-min max-w-lg md:m-auto">
       <h1 className="mb-6 text-4xl font-bold md:hidden">Bridge</h1>

bridge-ui/src/components/layouts/Providers.tsx

@@ -1,24 +1,20 @@
-import { headers } from "next/headers";
-import { cookieToInitialState } from "wagmi";
 import { Web3Provider } from "@/contexts/web3.context";
 import { ModalProvider } from "@/contexts/modal.context";
 import { TokenStoreProvider } from "@/stores/tokenStoreProvider";
 import { getTokenConfig } from "@/services/tokenService";
-import { wagmiConfig } from "@/config";
 
 type ProvidersProps = {
   children: JSX.Element;
 };
 
 export async function Providers({ children }: ProvidersProps) {
-  const initialState = cookieToInitialState(wagmiConfig, headers().get("cookie"));
   const tokensList = await getTokenConfig();
 
   return (
-    <TokenStoreProvider initialState={{ tokensList }}>
-      <Web3Provider initialState={initialState}>
+    <Web3Provider>
+      <TokenStoreProvider initialState={{ tokensList }}>
         <ModalProvider>{children}</ModalProvider>
-      </Web3Provider>
-    </TokenStoreProvider>
+      </TokenStoreProvider>
+    </Web3Provider>
   );
 }

bridge-ui/src/config/wagmi.ts

@@ -1,5 +1,4 @@
 import { defaultWagmiConfig } from "@web3modal/wagmi/react/config";
-import { cookieStorage, createStorage } from "wagmi";
 import { http, injected } from "@wagmi/core";
 import { mainnet, sepolia, linea, lineaSepolia } from "@wagmi/core/chains";
 import { walletConnect, coinbaseWallet } from "@wagmi/connectors";
@@ -43,7 +42,4 @@ export const wagmiConfig = defaultWagmiConfig({
     [linea.id]: http(`https://linea-mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
     [lineaSepolia.id]: http(`https://linea-sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_ID}`, { batch: true }),
   },
-  storage: createStorage({
-    storage: cookieStorage,
-  }),
 });

bridge-ui/src/contexts/web3.context.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ReactNode } from "react";
-import { State, WagmiProvider } from "wagmi";
+import { WagmiProvider } from "wagmi";
 import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { config, wagmiConfig } from "@/config";
@@ -14,12 +14,11 @@ createWeb3Modal({ wagmiConfig, projectId: config.walletConnectId });
 
 type Web3ProviderProps = {
   children: ReactNode;
-  initialState?: State;
 };
 
-export function Web3Provider({ children, initialState }: Web3ProviderProps) {
+export function Web3Provider({ children }: Web3ProviderProps) {
   return (
-    <WagmiProvider config={wagmiConfig} initialState={initialState}>
+    <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
     </WagmiProvider>
   );

bridge-ui/src/services/tokenService.ts

@@ -135,9 +135,9 @@ export async function fetchTokenInfo(
 export async function getTokens(networkTypes: NetworkTypes): Promise<Token[]> {
   try {
     // Fetch the JSON data from the URL.
-    let url = process.env.NEXT_PUBLIC_MAINNET_TOKEN_LIST ? (process.env.NEXT_PUBLIC_MAINNET_TOKEN_LIST as string) : "";
+    let url = process.env.MAINNET_TOKEN_LIST ? (process.env.MAINNET_TOKEN_LIST as string) : "";
     if (networkTypes === NetworkTypes.SEPOLIA) {
-      url = process.env.NEXT_PUBLIC_SEPOLIA_TOKEN_LIST ? (process.env.NEXT_PUBLIC_SEPOLIA_TOKEN_LIST as string) : "";
+      url = process.env.SEPOLIA_TOKEN_LIST ? (process.env.SEPOLIA_TOKEN_LIST as string) : "";
     }
 
     const response = await fetch(url);