ledgerz-example

import React, { Component } from "react";
import Box from "3box";

import ChatBox from "3box-chatbox-react";

export default class App extends Component {
  state = {
    needToAWeb3Browser: false
  };
  async getAddressFromMetaMask() {
    if (typeof window.ethereum == "undefined") {
      this.setState({ needToAWeb3Browser: true });
    } else {
      window.ethereum.autoRefreshOnNetworkChange = false; //silences warning about no autofresh on network change
      const accounts = await window.ethereum.enable();
      this.setState({ accounts });
    }
  }
  async componentDidMount() {
    //1) Request permission to access the users metamask account & 
    /// save to react state
    await this.getAddressFromMetaMask();
    if (this.state.accounts) {

      //2) Authenticate a users 3Box
      const box = await Box.openBox(this.state.accounts[0], window.ethereum);
      // Sync 3Box
      await box.syncDone;
      this.setState({box})
      console.log("3Box logged in & synced");

      //3) Authenticate in to the LedgerZ Chatbox Space
      const space = await this.state.box.openSpace('ledger-z-chatbox')
      this.setState({space})
    }
  }
  render() {
    if (this.state.needToAWeb3Browser) {
      return <h1>Please install metamask</h1>;
    }

    return (
        <div>
              <div>
                {/* 4) Once the space is opened we can use the Chatbox Plugin */}
                {<ChatBox
                  spaceName="ledger-z-chatbox"
                  threadName="myThreadName"
                  box={this.state.box}
                  currentUserAddr={this.state.account}
                />}
              </div>
        </div>
    );
  }
}