feature: migrate from ethers to viem

nucypher · Dec 4, 2023 · 4806ac4 · 4806ac4
1 parent c48ab36
commit 4806ac4
Show file tree

Hide file tree

Showing 66 changed files with 1,322 additions and 730 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,3 @@
 *.md
+**/dist/**
+**/build/**
diff --git a/demos/taco-demo/package.json b/demos/taco-demo/package.json
@@ -9,7 +9,9 @@
     "build": "pnpm clean && webpack --mode production --progress",
     "clean": "rimraf build",
     "check": "pnpm type-check && pnpm build",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --ext .ts src",
+    "lint:fix": "pnpm lint --fix"
   },
   "dependencies": {
     "@nucypher/taco": "^0.1.0-rc.6",
@@ -21,7 +23,8 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-spinners": "^0.13.6"
+    "react-spinners": "^0.13.6",
+    "viem": "^1.19.9"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
@@ -34,7 +37,7 @@
     "react-refresh": "^0.14.0",
     "rimraf": "^5.0.5",
     "stream-browserify": "^3.0.0",
-    "typescript": "^4.8.3",
+    "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.11.1"

diff --git a/demos/taco-demo/src/App.tsx b/demos/taco-demo/src/App.tsx
@@ -8,14 +8,16 @@ import {
   ThresholdMessageKit,
 } from '@nucypher/taco';
 import { Mumbai, useEthers } from '@usedapp/core';
-import { ethers } from 'ethers';
 import React, { useEffect, useState } from 'react';
+import 'viem/window';
+
+import { createPublicClient, createWalletClient, custom } from 'viem';
 
 import { ConditionBuilder } from './ConditionBuilder';
+import { DEFAULT_DOMAIN, DEFAULT_RITUAL_ID } from './config';
 import { Decrypt } from './Decrypt';
 import { Encrypt } from './Encrypt';
 import { Spinner } from './Spinner';
-import { DEFAULT_DOMAIN, DEFAULT_RITUAL_ID } from './config';
 
 export default function App() {
   const { activateBrowserWallet, deactivate, account, switchNetwork } =
@@ -36,42 +38,60 @@ export default function App() {
   }, []);
 
   const encryptMessage = async (message: string) => {
+    if (!window.ethereum) {
+      console.error('You need to connect to your wallet first');
+      return;
+    }
     if (!condition) {
       return;
     }
     setLoading(true);
 
     await switchNetwork(Mumbai.chainId);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const publicClient = createPublicClient({
+      transport: custom(window.ethereum),
+    });
+    const walletClient = createWalletClient({
+      transport: custom(window.ethereum),
+    });
     const encryptedMessage = await encrypt(
-      provider,
+      publicClient,
       domain,
       message,
       condition,
       ritualId,
-      provider.getSigner(),
+      walletClient,
     );
 
     setEncryptedMessage(encryptedMessage);
     setLoading(false);
   };
 
   const decryptMessage = async (encryptedMessage: ThresholdMessageKit) => {
+    if (!window.ethereum) {
+      console.error('You need to connect to your wallet first');
+      return;
+    }
     if (!condition) {
       return;
     }
     setLoading(true);
     setDecryptedMessage('');
     setDecryptionErrors([]);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const publicClient = createPublicClient({
+      transport: custom(window.ethereum),
+    });
+    const walletClient = createWalletClient({
+      transport: custom(window.ethereum),
+    });
     const decryptedMessage = await decrypt(
-      provider,
+      publicClient,
       domain,
       encryptedMessage,
       getPorterUri(domain),
-      provider.getSigner(),
+      walletClient,
     );
 
     setDecryptedMessage(new TextDecoder().decode(decryptedMessage));

diff --git a/demos/taco-demo/src/react-app-env.d.ts b/demos/taco-demo/src/react-app-env.d.ts
diff --git a/demos/taco-demo/webpack.config.js b/demos/taco-demo/webpack.config.js
@@ -33,8 +33,8 @@ module.exports = {
           DEFAULT_RITUAL_ID: JSON.stringify(process.env.DEFAULT_RITUAL_ID),
           DEFAULT_DOMAIN: JSON.stringify(process.env.DEFAULT_DOMAIN),
         },
-      }
-    })
+      },
+    }),
   ].filter(Boolean),
   module: {
     rules: [

diff --git a/demos/taco-nft-demo/package.json b/demos/taco-nft-demo/package.json
@@ -9,7 +9,9 @@
     "build": "pnpm clean && webpack --mode production --progress",
     "clean": "rimraf build",
     "check": "pnpm type-check && pnpm build",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "lint": "eslint --ext .ts src",
+    "lint:fix": "pnpm lint --fix"
   },
   "dependencies": {
     "@nucypher/taco": "^0.1.0-rc.6",
@@ -21,7 +23,8 @@
     "react": "^18.2.0",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "^18.2.0",
-    "react-spinners": "^0.13.6"
+    "react-spinners": "^0.13.6",
+    "viem": "^1.19.9"
   },
   "devDependencies": {
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
@@ -34,7 +37,7 @@
     "react-refresh": "^0.14.0",
     "rimraf": "^5.0.5",
     "stream-browserify": "^3.0.0",
-    "typescript": "^4.8.3",
+    "typescript": "^5.2.2",
     "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.11.1"

diff --git a/demos/taco-nft-demo/src/App.tsx b/demos/taco-nft-demo/src/App.tsx
@@ -8,8 +8,9 @@ import {
   ThresholdMessageKit,
 } from '@nucypher/taco';
 import { Mumbai, useEthers } from '@usedapp/core';
-import { ethers } from 'ethers';
 import React, { useEffect, useState } from 'react';
+import 'viem/window';
+import { createPublicClient, createWalletClient, custom } from 'viem';
 
 import { Decrypt } from './Decrypt';
 import { Encrypt } from './Encrypt';
@@ -35,42 +36,60 @@ export default function App() {
   }, []);
 
   const encryptMessage = async (message: string) => {
+    if (!window.ethereum) {
+      console.error('You need to connect to your wallet first');
+      return;
+    }
     if (!condition) {
       return;
     }
     setLoading(true);
 
     await switchNetwork(Mumbai.chainId);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const publicClient = createPublicClient({
+      transport: custom(window.ethereum),
+    });
+    const walletClient = createWalletClient({
+      transport: custom(window.ethereum),
+    });
     const encryptedMessage = await encrypt(
-      provider,
+      publicClient,
       domain,
       message,
       condition,
       ritualId,
-      provider.getSigner(),
+      walletClient,
     );
 
     setEncryptedMessage(encryptedMessage);
     setLoading(false);
   };
 
   const decryptMessage = async (encryptedMessage: ThresholdMessageKit) => {
+    if (!window.ethereum) {
+      console.error('You need to connect to your wallet first');
+      return;
+    }
     if (!condition) {
       return;
     }
     setLoading(true);
     setDecryptedMessage('');
     setDecryptionErrors([]);
 
-    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    const publicClient = createPublicClient({
+      transport: custom(window.ethereum),
+    });
+    const walletClient = createWalletClient({
+      transport: custom(window.ethereum),
+    });
     const decryptedMessage = await decrypt(
-      provider,
+      publicClient,
       domain,
       encryptedMessage,
       getPorterUri(domain),
-      provider.getSigner(),
+      walletClient,
     );
 
     setDecryptedMessage(new TextDecoder().decode(decryptedMessage));

diff --git a/demos/taco-nft-demo/src/react-app-env.d.ts b/demos/taco-nft-demo/src/react-app-env.d.ts
diff --git a/demos/taco-nft-demo/webpack.config.js b/demos/taco-nft-demo/webpack.config.js
@@ -33,8 +33,8 @@ module.exports = {
           DEFAULT_RITUAL_ID: JSON.stringify(process.env.DEFAULT_RITUAL_ID),
           DEFAULT_DOMAIN: JSON.stringify(process.env.DEFAULT_DOMAIN),
         },
-      }
-    })
+      },
+    }),
   ].filter(Boolean),
   module: {
     rules: [

diff --git a/examples/pre/nextjs/package.json b/examples/pre/nextjs/package.json
@@ -11,14 +11,16 @@
   },
   "dependencies": {
     "@nucypher/pre": "workspace:*",
+    "next": "14.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "viem": "^1.19.9"
+  },
+  "devDependencies": {
     "@types/node": "20.10.0",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.14",
     "eslint": "8.54.0",
-    "eslint-config-next": "14.0.3",
-    "ethers": "^5.7.2",
-    "next": "14.0.3",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "eslint-config-next": "14.0.3"
   }
 }
diff --git a/examples/pre/nextjs/src/app/page.tsx b/examples/pre/nextjs/src/app/page.tsx
@@ -9,18 +9,13 @@ import {
   SecretKey,
   toHexString,
 } from '@nucypher/pre';
-import { ethers } from 'ethers';
-import { hexlify } from "ethers/lib/utils";
 import { useEffect, useState } from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-declare const window: any;
+import { createWalletClient, custom, toHex, WalletClient } from 'viem';
+import 'viem/window';
 
 function App() {
   const [isInit, setIsInit] = useState<boolean>(false);
-  const [provider, setProvider] = useState<
-    ethers.providers.Web3Provider | undefined
-  >();
+  const [walletClient, setWalletClient] = useState<WalletClient | undefined>();
   const [alice, setAlice] = useState<Alice | undefined>();
   const [bob, setBob] = useState<Bob | undefined>();
   const [policy, setPolicy] = useState<EnactedPolicy>();
@@ -30,32 +25,33 @@ function App() {
     setIsInit(true);
   };
 
-  const loadWeb3Provider = async () => {
+  const loadWalletClient = async () => {
     if (!window.ethereum) {
       console.error('You need to connect to your wallet first');
+      return;
     }
-    const provider = new ethers.providers.Web3Provider(window.ethereum, 'any');
-
-    const { chainId } = await provider.getNetwork();
+    const walletClient = createWalletClient({
+      transport: custom(window.ethereum),
+    });
+    const chainId = await walletClient.getChainId();
     const mumbaiChainId = 80001;
     if (chainId !== mumbaiChainId) {
       // Switch to Polygon Mumbai testnet
       await window.ethereum.request({
         method: 'wallet_switchEthereumChain',
-        params: [{ chainId: hexlify(mumbaiChainId) }],
+        params: [{ chainId: toHex(mumbaiChainId) }],
       });
     }
 
-    await provider.send('eth_requestAccounts', []);
-    setProvider(provider);
+    setWalletClient(walletClient);
   };
 
   useEffect(() => {
     initNucypher();
-    loadWeb3Provider();
+    loadWalletClient();
   }, []);
 
-  if (!isInit || !provider) {
+  if (!isInit || !walletClient) {
     return <div>Loading...</div>;
   }
 
@@ -82,7 +78,7 @@ function App() {
   const getRandomLabel = () => `label-${new Date().getTime()}`;
 
   const runExample = async () => {
-    if (!provider) {
+    if (!walletClient) {
       console.error('You need to connect to your wallet first');
       return;
     }
@@ -106,8 +102,7 @@ function App() {
       endDate,
     };
     const policy = await alice.grant(
-      provider,
-      provider.getSigner(),
+      walletClient,
       domains.TESTNET,
       getPorterUri(domains.TESTNET),
       policyParams,

diff --git a/examples/pre/nodejs/package.json b/examples/pre/nodejs/package.json
@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "@nucypher/pre": "workspace:*",
-    "dotenv": "^16.3.1",
-    "ethers": "^5.7.2"
+    "viem": "^1.19.9"
+  },
+  "devDependencies": {
+    "dotenv": "^16.3.1"
   }
 }