Merge pull request #15 from protofire/feature/home

Feature/home

.eslintrc.json

@@ -9,5 +9,6 @@
         "ecmaFeatures": {
             "jsx": true
         }
-    }
+    },
+    "parser": "babel-eslint"
 }

package.json

@@ -15,9 +15,12 @@
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
     "react-router-dom": "^4.3.1",
-    "react-scripts": "2.1.1"
+    "react-scripts": "2.1.1",
+    "react-toastify": "^4.5.1",
+    "web3": "^1.0.0-beta.37"
   },
   "devDependencies": {
+    "babel-eslint": "^9.0.0",
     "coveralls": "^3.0.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.7.1",
@@ -38,9 +41,7 @@
     "lint": "eslint . src/**/*.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls"
   },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
+  "eslintConfig": {},
   "browserslist": [
     ">0.2%",
     "not dead",

src/App.js

@@ -1,21 +1,42 @@
 import React, { Component } from 'react'
 import './App.css'
-import { BrowserRouter as Router, Route } from 'react-router-dom'
-import { HomeComponent, AccountSummaryComponent } from './components'
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
+import { HomeComponent, AccountSummaryComponent } from './Components'
+import PrivateRoute from './Components/Common/Hoc/PrivateRoute/PrivateRoute'
+import withWeb3Provider from './Components/Common/Hoc/Web3Provider/Web3Provider'
+import Spinner from './Components/Common/UI/Spinner/Spinner'
 
-class App extends Component {
+export class App extends Component {
   render() {
+    console.log('[App.js] props', this.props)
+    let content = <Spinner />
+    if (this.props.render) {
+      content = (
+        <>
+          <Switch>
+            <Route
+              exact
+              path="/"
+              render={routeProps => <HomeComponent {...this.props} {...routeProps} />}
+            />
+            <PrivateRoute
+              authenticated={this.props.userData.authenticated}
+              exact
+              path="/account"
+              component={AccountSummaryComponent}
+            />
+          </Switch>
+        </>
+      )
+    }
     return (
       <Router>
         <div className="App">
-          <header className="App-header">
-            <Route exact path="/" component={HomeComponent} />
-            <Route exact path="/account" component={AccountSummaryComponent} />
-          </header>
+          <header className="App-header">{content}</header>
         </div>
       </Router>
     )
   }
 }
 
-export default App
+export default withWeb3Provider(App)

src/App.spec.js

@@ -1,9 +1,39 @@
 import React from 'react'
-import { mount } from 'enzyme'
+import { MemoryRouter } from 'react-router'
+import { configure, mount, shallow } from 'enzyme'
 import App from '../src/App'
+import Adapter from 'enzyme-adapter-react-16/build'
+import { AccountSummaryComponent, HomeComponent } from './Components'
 
-it('renders welcome message', () => {
-  const wrapper = mount(<App />)
-  const welcome = 'Hello LivePeer Alerts!'
-  expect(wrapper.contains(welcome)).toEqual(true)
+configure({ adapter: new Adapter() })
+
+describe('Check public and protected routes', () => {
+  it('Expect route / to be homeComponent', () => {
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/']}>
+        <App />
+      </MemoryRouter>
+    )
+    expect(wrapper.find(HomeComponent)).toHaveLength(1)
+  })
+  it('Redirect from /account to / unauthenticated users', () => {
+    let props = {
+      web3: [],
+      userData: {
+        authenticated: false,
+        reason: '',
+        address: 123,
+        currentNetwork: 123
+      },
+      render: true
+    }
+    const wrapper = mount(
+      <MemoryRouter initialEntries={['/account']}>
+        <App {...props} />
+      </MemoryRouter>
+    )
+
+    expect(wrapper.find(AccountSummaryComponent)).toHaveLength(0)
+    expect(wrapper.find(HomeComponent)).toHaveLength(1)
+  })
 })

src/components/AccountSummary/index.js → src/Components/AccountSummary/accountSummary.js

@@ -1,12 +1,10 @@
 import React, { Component } from 'react'
 
 export class AccountSummaryComponent extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {}
-  }
-
   render() {
+    const web3 = this.props
+    console.log('[AccountSummaryComponent]', web3.eth)
+
     return (
       <div>
         <h3>Account Summary Component</h3>

src/Components/Common/Hoc/PrivateRoute/PrivateRoute.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { Route, Redirect } from 'react-router-dom'
+
+const PrivateRoute = ({ component: Component, authenticated, ...rest }) => (
+  <Route
+    {...rest}
+    render={props => (authenticated ? <Component {...props} /> : <Redirect to="/" />)}
+  />
+)
+export default PrivateRoute

src/Components/Common/Hoc/Web3Provider/Web3FailReasons.js

@@ -0,0 +1,3 @@
+export const NO_WEB3 = 'The user does not have web3 injected'
+export const NO_PERMISSIONS = 'The user did not gave us permissions'
+export const WRONG_NETWORK = 'The user is not logged on the correct network'

src/Components/Common/Hoc/Web3Provider/Web3Provider.js

@@ -0,0 +1,133 @@
+import React, { Component } from 'react'
+import Web3 from 'web3'
+import * as failReasons from './Web3FailReasons'
+
+const withWeb3Provider = WrappedComponent => {
+  return class extends Component {
+    state = {
+      web3: null,
+      userData: {
+        authenticated: false,
+        reason: null,
+        address: null,
+        currentNetwork: null
+      },
+      render: false
+    }
+
+    loadWeb3 = async () => {
+      let web3Instance
+      let userAddress
+      let userNetwork
+      console.log('[Web3Provider.js] loadWeb3')
+      /** We check if metamask is installed, either the new version or the legacy one **/
+      if (window.ethereum) {
+        console.log('[Web3Provider.js] getting web3 new instance')
+        web3Instance = new Web3(window.ethereum)
+        try {
+          /** Request access to the user **/
+          console.log('[Web3Provider.js] requesting user permissions')
+          await window.ethereum.enable()
+          Promise.all([web3Instance.eth.getAccounts(), web3Instance.eth.net.getId()]).then(
+            results => {
+              userAddress = results[0]
+              userNetwork = results[0]
+              console.log('[Web3Provider.js] user with web3 ethereum authenticated')
+              /** The user accepted the app, now it's authenticated **/
+              this.setState({
+                web3: web3Instance,
+                userData: {
+                  authenticated: true,
+                  address: userAddress,
+                  currentNetwork: userNetwork
+                },
+                render: true
+              })
+              /** We subscribe to the event that detects if the user has changed the account **/
+              web3Instance.currentProvider.publicConfigStore.on(
+                'update',
+                this.onUserAccountChangeHandler
+              )
+            }
+          )
+        } catch (error) {
+          /** The user denied the app, it's not authenticated **/
+          console.log('[Web3Provider.js] user denied access')
+          this.setState({
+            web3: web3Instance,
+            userData: {
+              authenticated: false,
+              reason: failReasons.NO_PERMISSIONS
+            },
+            render: true
+          })
+          console.log('[Web3Provider.js] user with ethereum denied the access')
+        }
+      } else if (window.web3) {
+        console.log('[Web3Provider.js] getting web3 legacy instance')
+        web3Instance = new Web3(window.web3.currentProvider)
+        Promise.all([web3Instance.eth.getAccounts(), web3Instance.eth.net.getId()]).then(
+          results => {
+            userAddress = results[0]
+            userNetwork = results[0]
+            this.setState({
+              web3: web3Instance,
+              userData: {
+                authenticated: true,
+                address: userAddress,
+                currentNetwork: userNetwork
+              },
+              render: true
+            })
+            console.log('[Web3Provider.js] user with web3 legacy authenticated')
+            /** We subscribe to the event that detects if the user has changed the account **/
+            web3Instance.currentProvider.publicConfigStore.on(
+              'update',
+              this.onUserAccountChangeHandler
+            )
+          }
+        )
+      } else {
+        /** The user does not have web3 **/
+        this.setState({
+          render: true,
+          userData: {
+            authenticated: false,
+            reason: failReasons.NO_WEB3
+          }
+        })
+        console.log('[Web3Provider.js] user does not have web3')
+      }
+    }
+
+    onUserAccountChangeHandler = userAuthData => {
+      //console.log('[Web3Provider.js] onUserAccountChangeHandler with data', userAuthData)
+      this.setState({
+        userData: {
+          ...this.state.userData,
+          address: userAuthData.selectedAddress,
+          currentNetwork: userAuthData.networkVersion
+        }
+      })
+    }
+
+    async componentDidMount() {
+      console.log('[Web3Provider.js] componentDidMount')
+      await this.loadWeb3()
+      console.log('[Web3Provider.js] await finished')
+    }
+
+    render() {
+      return (
+        <WrappedComponent
+          {...this.props}
+          web3={this.state.web3}
+          userData={this.state.userData}
+          render={this.state.render}
+        />
+      )
+    }
+  }
+}
+
+export default withWeb3Provider

src/Components/Common/UI/Spinner/Spinner.css

@@ -0,0 +1,79 @@
+.Loader {
+    font-size: 10px;
+    margin: 50px auto;
+    text-indent: -9999em;
+    width: 11em;
+    height: 11em;
+    border-radius: 50%;
+    background: #ffffff;
+    background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+    position: relative;
+    -webkit-animation: load3 1.4s infinite linear;
+    animation: load3 1.4s infinite linear;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    bottom: 20px;
+}
+.Loader:before {
+    width: 50%;
+    height: 50%;
+    background: #ffffff;
+    border-radius: 100% 0 0 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: '';
+}
+.Loader:after {
+    background: #282c34;
+    width: 75%;
+    height: 75%;
+    border-radius: 50%;
+    content: '';
+    margin: auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+@-webkit-keyframes load3 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes load3 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+
+
+/* On screens that are 600px or less */
+@media screen and (max-width: 600px) {
+    .Loader{
+        left: 10px;
+        bottom: 50px;
+
+    }
+    .Loader div {
+        width: 100px;
+        height: 100px;
+    }
+}

src/Components/Common/UI/Spinner/Spinner.js

@@ -0,0 +1,4 @@
+import React from 'react'
+import './Spinner.css'
+const spinner = () => <div className="Loader">Loading...</div>
+export default spinner

src/Components/Common/UI/Spinner/Spinner.spec.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import Spinner from './Spinner'
+import Adapter from 'enzyme-adapter-react-16'
+import { configure, shallow } from 'enzyme'
+
+configure({ adapter: new Adapter() })
+
+describe('Spinner test ', () => {
+  it(`should render Spinner component with class name 'Loader'`, () => {
+    const wrapper = shallow(<Spinner />)
+    const visitorShortcutsWrapper = wrapper.find('.Loader')
+    expect(visitorShortcutsWrapper).toHaveLength(1)
+  })
+})