11import React , { useState , useEffect } from 'react'
22import { ethers } from 'ethers'
33import VConsole from 'vconsole'
4- import { initOnboard , initNotify } from './services'
4+ import { initWeb3Onboard , initNotify } from './services'
5+ import {
6+ useConnectWallet ,
7+ useSetChain ,
8+ useWallets
9+ } from '@web3-onboard/react'
510import './App.css'
611import Header from './views/Header/Header.js'
712import Footer from './views/Footer/Footer.js'
@@ -31,69 +36,74 @@ const internalTransferABI = [
3136let internalTransferContract
3237
3338const App = ( ) => {
34- const [ address , setAddress ] = useState ( null )
35- const [ ens , setEns ] = useState ( null )
36- const [ network , setNetwork ] = useState ( null )
37- const [ balance , setBalance ] = useState ( null )
38- const [ wallet , setWallet ] = useState ( { } )
3939
40- const [ onboard , setOnboard ] = useState ( null )
41- const [ notify , setNotify ] = useState ( null )
40+ const [ { wallet } , connect , disconnect ] = useConnectWallet ( )
41+ const [ { chains, connectedChain, settingChain } , setChain ] = useSetChain ( )
42+ const connectedWallets = useWallets ( )
4243
44+ const [ web3Onboard , setWeb3Onboard ] = useState ( null )
45+ const [ ens ] = useState ( null )
46+ const [ notify , setNotify ] = useState ( null )
4347 const [ darkMode , setDarkMode ] = useState ( false )
4448 const [ desktopPosition , setDesktopPosition ] = useState ( 'bottomRight' )
4549 const [ mobilePosition , setMobilePosition ] = useState ( 'top' )
4650
4751 const [ toAddress , setToAddress ] = useState ( '' )
4852
4953 useEffect ( ( ) => {
50- const onboard = initOnboard ( {
51- address : setAddress ,
52- ens : setEns ,
53- network : setNetwork ,
54- balance : setBalance ,
55- wallet : wallet => {
56- if ( wallet . provider ) {
57- setWallet ( wallet )
58-
59- provider = new ethers . providers . Web3Provider ( wallet . provider , 'any' )
60-
61- internalTransferContract = new ethers . Contract (
62- '0xb8c12850827ded46b9ded8c1b6373da0c4d60370' ,
63- internalTransferABI ,
64- provider . getUncheckedSigner ( )
65- )
66-
67- window . localStorage . setItem ( 'selectedWallet' , wallet . name )
68- } else {
69- provider = null
70- setWallet ( { } )
71- }
72- }
73- } )
74-
75- setOnboard ( onboard )
54+ setWeb3Onboard ( initWeb3Onboard )
7655
7756 setNotify ( initNotify ( ) )
7857 } , [ ] )
7958
59+
8060 useEffect ( ( ) => {
81- const previouslySelectedWallet =
82- window . localStorage . getItem ( 'selectedWallet' )
61+ if ( ! connectedWallets . length ) return
62+
63+ const connectedWalletsLabelArray = connectedWallets . map ( ( { label } ) => label )
64+ window . localStorage . setItem (
65+ 'connectedWallets' ,
66+ JSON . stringify ( connectedWalletsLabelArray )
67+ )
68+ } , [ connectedWallets ] )
8369
84- if ( previouslySelectedWallet && onboard ) {
85- onboard . walletSelect ( previouslySelectedWallet )
70+
71+ useEffect ( ( ) => {
72+ if ( ! wallet ?. provider ) {
73+ provider = null
74+ } else {
75+ provider = new ethers . providers . Web3Provider ( wallet . provider , 'any' )
76+
77+ internalTransferContract = new ethers . Contract (
78+ '0xb8c12850827ded46b9ded8c1b6373da0c4d60370' ,
79+ internalTransferABI ,
80+ provider . getUncheckedSigner ( )
81+ )
8682 }
87- } , [ onboard ] )
83+ } , [ wallet ] )
84+
85+ useEffect ( ( ) => {
86+ const previouslyConnectedWallets =
87+ JSON . parse ( window . localStorage . getItem ( 'connectedWallets' ) )
88+
89+ if ( previouslyConnectedWallets ?. length ) {
90+ async function setWalletFromLocalStorage ( ) {
91+ await connect ( { autoSelect : previouslyConnectedWallets [ 0 ] } ) ;
92+ }
93+ setWalletFromLocalStorage ( ) ;
94+ }
95+
96+ } , [ web3Onboard , connect ] )
8897
8998 const readyToTransact = async ( ) => {
90- if ( ! provider ) {
91- const walletSelected = await onboard . walletSelect ( )
99+ if ( ! wallet ) {
100+ const walletSelected = await connect ( )
92101 if ( ! walletSelected ) return false
93102 }
103+ // prompt user to switch to Rinkeby for test
104+ await setChain ( { chainId : '0x4' } )
94105
95- const ready = await onboard . walletCheck ( )
96- return ready
106+ return true
97107 }
98108
99109 const sendHash = async ( ) => {
@@ -176,7 +186,7 @@ const App = () => {
176186 sendTransaction,
177187 gasPrice,
178188 estimateGas,
179- balance : onboard . getState ( ) . balance ,
189+ balance : wallet . balance ,
180190 txDetails
181191 } )
182192
@@ -291,68 +301,88 @@ const App = () => {
291301 )
292302 }
293303
294- if ( ! onboard || ! notify ) return < div > Loading...</ div >
304+ if ( ! web3Onboard || ! notify ) return < div > Loading...</ div >
295305
296306 return (
297307 < main >
298- < Header network = { network } address = { address } balance = { balance } ens = { ens } />
308+ < Header connectedChain = { wallet ? connectedChain : null } address = { wallet ?. accounts [ 0 ] ?. address } balance = { wallet ?. accounts [ 0 ] ?. balance } ens = { ens } />
299309 < section className = "main" >
300310 < div className = "main-content" >
301311 < div className = "vertical-main-container" >
302312 < div className = "container onboard" >
303313 < h2 > Onboarding Users with Onboard</ h2 >
314+ { wallet && (
315+ < div className = "network-select" >
316+ < label > Switch Chains</ label >
317+ { settingChain ? (
318+ < span > Switching Chains...</ span >
319+ ) : (
320+ < select
321+ onChange = { ( { target : { value } } ) =>
322+ console . log ( 'onChange called' ) || setChain ( { chainId : value } )
323+ }
324+ value = { connectedChain . id }
325+ >
326+ { chains . map ( ( { id, label } ) => {
327+ return < option value = { id } key = { id } > { label } </ option >
328+ } ) }
329+ </ select >
330+ ) }
331+ </ div >
332+ ) }
304333 < div >
305- { ! wallet . provider && (
334+ { ! wallet && (
306335 < button
307336 className = "bn-demo-button"
308337 onClick = { ( ) => {
309- onboard . walletSelect ( )
338+ connect ( )
310339 } }
311340 >
312341 Select a Wallet
313342 </ button >
314343 ) }
315344
316- { wallet . provider && (
317- < button
318- className = "bn-demo-button"
319- onClick = { onboard . walletCheck }
320- >
321- Wallet Checks
322- </ button >
323- ) }
324-
325- { wallet . provider && (
345+ { wallet && (
326346 < button
327347 className = "bn-demo-button"
328- onClick = { onboard . walletSelect }
348+ onClick = { ( ) => {
349+ connect ( )
350+ } }
329351 >
330- Switch Wallets
352+ Connect Another Wallet
331353 </ button >
332354 ) }
333355
334- { wallet . provider && (
356+ { wallet && (
335357 < button
336358 className = "bn-demo-button"
337- onClick = { onboard . walletReset }
359+ onClick = { ( ) => {
360+ disconnect ( wallet )
361+ const connectedWalletsList = connectedWallets . map ( ( { label } ) => label )
362+ window . localStorage . setItem (
363+ 'connectedWallets' ,
364+ JSON . stringify ( connectedWalletsList )
365+ )
366+ } }
338367 >
339368 Reset Wallet State
340369 </ button >
341370 ) }
342- { wallet . provider && wallet . dashboard && (
343- < button className = "bn-demo-button" onClick = { wallet . dashboard } >
371+ { wallet && wallet ? .dashboard && (
372+ < button className = "bn-demo-button" onClick = { wallet ? .dashboard } >
344373 Open Wallet Dashboard
345374 </ button >
346375 ) }
347- { wallet . provider && wallet . type === 'hardware' && address && (
376+ { wallet && wallet ? .type === 'hardware' && wallet . accounts [ 0 ] . address && (
348377 < button
349378 className = "bn-demo-button"
350- onClick = { onboard . accountSelect }
379+ onClick = { web3Onboard . accountSelect }
351380 >
352381 Switch Account
353382 </ button >
354383 ) }
355384 </ div >
385+
356386 </ div >
357387 < div className = "container notify" >
358388 < h2 > Transaction Notifications with Notify</ h2 >
@@ -424,23 +454,23 @@ const App = () => {
424454 < button
425455 className = "bn-demo-button"
426456 onClick = { async ( ) => {
427- if ( ! address ) {
457+ if ( ! wallet . accounts [ 0 ] . address ) {
428458 await readyToTransact ( )
429459 }
430460
431- address && notify . account ( address )
461+ wallet . accounts [ 0 ] . address && notify . account ( wallet . accounts [ 0 ] . address )
432462 } }
433463 >
434464 Watch Current Account
435465 </ button >
436466 < button
437467 className = "bn-demo-button"
438468 onClick = { async ( ) => {
439- if ( ! address ) {
469+ if ( ! wallet . accounts [ 0 ] . address ) {
440470 await readyToTransact ( )
441471 }
442472
443- address && notify . unsubscribe ( address )
473+ wallet . accounts [ 0 ] . address && notify . unsubscribe ( wallet . accounts [ 0 ] . address )
444474 } }
445475 >
446476 Un-watch Current Account
@@ -479,7 +509,6 @@ const App = () => {
479509 onClick = { ( ) => {
480510 setDarkMode ( true )
481511 notify . config ( { darkMode : true } )
482- onboard . config ( { darkMode : true } )
483512 } }
484513 >
485514 Dark Mode
@@ -491,7 +520,6 @@ const App = () => {
491520 onClick = { ( ) => {
492521 setDarkMode ( false )
493522 notify . config ( { darkMode : false } )
494- onboard . config ( { darkMode : false } )
495523 } }
496524 >
497525 Light Mode
0 commit comments