feat: add Web3Modal + zkSync tutorial (#16)

* add web3modal tutorial

* add web3modal tutorial

* remove image

* linting

cspell-zksync.txt

@@ -68,6 +68,8 @@ zkforge
 zkcast
 Eigen
 IPFS
+viem
+Wagmi
 
 // Used programming language words
 printf

tutorials.json

@@ -23,5 +23,13 @@
     "time": "1 hour",
     "author": "D. Huisman",
     "slug": "the-graph"
+  },
+  {
+    "title": "Web3Modal & zkSync Era",
+    "description": "learn how to create a website and connect to zkSync ERA with your wallet.",
+    "tags": ["wallets", "website", "web3modal"],
+    "time": "20 minutes",
+    "author": "Glitch-txs",
+    "slug": "web3modal"
   }
 ]

tutorials/web3modal/TUTORIAL.md

@@ -0,0 +1,142 @@
+# Create a website and connect to zkSync ERA with your wallet
+
+### Introduction
+
+In this tutorial, you will learn how to create a website and connect to zkSync ERA with your wallet. We are going to use Next.js for this example but you can use any other frontend framework.
+
+The Web3Modal SDK allows you to easily connect your Web3 dapp with wallets. It provides a simple and intuitive interface for dapps to request actions such as signing transactions and interacting with smart contracts on the blockchain.
+
+## Prerequisites
+
+- Node.js (^18.17.1) and NPM
+- An wallet that supports zkSync Era
+
+## Build time
+
+### Step 1 — Installation
+
+Let’s create our app now, we’re going to be using Next.js, Wagmi and Web3Modal v3 for this tutorial
+
+Let’s start a new project by running
+
+```sh
+npx create-next-app
+```
+
+Now we’ll install Wagmi and Web3Modal which will help us to showcase a modal with different wallets that users can connect to.
+
+```sh
+npm install @web3modal/wagmi wagmi viem
+```
+
+### Step 2 — Implementation: Web3Modal.tsx file
+
+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 { 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";
+```
+
+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 });
+```
+
+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 });
+```
+
+We’ll now add the WagmiConfig component, this is how our Web3Modal.tsx file should look like
+
+```ts
+"use client";
+
+import { PropsWithChildren } from "react";
+
+import { WagmiConfig } from "wagmi";
+import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
+import { zkSync, zkSyncTestnet } from "wagmi/chains";
+
+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 });
+
+createWeb3Modal({ wagmiConfig, projectId, chains, defaultChain: zkSync });
+
+export function Web3Modal({ children }: PropsWithChildren) {
+  return <WagmiConfig config={wagmiConfig}>{children}</WagmiConfig>;
+}
+```
+
+### Step 3 — Implementation: layout.tsx file
+
+Now in our `app/layout.tsx` file we'll import our Web3Modal component
+
+```ts
+import type { Metadata } from "next";
+import { PropsWithChildren } from "react";
+import "./globals.css";
+
+import { Web3Modal } from "./context/Web3Modal";
+
+export const metadata: Metadata = {
+  title: "Web3Modal & zkSync",
+  description: "Web3Modal & zkSync Tutorial",
+};
+
+export default function RootLayout({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <body>
+        <Web3Modal>{children}</Web3Modal>
+      </body>
+    </html>
+  );
+}
+```
+
+### Step 3 — Implementation: page.tsx file
+
+Now we can add the Web3Modal button web component anywhere in our application
+
+```ts
+import styles from "./page.module.css";
+
+export default function Home() {
+  return (
+    <main className={styles.main}>
+      <w3m-button />
+    </main>
+  );
+}
+```
+
+## Conclusion
+
+In this tutorial, you learned how to create a website and connect to zkSync ERA with your wallet. You can now continue this project with [Wagmi hooks and functions](https://wagmi.sh/react/hooks/useContractRead) to start interacting directly with zkSync ERA in your new website.

tutorials/web3modal/code/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

tutorials/web3modal/code/.gitignore

@@ -0,0 +1,35 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

tutorials/web3modal/code/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

tutorials/web3modal/code/next.config.js

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    config.externals.push(
+      "pino-pretty",
+      "lokijs",
+      "encoding"
+    );
+    return config;
+  }
+}
+
+module.exports = nextConfig

tutorials/web3modal/code/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "app-route",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@web3modal/wagmi": "^3.1.0",
+    "next": "13.5.6",
+    "react": "^18",
+    "react-dom": "^18",
+    "viem": "^1.17.1",
+    "wagmi": "^1.4.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "13.5.6",
+    "typescript": "^5"
+  }
+}