feat: add wagmi + viem

jest.config.cjs

@@ -1,6 +1,7 @@
 /** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 
 module.exports = {
+  setupFiles: ["<rootDir>/setup.jest.ts"],
   preset: "ts-jest",
   testEnvironment: "node",
   moduleDirectories: ["node_modules", "<rootDir>"],

package.json

@@ -47,7 +47,9 @@
     "react-router-dom": "v5",
     "react-tooltip": "^5.18.0",
     "superstruct": "^0.15.4",
-    "typescript": "^5.7.3"
+    "typescript": "^5.7.3",
+    "viem": "2.x",
+    "wagmi": "^2.14.9"
   },
   "scripts": {
     "start": "export REACT_APP_GIT_COMMIT_HASH=$(git rev-parse HEAD) && vite",

scripts/generate-ui-assets.ts

@@ -13,10 +13,13 @@ const externAssetsTargetDir = process.cwd() + "/src/assets/extern-logos";
 async function generateUiAssets() {
   const chainsFileImports: string[] = [
     "// This file is auto-generated by scripts/generate-ui-assets.ts",
+    'import { defineChain } from "viem";',
   ];
   const chainsFileContent: string[] = [];
   const chainVarNames: string[] = [];
+  const chainViemVarNames: string[] = [];
   const externVarNames: string[] = [];
+
   for (const [chainKey, chainConfig] of Object.entries(chainConfigs)) {
     const { chainId, logoPath, grayscaleLogoPath, name, fullName } =
       chainConfig;
@@ -66,7 +69,33 @@ async function generateUiAssets() {
         pollingInterval: ${(chainConfig.blockTimeSeconds || 15) * 1000},
       };
     `);
+    chainsFileContent.push(`
+      export const ${chainVarName}_viem = defineChain({
+        id: ${chainVarName}.chainId,
+        name: ${chainVarName}.name,
+        nativeCurrency: {
+          name: ${chainVarName}.nativeCurrencySymbol,
+          symbol: ${chainVarName}.nativeCurrencySymbol,
+          decimals: 18,
+        },
+        rpcUrls: {
+          default: {
+            http: [
+              ${chainVarName}.rpcUrl,
+              ${chainVarName}.customRpcUrl ? ${chainVarName}.customRpcUrl : [],
+            ].flat(),
+          },
+        },
+        blockExplorers: {
+          default: {
+            name: ${chainVarName}.name + " Explorer",
+            url: ${chainVarName}.explorerUrl,
+          },
+        },
+      });
+    `);
     chainVarNames.push(chainVarName);
+    chainViemVarNames.push(chainVarName + "_viem");
   }
 
   // Process external project configs
@@ -130,6 +159,9 @@ async function generateUiAssets() {
       return acc;
     }, {} as Record<number, typeof ${chainVarNames[0]}>);
   `);
+  chainsFileContent.push(`
+    export const chains_viem = [${chainViemVarNames.join(", ")}] as const;
+  `);
 
   chainsFileContent.push(`
     export const externConfigs = [${externVarNames.join(", ")}].reduce((acc, extern) => {

setup.jest.ts

@@ -0,0 +1,4 @@
+import { TextEncoder, TextDecoder } from "util";
+global.TextEncoder = TextEncoder;
+// @ts-expect-error - The types are incompatible but the implementation works correctly
+global.TextDecoder = TextDecoder;