First App.jsx Iteration

App.jsx

//src/App.jsx

import React, { Component, Fragment } from 'react';
import { Switch, Route, withRouter } from 'react-router-dom';
 
import AuthPage from './pages/auth/auth-page';
import MainPage from './pages/main-page/main-page';
import './App.styles.scss';
 
// Box dependency
const Box = require('3box')
 
class App extends Component {
 constructor(props) {
   super(props);
   this.state = {
     box: null,
     ethAddress: '',
     userProfile: {},
     isAppReady: false,
   };
 }
 
 async componentDidMount() {
   const { box } = this.state;
   const { history } = this.props;
 
   // Bring authentication screen up when App component mounts
   if (!box) history.push('/');
   this.setState({ isAppReady: true });
 }
 
 handleLogin = async () => {
   const { history } = this.props
 
   //web3 actions to authenticate with metamask or other provider
   const ethAddresses = await window.ethereum.enable();
   const ethAddress = ethAddresses[0];
  
   // Authenticate and get profile data
   const box = await Box.openBox(ethAddress, window.ethereum, {});
   const userProfile = await Box.getProfile(ethAddress);
  
   //Promise resolution- waiting for 3Box onSyncDone confirmation
   await new Promise((resolve, reject) => box.onSyncDone(resolve));
 
   //Set all to state and continue
   await this.setState({ box, userProfile, ethAddress });
 
   history.push('/main');
 }
 
 render() {
   const { isAppReady, ethAddress } = this.state;
   return (
     <div className='App'>
       {isAppReady && (<Fragment>
         <Switch>
           <Route
             exact
             path='/'
             render={() => (
             <AuthPage handleAuth={this.handleAuth} />
             )}
           />
 
           <Route
             exact
             path='/main'
             render={() => (
               <MainPage
                 ethAddress={ethAddress}
                />
             )}
           />
         </Switch>
       </Fragment>)}
     </div>
   );
 }
}
 
export default withRouter(App);