Update React Module and Quickstart Steps (#1687)

Author: leightkt

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)
 

docs/src/routes/docs/[...3]modules/[...3]react/+page.md

@@ -14,22 +14,22 @@ A collection of React hooks for implementing web3-onboard into a React project
 <TabPanel value="yarn">
 
 ```sh copy
-yarn add @web3-onboard/react
+yarn add @web3-onboard/react @web3-onboard/injected-wallets
 ```
 
   </TabPanel>
   <TabPanel value="npm">
 
 ```sh copy
-npm install @web3-onboard/react
+npm install @web3-onboard/react @web3-onboard/injected-wallets
 ```
 
   </TabPanel>
 </Tabs>
 
 ### 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() {
     </div>
   )
 }
+
+export default App
 ```
 
 ## Using the `Web3OnboardProvider`
@@ -524,22 +526,82 @@ 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`
 
 **OR**
 
 `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:

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
 
 <div class="w-full  h-5"/>
 
+Remember- if you used create-react-app, please follow the [additional setup instructions](../../docs/modules/react.md#if-using-create-react-app)
+
 <Tabs values={frameworks}>
   <TabPanel value="react">
 
-## Step 1: Import + Configure
+## Step 1: Install Dependencies
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```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
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```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
+```
+
+  </TabPanel>
+</Tabs>
+
+
+## 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,15 +183,15 @@ function App() {
   )
 }
 
-export default MyApp
+export default App
 ```
 
 ## Step 2: Display the connect wallet button
 
 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<TokenSymbol, string> | 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 (
         <div>
-          <img src={ens?.avatar} alt="ENS Avatar" />
-          <div>{ ens?.name ? ens.name : address }</div>
+            {account.ens?.avatar ? (<img src={account.ens?.avatar} alt="ENS Avatar" />) : null}
+          <div>{ account.ens?.name ? account.ens.name : account.address }</div>
           <div>Connected to {wallet.label}</div>
-          <button onClick={() => { disconnect({ label: wallet.label }) }>Disconnect</button>
+          <button onClick={() => { disconnect({ label: wallet.label }) }}>Disconnect</button>
         </div>
     )
   }
@@ -253,7 +278,7 @@ export default function ConnectWallet() {
     <div>
       <button
         disabled={connecting}
-        onClick={connect}>
+        onClick={() => connect()}>
         Connect
       </button>
     </div>

packages/react/README.md

@@ -18,7 +18,7 @@ A collection of React hooks for implementing web3-onboard in to a React project
 
 ### 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'
@@ -30,9 +30,8 @@ const apiKey = '1730eff0-9d50-4382-a3fe-89f0d34a2070'
 
 const injected = injectedModule()
 
-// Only one RPC endpoint required per chain
-const rpcAPIKey = '<INFURA_KEY>' || '<ALCHEMY_KEY>'
-const rpcUrl = `https://eth-mainnet.g.alchemy.com/v2/${rpcAPIKey}` || `https://mainnet.infura.io/v3/${rpcAPIKey}`
+const infuraKey = '<INFURA_KEY>'
+const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`
 
 // initialize Onboard
 init({
@@ -55,22 +54,21 @@ function App() {
   let ethersProvider
 
   if (wallet) {
-    ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
     // if using ethers v6 this is:
     // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
+    ethersProvider = new ethers.providers.Web3Provider(wallet.provider, 'any')
   }
 
   return (
     <div>
-      <button
-        disabled={connecting}
-        onClick={() => (wallet ? disconnect(wallet) : connect())}
-      >
+      <button disabled={connecting} onClick={() => (wallet ? disconnect(wallet) : connect())}>
         {connecting ? 'connecting' : wallet ? 'disconnect' : 'connect'}
       </button>
     </div>
   )
 }
+
+export default App
 ```
 
 ### Using the `Web3OnboardProvider`