From b99aaba13706947294dfaba18b19f178b11d06c2 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Mon, 17 Dec 2018 12:44:04 -0800
Subject: [PATCH 1/2] Improve EIP 1102 Support

My previous 1102 PR was not ideal: It was still using the
account-polling logic for the `enable()` function, which meant if a user
declined the login, it would keep re-requesting it in a loop.

This version replaces the account polling with a `Connect` button on the
no-accounts view, giving the user a graceful and patient place to
initiate the login process in a way that should be compatible with all
major web3 browsers.

This broke the tests again, sorry about that, I kindof just got this
good enough for my personal uses at the moment.
---
 src/AccountUnavailable.jsx | 12 -----------
 src/Login.jsx              | 34 ++++++++++++++++++++++++++++++
 src/Web3Provider.jsx       | 43 ++++++++++++++++++++++++++++++--------
 src/stylesheet.js          | 40 +++++++++++++++++++++++++++++++++++
 4 files changed, 108 insertions(+), 21 deletions(-)
 delete mode 100644 src/AccountUnavailable.jsx
 create mode 100644 src/Login.jsx

diff --git a/src/AccountUnavailable.jsx b/src/AccountUnavailable.jsx
deleted file mode 100644
index a155d5a..0000000
--- a/src/AccountUnavailable.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-const React = require('react');
-const ErrorTemplate = require('./ErrorTemplate');
-
-const AccountUnavailable = ErrorTemplate.bind(null, {
-  title: 'No ETH Account Available',
-  message: `
-It seems that you don&apos;t have an ETH account selected. If using
-MetaMask, please make sure that your wallet is unlocked and that
-you have at least one account in your accounts list.`
-});
-
-module.exports = AccountUnavailable;
diff --git a/src/Login.jsx b/src/Login.jsx
new file mode 100644
index 0000000..d1d1d9d
--- /dev/null
+++ b/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;
diff --git a/src/Web3Provider.jsx b/src/Web3Provider.jsx
index 9ccde11..fa8eeb3 100644
--- a/src/Web3Provider.jsx
+++ b/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,7 @@ class Web3Provider extends React.Component {
    * react to the user changing accounts or netowrks.
    */
   componentDidMount() {
-    this.fetchAccounts();
+    this.requestLogin();
     this.fetchNetwork();
     this.initPoll();
     this.initNetworkPoll();
@@ -94,15 +94,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 +114,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 +244,7 @@ class Web3Provider extends React.Component {
     const {
       passive,
       web3UnavailableScreen: Web3UnavailableComponent,
-      accountUnavailableScreen: AccountUnavailableComponent
+      accountUnavailableScreen: AccountUnavailableComponent,
     } = this.props;
 
     if (passive) {
@@ -233,7 +256,9 @@ class Web3Provider extends React.Component {
     }
 
     if (isEmpty(this.state.accounts)) {
-      return <AccountUnavailableComponent />;
+      return <AccountUnavailableComponent
+        requestLogin={ this.requestLogin.bind(this) }
+      />;
     }
 
     return this.props.children;
diff --git a/src/stylesheet.js b/src/stylesheet.js
index ac59063..d55dceb 100644
--- a/src/stylesheet.js
+++ b/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;
+}
+
 `;

From 3fd10ef721196d2d536a7ec7c2774d94b1409da7 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Fri, 21 Dec 2018 16:16:51 -0800
Subject: [PATCH 2/2] Do not request login on page load

---
 src/Web3Provider.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Web3Provider.jsx b/src/Web3Provider.jsx
index fa8eeb3..0b34b86 100644
--- a/src/Web3Provider.jsx
+++ b/src/Web3Provider.jsx
@@ -67,7 +67,6 @@ class Web3Provider extends React.Component {
    * react to the user changing accounts or netowrks.
    */
   componentDidMount() {
-    this.requestLogin();
     this.fetchNetwork();
     this.initPoll();
     this.initNetworkPoll();