feat: add react-ethers 6 example (#1920)

Co-authored-by: Sven <[email protected]>
reown-com · May 6, 2024 · f36b8ca · f36b8ca
1 parent feebb69
commit f36b8ca
Show file tree

Hide file tree

Showing 9 changed files with 15,773 additions and 14,819 deletions.
diff --git a/examples/html-ethers5/src/main.js b/examples/html-ethers5/src/main.js
@@ -37,7 +37,7 @@ const ethersConfig = defaultConfig({
 
 // 3. Create modal
 const modal = createWeb3Modal({
-  ethersConfig,
+  ethersConfig: { ...ethersConfig, email: true },
   projectId,
   chains,
   themeMode: 'light'

diff --git a/examples/react-ethers/CHANGELOG.md b/examples/react-ethers/CHANGELOG.md
@@ -0,0 +1,46 @@
+# @examples/react-ethers5
+
+## 4.0.5
+
+### Patch Changes
+
+- [#1917](https://github.com/WalletConnect/web3modal/pull/1917) [`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97) Thanks [@tomiir](https://github.com/tomiir)! - Replaces public url with blockchain api for supported networks
+
+- Updated dependencies [[`f79566c`](https://github.com/WalletConnect/web3modal/commit/f79566ca5119fa12795dd49fce01aea8e1a05d97)]:
+  - @web3modal/ethers5@4.0.5
+
+## 4.0.4
+
+### Patch Changes
+
+- Fix theming issue for email
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.0.4
+
+## 4.0.3
+
+### Patch Changes
+
+- Tag email beta, Sync Theme For Secure Wallet, Use manual version in constants
+
+- Updated dependencies []:
+  - @web3modal/ethers5@4.0.3
+
+## 4.0.2
+
+### Patch Changes
+
+- [#1899](https://github.com/WalletConnect/web3modal/pull/1899) [`42e97a0`](https://github.com/WalletConnect/web3modal/commit/42e97a04eb60090a821019ae80d62acacf35fc66) Thanks [@xzilja](https://github.com/xzilja)! - Reverted change that removed email update flow from account view
+
+- Updated dependencies [[`42e97a0`](https://github.com/WalletConnect/web3modal/commit/42e97a04eb60090a821019ae80d62acacf35fc66)]:
+  - @web3modal/ethers5@4.0.2
+
+## 4.0.1
+
+### Patch Changes
+
+- [#1879](https://github.com/WalletConnect/web3modal/pull/1879) [`e3fa353`](https://github.com/WalletConnect/web3modal/commit/e3fa35396e3d2b1153d12bfaf92738bc67b46640) Thanks [@svenvoskamp](https://github.com/svenvoskamp)! - Fix various issues on ethers/ethers5 package
+
+- Updated dependencies [[`e3fa353`](https://github.com/WalletConnect/web3modal/commit/e3fa35396e3d2b1153d12bfaf92738bc67b46640)]:
+  - @web3modal/ethers5@4.0.1
diff --git a/examples/react-ethers/index.html b/examples/react-ethers/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>React ethers5 example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react-ethers/package.json b/examples/react-ethers/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "@examples/react-ethers",
+  "private": true,
+  "version": "4.0.5",
+  "scripts": {
+    "dev:example": "vite --port 3012",
+    "build:examples": "vite build"
+  },
+  "dependencies": {
+    "@web3modal/ethers": "4.0.5",
+    "ethers": "6.9.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "4.2.1",
+    "vite": "5.0.12"
+  }
+}
diff --git a/examples/react-ethers/src/App.tsx b/examples/react-ethers/src/App.tsx
@@ -0,0 +1,83 @@
+import {
+  createWeb3Modal,
+  defaultConfig,
+  useWeb3Modal,
+  useWeb3ModalEvents,
+  useWeb3ModalState,
+  useWeb3ModalTheme
+} from '@web3modal/ethers/react'
+
+// @ts-expect-error 1. Get projectId
+const projectId = import.meta.env.VITE_PROJECT_ID
+if (!projectId) {
+  throw new Error('VITE_PROJECT_ID is not set')
+}
+
+// 2. Set chains
+const chains = [
+  {
+    chainId: 1,
+    name: 'Ethereum',
+    currency: 'ETH',
+    explorerUrl: 'https://etherscan.io',
+    rpcUrl: 'https://cloudflare-eth.com'
+  },
+  {
+    chainId: 42161,
+    name: 'Arbitrum',
+    currency: 'ETH',
+    explorerUrl: 'https://arbiscan.io',
+    rpcUrl: 'https://arb1.arbitrum.io/rpc'
+  }
+]
+
+const ethersConfig = defaultConfig({
+  metadata: {
+    name: 'Web3Modal',
+    description: 'Web3Modal Laboratory',
+    url: 'https://web3modal.com',
+    icons: ['https://avatars.githubusercontent.com/u/37784886']
+  },
+  enableEmail: true,
+  defaultChainId: 1,
+  rpcUrl: 'https://cloudflare-eth.com'
+})
+
+// 3. Create modal
+createWeb3Modal({
+  ethersConfig,
+  chains,
+  projectId,
+  enableAnalytics: true,
+  themeMode: 'light',
+  themeVariables: {
+    '--w3m-color-mix': '#00DCFF',
+    '--w3m-color-mix-strength': 20
+  }
+})
+
+export default function App() {
+  // 4. Use modal hook
+  const modal = useWeb3Modal()
+  const state = useWeb3ModalState()
+  const { themeMode, themeVariables, setThemeMode } = useWeb3ModalTheme()
+  const events = useWeb3ModalEvents()
+
+  return (
+    <>
+      <w3m-button />
+      <w3m-network-button />
+      <w3m-connect-button />
+      <w3m-account-button />
+
+      <button onClick={() => modal.open()}>Connect Wallet</button>
+      <button onClick={() => modal.open({ view: 'Networks' })}>Choose Network</button>
+      <button onClick={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')}>
+        Toggle Theme Mode
+      </button>
+      <pre>{JSON.stringify(state, null, 2)}</pre>
+      <pre>{JSON.stringify({ themeMode, themeVariables }, null, 2)}</pre>
+      <pre>{JSON.stringify(events, null, 2)}</pre>
+    </>
+  )
+}
diff --git a/examples/react-ethers/src/main.tsx b/examples/react-ethers/src/main.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+
+ReactDOM.createRoot(document.getElementById('app')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/examples/react-ethers/tsconfig.json b/examples/react-ethers/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "noEmit": true,
+    "incremental": true
+  },
+  "include": ["src"]
+}
diff --git a/examples/react-ethers/vite.config.js b/examples/react-ethers/vite.config.js
@@ -0,0 +1,6 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [react()]
+})