diff --git a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md
index f4b70f17b..2b76e0076 100644
--- a/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md
+++ b/docs/src/routes/docs/[...1]overview/[...2]contribution-guide/+page.md
@@ -65,7 +65,7 @@ In order to contribute to the docs, create a PR on the [develop branch](https://
**Important note: The PR template docs checklist must be complete before review can take place.**
-PRs for adding/updating a wallet should include a README (new or updated) for the package (located in `docs/src/routes/docs/[...4]wallets`), and adding/updating the module in [docs demo](https://github.com/blocknative/web3-onboard/blob/develop/docs/src/lib/services/onboard.js) and docs package (`docs/package.json`). New injected wallets should also add the wallet to the [natively supported injected wallets list](https://github.com/blocknative/web3-onboard/blob/develop/docs/src/routes/docs/%5B...4%5Dwallets/injected.md).
+PRs for adding/updating a wallet should include a README (new or updated) for the package (located in `docs/src/routes/docs/[...4]wallets`), and adding/updating the module in [docs demo](https://github.com/blocknative/web3-onboard/blob/develop/docs/src/lib/services/onboard.js) and docs package (`docs/package.json`). New injected wallets should also add the wallet to the [natively supported injected wallets list](https://github.com/blocknative/web3-onboard/blob/develop/docs/src/routes/docs/wallets/injected.md).
[See here for an example of a docs pull request.](https://github.com/blocknative/web3-onboard/pull/1544/files)
diff --git a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md
index cfedee3d8..cf22d1ccf 100644
--- a/docs/src/routes/docs/[...3]modules/[...3]react/+page.md
+++ b/docs/src/routes/docs/[...3]modules/[...3]react/+page.md
@@ -14,14 +14,14 @@ A collection of React hooks for implementing web3-onboard into a React project
```sh copy
-yarn add @web3-onboard/react
+yarn add @web3-onboard/react @web3-onboard/injected-wallets
```
```sh copy
-npm install @web3-onboard/react
+npm install @web3-onboard/react @web3-onboard/injected-wallets
```
@@ -29,7 +29,7 @@ npm install @web3-onboard/react
### Add Code
-```javascript
+```javascript title="App.js"
import React from 'react'
import { init, useConnectWallet } from '@web3-onboard/react'
import injectedModule from '@web3-onboard/injected-wallets'
@@ -78,6 +78,8 @@ function App() {
)
}
+
+export default App
```
## Using the `Web3OnboardProvider`
@@ -524,14 +526,74 @@ module.exports = {
}
```
-#### If using create-react-app
+### If using create-react-app
+
+[CRACO](https://www.npmjs.com/package/@craco/craco) provides a way to override webpack config which is obfuscated in Create React App built applications.
+
+`npm i @craco/craco`
+
+**OR**
+
+`yarn add @craco/craco`
+
+The above webpack 5 example can be used in the `craco.config.js` file at the root level.
+
+```javascript title="craco.config.js"
+const webpack = require('webpack')
+
+module.exports = {
+ webpack: {
+ configure: {
+ resolve: {
+ fallback: {
+ path: require.resolve('path-browserify')
+ },
+ alias: {
+ assert: 'assert',
+ buffer: 'buffer',
+ crypto: 'crypto-browserify',
+ http: 'stream-http',
+ https: 'https-browserify',
+ os: 'os-browserify/browser',
+ process: 'process/browser',
+ stream: 'stream-browserify',
+ util: 'util'
+ }
+ },
+ experiments: {
+ asyncWebAssembly: true
+ },
+ plugins: [
+ new webpack.ProvidePlugin({
+ process: 'process/browser',
+ Buffer: ['buffer', 'Buffer']
+ })
+ ]
+ }
+ }
+}
+```
-[CRACO](https://www.npmjs.com/package/@craco/craco) provides a similar way to override webpack config which is obfuscated in Create React App built applications.
+Be sure to update the scripts in package.json:
-The above webpack 5 example can be used in the `craco.config.js` file at the root level in this case.
+```
+"scripts": {
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test"
+ }
+```
[React App Rewired](https://www.npmjs.com/package/react-app-rewired) is another option for working with Create React App DApps
+Add React App Rewired:
+
+`npm i react-app-rewired`
+
+**OR**
+
+`yarn add react-app-rewired`
+
Add the following dev dependencies:
`npm i --save-dev rollup-plugin-polyfill-node webpack-bundle-analyzer assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify browserify-zlib`
@@ -539,7 +601,7 @@ Add the following dev dependencies:
`yarn add rollup-plugin-polyfill-node webpack-bundle-analyzer assert buffer crypto-browserify stream-http https-browserify os-browserify process stream-browserify util path-browserify browserify-zlib -D`
-```javascript
+```javascript title="config.overrides.js"
const webpack = require('webpack')
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
const path = require('path')
@@ -593,6 +655,16 @@ module.exports = function override(config) {
}
```
+Be sure to update the scripts in package.json:
+
+```
+"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test"
+ }
+```
+
### Vite
Add the following dev dependencies:
diff --git a/docs/src/routes/examples/[...1]connect-wallet/+page.md b/docs/src/routes/examples/[...1]connect-wallet/+page.md
index 58bb720e2..95e168975 100644
--- a/docs/src/routes/examples/[...1]connect-wallet/+page.md
+++ b/docs/src/routes/examples/[...1]connect-wallet/+page.md
@@ -14,10 +14,32 @@ description: Learn how to connect a wallet to your dapp with Web3-Onboard. For t
+Remember- if you used create-react-app, please follow the [additional setup instructions](../../docs/modules/react.md#if-using-create-react-app)
+
-## Step 1: Import + Configure
+## Step 1: Install Dependencies
+
+
+
+
+```sh copy
+yarn add @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier
+```
+
+
+
+
+```sh copy
+npm install @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/infinity-wallet @web3-onboard/fortmatic @web3-onboard/gnosis @web3-onboard/keepkey @web3-onboard/keystone @web3-onboard/ledger @web3-onboard/portis @web3-onboard/trezor @web3-onboard/walletconnect @web3-onboard/coinbase @web3-onboard/magic @web3-onboard/dcent @web3-onboard/sequence @web3-onboard/taho @web3-onboard/trust @web3-onboard/frontier
+```
+
+
+
+
+
+## Step 2: Import + Configure
Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet.
@@ -31,17 +53,16 @@ import keepkeyModule from '@web3-onboard/keepkey'
import keystoneModule from '@web3-onboard/keystone'
import ledgerModule from '@web3-onboard/ledger'
import portisModule from '@web3-onboard/portis'
-import torusModule from '@web3-onboard/torus'
import trezorModule from '@web3-onboard/trezor'
import walletConnectModule from '@web3-onboard/walletconnect'
import coinbaseModule from '@web3-onboard/coinbase'
import magicModule from '@web3-onboard/magic'
-import web3authModule from '@web3-onboard/web3auth'
import dcentModule from '@web3-onboard/dcent'
import sequenceModule from '@web3-onboard/sequence'
import tahoModule from '@web3-onboard/taho'
import trustModule from '@web3-onboard/trust'
import frontierModule from '@web3-onboard/frontier'
+import ConnectWallet from './ConnectWallet'
const INFURA_KEY = ''
@@ -79,9 +100,6 @@ const magic = magicModule({
apiKey: 'apiKey'
})
-const enkrypt = enkryptModule()
-const mewWallet = mewWalletModule()
-
const wallets = [
infinityWallet,
keepkey,
@@ -95,8 +113,6 @@ const wallets = [
dcent,
trezor,
walletConnect,
- enkrypt,
- mewWallet,
gnosis,
magic,
fortmatic,
@@ -109,13 +125,13 @@ const chains = [
id: '0x1',
token: 'ETH',
label: 'Ethereum Mainnet',
- rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+ rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}`
},
{
id: '0x5',
token: 'ETH',
label: 'Goerli',
- rpcUrl: `https://goerli.infura.io/v3/${INFURA_ID}`
+ rpcUrl: `https://goerli.infura.io/v3/${INFURA_KEY}`
},
{
id: '0x13881',
@@ -167,7 +183,7 @@ function App() {
)
}
-export default MyApp
+export default App
```
## Step 2: Display the connect wallet button
@@ -175,7 +191,7 @@ export default MyApp
In another file we'll create the component that will display our connect wallet button. We'll be using the `useConnectWallet` hook in order to achieve this.
```js title="ConnectWallet.tsx"|copy
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
import { useConnectWallet } from '@web3-onboard/react'
import { ethers } from 'ethers'
@@ -209,9 +225,18 @@ export default function ConnectWallet() {
Now that we have our wallet connected, let's display some basic information, such as the connected wallet's address, ENS name, and avatar.
```js title="ConnectWallet.tsx"|copy{8,10-19,28-37}
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
import { useConnectWallet } from '@web3-onboard/react'
import { ethers } from 'ethers'
+import type {
+ TokenSymbol
+ } from '@web3-onboard/common'
+
+interface Account {
+ address: string,
+ balance: Record | null,
+ ens: {name: string|undefined, avatar: string|undefined}
+}
export default function ConnectWallet() {
const [{ wallet, connecting }, connect, disconnect] = useConnectWallet()
@@ -238,13 +263,13 @@ export default function ConnectWallet() {
}
}, [wallet])
- if(wallet?.provider) {
+ if(wallet?.provider && account) {
return (