https://github.com/net2devcrypto/viem-ethers-replace-web3modal-nextjs
A simple straightforward addon using Viem to replace the deprecated Web3Modal on your NextJS Web3 Project with Ethers
https://github.com/net2devcrypto/viem-ethers-replace-web3modal-nextjs
Last synced: 6 months ago
JSON representation
A simple straightforward addon using Viem to replace the deprecated Web3Modal on your NextJS Web3 Project with Ethers
- Host: GitHub
- URL: https://github.com/net2devcrypto/viem-ethers-replace-web3modal-nextjs
- Owner: net2devcrypto
- Created: 2023-07-15T01:15:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-07-15T01:34:43.000Z (over 2 years ago)
- Last Synced: 2025-03-24T16:12:40.672Z (10 months ago)
- Size: 2.93 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Viem-Ethers-Replace-Web3Modal-NextJS
A simple straightforward addon using Viem to replace the deprecated Web3Modal on your NextJS Web3 Project with Ethers
Step 1
Navigate to your NextJS Project and Install Viem.
```shell
cd myproject
npm i viem
```
Step 2
Create a new js file 'web3provider.js' on your NextJS project "components" folder.
and paste the following:
FYI if you don't have a components folder, please create one.
```shell
import { createWalletClient, custom } from "viem";
import { polygonMumbai } from "viem/chains";
export const web3Provider = async () => {
const [account] = await window.ethereum.request({
method: "eth_requestAccounts",
});
const client = createWalletClient({
account,
chain: polygonMumbai,
transport: custom(window.ethereum),
});
return client;
};
```
Important, in the code, modify the chain to your preferred choice:
```shell
import { polygonMumbai } from "viem/chains";
//under client:
chain: polygonMumbai,
```
Save file.
Step 3
import the function where needed:
```shell
// example index.js
import { web3Provider } from '@/components/web3provider';
```
Replace web3modal and pass directly web3Provider
Example, This is before with web3modal:
```shell
async function ethConnect() {
const web3Modal = new Web3Modal()
const connection = await web3Modal.connect()
const provider = new ethers.providers.Web3Provider(connection);
```
After replacing with web3Provider:
```shell
async function ethConnect() {
const connection = await web3Provider()
const provider = new ethers.providers.Web3Provider(connection);
```
Dont forget to save and test!
Enjoy!!