fix: do not forward eth_chainId

src/components/safe-apps/AppFrame/useAppCommunicator.ts

@@ -79,7 +79,7 @@ const useAppCommunicator = (
       return
     }
 
-    return createSafeAppsWeb3Provider(chain.rpcUri, customRpc?.[chain.chainId])
+    return createSafeAppsWeb3Provider(chain.chainId, chain.rpcUri, customRpc?.[chain.chainId])
   }, [chain, customRpc])
 
   useEffect(() => {

src/hooks/wallets/useInitWeb3.ts

@@ -24,11 +24,11 @@ export const useInitWeb3 = () => {
   }, [wallet, chainId])
 
   useEffect(() => {
-    if (!rpcUri) {
+    if (!rpcUri || !chainId) {
       setWeb3ReadOnly(undefined)
       return
     }
-    const web3ReadOnly = createWeb3ReadOnly(rpcUri, customRpcUrl)
+    const web3ReadOnly = createWeb3ReadOnly(chainId, rpcUri, customRpcUrl)
     setWeb3ReadOnly(web3ReadOnly)
-  }, [rpcUri, customRpcUrl])
+  }, [chainId, rpcUri, customRpcUrl])
 }

src/hooks/wallets/web3.ts

@@ -1,8 +1,9 @@
 import { RPC_AUTHENTICATION, type RpcUri } from '@safe-global/safe-gateway-typescript-sdk'
 import { INFURA_TOKEN, SAFE_APPS_INFURA_TOKEN } from '@/config/constants'
-import { JsonRpcProvider, BrowserProvider, type Eip1193Provider, type Provider } from 'ethers'
+import { type JsonRpcProvider, BrowserProvider, type Eip1193Provider, type Provider } from 'ethers'
 import ExternalStore from '@/services/ExternalStore'
 import { EMPTY_DATA } from '@safe-global/protocol-kit/dist/src/utils/constants'
+import ReadonlyRpcProvider from '@/utils/providers/ReadonlyRpcProvider'
 
 // RPC helpers
 const formatRpcServiceUrl = ({ authentication, value }: RpcUri, token: string): string => {
@@ -20,20 +21,28 @@ export const getRpcServiceUrl = (rpcUri: RpcUri): string => {
   return formatRpcServiceUrl(rpcUri, INFURA_TOKEN)
 }
 
-export const createWeb3ReadOnly = (rpcUri: RpcUri, customRpc?: string): JsonRpcProvider | undefined => {
+export const createWeb3ReadOnly = (
+  chainId: string,
+  rpcUri: RpcUri,
+  customRpc?: string,
+): JsonRpcProvider | undefined => {
   const url = customRpc || getRpcServiceUrl(rpcUri)
   if (!url) return
-  return new JsonRpcProvider(url)
+  return new ReadonlyRpcProvider(chainId, url)
 }
 
 export const createWeb3 = (walletProvider: Eip1193Provider): BrowserProvider => {
   return new BrowserProvider(walletProvider)
 }
 
-export const createSafeAppsWeb3Provider = (safeAppsRpcUri: RpcUri, customRpc?: string): JsonRpcProvider | undefined => {
+export const createSafeAppsWeb3Provider = (
+  chainId: string,
+  safeAppsRpcUri: RpcUri,
+  customRpc?: string,
+): JsonRpcProvider | undefined => {
   const url = customRpc || formatRpcServiceUrl(safeAppsRpcUri, SAFE_APPS_INFURA_TOKEN)
   if (!url) return
-  return new JsonRpcProvider(url)
+  return new ReadonlyRpcProvider(chainId, url)
 }
 
 export const { setStore: setWeb3, useStore: useWeb3 } = new ExternalStore<BrowserProvider>()

src/utils/providers/ReadonlyRpcProvider.ts

@@ -0,0 +1,23 @@
+import { JsonRpcProvider } from 'ethers'
+import { numberToHex } from '../hex'
+
+class ReadonlyRpcProvider extends JsonRpcProvider {
+  #chainId: string
+  constructor(chainId: string, url: string) {
+    super(url)
+    this.#chainId = chainId
+  }
+
+  async send(method: string, params: Array<any> | Record<string, any>): Promise<any> {
+    // The readonly provider always has the same chainId, no need to forward this request to the endpoint
+    console.log('RPC Request', method, method === 'eth_chainId')
+    if (method === 'eth_chainId') {
+      console.log('Responding immediately')
+      return numberToHex(Number(this.#chainId))
+    }
+
+    return await super.send(method, params)
+  }
+}
+
+export default ReadonlyRpcProvider