Migrate EVMcrispr from ethers v5 to viem v2

Author: sembrestels

README.md

@@ -1,4 +1,4 @@
-# `Turborepo` Vite starter
+# EVMcrispr
 
 This is an official starter Turborepo.
 

apps/evmcrispr-terminal/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@1hive/evmcrispr": "0.10.4",
+    "@1hive/evmcrispr": "*",
     "@chakra-ui/anatomy": "^2.2.2",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/merge-utils": "^2.0.6",
@@ -13,7 +13,6 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@ethersproject/providers": "^5.7.2",
     "@fontsource/ubuntu-mono": "^5.0.20",
     "@heroicons/react": "^2.1.3",
     "@monaco-editor/react": "^4.6.0",
@@ -22,11 +21,10 @@
     "@safe-global/safe-apps-sdk": "^9.1.0",
     "@tanstack/react-query": "^5.45.0",
     "@types/lodash.debounce": "^4.0.9",
-    "@wagmi/core": "^2.11.4",
+    "@wagmi/core": "^2.11.5",
     "buffer": "^6.0.3",
     "chakra-ui-markdown-renderer": "^4.1.0",
     "ethereum-blockies-base64": "^1.0.0",
-    "ethers": "^5.7.2",
     "events": "^3.3.0",
     "framer-motion": "^11.2.10",
     "isomorphic-fetch": "^3.0.0",
@@ -44,7 +42,7 @@
     "remark-gfm": "^4.0.0",
     "styled-components": "6.1.11",
     "viem": "^2.16.1",
-    "wagmi": "^2.10.2",
+    "wagmi": "^2.10.8",
     "zustand": "4.4.7",
     "zustand-x": "^3.0.3"
   },

apps/evmcrispr-terminal/src/components/ActionButtons/index.tsx

@@ -2,25 +2,31 @@ import { useState } from "react";
 import type { Action, TransactionAction } from "@1hive/evmcrispr";
 import { EVMcrispr, isProviderAction, parseScript } from "@1hive/evmcrispr";
 import type { Connector } from "wagmi";
-import { useConnect, useWalletClient } from "wagmi";
-import type { Account, Chain, Transport, WalletClient } from "viem";
+import { useConnect, usePublicClient, useWalletClient } from "wagmi";
+import type {
+  Account,
+  Chain,
+  PublicClient,
+  Transport,
+  WalletClient,
+} from "viem";
+import { createPublicClient } from "viem";
 import { HStack, VStack, useDisclosure } from "@chakra-ui/react";
 import type SafeAppProvider from "@safe-global/safe-apps-sdk";
 
 import LogModal from "../LogModal";
 import ErrorMsg from "./ErrorMsg";
 
-import { config } from "../../wagmi";
+import { config, transports } from "../../wagmi";
 
 import {
   terminalStoreActions,
   useTerminalStore,
 } from "../TerminalEditor/use-terminal-store";
-import { clientToSigner } from "../../utils/ethers";
 import { ExecuteButton } from "./ExecuteButton";
 
 type ActionButtonsType = {
-  address: string;
+  address: `0x${string}` | undefined;
   maximizeGasLimit: boolean;
 };
 
@@ -40,7 +46,8 @@ export default function ActionButtons({
     id: "log",
   });
 
-  const { data: client, refetch } = useWalletClient();
+  let publicClient: PublicClient | undefined = usePublicClient();
+  const { data: walletClient } = useWalletClient();
   const { connectors } = useConnect();
   const safeConnector = connectors.find((c: Connector) => c.id === "safe");
 
