Fix caching eth calls

ui-common/package.json

@@ -4,11 +4,7 @@
   "scripts": {
     "tsc:check": "tsc"
   },
-  "dependencies": {
-    "eth-rpc-cache": "2.0.0"
-  },
   "devDependencies": {
-    "@ethersproject/providers": "5.7.2",
     "next": "14.2.16",
     "react": "18.2.0",
     "react-dom": "18.2.0"

webapp/package.json

@@ -26,6 +26,7 @@
     "crypto-shortener": "1.1.0",
     "debug": "4.3.7",
     "esplora-client": "1.2.0",
+    "eth-rpc-cache": "2.0.0",
     "hemi-socials": "1.0.0",
     "hemi-viem": "2.0.0-alpha.1",
     "javascript-time-ago": "2.5.10",
@@ -53,6 +54,7 @@
     "wagmi-erc20-hooks": "1.0.0"
   },
   "devDependencies": {
+    "@ethersproject/providers": "5.7.2",
     "@types/big.js": "6.2.2",
     "@types/lodash": "4.17.13",
     "@types/node": "20.12.12",

webapp/test/utils/cacheStrategies.test.ts

@@ -0,0 +1,33 @@
+import { withdrawalsStrategy } from 'utils/cacheStrategies'
+import { describe, expect, it } from 'vitest'
+
+describe('utils/cacheStrategies', function () {
+  describe('withdrawalsStrategy', function () {
+    it('should return undefined the RPC call has no parameters', () => {
+      const result = withdrawalsStrategy.resolver('eth_call', [])
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined if data is not a valid hex', function () {
+      const result = withdrawalsStrategy.resolver('eth_call', [
+        { data: 'invalid', to: '0x123' },
+      ])
+      expect(result).toBeUndefined()
+    })
+
+    it('should return a valid caching strategy for the known methods', function () {
+      const data = '0x54fd4d50' // keccak256 of "version()"
+      const result = withdrawalsStrategy.resolver('eth_call', [
+        { data, to: '0x123' },
+      ])
+      expect(result).toBe('permanent')
+    })
+
+    it('should return undefined for a valid eth_call with unknown method', function () {
+      const result = withdrawalsStrategy.resolver('eth_call', [
+        { data: '0x123456AF', to: '0x123' },
+      ])
+      expect(result).toBeUndefined()
+    })
+  })
+})

webapp/utils/cacheStrategies.ts

@@ -1,6 +1,6 @@
 // This strategy is used to cache some of the requests done by the OP sdk
 // when fetching data for withdrawals
-import { Hash, keccak256, isHash, toHex } from 'viem'
+import { Hash, keccak256, isHex, toHex } from 'viem'
 
 type RpcCallParam = {
   data: Hash
@@ -9,7 +9,7 @@ type RpcCallParam = {
 
 const isWithdrawalEthCall = function (obj: unknown): obj is RpcCallParam {
   const casted = obj as RpcCallParam
-  return casted !== undefined && isHash(casted.data)
+  return casted !== undefined && isHex(casted.data)
 }
 
 const getSignature = (method: string) => keccak256(toHex(method)).slice(0, 10)

webapp/utils/providers.ts

@@ -1,8 +1,32 @@
+import {
+  type JsonRpcProvider,
+  type Web3Provider,
+} from '@ethersproject/providers'
+import {
+  createEthRpcCache,
+  perBlockStrategy,
+  permanentStrategy,
+} from 'eth-rpc-cache'
 import { providers } from 'ethers'
-import { cacheProvider } from 'ui-common/utils/cache'
 import { withdrawalsStrategy } from 'utils/cacheStrategies'
 import { type Account, type Chain, type HttpTransport } from 'viem'
 
+const cacheProvider = function <T extends JsonRpcProvider | Web3Provider>(
+  provider: T,
+  strategies: (typeof permanentStrategy)[] = [],
+) {
+  const cached = createEthRpcCache(
+    (method, params) => provider.send(method, params),
+    { strategies: [perBlockStrategy, permanentStrategy, ...strategies] },
+  )
+  const newProvider: T = {
+    ...provider,
+    send: (method, params) => cached(method, params),
+  }
+  Object.setPrototypeOf(newProvider, Object.getPrototypeOf(provider))
+  return newProvider
+}
+
 const toNetwork = (chain: Chain) => ({
   chainId: chain.id,
   ensAddress: chain.contracts?.ensRegistry?.address,