fix(web): fix page crash at the Payment step

Author: ShubhamParkhi

web/src/utils/fetchNativeToken.ts

@@ -1,6 +1,12 @@
-export const fetchNativeToken = (chain) => {
+const CHAIN_NATIVE_TOKENS = {
+  42161: 'ETH',
+  421614: 'ETH',
+};
+
+export const fetchNativeToken = (chainId: number) => {
+  const symbol = CHAIN_NATIVE_TOKENS[chainId] || 'Unknown';
   return {
-    symbol: chain?.nativeCurrency?.symbol,
-    address: "native",
+    symbol: symbol,
+    address: 'native',
   };
 };

web/src/utils/initializeTokens.ts

@@ -3,23 +3,27 @@ import { IToken } from "context/NewTransactionContext";
 import { fetchNativeToken } from "./fetchNativeToken";
 import { fetchTokenInfo } from "./fetchTokenInfo";
 
-export const initializeTokens = async (address: string, setTokens, setLoading, chain, alchemyInstance: Alchemy) => {
+export const initializeTokens = async (address: string, setTokens, setLoading, chainId: number, alchemyInstance: Alchemy) => {
   try {
     setLoading(true);
-    const nativeToken = fetchNativeToken(chain);
+    const nativeToken = fetchNativeToken(chainId);
     const balances = await alchemyInstance.core.getTokenBalances(address);
     const tokenList = await Promise.all(
       balances.tokenBalances.map(async (token) => {
         const tokenInfo = await fetchTokenInfo(token.contractAddress, alchemyInstance);
-        return {
-          symbol: tokenInfo.symbol,
-          address: tokenInfo.address,
-          logo: tokenInfo.logo,
-        } as IToken;
+        if (tokenInfo) {
+          return {
+            symbol: tokenInfo.symbol,
+            address: tokenInfo.address,
+            logo: tokenInfo.logo,
+          } as IToken;
+        }
+        return null;
       })
     );
     const allTokens = [nativeToken, ...tokenList];
-    const customTokens = JSON.parse(localStorage.getItem("tokens")) || [];
+    const customTokensString = localStorage.getItem("tokens");
+    const customTokens = customTokensString ? JSON.parse(customTokensString) : [];
     const combinedTokens = [
       ...allTokens,
       ...customTokens.filter((customToken) => !allTokens.some((token) => token.address === customToken.address)),

web/vite.config.js

@@ -7,15 +7,26 @@ export default defineConfig({
   root: "src",
   build: {
     outDir: "../dist",
+    rollupOptions: {
+      onwarn: (warning, warn) => {
+        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+          return;
+        }
+        warn(warning);
+      },
+    },
   },
   envPrefix: ["REACT_APP", "ALCHEMY", "WALLETCONNECT_PROJECT_ID"],
   plugins: [
     svgr({
       include: ["**/*.svg", "tsx:**/*.svg"],
+      exclude: ["../node_modules/**/*"],
     }),
     tsconfigPaths({
       ignoreConfigErrors: true,
     }),
-    nodePolyfills(),
+    nodePolyfills({
+      include: ["fs", "stream"],
+    }),
   ],
 });