How to block AppContainer from being initialized if MetaMask is not installed?

[zulhfreelancer]

Hi,

I am following your tutorial to create a simple Dapp using React. So far everything looks fine except when I tried it on my another browser that doesn't has MetaMask installed.

Before that, this is my App.js file:

import React, { Component } from "react";
import { drizzleConnect } from "drizzle-react";
import { ContractData, ContractForm } from "drizzle-react-components";
import "./App.css";

class App extends Component {
  render() {
    const { drizzleStatus, accounts } = this.props;

    if (drizzleStatus.initialized) {
      return (
        <div className="App">
          <header className="App-header">
            <h1 className="App-title">Tutorial Token</h1>
            <p>
              <strong>Web3 Account:</strong>{" "}
              {accounts[0]}
            </p>
            <p>
              <strong>Total Supply</strong>:{" "}
              <ContractData
                contract="TutorialToken"
                method="totalSupply"
                methodArgs={[{ from: accounts[0] }]}
              />{" "}
              <ContractData
                contract="TutorialToken"
                method="symbol"
                hideIndicator
              />
            </p>
            <p>
              <strong>My Balance</strong>:{" "}
              <ContractData
                contract="TutorialToken"
                method="balanceOf"
                methodArgs={[accounts[0]]}
              />
            </p>
          </header>
          <h3>Send Tokens</h3>
          <div className="App-intro">
            <ContractForm
              contract="TutorialToken"
              method="transfer"
              labels={["To Address", "Amount to Send"]}
            />
          </div>
        </div>
      );
    }

    return <div>Loading Dapp</div>;
  }
}

const mapStateToProps = state => {
  return {
    accounts: state.accounts,
    drizzleStatus: state.drizzleStatus,
    TutorialToken: state.contracts.TutorialToken,
    web3: state.web3
  }
}

const AppContainer = drizzleConnect(App, mapStateToProps);
export default AppContainer;

And, this is the contract:

pragma solidity ^0.4.17;

import 'zeppelin-solidity/contracts/token/ERC20/StandardToken.sol';

contract TutorialToken is StandardToken {
  string public name = 'TutorialToken';
  string public symbol = 'TUT';
  uint8 public decimals = 2;

  uint public INITIAL_SUPPLY = 1000000;

  function TutorialToken() public {
    totalSupply_ = INITIAL_SUPPLY;
    balances[msg.sender] = INITIAL_SUPPLY;
  }
}

My browsers:

• Chrome - no MetaMask installed
• Firefox - has MetaMask installed and connected to my private blockchain (Geth with websocket)

Accounts

• Etherbase/Coinbase: 0x802b6e099e7a306cd769f20a692001ab4b9a2e6e
• A 'loose' account that was imported to MetaMask (in Firefox): 0x65A347c340981356CE8FDc76d877021091822a11

The problem

When I look at my Firefox (with MetaMask installed), I can see the 0x65A347c340981356CE8FDc76d877021091822a11 has 0 token. This is expected.

On Firefox:

But when I look at my Chrome (doesn't has MetaMask installed), it shows Etherbase/Coinbase account with 1000000 TUT tokens.

On Chrome:

That's odd. The expected behaviour in Chrome is not to show any address and the balance should be 0 because I don't have MetaMask installed in Chrome.

The help that I need now

How do I achieve the following:

• Shows Please install MetaMask message when user doesn't has MetaMask installed?
• Block the AppContainer from being initialized when MetaMask is not installed?
• Block accounts state from taking Etherbase/Coinbase address when MetaMask isn't installed?

The source code for this project can be found here.

Thank you in advance!