diff --git a/cspell-zksync.txt b/cspell-zksync.txt
index ef9e83e..184b57f 100644
--- a/cspell-zksync.txt
+++ b/cspell-zksync.txt
@@ -68,6 +68,8 @@ zkforge
zkcast
Eigen
IPFS
+viem
+Wagmi
// Used programming language words
printf
diff --git a/tutorials/web3modal/TUTORIAL.md b/tutorials/web3modal/TUTORIAL.md
index 3b051a4..51d6824 100644
--- a/tutorials/web3modal/TUTORIAL.md
+++ b/tutorials/web3modal/TUTORIAL.md
@@ -1,4 +1,4 @@
-# Create a website and connect to zkSync ERA with your wallet
+# Create a website and connect to zkSync ERA with your wallet
### Introduction
@@ -34,67 +34,63 @@ npm install @web3modal/wagmi wagmi viem
Let's create a `Web3Modal.tsx` file inside a `context` folder, and we’ll import the following dependencies from Web3Modal and Wagmi
```ts
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
+import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
-import { WagmiConfig } from 'wagmi'
-import { zkSync, zkSyncTestnet } from 'wagmi/chains'
+import { WagmiConfig } from "wagmi";
+import { zkSync, zkSyncTestnet } from "wagmi/chains";
```
We now need to get a Project ID from [WalletConnect’s Cloud website](https://cloud.walletconnect.com/)
```ts
-const projectId = 'YOUR_PROJECT_ID'
+const projectId = "YOUR_PROJECT_ID";
```
Once that’s done we can create our wagmiConfig instance
```ts
const metadata = {
- name: 'Web3Modal & zkSync',
- description: 'Web3Modal & zkSync Tutorial',
- url: 'https://web3modal.com',
- icons: ['https://avatars.githubusercontent.com/u/37784886']
-}
-const chains = [zkSync, zkSyncTestnet]
-const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+ name: "Web3Modal & zkSync",
+ description: "Web3Modal & zkSync Tutorial",
+ url: "https://web3modal.com",
+ icons: ["https://avatars.githubusercontent.com/u/37784886"],
+};
+const chains = [zkSync, zkSyncTestnet];
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
```
Now we can create a Web3Modal instance to initiate our modal, let's also add zkSync as the default chain.
```ts
-createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync })
+createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync });
```
We’ll now add the WagmiConfig component, this is how our Web3Modal.tsx file should look like
```ts
-'use client'
+"use client";
-import { PropsWithChildren } from 'react'
+import { PropsWithChildren } from "react";
-import { WagmiConfig } from 'wagmi'
-import { createWeb3Modal, defaultWagmiConfig } from '@web3modal/wagmi/react'
-import { zkSync, zkSyncTestnet } from 'wagmi/chains'
+import { WagmiConfig } from "wagmi";
+import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
+import { zkSync, zkSyncTestnet } from "wagmi/chains";
-const projectId = 'YOUR_PROJECT_ID'
+const projectId = "YOUR_PROJECT_ID";
const metadata = {
- name: 'Web3Modal & zkSync',
- description: 'Web3Modal & zkSync Tutorial',
- url: 'https://web3modal.com',
- icons: ['https://avatars.githubusercontent.com/u/37784886']
-}
-const chains = [zkSync, zkSyncTestnet]
-const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata })
+ name: "Web3Modal & zkSync",
+ description: "Web3Modal & zkSync Tutorial",
+ url: "https://web3modal.com",
+ icons: ["https://avatars.githubusercontent.com/u/37784886"],
+};
+const chains = [zkSync, zkSyncTestnet];
+const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata });
-createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync })
+createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync });
export function Web3Modal({ children }: PropsWithChildren) {
- return(
-