From ea051baa96334f64669a2fb33fe00f3cc634cfd5 Mon Sep 17 00:00:00 2001 From: jdevcs Date: Wed, 15 Jan 2025 13:19:40 +0100 Subject: [PATCH 1/5] viem migration guide --- docs/docs/guides/18_migration_viem/index.md | 271 +++++++++++++++++++- 1 file changed, 270 insertions(+), 1 deletion(-) diff --git a/docs/docs/guides/18_migration_viem/index.md b/docs/docs/guides/18_migration_viem/index.md index e85a40dd999..fae029224d2 100644 --- a/docs/docs/guides/18_migration_viem/index.md +++ b/docs/docs/guides/18_migration_viem/index.md @@ -4,4 +4,273 @@ title: 'Migration from Web3.js to Viem' position: 18 --- -Coming soon. +# Migration from Web3.js to Viem + +This guide will help you migrate from Web3.js to Viem for interacting with the Ethereum blockchain. The guide provides code examples for both libraries to ease the transition. + +## Installation + +To begin migrating from Web3.js to Viem, first install the Viem package: + +```bash +npm install viem +``` + +## Providers Initialization + +When migrating from Web3.js to Viem, the first step is updating how you connect to the Ethereum network. Both libraries use providers, but their initialization differs. + +### Web3.js + +```javascript +import Web3 from 'web3'; + +const web3 = new Web3(providerURL); +``` + +### Viem + +```javascript +import { createPublicClient, http } from 'viem'; + +const client = createPublicClient({ transport: http(providerURL) }); +const blockNumber = await client.getBlockNumber(); +``` + +## Browser-injected Provider + +For browser wallet connections like MetaMask, update how you handle the injected provider. + +### Web3.js + +```javascript +const web3 = new Web3(window.ethereum); +``` + +### Viem + +```javascript +import { createWalletClient, custom } from 'viem' +import { mainnet } from 'viem/chains' + +const client = createWalletClient({ + chain: mainnet, + transport: custom(window.ethereum!) +}) +``` + +## Wallets and Accounts - Generate Private Key + +If your code generates private keys, here’s how to migrate that functionality. + +### Web3.js + +```javascript +const privateKey = web3.eth.accounts.create().privateKey; +console.log(privateKey); +``` + +### Viem + +```javascript +import { generatePrivateKey } from 'viem/accounts'; + +const privateKey = generatePrivateKey(); +console.log(privateKey); +``` + +## Wallets and Accounts - Create a Wallet + +Update how accounts are added to wallets. + +### Web3.js + +```javascript +const web3 = new Web3(); +const wallet = web3.eth.accounts.wallet.add(privateKey); +console.log(wallet[0].address); +``` + +### Viem + +```javascript +import { createWalletClient, http } from 'viem'; +import { privateKeyToAccount } from 'viem/accounts'; +import { mainnet } from 'viem/chains'; + +const account = privateKeyToAccount(privateKey); + +const client = createWalletClient({ + account, + chain: mainnet, + transport: http(), +}); +``` + +## Signing Messages + +Update how you handle message signing. + +### Web3.js + +```javascript +const signature = web3.eth.accounts.sign('Some data', privateKey).signature; +console.log(signature); +``` + +### Viem + +```javascript +import { createWalletClient, custom } from 'viem' +import { mainnet } from 'viem/chains' + +export const walletClient = createWalletClient({ + chain: mainnet, + transport: custom(window.ethereum!), +}); + +export const [account] = await walletClient.getAddresses(); + +const signature = await walletClient.signMessage({ + account, + message: 'Some data', +}); + +``` + +## Transaction + +### Web3.js + +```javascript +const tx = await web3.eth.sendTransaction({ + from: account, + to: '0x92d3267215Ec56542b985473E73C8417403B15ac', + value: web3.utils.toWei('0.001', 'ether'), +}); +``` + +### Viem + +```javascript +import { createWalletClient, custom } from 'viem' +import { mainnet } from 'viem/chains' + +export const walletClient = createWalletClient({ + chain: mainnet, + transport: custom(window.ethereum!), +}); + +export const [account] = await walletClient.getAddresses(); + +const hash = await walletClient.sendTransaction({ + account, + to: '0x92d3267215Ec56542b985473E73C8417403B15ac', + value: 100000000000000n +}); + +``` + +## Contracts + +### Contract Deployment + +### Web3.js + +```javascript +// use existing web3 instance connected with http provider +const contract = new web3.eth.Contract(abi); +const deployTx = await contract + .deploy({ + data: bytecode, + arguments: ['constructor param'], + }) + .send({ + from: account, + gas: '1000000', + }); +console.log(deployTx.options.address); +``` + +### Viem + +```javascript +//import { deployContract } from 'viem' +import { createWalletClient, custom } from 'viem'; +import { mainnet } from 'viem/chains'; + +export const walletClient = createWalletClient({ + chain: mainnet, + transport: custom(window.ethereum), +}); + +const hash = await walletClient.deployContract({ + abi, + account, //given account + args: [69420], + bytecode: '0x608060405260405161083e38038061083e833981016040819052610...', +}); +``` + +### Contract Method Calls + +#### Web3.js + +```javascript +const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS); +const result = await contract.methods.someFunction().call(); +console.log(result); +``` + +#### Viem + +```javascript +const data = await publicClient.readContract({ + address: '0x92d3267215Ec56542b985473E73C8417403B15ac', + abi: wagmiAbi, + functionName: 'tokenTotalSupply', +}); +``` + +### Contract Events + +#### Web3.js + +```javascript +const event = contract.events.SomeEvent({ fromBlock: 0 }); +event.on('data', resolve); +event.on('error', reject); +``` + +#### Viem + +```javascript +const unwatch = publicClient.watchContractEvent({ + address: '0x92d3267215Ec56542b985473E73C8417403B15ac', + abi: wagmiAbi, + eventName: 'Transfer', + args: { from: '0x34d3267215Ec56542b985473E73C8417403B1533' }, + onLogs: logs => console.log(logs), +}); +``` + +## Utility Methods + +### Hashing + +When migrating code that computes Keccak-256 hashes, you'll need to update from Web3.js's utility methods: + +#### web3.js + +``` +// keccak256 method with broader input support in web3.js +const hash = web3.utils.keccak256('hello world'); +``` + +#### viem + +``` +import { keccak256 } from 'viem' + +keccak256(toHex('hello world')); +``` From 45357dc0098d387fff27d64aaa3c05b16a297b6d Mon Sep 17 00:00:00 2001 From: jdevcs Date: Wed, 15 Jan 2025 13:39:53 +0100 Subject: [PATCH 2/5] desc --- docs/docs/guides/18_migration_viem/index.md | 56 ++++++++------------- 1 file changed, 22 insertions(+), 34 deletions(-) diff --git a/docs/docs/guides/18_migration_viem/index.md b/docs/docs/guides/18_migration_viem/index.md index fae029224d2..38d3a78220a 100644 --- a/docs/docs/guides/18_migration_viem/index.md +++ b/docs/docs/guides/18_migration_viem/index.md @@ -6,21 +6,19 @@ position: 18 # Migration from Web3.js to Viem -This guide will help you migrate from Web3.js to Viem for interacting with the Ethereum blockchain. The guide provides code examples for both libraries to ease the transition. +This guide will help you migrate from Web3.js v4 to Viem v2 for interacting with the Ethereum blockchain. The guide provides code examples for both libraries for transition. ## Installation To begin migrating from Web3.js to Viem, first install the Viem package: ```bash -npm install viem +npm install viem@2 ``` ## Providers Initialization -When migrating from Web3.js to Viem, the first step is updating how you connect to the Ethereum network. Both libraries use providers, but their initialization differs. - -### Web3.js +When migrating from Web3.js to viem, the first step is to update how you connect to the Ethereum network. Both libraries use providers, but their initialization differs. ```javascript import Web3 from 'web3'; @@ -28,7 +26,7 @@ import Web3 from 'web3'; const web3 = new Web3(providerURL); ``` -### Viem +To migrate this to viem, you'll need to replace it with using `createPublicClient()`. This function creates a client for interacting with the Ethereum network. ```javascript import { createPublicClient, http } from 'viem'; @@ -41,13 +39,11 @@ const blockNumber = await client.getBlockNumber(); For browser wallet connections like MetaMask, update how you handle the injected provider. -### Web3.js - ```javascript const web3 = new Web3(window.ethereum); ``` -### Viem +To migrate this to viem, you'll need to use `createWalletClient()` with `custom()` instead of creating a new Web3 instance. ```javascript import { createWalletClient, custom } from 'viem' @@ -61,16 +57,14 @@ const client = createWalletClient({ ## Wallets and Accounts - Generate Private Key -If your code generates private keys, here’s how to migrate that functionality. - -### Web3.js +If your code generates private keys, here’s how to migrate that functionality. In web3.js if you are using: ```javascript const privateKey = web3.eth.accounts.create().privateKey; console.log(privateKey); ``` -### Viem +To migrate this to viem, you'll use the `generatePrivateKey()` function from the 'viem/accounts' module. ```javascript import { generatePrivateKey } from 'viem/accounts'; @@ -81,9 +75,7 @@ console.log(privateKey); ## Wallets and Accounts - Create a Wallet -Update how accounts are added to wallets. - -### Web3.js +When migrating from Web3.js to viem, you'll need to update how you create and manage wallets. The process of adding accounts to wallets differs between the two libraries. In web3.js : ```javascript const web3 = new Web3(); @@ -91,7 +83,7 @@ const wallet = web3.eth.accounts.wallet.add(privateKey); console.log(wallet[0].address); ``` -### Viem +To migrate this to viem, you'll use privateKeyToAccount() to create an account, and then can pass it to createWalletClient() for using it with client. ```javascript import { createWalletClient, http } from 'viem'; @@ -109,16 +101,14 @@ const client = createWalletClient({ ## Signing Messages -Update how you handle message signing. - -### Web3.js +Update how you handle message signing, following is web3.js example: ```javascript const signature = web3.eth.accounts.sign('Some data', privateKey).signature; console.log(signature); ``` -### Viem +To sign message using viem, you can use `signMessage()` method. ```javascript import { createWalletClient, custom } from 'viem' @@ -140,7 +130,7 @@ const signature = await walletClient.signMessage({ ## Transaction -### Web3.js +When migrating transaction sending code, you'll need to update how transactions are signed and sent. ```javascript const tx = await web3.eth.sendTransaction({ @@ -150,7 +140,7 @@ const tx = await web3.eth.sendTransaction({ }); ``` -### Viem +In viem there is `sendTransaction()` function avalible with sendTransaction. ```javascript import { createWalletClient, custom } from 'viem' @@ -163,7 +153,7 @@ export const walletClient = createWalletClient({ export const [account] = await walletClient.getAddresses(); -const hash = await walletClient.sendTransaction({ +const hash = await sendTransaction.sendTransaction({ account, to: '0x92d3267215Ec56542b985473E73C8417403B15ac', value: 100000000000000n @@ -175,7 +165,7 @@ const hash = await walletClient.sendTransaction({ ### Contract Deployment -### Web3.js +When migrating contract deployment code, you'll need to update from Web3.js's deploy and send pattern: ```javascript // use existing web3 instance connected with http provider @@ -192,7 +182,7 @@ const deployTx = await contract console.log(deployTx.options.address); ``` -### Viem +In viem there is `deployContract()` function that can be used for contracts deployment. ```javascript //import { deployContract } from 'viem' @@ -214,7 +204,7 @@ const hash = await walletClient.deployContract({ ### Contract Method Calls -#### Web3.js +When migrating contract method calls, you'll need to update from Web3.js's `contract.methods.someFunction().call()` ```javascript const contract = new web3.eth.Contract(ABI, CONTRACT_ADDRESS); @@ -222,7 +212,7 @@ const result = await contract.methods.someFunction().call(); console.log(result); ``` -#### Viem +In viem you you can use `readContract()` function ```javascript const data = await publicClient.readContract({ @@ -234,7 +224,7 @@ const data = await publicClient.readContract({ ### Contract Events -#### Web3.js +When migrating event handling code, you'll need to update from Web3.js's events interface: ```javascript const event = contract.events.SomeEvent({ fromBlock: 0 }); @@ -242,7 +232,7 @@ event.on('data', resolve); event.on('error', reject); ``` -#### Viem +In viem there is `watchContractEvent()` function. ```javascript const unwatch = publicClient.watchContractEvent({ @@ -250,7 +240,7 @@ const unwatch = publicClient.watchContractEvent({ abi: wagmiAbi, eventName: 'Transfer', args: { from: '0x34d3267215Ec56542b985473E73C8417403B1533' }, - onLogs: logs => console.log(logs), + onLogs: logs => func(logs), }); ``` @@ -260,14 +250,12 @@ const unwatch = publicClient.watchContractEvent({ When migrating code that computes Keccak-256 hashes, you'll need to update from Web3.js's utility methods: -#### web3.js - ``` // keccak256 method with broader input support in web3.js const hash = web3.utils.keccak256('hello world'); ``` -#### viem +In viem there is `keccak256()` function for keccak256. ``` import { keccak256 } from 'viem' From f0629eebb40aa77d9d3e69f721bd2f88e43cfc51 Mon Sep 17 00:00:00 2001 From: jdevcs Date: Wed, 15 Jan 2025 13:46:47 +0100 Subject: [PATCH 3/5] updates --- docs/docs/guides/18_migration_viem/index.md | 26 ++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/docs/docs/guides/18_migration_viem/index.md b/docs/docs/guides/18_migration_viem/index.md index 38d3a78220a..deeeb062213 100644 --- a/docs/docs/guides/18_migration_viem/index.md +++ b/docs/docs/guides/18_migration_viem/index.md @@ -16,9 +16,9 @@ To begin migrating from Web3.js to Viem, first install the Viem package: npm install viem@2 ``` -## Providers Initialization +## Providers -When migrating from Web3.js to viem, the first step is to update how you connect to the Ethereum network. Both libraries use providers, but their initialization differs. +When migrating from Web3.js to Viem, the first step is to update how you connect to the Ethereum network. Both libraries use providers, but their initialization differs. ```javascript import Web3 from 'web3'; @@ -26,7 +26,7 @@ import Web3 from 'web3'; const web3 = new Web3(providerURL); ``` -To migrate this to viem, you'll need to replace it with using `createPublicClient()`. This function creates a client for interacting with the Ethereum network. +To migrate this to Viem, you'll need to replace it with using `createPublicClient()`. This function creates a client for interacting with the Ethereum network. ```javascript import { createPublicClient, http } from 'viem'; @@ -43,7 +43,7 @@ For browser wallet connections like MetaMask, update how you handle the injected const web3 = new Web3(window.ethereum); ``` -To migrate this to viem, you'll need to use `createWalletClient()` with `custom()` instead of creating a new Web3 instance. +To migrate this to Viem, you'll need to use `createWalletClient()` with `custom()` instead of creating a new Web3 instance. ```javascript import { createWalletClient, custom } from 'viem' @@ -64,7 +64,7 @@ const privateKey = web3.eth.accounts.create().privateKey; console.log(privateKey); ``` -To migrate this to viem, you'll use the `generatePrivateKey()` function from the 'viem/accounts' module. +To migrate this to Viem, you'll use the `generatePrivateKey()` function from the 'viem/accounts' module. ```javascript import { generatePrivateKey } from 'viem/accounts'; @@ -75,7 +75,7 @@ console.log(privateKey); ## Wallets and Accounts - Create a Wallet -When migrating from Web3.js to viem, you'll need to update how you create and manage wallets. The process of adding accounts to wallets differs between the two libraries. In web3.js : +When migrating from Web3.js to Viem, you'll need to update how you create and manage wallets. The process of adding accounts to wallets differs between the two libraries. In web3.js : ```javascript const web3 = new Web3(); @@ -83,7 +83,7 @@ const wallet = web3.eth.accounts.wallet.add(privateKey); console.log(wallet[0].address); ``` -To migrate this to viem, you'll use privateKeyToAccount() to create an account, and then can pass it to createWalletClient() for using it with client. +To migrate this to Viem, you'll use privateKeyToAccount() to create an account, and then can pass it to createWalletClient() for using it with client. ```javascript import { createWalletClient, http } from 'viem'; @@ -108,7 +108,7 @@ const signature = web3.eth.accounts.sign('Some data', privateKey).signature; console.log(signature); ``` -To sign message using viem, you can use `signMessage()` method. +To sign message using Viem, you can use `signMessage()` method. ```javascript import { createWalletClient, custom } from 'viem' @@ -140,7 +140,7 @@ const tx = await web3.eth.sendTransaction({ }); ``` -In viem there is `sendTransaction()` function avalible with sendTransaction. +In Viem there is `sendTransaction()` function avalible with sendTransaction. ```javascript import { createWalletClient, custom } from 'viem' @@ -182,7 +182,7 @@ const deployTx = await contract console.log(deployTx.options.address); ``` -In viem there is `deployContract()` function that can be used for contracts deployment. +In Viem there is `deployContract()` function that can be used for contracts deployment. ```javascript //import { deployContract } from 'viem' @@ -212,7 +212,7 @@ const result = await contract.methods.someFunction().call(); console.log(result); ``` -In viem you you can use `readContract()` function +In Viem you you can use `readContract()` function ```javascript const data = await publicClient.readContract({ @@ -232,7 +232,7 @@ event.on('data', resolve); event.on('error', reject); ``` -In viem there is `watchContractEvent()` function. +In Viem there is `watchContractEvent()` function. ```javascript const unwatch = publicClient.watchContractEvent({ @@ -255,7 +255,7 @@ When migrating code that computes Keccak-256 hashes, you'll need to update from const hash = web3.utils.keccak256('hello world'); ``` -In viem there is `keccak256()` function for keccak256. +In Viem there is `keccak256()` function for keccak256. ``` import { keccak256 } from 'viem' From 4831eab67e3c4693afbb5535e2033de70f8c22db Mon Sep 17 00:00:00 2001 From: jdevcs Date: Wed, 15 Jan 2025 13:57:52 +0100 Subject: [PATCH 4/5] updates --- docs/docs/guides/18_migration_viem/index.md | 22 ++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/docs/docs/guides/18_migration_viem/index.md b/docs/docs/guides/18_migration_viem/index.md index deeeb062213..6d6f045006c 100644 --- a/docs/docs/guides/18_migration_viem/index.md +++ b/docs/docs/guides/18_migration_viem/index.md @@ -114,12 +114,12 @@ To sign message using Viem, you can use `signMessage()` method. import { createWalletClient, custom } from 'viem' import { mainnet } from 'viem/chains' -export const walletClient = createWalletClient({ +const walletClient = createWalletClient({ chain: mainnet, transport: custom(window.ethereum!), }); -export const [account] = await walletClient.getAddresses(); +const [account] = await walletClient.getAddresses(); const signature = await walletClient.signMessage({ account, @@ -140,20 +140,20 @@ const tx = await web3.eth.sendTransaction({ }); ``` -In Viem there is `sendTransaction()` function avalible with sendTransaction. +In Viem there is `sendTransaction()` function avalible with walletClient. ```javascript import { createWalletClient, custom } from 'viem' import { mainnet } from 'viem/chains' -export const walletClient = createWalletClient({ +const walletClient = createWalletClient({ chain: mainnet, transport: custom(window.ethereum!), }); -export const [account] = await walletClient.getAddresses(); +const [account] = await walletClient.getAddresses(); -const hash = await sendTransaction.sendTransaction({ +const hash = await walletClient.sendTransaction({ account, to: '0x92d3267215Ec56542b985473E73C8417403B15ac', value: 100000000000000n @@ -168,7 +168,7 @@ const hash = await sendTransaction.sendTransaction({ When migrating contract deployment code, you'll need to update from Web3.js's deploy and send pattern: ```javascript -// use existing web3 instance connected with http provider +// use existing web3 instance connected with provider const contract = new web3.eth.Contract(abi); const deployTx = await contract .deploy({ @@ -189,7 +189,7 @@ In Viem there is `deployContract()` function that can be used for contracts depl import { createWalletClient, custom } from 'viem'; import { mainnet } from 'viem/chains'; -export const walletClient = createWalletClient({ +const walletClient = createWalletClient({ chain: mainnet, transport: custom(window.ethereum), }); @@ -212,7 +212,7 @@ const result = await contract.methods.someFunction().call(); console.log(result); ``` -In Viem you you can use `readContract()` function +In Viem `readContract()` function can be used for method calls. ```javascript const data = await publicClient.readContract({ @@ -224,7 +224,7 @@ const data = await publicClient.readContract({ ### Contract Events -When migrating event handling code, you'll need to update from Web3.js's events interface: +When migrating event handling code, you'll need to update from Web3.js's events code : ```javascript const event = contract.events.SomeEvent({ fromBlock: 0 }); @@ -248,7 +248,7 @@ const unwatch = publicClient.watchContractEvent({ ### Hashing -When migrating code that computes Keccak-256 hashes, you'll need to update from Web3.js's utility methods: +When migrating code that computes Keccak-256 hashes, you'll need to update from Web3.js's utility method: ``` // keccak256 method with broader input support in web3.js From d86a7af795df0a1a6b70fd376aa7eaf10721ddfc Mon Sep 17 00:00:00 2001 From: jdevcs Date: Thu, 16 Jan 2025 11:36:02 +0100 Subject: [PATCH 5/5] updates --- docs/docs/guides/18_migration_viem/index.md | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/docs/guides/18_migration_viem/index.md b/docs/docs/guides/18_migration_viem/index.md index 6d6f045006c..b4fee378ebd 100644 --- a/docs/docs/guides/18_migration_viem/index.md +++ b/docs/docs/guides/18_migration_viem/index.md @@ -32,7 +32,6 @@ To migrate this to Viem, you'll need to replace it with using `createPublicClien import { createPublicClient, http } from 'viem'; const client = createPublicClient({ transport: http(providerURL) }); -const blockNumber = await client.getBlockNumber(); ``` ## Browser-injected Provider @@ -46,13 +45,13 @@ const web3 = new Web3(window.ethereum); To migrate this to Viem, you'll need to use `createWalletClient()` with `custom()` instead of creating a new Web3 instance. ```javascript -import { createWalletClient, custom } from 'viem' -import { mainnet } from 'viem/chains' +import { createWalletClient, custom } from 'viem'; +import { mainnet } from 'viem/chains'; const client = createWalletClient({ - chain: mainnet, - transport: custom(window.ethereum!) -}) + chain: mainnet, + transport: custom(window.ethereum), +}); ``` ## Wallets and Accounts - Generate Private Key @@ -143,7 +142,7 @@ const tx = await web3.eth.sendTransaction({ In Viem there is `sendTransaction()` function avalible with walletClient. ```javascript -import { createWalletClient, custom } from 'viem' +import { createWalletClient, custom, parseEther } from 'viem' import { mainnet } from 'viem/chains' const walletClient = createWalletClient({ @@ -156,7 +155,7 @@ const [account] = await walletClient.getAddresses(); const hash = await walletClient.sendTransaction({ account, to: '0x92d3267215Ec56542b985473E73C8417403B15ac', - value: 100000000000000n + value: parseEther('0.001') }); ``` @@ -197,8 +196,8 @@ const walletClient = createWalletClient({ const hash = await walletClient.deployContract({ abi, account, //given account - args: [69420], - bytecode: '0x608060405260405161083e38038061083e833981016040819052610...', + args: ['constructor param'], + bytecode: bytecode, }); ``` @@ -258,7 +257,7 @@ const hash = web3.utils.keccak256('hello world'); In Viem there is `keccak256()` function for keccak256. ``` -import { keccak256 } from 'viem' +import { keccak256 , toHex } from 'viem' keccak256(toHex('hello world')); ```