Improve EIP 1102 Support

src/Login.jsx

@@ -0,0 +1,34 @@
+const React = require('react');
+const IconNoWeb3 = require('./IconNoWeb3');
+const stylesheet = require('./stylesheet');
+
+let requestLogin
+function LoginView(props) {
+  requestLogin = props.requestLogin.bind(this)
+  return (
+    <div className="Web3Provider-container">
+      <style dangerouslySetInnerHTML={{ __html: stylesheet }}
+      />
+      <div className="Web3Provider-wrapper">
+        <div className="Web3Provider-image">
+          <IconNoWeb3 />
+        </div>
+        <h1
+          className="Web3Provider-title"
+          dangerouslySetInnerHTML={{ __html: 'No ETH Account Available' }}
+        />
+        <p
+          className="Web3Provider-message"
+          dangerouslySetInnerHTML={{ __html: 'You are not yet logged in.' }}
+        />
+        <div>
+          <button className="web3ConnectButton" onClick={requestLogin}>
+            Connect
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+module.exports = LoginView;

src/Web3Provider.jsx

@@ -2,7 +2,7 @@ const React = require('react');
 const PropTypes = require('prop-types');
 const isEmpty = require('lodash/isEmpty');
 const range = require('lodash/range');
-const AccountUnavailable = require('./AccountUnavailable');
+const AccountUnavailable = require('./Login');
 const Web3Unavailable = require('./Web3Unavailable');
 
 const ONE_SECOND = 1000;
@@ -15,14 +15,14 @@ const propTypes = {
 const defaultProps = {
   passive: false,
   web3UnavailableScreen: Web3Unavailable,
-  accountUnavailableScreen: AccountUnavailable
+  accountUnavailableScreen: AccountUnavailable,
 };
 const childContextTypes = {
   web3: PropTypes.shape({
     accounts: PropTypes.array,
     selectedAccount: PropTypes.string,
     network: PropTypes.string,
-    networkId: PropTypes.number
+    networkId: PropTypes.string
   })
 };
 
@@ -67,7 +67,6 @@ class Web3Provider extends React.Component {
    * react to the user changing accounts or netowrks.
    */
   componentDidMount() {
-    this.fetchAccounts();
     this.fetchNetwork();
     this.initPoll();
     this.initNetworkPoll();
@@ -94,15 +93,15 @@ class Web3Provider extends React.Component {
   }
 
   /**
-   * Update state regarding the availability of web3 and an ETH account.
+   * Request login from users for EIP 1102 privacy support
    * @return {void}
    */
-  fetchAccounts() {
+  requestLogin() {
     const { web3 } = window;
     const ethAccounts = this.getAccounts();
 
     if (isEmpty(ethAccounts)) {
-      web3 && web3.currentProvider && web3.currentProvider.enable()
+      window.ethereum && ethereum.enable()
       .then(accounts => this.handleAccounts(accounts))
       .catch((err) => {
         this.setState({
@@ -114,6 +113,29 @@ class Web3Provider extends React.Component {
     }
   }
 
+  /**
+   * Update state regarding the availability of web3 and an ETH account.
+   * @return {void}
+   */
+  fetchAccounts() {
+    const { web3 } = window;
+    const ethAccounts = this.getAccounts();
+
+    if (isEmpty(ethAccounts)) {
+      web3 && web3.currentProvider && web3.currentProvider.sendAsync({
+        "jsonrpc":"2.0","method":"eth_accounts", "params":[]
+      }, (err, response) => {
+        if (err || response.error) {
+          return this.setState({
+            accountsError: err
+          });
+        }
+
+        this.handleAccounts(response.result)
+      })
+    }
+  }
+
   handleAccounts(accounts, isConstructor = false) {
     const { onChangeAccount } = this.props;
     const { store } = this.context;
@@ -221,7 +243,7 @@ class Web3Provider extends React.Component {
     const {
       passive,
       web3UnavailableScreen: Web3UnavailableComponent,
-      accountUnavailableScreen: AccountUnavailableComponent
+      accountUnavailableScreen: AccountUnavailableComponent,
     } = this.props;
 
     if (passive) {
@@ -233,7 +255,9 @@ class Web3Provider extends React.Component {
     }
 
     if (isEmpty(this.state.accounts)) {
-      return <AccountUnavailableComponent />;
+      return <AccountUnavailableComponent
+        requestLogin={ this.requestLogin.bind(this) }
+      />;
     }
 
     return this.props.children;

src/stylesheet.js

@@ -32,4 +32,44 @@ module.exports = `
   font-size: 18px;
   color: hsl(0,0%,50%);
 }
+
+.web3ConnectButton {
+	-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
+	-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
+	box-shadow:inset 0px -3px 7px 0px #29bbff;
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
+	background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+	background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+	background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+	background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
+	background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);
+	background-color:#2dabf9;
+	-moz-border-radius:3px;
+	-webkit-border-radius:3px;
+	border-radius:3px;
+	display:inline-block;
+	cursor:pointer;
+	color:#ffffff;
+	font-family:Arial;
+	font-size:15px;
+	padding:9px 23px;
+	text-decoration:none;
+	text-shadow:0px 1px 0px #263666;
+}
+.web3ConnectButton:hover {
+	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
+	background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+	background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+	background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+	background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
+	background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);
+	background-color:#0688fa;
+}
+.web3ConnectButton:active {
+	position:relative;
+	top:1px;
+}
+
 `;