fix(web): include wallet connect project id

Author: ShubhamParkhi

web/src/app.tsx

@@ -17,9 +17,9 @@ import AttachmentDisplay from "./pages/AttachmentDisplay";
 const App: React.FC = () => {
   return (
     <StyledComponentsProvider>
-      <QueryClientProvider>
-        <GraphqlBatcherProvider>
-          <Web3Provider>
+      <Web3Provider>
+        <QueryClientProvider>
+          <GraphqlBatcherProvider>
             <IsListProvider>
               <NewTransactionProvider>
                 <SentryRoutes>
@@ -33,9 +33,9 @@ const App: React.FC = () => {
                 </SentryRoutes>
               </NewTransactionProvider>
             </IsListProvider>
-          </Web3Provider>
-        </GraphqlBatcherProvider>
-      </QueryClientProvider>
+          </GraphqlBatcherProvider>
+        </QueryClientProvider>
+      </Web3Provider>
     </StyledComponentsProvider>
   );
 };

web/src/assets/svgs/icons/book.svg

@@ -1,11 +1,15 @@
 import React, { useMemo, useState } from "react";
+
 import * as jwt from "jose";
 import { SiweMessage } from "siwe";
 import { useAccount, useChainId, useSignMessage } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
+
 import { DEFAULT_CHAIN } from "consts/chains";
 import { useSessionStorage } from "hooks/useSessionStorage";
 import { authoriseUser, getNonce } from "utils/authoriseUser";
+
 import styled from "styled-components";
 
 const Container = styled.div`
@@ -113,4 +117,4 @@ async function createSiweMessage(address: `0x${string}`, statement: string, chai
     expirationTime,
   });
   return message.prepareMessage();
-}
+}

web/src/components/EnsureAuth.tsx

@@ -3,15 +3,14 @@ import React from "react";
 import { createWeb3Modal } from "@web3modal/wagmi/react";
 import { type Chain } from "viem";
 import { createConfig, fallback, http, WagmiProvider, webSocket } from "wagmi";
-import { mainnet, arbitrumSepolia, arbitrum, gnosisChiado } from "wagmi/chains";
+import { mainnet, arbitrumSepolia, gnosisChiado } from "wagmi/chains";
 import { walletConnect } from "wagmi/connectors";
 
 import { lightTheme } from "styles/themes";
 
 export const alchemyApiKey = import.meta.env.ALCHEMY_API_KEY ?? "";
 
 const alchemyToViemChain = {
-  [arbitrum.id]: "arb-mainnet",
   [arbitrumSepolia.id]: "arb-sepolia",
   [mainnet.id]: "eth-mainnet",
 };
@@ -31,14 +30,13 @@ const getTransports = () => {
     ]);
 
   return {
-    [arbitrum.id]: alchemyTransport(arbitrum),
     [arbitrumSepolia.id]: alchemyTransport(arbitrumSepolia),
     [mainnet.id]: alchemyTransport(mainnet),
     [gnosisChiado.id]: chiadoTransport(),
   };
 };
 
-const chains = [arbitrumSepolia, mainnet, gnosisChiado, arbitrum] as [Chain, ...Chain[]];
+const chains = [arbitrumSepolia, mainnet, gnosisChiado] as [Chain, ...Chain[]];
 const transports = getTransports();
 const projectId = import.meta.env.WALLETCONNECT_PROJECT_ID ?? "";
 const wagmiConfig = createConfig({

web/src/context/Web3Provider.tsx

@@ -47,7 +47,7 @@
       ]
     },
     "target": "es2020",
-    "rootDir": "src",
+    "rootDir": ".",
     "outDir": "build/dist",
     "allowJs": true,
     "forceConsistentCasingInFileNames": true,

web/tsconfig.json

@@ -8,7 +8,7 @@ export default defineConfig({
   build: {
     outDir: "../dist",
   },
-  envPrefix: ["REACT_APP", "ALCHEMY"],
+  envPrefix: ["REACT_APP", "ALCHEMY", "WALLETCONNECT_PROJECT_ID"],
   plugins: [
     svgr({
       include: ["**/*.svg", "tsx:**/*.svg"],