1 import React, { Component } from 'react'
2 import {connect} from "react-redux";
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) {
8 // ...and returns another component...
9 const BytomWrap = class extends Component {
12 let contents = <div />
14 const bytom = this.props.bytom
17 && bytom.default_account
19 return <WrappedComponent {...this.props} />
21 else if (( bytom && !this.props.bytomConnection)) {
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>.
30 Please Authenticate the connection request.
33 <div className="column" />
36 } else if (( bytom )) {
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!
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.
48 <div className="column" />
53 <div className="columns">
54 <div className="column" />
55 <div className="column is-two-thirds">
56 <h1 className="title">
60 To use Dapp Demo you will need to install the Bytom-Chrome-Extension.
63 Please install the extension and refresh the page.
69 <div className="column" />
78 const mapStateToProps = state => ({
80 bytomConnection: state.bytomConnection
82 return connect(mapStateToProps)(BytomWrap)