src/components/layout/bytomWrap.jsx

   1 import React, { Component } from 'react'
   2 import {connect} from "react-redux";
   3
   4 // This is a Higher Order Component (HOC) that wraps up any components that require
   5 // an unlocked Bytom account instance
   6 export default function(WrappedComponent) {
   7
   8   // ...and returns another component...
   9   const BytomWrap = class extends Component {
  10
  11     render () {
  12       let contents = <div />
  13
  14       const bytom = this.props.bytom
  15       if (
  16         bytom
  17         && bytom.default_account
  18       ) {
  19         return <WrappedComponent {...this.props} />
  20       }
  21       else if (( bytom && !this.props.bytomConnection)) {
  22         return (
  23             <div className="columns">
  24               <div className="column" />
  25               <div className="column is-two-thirds">
  26                 <h1 className="title">
  27                   Authenticate <strong>Bytom-Chrome-Extension</strong>.
  28                 </h1>
  29                 <p className="lead">
  30                   Please Authenticate the connection request.
  31                 </p>
  32               </div>
  33               <div className="column" />
  34             </div>
  35         )
  36       } else if (( bytom )) {
  37         return (
  38             <div className="columns">
  39               <div className="column" />
  40               <div className="column is-two-thirds">
  41                 <h1 className="title">
  42                   Hoo-ray! <strong>Bytom-Chrome-Extension</strong> is installed!
  43                 </h1>
  44                 <p className="lead">
  45                   However, you need to create a new account. Click the bytom icon in the top-right corner of your browser, then refresh the page.
  46                 </p>
  47               </div>
  48               <div className="column" />
  49             </div>
  50         )
  51       } else {
  52         return (
  53             <div className="columns">
  54               <div className="column" />
  55               <div className="column is-two-thirds">
  56                 <h1 className="title">
  57                   Hold up ...
  58                 </h1>
  59                 <p className="lead">
  60                   To use Dapp Demo you will need to install the Bytom-Chrome-Extension.
  61                 </p>
  62                 <p className="lead">
  63                   Please install the extension and refresh the page.
  64                 </p>
  65                 <br />
  66                 <br />
  67
  68               </div>
  69               <div className="column" />
  70             </div>
  71         )
  72       }
  73
  74       return contents
  75     }
  76
  77   }
  78   const mapStateToProps = state => ({
  79     bytom: state.bytom,
  80     bytomConnection: state.bytomConnection
  81   })
  82   return connect(mapStateToProps)(BytomWrap)
  83 }