[Ethereum] Accessing web3 object in Chrome terminal using React

Fixed: https://github.com/ethereum/web3.js/issues/576

Edit The Following File

/node_modules/bignumber.js/bignumber.js

edit as follows:

-if ( !crypto ) try { crypto = require('crypto'); } catch (e) {}
+if ( !crypto ) try { crypto = require('crypto-js'); } catch (e) {} 

Web3 Version: 0.18.2

Import in respective file

var Web3 = require('web3'); or import { default as Web3 } from 'web3';

Try it this way:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

I would create a separate file to house all configuration code around the web3 library that would look like this:

import Web3 from 'web3';

const web3 = new Web3(window.web3.currentProvider);

export default web3;

Now, I utilized ES2016 way of initializing state where you no longer need the constructor() function.

You want to setup your own local instance of web3 and rip out the provider from the injected copy that is coming from Metamask and this will allow your instance of web3 to automatically connect to the Rinkeby test network and make use of all the accounts assigned to the Metamask extension.

So I created a new instance of web3 and simultaneously ripped out the injected copy of web3 provided by metamask. To rip out the provider is where you see the reference to window global variable.

Metamask injects web3 onto web3 global variable. The currentProvider has been pre configured for the Rinkeby test network.

You can then import it to the App file as I displayed above and then console it out to ensure it works like so:

import React, { Component } from 'react';
import web3 from './web3';

class App extends Component {
  state = { lastWinner: 0, numberOfBets: 0, minimumBet: 0, totalBet: 0, maxAmountOfBets: 0 };

  async componentDidMount() {
    const lastWinner = await blackjack.methods.lastWinner().call();
    const numberOfBets = await blackjack.methods.getNumberOfBets().call();

    this.setState({ lastWinner, numberOfBets });
  }

  render() {
    console.log(web3.version);
  }