Replace ethers.js by viem (#44)

* Replace ethers.js by viem

- Update typescript
- Update nodejs to v20

* Update dependencies

* bump dependencies and update husky hook

* fix missing test dependency

---------

Co-authored-by: Daniel <25051234+dasanra@users.noreply.github.com>

.github/workflows/node.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [18.x]
+        node-version: [20.x]
 
     steps:
       - uses: actions/checkout@v4
@@ -45,7 +45,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: 'yarn'
       - run: yarn install
       - name: Build Staging React App

.husky/pre-commit

@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
-npx lint-staged
+yarn lint-staged

custom-test-env.js

@@ -0,0 +1,14 @@
+const Environment = require('jest-environment-jsdom');
+
+/**
+ * A custom environment to set the TextEncoder that is required by TensorFlow.js.
+ */
+module.exports = class CustomTestEnvironment extends Environment {
+    async setup() {
+        await super.setup();
+        if (typeof this.global.TextEncoder === 'undefined') {
+            const { TextEncoder } = require('util');
+            this.global.TextEncoder = TextEncoder;
+        }
+    }
+}

package.json

@@ -7,27 +7,20 @@
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.11.0",
     "@mui/material": "^5.15.19",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.26",
-    "@types/react-dom": "^18.0.10",
-    "axios": "^1.2.1",
-    "ethers": "^5.7.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.4"
+    "axios": "^1.7.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1",
+    "typescript": "^5.5.3",
+    "viem": "^2.17.0"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
-    "test:coverage": "react-scripts test --coverage --watchAll=false",
+    "test": "react-scripts test --env=./custom-test-env.js",
+    "test:coverage": "react-scripts test --coverage --watchAll=false --env=./custom-test-env.js",
     "eject": "react-scripts eject",
-    "prepare": "husky install"
+    "prepare": "husky"
   },
   "eslintConfig": {
     "extends": [
@@ -49,15 +42,23 @@
   },
   "lint-staged": {
     "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "npx prettier --write"
+      "prettier --write"
     ]
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.3.2",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.11",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
     "eslint": "^8.24.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.34.4",
     "husky": "^9.0.11",
     "lint-staged": "^13.0.3",
-    "prettier": "^3.3.2"
+    "prettier": "^3.3.3"
   },
   "jest": {
     "transformIgnorePatterns": [

src/components/block-label/BlockLabel.tsx

@@ -6,17 +6,17 @@ import Link from "@mui/material/Link";
 import ViewInArRoundedIcon from "@mui/icons-material/ViewInArRounded";
 import styled from "@emotion/styled";
 import { Theme } from "@mui/material";
-import { ethers } from "ethers";
 
 import chain from "src/models/chain";
 import { DARK_THEME } from "src/theme/theme";
 import getBlockExplorerHref from "src/utils/getBlockExplorerHref";
 import TimeAgoLabel from "src/components/time-ago-label/TimeAgoLabel";
+import { Block } from "viem";
 
 type BlockLabelProps = {
   blockNumber?: number;
   blockExplorerUriTemplate: chain["blockExplorerUriTemplate"];
-  getBlock: (blockNumber: number) => Promise<ethers.providers.Block>;
+  getBlock: (blockNumber: number) => Promise<Block>;
 };
 
 function BlockLabel({
@@ -37,7 +37,7 @@ function BlockLabel({
     if (blockNumber) {
       getBlock(blockNumber)
         .then(({ timestamp }) => {
-          const blockTimestamp = timestamp * 1_000; // in milliseconds
+          const blockTimestamp = Number(timestamp) * 1_000; // in milliseconds
           setBlockTimestamp(blockTimestamp);
         })
         .catch((error) => {

src/components/chain-status-table/ChainStatusRow.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
 import TableCell from "@mui/material/TableCell";
 import TableRow from "@mui/material/TableRow";
-import { ethers } from "ethers";
+import { Chain, createPublicClient, http } from "viem";
 
 import getChainStatus from "src/api/getChainStatus";
 import getRpcUri from "src/utils/getRpcUri";
@@ -36,16 +36,17 @@ function ChainStatusRow({ chain }: { chain: chain }) {
   const provider = useMemo(() => {
     const rpcEndpoint = getRpcUri(chain);
 
-    return new ethers.providers.JsonRpcProvider(rpcEndpoint);
+    return createPublicClient({
+      chain: {} as Chain,
+      transport: http(rpcEndpoint),
+    });
   }, [chain]);
 
   // function to fetch the block info from the Rpc (memoized version)
   const getBlockInfo = useCallback(
     async (blockNumber: number) => {
       const { chainId } = chain;
-
       const blockInfo = await memoizedGetBlock(blockNumber, provider, chainId);
-
       return blockInfo;
     },
     [provider, chain],

src/utils/memoizedGetBlock.ts

@@ -1,6 +1,6 @@
-import { ethers } from "ethers";
+import { Block, PublicClient } from "viem";
 
-type returnBlockInfoType = Promise<ethers.providers.Block>;
+type returnBlockInfoType = Promise<Block>;
 
 // key: blockNumber, value: blockInfoType
 type blockCache = Record<string, returnBlockInfoType>;
@@ -17,7 +17,7 @@ const THRESHOLD_CLEAN_CACHE_TIME = 20 * 60 * 1000; // purge block cache each 20
 // memoized version of getBlock to avoid multiple calls to fetch the same block info
 async function memoizedGetBlock(
   blockNumber: number,
-  provider: ethers.providers.JsonRpcProvider,
+  provider: PublicClient,
   chainId: string,
 ): returnBlockInfoType {
   // we clean the cache each 20 mins
@@ -31,12 +31,16 @@ async function memoizedGetBlock(
   const chainCache = cache[chainId];
 
   // we use the cached block value or we call to getBlock and update the chache
-  const blockInfo = chainCache[blockNumber] || provider.getBlock(blockNumber);
+  const blockInfo =
+    chainCache[blockNumber] ||
+    provider.getBlock({ blockNumber: BigInt(blockNumber) });
   chainCache[blockNumber] = blockInfo;
 
   // if the promise is rejected we retry to call getBlock again
   chainCache[blockNumber].catch(() => {
-    chainCache[blockNumber] = provider.getBlock(blockNumber);
+    chainCache[blockNumber] = provider.getBlock({
+      blockNumber: BigInt(blockNumber),
+    });
   });
 
   return chainCache[blockNumber];