Feat: Add Web3modal react w/ethers example (#633)

* add react-ethers example * add .vscode setting to gitignore * update @web3modal/ethers to v5.0.6
reown-com · Jul 4, 2024 · 0ac0a49 · 0ac0a49
1 parent ff99f61
commit 0ac0a49
Show file tree

Hide file tree

Showing 17 changed files with 5,284 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,6 @@ yarn-error.log*
 
 # webstorm ide
 .idea
+
+# vscode
+.vscode/settings.json
diff --git a/dapps/web3modal/react-ethers/.codesandbox/Dockerfile b/dapps/web3modal/react-ethers/.codesandbox/Dockerfile
@@ -0,0 +1 @@
+FROM node:21-bullseye
diff --git a/dapps/web3modal/react-ethers/.codesandbox/tasks.json b/dapps/web3modal/react-ethers/.codesandbox/tasks.json
@@ -0,0 +1,31 @@
+{
+  // These tasks will run in order when initializing your CodeSandbox project.
+  "setupTasks": [
+    {
+      "name": "Install Dependencies",
+      "command": "pnpm install"
+    }
+  ],
+
+  // These tasks can be run from CodeSandbox. Running one will open a log in the app.
+  "tasks": {
+    "dev": {
+      "name": "dev",
+      "command": "pnpm dev",
+      "runAtStart": true,
+      "preview": {
+        "port": 5173
+      }
+    },
+    "build": {
+      "name": "build",
+      "command": "pnpm build",
+      "runAtStart": false
+    },
+    "preview": {
+      "name": "preview",
+      "command": "pnpm preview",
+      "runAtStart": false
+    }
+  }
+}
diff --git a/dapps/web3modal/react-ethers/.env.example b/dapps/web3modal/react-ethers/.env.example
@@ -0,0 +1 @@
+VITE_PROJECT_ID=YOUR_PROJECT_ID
diff --git a/dapps/web3modal/react-ethers/.eslintrc.cjs b/dapps/web3modal/react-ethers/.eslintrc.cjs
@@ -0,0 +1,36 @@
+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended",
+        "plugin:react/recommended"
+    ],
+    "overrides": [
+        {
+            "env": {
+                "node": true
+            },
+            "files": [
+                ".eslintrc.{js,cjs}"
+            ],
+            "parserOptions": {
+                "sourceType": "script"
+            }
+        }
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "@typescript-eslint",
+        "react"
+    ],
+    "rules": {
+        "react/react-in-jsx-scope": "off"
+    }
+}
diff --git a/dapps/web3modal/react-ethers/.gitignore b/dapps/web3modal/react-ethers/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/dapps/web3modal/react-ethers/README.md b/dapps/web3modal/react-ethers/README.md
@@ -0,0 +1,22 @@
+# Vite + React
+
+This is a [Vite](https://vitejs.dev) project together with React and Ethers.
+
+[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/main)
+
+[Configuration](https://codesandbox.io/docs/projects/learn/setting-up/tasks) `.codesandbox/tasks.json` has been added to optimize it for [CodeSandbox](https://codesandbox.io/dashboard).
+
+## Usage
+
+1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com) and create a new project.
+2. Copy your `Project ID`
+3. Rename `.env.example` to `.env` and paste your `Project ID` as the value for `VITE_PROJECT_ID`
+4. Run `yarn` to install dependencies
+5. Run `yarn dev` to start the development server
+
+## Resources
+
+- [CodeSandbox — Docs](https://codesandbox.io/docs/projects)
+- [CodeSandbox — Discord](https://discord.gg/Ggarp3pX5H)
+- [Vite — GitHub](https://github.com/vitejs/vite)
+- [Vite — Docs](https://vitejs.dev/guide/)
diff --git a/dapps/web3modal/react-ethers/index.html b/dapps/web3modal/react-ethers/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/dapps/web3modal/react-ethers/package.json b/dapps/web3modal/react-ethers/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "sandbox",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@web3modal/ethers": "^5.0.6",
+    "ethers": "^6.13.1",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
+    "@typescript-eslint/eslint-plugin": "5.61.0",
+    "@typescript-eslint/parser": "5.61.0",
+    "@vitejs/plugin-react-swc": "3.3.2",
+    "eslint": "8.44.0",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-react-refresh": "0.4.1",
+    "typescript": "5.5.3",
+    "vite": "5.3.1"
+  },
+  "overrides": {
+    "vite": "5.3.1"
+  }
+}