@@ -57,30 +64,45 @@ export default function ActionButtons({
     setLogs([]);
   }
 
+  function getChainAndTransport(chainId: number) {
+    const chain: Chain | undefined = config.chains.find(
+      (chain) => Number(chain.id) === chainId,
+    );
+    if (!chain) {
+      throw new Error("Chain not supported");
+    }
+    function isValidChainId(
+      chainId: number,
+    ): chainId is keyof typeof transports {
+      return chainId in transports;
+    }
+    if (!isValidChainId(chainId)) {
+      throw new Error("Transport not supported");
+    }
+    const transport = transports[chainId];
+    return { chain, transport };
+  }
+
   const executeAction = async (
     action: Action,
-    client: WalletClient<Transport, Chain, Account>,
+    walletClient: WalletClient<Transport, Chain, Account>,
     maximizeGasLimit: boolean,
   ) => {
     if (isProviderAction(action)) {
-      const [chainParam] = action.params;
-      await client.switchChain({ id: Number(chainParam.chainId) });
-      const { data: refetchedClient } = await refetch();
-      if (!refetchedClient) {
-        throw new Error("Failed to refetch client after chain switch");
-      }
-      return refetchedClient;
+      const chainId = Number(action.params[0].chainId);
+      await walletClient.switchChain({ id: chainId });
+      const { chain, transport } = getChainAndTransport(chainId);
+      publicClient = createPublicClient({ chain, transport });
     } else {
-      const chainId = await client.getChainId();
-      await client.sendTransaction({
+      const chainId = await walletClient.getChainId();
+      await walletClient.sendTransaction({
         chain: config.chains.find((chain) => chain.id === chainId),
         to: action.to as `0x${string}`,
         from: action.from as `0x${string}`,
         data: action.data as `0x${string}`,
         value: BigInt(action.value || 0),
         gasLimit: maximizeGasLimit ? 10_000_000n : undefined,
       });
-      return client;
     }
   };
 
@@ -89,7 +111,8 @@ export default function ActionButtons({
     terminalStoreActions.isLoading(true);
 
     try {
-      if (client === undefined) throw new Error("Account not connected");
+      if (!address || publicClient === undefined || walletClient === undefined)
+        throw new Error("Account not connected");
 
       const { ast, errors } = parseScript(script);
 
@@ -100,20 +123,21 @@ export default function ActionButtons({
       }
 
       const batched: TransactionAction[] = [];
-      const getSigner = async () => {
-        const { data: client } = await refetch();
-        return clientToSigner(client!);
-      };
-      await new EVMcrispr(ast, getSigner)
+
+      await new EVMcrispr(
+        ast,
+        async () => publicClient!,
+        async () => address,
+      )
         .registerLogListener(logListener)
-        .interpret(async (action) => {
+        .interpret(async (action: Action) => {
           if (inBatch) {
             if (isProviderAction(action)) {
               throw new Error("Batching not supported for provider actions");
             }
             batched.push(action);
           } else {
-            await executeAction(action, client, maximizeGasLimit);
+            await executeAction(action, walletClient, maximizeGasLimit);
           }
         });
 

apps/evmcrispr-terminal/src/components/TerminalEditor/autocompletion.ts

@@ -18,11 +18,12 @@ import {
   hasCommandsBlock,
   parseScript,
 } from "@1hive/evmcrispr";
-import type { providers } from "ethers";
-import { utils } from "ethers";
 import type { IRange } from "monaco-editor";
 import { languages } from "monaco-editor";
 
+import type { PublicClient } from "viem";
+import { isAddress } from "viem";
+
 import { DEFAULT_MODULE_BINDING } from "../../utils";
 
 import { shortenAddress } from "../../utils/web3";
@@ -139,12 +140,14 @@ const buildVarCompletionItems = (
       // Don't return the current declared variable as a suggestion
     } else if (currentArgIndex === 1) {
       const currentVarName = currentCommandNode.args[0].value;
-      varNames = varNames.filter((varName) => varName !== currentVarName);
+      varNames = varNames.filter(
+        (varName: string) => varName !== currentVarName,
+      );
     }
   }
 
   return varNames.map(
-    (name): CompletionItem => ({
+    (name: string): CompletionItem => ({
       label: name,
       insertText: name,
       kind: Variable,
@@ -177,10 +180,8 @@ const buildCurrentArgCompletionItems = (
         eagerBindingsManager,
         currentPos,
       )
-      .map<languages.CompletionItem>((identifier) => ({
-        label: utils.isAddress(identifier)
-          ? shortenAddress(identifier)
-          : identifier,
+      .map((identifier: string) => ({
+        label: isAddress(identifier) ? shortenAddress(identifier) : identifier,
         insertText: identifier,
         range,
         sortText: "1",
@@ -321,10 +322,10 @@ const removePossibleFollowingBlock = (
 
 export const createProvideCompletionItemsFn: (
   bindingsCache: BindingsManager,
-  fetchers: { ipfsResolver: IPFSResolver; provider: providers.Provider },
+  fetchers: { ipfsResolver: IPFSResolver; client: PublicClient },
   ast?: Cas11AST,
 ) => languages.CompletionItemProvider["provideCompletionItems"] =
-  (bindingsCache, { ipfsResolver, provider }, ast) =>
+  (bindingsCache, { ipfsResolver, client }, ast) =>
   async (model, currPos) => {
     const currentLineContent = model.getLineContent(currPos.lineNumber);
     const { startColumn, endColumn } = model.getWordUntilPosition(currPos);
@@ -389,7 +390,7 @@ export const createProvideCompletionItemsFn: (
        * Filter out any command with a commands block that doesn't
        * contain the current caret
        */
-      .filter((c) => {
+      .filter((c: any) => {
         const itHasCommandsBlock = hasCommandsBlock(c);
         const loc = c.loc;
         const currentLine = calibratedCurrPos.line;
@@ -414,7 +415,7 @@ export const createProvideCompletionItemsFn: (
       commandNodes,
       eagerBindingsManager,
       bindingsCache,
-      { provider, ipfsResolver },
+      { client, ipfsResolver },
       calibratedCurrPos,
     );
 
@@ -423,7 +424,7 @@ export const createProvideCompletionItemsFn: (
       commandNodes.filter((c) => ["set", "std:set"].includes(c.name)),
       eagerBindingsManager,
       bindingsCache,
-      { ipfsResolver, provider },
+      { ipfsResolver, client },
       calibratedCurrPos,
     );
 
@@ -437,7 +438,7 @@ export const createProvideCompletionItemsFn: (
         : filteredCommandNodes,
       eagerBindingsManager,
       bindingsCache,
-      { provider, ipfsResolver },
+      { client, ipfsResolver },
       calibratedCurrPos,
     );
 
@@ -487,7 +488,7 @@ export const createProvideCompletionItemsFn: (
         .getAllBindingIdentifiers({
           spaceFilters: [BindingsSpace.ADDR],
         })
-        .map<languages.CompletionItem>((identifier) => ({
+        .map((identifier: string) => ({
           insertText: identifier,
           label: identifier,
           kind: languages.CompletionItemKind.Field,

apps/evmcrispr-terminal/src/components/TerminalEditor/index.tsx

@@ -3,7 +3,7 @@ import type { Monaco } from "@monaco-editor/react";
 
 import { useEffect } from "react";
 
-import { useWalletClient } from "wagmi";
+import { usePublicClient } from "wagmi";
 
 import { IPFSResolver } from "@1hive/evmcrispr";
 
@@ -17,7 +17,6 @@ import { createProvideCompletionItemsFn } from "./autocompletion";
 import { theme } from "./theme";
 import { terminalStoreActions, useTerminalStore } from "./use-terminal-store";
 import { useDebounce } from "../../hooks/useDebounce";
-import { clientToSigner } from "../../utils/ethers";
 
 export default function TerminalEditor() {
   const monaco = useMonaco();
@@ -26,8 +25,7 @@ export default function TerminalEditor() {
 
   const { bindingsCache, script, ast, currentModuleNames } = useTerminalStore();
 
-  const { data: client } = useWalletClient();
-  const provider = client ? clientToSigner(client).provider : undefined;
+  const publicClient = usePublicClient();
 
   const debouncedScript = useDebounce(script, 200);
 
@@ -69,15 +67,15 @@ export default function TerminalEditor() {
   }, [monaco, currentModuleNames, bindingsCache]);
 
   useEffect(() => {
-    if (!monaco || !provider) {
+    if (!monaco || !publicClient) {
       return;
     }
     const completionProvider = monaco.languages.registerCompletionItemProvider(
       "evmcl",
       {
         provideCompletionItems: createProvideCompletionItemsFn(
           bindingsCache,
-          { provider, ipfsResolver },
+          { client: publicClient, ipfsResolver },
           ast,
         ),
       },
@@ -86,7 +84,7 @@ export default function TerminalEditor() {
     return () => {
       completionProvider.dispose();
     };
-  }, [bindingsCache, monaco, provider, ast]);
+  }, [bindingsCache, monaco, publicClient, ast]);
 
   function handleBeforeMountEditor(monaco: Monaco) {
     monaco.editor.defineTheme("theme", theme);

apps/evmcrispr-terminal/src/components/TerminalEditor/use-terminal-store.ts

@@ -7,7 +7,8 @@ import type {
 } from "@1hive/evmcrispr";
 import { BindingsManager, NodeType, parseScript } from "@1hive/evmcrispr";
 import { createStore } from "zustand-x";
-import type { providers } from "ethers";
+
+import type { PublicClient } from "viem";
 
 import { runEagerExecutions } from "./autocompletion";
 import { DEFAULT_MODULE_BINDING } from "../../utils";
@@ -89,7 +90,7 @@ const terminalStore = createStore("terminal-store")(initialState, {
       });
       const fetchers = {} as {
         ipfsResolver: IPFSResolver;
-        provider: providers.Provider;
+        client: PublicClient;
       };
       const pos = {} as Position;
       const oldModules = get.currentModuleNames();
@@ -152,7 +153,9 @@ const terminalStore = createStore("terminal-store")(initialState, {
       ]);
 
       set.ast(ast);
-      set.updateCurrentModules(commandNodes.filter((c) => c.name === "load"));
+      set.updateCurrentModules(
+        commandNodes.filter((c: CommandExpressionNode) => c.name === "load"),
+      );
     },
     updateCurrentLine(currentLine: number) {
       set.lastLine(get.currentLine());

apps/evmcrispr-terminal/src/components/TerminalHeader/index.tsx

@@ -24,10 +24,11 @@ import { terminalStoreActions } from "../TerminalEditor/use-terminal-store";
 export default function TerminalHeader({
   address,
 }: {
+  // TODO: It looks like it should not be here
   terminalStoreActions: {
     errors: (param: string[]) => void;
   };
-  address: string;
+  address: `0x${string}` | undefined;
 }) {
   const { disconnect } = useDisconnect();
   const { connect, connectors } = useConnect();
@@ -45,7 +46,8 @@ export default function TerminalHeader({
     terminalStoreActions.errors([]);
     disconnect();
   }
-  const addressShortened = `${address.slice(0, 6)}..${address.slice(-4)}`;
+  const addressShortened =
+    address && `${address.slice(0, 6)}..${address.slice(-4)}`;
 
   return (
     <>