first step to future-proof web3 init

[lsaether]

Following https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

Will have to manage the async initialization of web3.

[lsaether]

fixes #595

[kosecki123]

Can we switch the async option today?

[lsaether]

@kosecki123 At this time it appears that the PR has yet to be merged MetaMask/metamask-extension#4703

[e00dan]

This is not as simple as that I believe. In reality message will be received asynchronously and by the time it will be received, web3 will be set to fallback provider (L319). This should be somehow promisified or separated through some checks from using L319 fallback provider.

[lsaether]

Yea correct. I'm not sure what the best way to handle the async connection to MetaMask is though. This code just assumes it will replace the fallback web3 with MetaMask web3 when it is approved. We could have all the read-only operations available using back-up provider in the same way we have now and just wait to allow scheduling until MetaMask is unlocked.

With this code, if the message is received async, will the web3 object update and refresh the page?

[adibas03]

First, we should promisify web3
so, L325 would be something like this.web3 = await web3

[adibas03]

@lsaether @bagaric
Consider

	this.web3HTTP = new Web3(new Web3.providers.HttpProvider(process.env.HTTP_PROVIDER));
	if (!web3) {
		this.promiseWeb3 = new Promise( (resolve, reject) => {
		  if (typeof window.web3 !== 'undefined') {
			// Current MetaMask flow
			this.connectedToMetaMask = true;
			resolve(new Web3(window.web3.currentProvider));
		  } else {
			// Future MetaMask flow
			window.addEventListener('message', ({ data }) => {
			  if (data && data.type && data.type === 'ETHEREUM_PROVIDER_SUCCESS') {
				this.connectedToMetaMask = true;
				resolve(new Web3(window.ethereum));
			  }
			});

			window.postMessage({ type: 'ETHEREUM_PROVIDER_REQUEST' }, '*');

			// If the MetaMask message is not received we set web3 to the
			// HTTP provider.
			setTimeout( () => {
				if (!this.connectedToMetaMask) {
					resolve(null)
					this.connectedToMetaMask = false;
				}
			}, 2000)
		  }
	  });
	  waitOnWeb3();
    }
	...
	
	waitOnWeb3 async () {
		const web3 = await this.promiseWeb3;
		this.web3 = web3;
		Object.assign(this, web3);
	}

With this,
isWeb3 = this.web3 !== null