fix: bridge ui cookie hydration issue (#318)

Consensys · Nov 21, 2024 · 899bb69 · 899bb69
1 parent adb097a
commit 899bb69
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 23 deletions.
diff --git a/bridge-ui/.env.production b/bridge-ui/.env.production
@@ -7,7 +7,7 @@ NEXT_PUBLIC_MAINNET_LINEA_USDC_BRIDGE=0xA2Ee6Fce4ACB62D95448729cDb781e3BEb62504A
 NEXT_PUBLIC_MAINNET_GAS_ESTIMATED=100000
 NEXT_PUBLIC_MAINNET_DEFAULT_GAS_LIMIT_SURPLUS=6000
 NEXT_PUBLIC_MAINNET_PROFIT_MARGIN=2
-NEXT_PUBLIC_MAINNET_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-mainnet-token-shortlist.json
+MAINNET_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-mainnet-token-shortlist.json
 
 NEXT_PUBLIC_SEPOLIA_L1_TOKEN_BRIDGE=0x5A0a48389BB0f12E5e017116c1105da97E129142
 NEXT_PUBLIC_SEPOLIA_LINEA_TOKEN_BRIDGE=0x93DcAdf238932e6e6a85852caC89cBd71798F463
@@ -18,7 +18,7 @@ NEXT_PUBLIC_SEPOLIA_LINEA_USDC_BRIDGE=0x39fd5cF710314341d35f9Dca20c1daa059Acb843
 NEXT_PUBLIC_SEPOLIA_GAS_ESTIMATED=100000
 NEXT_PUBLIC_SEPOLIA_DEFAULT_GAS_LIMIT_SURPLUS=6000
 NEXT_PUBLIC_SEPOLIA_PROFIT_MARGIN=2
-NEXT_PUBLIC_SEPOLIA_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json
+SEPOLIA_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json
 
 NEXT_PUBLIC_WALLET_CONNECT_ID=<GITHUB_SECRET>
 

diff --git a/bridge-ui/.env.template b/bridge-ui/.env.template
@@ -7,7 +7,7 @@ NEXT_PUBLIC_MAINNET_LINEA_USDC_BRIDGE=0xA2Ee6Fce4ACB62D95448729cDb781e3BEb62504A
 NEXT_PUBLIC_MAINNET_GAS_ESTIMATED=100000
 NEXT_PUBLIC_MAINNET_DEFAULT_GAS_LIMIT_SURPLUS=6000
 NEXT_PUBLIC_MAINNET_PROFIT_MARGIN=2
-NEXT_PUBLIC_MAINNET_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-mainnet-token-shortlist.json
+MAINNET_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-mainnet-token-shortlist.json
 
 NEXT_PUBLIC_SEPOLIA_L1_TOKEN_BRIDGE=0x5A0a48389BB0f12E5e017116c1105da97E129142
 NEXT_PUBLIC_SEPOLIA_LINEA_TOKEN_BRIDGE=0x93DcAdf238932e6e6a85852caC89cBd71798F463
@@ -18,7 +18,7 @@ NEXT_PUBLIC_SEPOLIA_LINEA_USDC_BRIDGE=0x39fd5cF710314341d35f9Dca20c1daa059Acb843
 NEXT_PUBLIC_SEPOLIA_GAS_ESTIMATED=100000
 NEXT_PUBLIC_SEPOLIA_DEFAULT_GAS_LIMIT_SURPLUS=6000
 NEXT_PUBLIC_SEPOLIA_PROFIT_MARGIN=2
-NEXT_PUBLIC_SEPOLIA_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json
+SEPOLIA_TOKEN_LIST=https://raw.githubusercontent.com/Consensys/linea-token-list/main/json/linea-sepolia-token-shortlist.json
 
 NEXT_PUBLIC_WALLET_CONNECT_ID=<YOUR__WALLET_CONNECT_ID>
 

diff --git a/bridge-ui/src/app/page.tsx b/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>

diff --git a/bridge-ui/src/components/layouts/Providers.tsx b/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>
   );
 }
diff --git a/bridge-ui/src/config/wagmi.ts b/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,
-  }),
 });
diff --git a/bridge-ui/src/contexts/web3.context.tsx b/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>
   );

diff --git a/bridge-ui/src/services/tokenService.ts b/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);