content: import React from 'react'
  
  import injectTapEventPlugin from 'react-tap-event-plugin'
  injectTapEventPlugin()
  
  import { observer } from 'mobx-react'
  import { observable } from 'mobx'
  
  import DevTools from 'mobx-react-devtools'
  global.devTools = false
  
  import { Tabs, Tab } from 'material-ui/Tabs'
  
  import MyLightwallet from './MyLightwallet'
  
  import AccountTab from './tabs/AccountTab'
  import ReceiveTab from './tabs/ReceiveTab'
  import GiveTab from './tabs/GiveTab'
  import AdminTab from './tabs/AdminTab'
  import DonationTab from './tabs/DonationTab'
  
  
  //
  global.myLightwallet = new MyLightwallet()
  
  import CreateContracts from './contracts'
  CreateContracts()
  
  const buttonStyle = {marginRight: 8}
  
  
  //
  @observer class App extends React.Component {
    @observable activeTab = 'Donation'
  
    @observable peerCount = 0
    @observable myAccount = ''
    @observable balanceEth = 0
    @observable blockNumber = 0
  
    _updateObservables = () => {
      const { web3 } = global
      if (!web3.currentProvider) {
        // console.warn('No web3 provider yet')
        return
      }
  
      web3.net.getPeerCount((err, peerCount) => {
        if (!err) this.peerCount = peerCount
      })
      
      if (localStorage.myLightwalletProviderURL.indexOf(':8545') >= 0) {
        this.myAccount = web3.eth.accounts.length ? web3.eth.accounts[0] : undefined
      } else {
        this.myAccount = global.myLightwallet.getAddress()
      }
      
      web3.eth.getBalance(this.myAccount, (err, balance) => {
        if (!err) {
            const balanceWei = web3.fromWei(balance, 'ether')
            this.balanceEth = Math.floor(balanceWei * 100) / 100
            // console.log(balanceWei.toString())
          }
        }
      )
  
      web3.eth.getBlockNumber((err, blockNumber) => {
        // console.log('getBlockNumber', err, blockNumber)
        if (!err) this.blockNumber = blockNumber
      })
    }
  
    componentDidMount() {
      setInterval(this._updateObservables, 1000)
    } // end of componentDidMount
  
    //
  
    // keep track of the active tab
    handleActivateTab = (tab) => {
      this.activeTab = tab.props.label
      // console.log('handleActivateTab', this.activeTab)
    }
  
    render() {
      const tabIconWidth = 30
  
      return (
        <Tabs>
          {global.devtools && <DevTools />}
  
          {this.myAccount &&
          <Tab label='Account' onActive={this.handleActivateTab} icon={<img src='/icons/account.png' width={tabIconWidth} alt='' />}>
            {(this.activeTab === 'Account' || this.activeTab === 'Donation') &&
            <AccountTab myAccount={this.myAccount} balanceEth={this.balanceEth} peerCount={this.peerCount} blockNumber={this.blockNumber} buttonStyle={buttonStyle} />}
          </Tab>}
  
          {this.myAccount &&
          <Tab label='Receive' onActive={this.handleActivateTab} icon={<img src='/icons/receive.png' width={tabIconWidth} alt='' />}>
            {this.activeTab === 'Receive' &&
            <ReceiveTab myAccount={this.myAccount} />}
          </Tab>}
          
          {this.myAccount &&
          <Tab label='Give' onActive={this.handleActivateTab} icon={<img src='/icons/give.png' width={tabIconWidth} alt='' />}>
            {this.activeTab === 'Give' &&
            <GiveTab myAccount={this.myAccount} buttonStyle={buttonStyle} />}
          </Tab>}
  
          {this.myAccount &&
          <Tab label='Admin' onActive={this.handleActivateTab} icon={<img src='/icons/admin.png' width={tabIconWidth} alt='' />}>
            {this.activeTab === 'Admin' &&
            <AdminTab myAccount={this.myAccount} />}
          </Tab>}
  
          <Tab label='Donation' onActive={this.handleActivateTab} icon={<img src='/icons/donation.png' width={tabIconWidth} alt='' />}>
            {this.activeTab === 'Donation' &&
            <DonationTab />}
          </Tab>
        </Tabs>
      )
    }
  }
  
  export default App
  