Skip to content

Commit 0ac0a49

Browse files
rtomasrtomas
authored
Feat: Add Web3modal react w/ethers example (#633)
* add react-ethers example * add .vscode setting to gitignore * update @web3modal/ethers to v5.0.6
1 parent ff99f61 commit 0ac0a49

File tree

17 files changed

+5284
-0
lines changed

17 files changed

+5284
-0
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,6 @@ yarn-error.log*
3838

3939
# webstorm ide
4040
.idea
41+
42+
# vscode
43+
.vscode/settings.json

‎dapps/web3modal/react-ethers/.codesandbox/Dockerfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
FROM node:21-bullseye

‎dapps/web3modal/react-ethers/.codesandbox/tasks.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
// These tasks will run in order when initializing your CodeSandbox project.
3+
"setupTasks": [
4+
{
5+
"name": "Install Dependencies",
6+
"command": "pnpm install"
7+
}
8+
],
9+
10+
// These tasks can be run from CodeSandbox. Running one will open a log in the app.
11+
"tasks": {
12+
"dev": {
13+
"name": "dev",
14+
"command": "pnpm dev",
15+
"runAtStart": true,
16+
"preview": {
17+
"port": 5173
18+
}
19+
},
20+
"build": {
21+
"name": "build",
22+
"command": "pnpm build",
23+
"runAtStart": false
24+
},
25+
"preview": {
26+
"name": "preview",
27+
"command": "pnpm preview",
28+
"runAtStart": false
29+
}
30+
}
31+
}

‎dapps/web3modal/react-ethers/.env.example

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
VITE_PROJECT_ID=YOUR_PROJECT_ID

‎dapps/web3modal/react-ethers/.eslintrc.cjs

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
module.exports = {
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:@typescript-eslint/recommended",
9+
"plugin:react/recommended"
10+
],
11+
"overrides": [
12+
{
13+
"env": {
14+
"node": true
15+
},
16+
"files": [
17+
".eslintrc.{js,cjs}"
18+
],
19+
"parserOptions": {
20+
"sourceType": "script"
21+
}
22+
}
23+
],
24+
"parser": "@typescript-eslint/parser",
25+
"parserOptions": {
26+
"ecmaVersion": "latest",
27+
"sourceType": "module"
28+
},
29+
"plugins": [
30+
"@typescript-eslint",
31+
"react"
32+
],
33+
"rules": {
34+
"react/react-in-jsx-scope": "off"
35+
}
36+
}

‎dapps/web3modal/react-ethers/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎dapps/web3modal/react-ethers/README.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Vite + React
2+
3+
This is a [Vite](https://vitejs.dev) project together with React and Ethers.
4+
5+
[![Edit in CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/github/codesandbox/codesandbox-template-vite-react/main)
6+
7+
[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).
8+
9+
## Usage
10+
11+
1. Go to [WalletConnect Cloud](https://cloud.walletconnect.com) and create a new project.
12+
2. Copy your `Project ID`
13+
3. Rename `.env.example` to `.env` and paste your `Project ID` as the value for `VITE_PROJECT_ID`
14+
4. Run `yarn` to install dependencies
15+
5. Run `yarn dev` to start the development server
16+
17+
## Resources
18+
19+
- [CodeSandbox — Docs](https://codesandbox.io/docs/projects)
20+
- [CodeSandbox — Discord](https://discord.gg/Ggarp3pX5H)
21+
- [Vite — GitHub](https://github.com/vitejs/vite)
22+
- [Vite — Docs](https://vitejs.dev/guide/)

‎dapps/web3modal/react-ethers/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React + TS</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎dapps/web3modal/react-ethers/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "sandbox",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
10+
"preview": "vite preview"
11+
},
12+
"dependencies": {
13+
"@web3modal/ethers": "^5.0.6",
14+
"ethers": "^6.13.1",
15+
"react": "18.3.1",
16+
"react-dom": "18.3.1"
17+
},
18+
"devDependencies": {
19+
"@types/react": "18.2.14",
20+
"@types/react-dom": "18.2.6",
21+
"@typescript-eslint/eslint-plugin": "5.61.0",
22+
"@typescript-eslint/parser": "5.61.0",
23+
"@vitejs/plugin-react-swc": "3.3.2",
24+
"eslint": "8.44.0",
25+
"eslint-plugin-react": "7.32.2",
26+
"eslint-plugin-react-hooks": "4.6.0",
27+
"eslint-plugin-react-refresh": "0.4.1",
28+
"typescript": "5.5.3",
29+
"vite": "5.3.1"
30+
},
31+
"overrides": {
32+
"vite": "5.3.1"
33+
}
34+
}

0 commit comments

Comments
 (0)