[WIP] Added support for EIP-1102

app/assets/onepager/js/web3alert.js

@@ -29,6 +29,8 @@ var metaMaskWarning = function() {
       _alert({ message: gettext('You must install <a href=https://metamask.io/>Metamask</a> to use this tool.') }, 'info');
     }
     return true;
+  } else if (is_metamask_unlocked && !is_metamask_approved) {
+    _alert({ message: gettext('Please connect to Metamask.') }, 'info');
   } else if (web3.eth.accounts.length == 0) {
     _alert({ message: gettext('Please unlock Metamask.') }, 'info');
     return true;

app/assets/v2/css/buttons.css

@@ -187,3 +187,10 @@ button:focus {
 .btn > svg:first-child {
   margin-right: .5rem;
 }
+
+#metamask_connect {
+  background: none;
+  color: white;
+  border: 2px solid white;
+  border-radius: 10px;
+}

app/assets/v2/js/metamask-approval.js

@@ -0,0 +1,42 @@
+async function metamaskApproval() {
+  if (window.ethereum) {
+    window.web3 = new Web3(ethereum);
+    is_metamask_approved = await window.ethereum._metamask.isApproved();
+    is_metamask_unlocked = await window.ethereum._metamask.isUnlocked();
+
+    try {
+      if (is_metamask_unlocked && is_metamask_approved) {
+        await ethereum.enable();
+      }
+    } catch (error) {
+      _alert('Permission to connect to metamask rejected. Allow gitcoin to connect to metamask.', 'warning');
+    }
+  }
+  ask_metamask_connection();
+}
+
+window.addEventListener('load', metamaskApproval);
+
+async function approve_metamask() {
+  try {
+    await ethereum.enable();
+  } catch (error) {
+    _alert('Permission to connect to metamask rejected. Allow gitcoin to connect to metamask.', 'warning');
+  }
+}
+
+function ask_metamask_connection() {
+  var page_url = $(location).attr('pathname');
+  shown_on = ['/tip/send/2', '/kudos/send', '/ens'];
+  var len = page_url.length - 1;
+  if (page_url.lastIndexOf('/') === len) {
+    page_url = page_url.substring(0, len);
+  }
+  if ($.inArray(page_url, shown_on) != -1 && !is_metamask_approved) {
+    _alert('Metamask not connected. <button id="metamask_connect" onclick="approve_metamask()">Click here to connect to metamask</button>', 'error');
+    $('#metamask_connect').css('background', 'none');
+    $('#metamask_connect').css('color', 'white');
+    $('#metamask_connect').css('border', '2px solid white');
+    $('#metamask_connect').css('border-radius', '10px');
+  }
+}

app/assets/v2/js/shared.js

@@ -635,10 +635,17 @@ var currentNetwork = function(network) {
         $('#current-network').text(gettext('Metamask Not Enabled'));
         $('#navbar-network-banner').html(info);
       } else if (network == 'locked') {
-        info = gettext('Web3 locked. Please unlock ') +
-          '<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" target="_blank" rel="noopener noreferrer">Metamask</a>';
-        $('#current-network').text(gettext('Metamask Locked'));
-        $('#navbar-network-banner').html(info);
+        if (is_metamask_approved || !is_metamask_unlocked) {
+          info = gettext('Web3 locked. Please unlock ') +
+            '<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" target="_blank" rel="noopener noreferrer">Metamask</a>';
+          $('#current-network').text(gettext('Metamask Locked'));
+          $('#navbar-network-banner').html(info);
+        } else {
+          info = gettext('Metamask not connected. ') +
+            '<button id="metamask_connect" onclick="approve_metamask()">Click here to connect to metamask</button>';
+          $('#current-network').text(gettext('Metamask Not Connected'));
+          $('#navbar-network-banner').html(info);
+        }
       } else {
         info = gettext('Connect to Mainnet via Metamask');
         $('#current-network').text(gettext('Unsupported Network'));
@@ -669,10 +676,17 @@ var currentNetwork = function(network) {
         $('#current-network').text(gettext('Metamask Not Enabled'));
         $('#navbar-network-banner').html(info);
       } else if (network == 'locked') {
-        info = gettext('Web3 locked. Please unlock ') +
-          '<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" target="_blank" rel="noopener noreferrer">Metamask</a>';
-        $('#current-network').text(gettext('Metamask Locked'));
-        $('#navbar-network-banner').html(info);
+        if (is_metamask_approved || !is_metamask_unlocked) {
+          info = gettext('Web3 locked. Please unlock ') +
+            '<a href="https://metamask.io/?utm_source=gitcoin.co&utm_medium=referral" target="_blank" rel="noopener noreferrer">Metamask</a>';
+          $('#current-network').text(gettext('Metamask Locked'));
+          $('#navbar-network-banner').html(info);
+        } else {
+          info = gettext('Metamask not connected. ') +
+            '<button id="metamask_connect" onclick="approve_metamask()">Click here to connect to metamask</button>';
+          $('#current-network').text(gettext('Metamask Not Connected'));
+          $('#navbar-network-banner').html(info);
+        }
       } else {
         info = gettext('Connect to Rinkeby / Custom RPC via Metamask');
         $('#current-network').text(gettext('Unsupported Network'));
@@ -708,14 +722,26 @@ var trigger_primary_form_web3_hooks = function() {
       $('#primary_form').addClass('hidden');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('No Metamask Error', params);
+    } else if (is_metamask_unlocked && !is_metamask_approved) {
+      $('#connect_metamask_error').css('display', 'block');
+      $('#unlock_metamask_error').css('display', 'none');
+      $('#zero_balance_error').css('display', 'none');
+      $('#no_metamask_error').css('display', 'none');
+      $('#robot_error').removeClass('hidden');
+      $('#primary_form').addClass('hidden');
+      $('.submit_bounty .newsletter').addClass('hidden');
+      $('#no_issue_error').css('display', 'none');
+      mixpanel_track_once('Unlock Metamask Error', params);
     } else if (!web3.eth.coinbase) {
       $('#unlock_metamask_error').css('display', 'block');
       $('#zero_balance_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
       $('#robot_error').removeClass('hidden');
       $('#primary_form').addClass('hidden');
+      $('#connect_metamask_error').css('display', 'none');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('Unlock Metamask Error', params);
@@ -725,13 +751,15 @@ var trigger_primary_form_web3_hooks = function() {
       $('#primary_form').addClass('hidden');
       $('.submit_bounty .newsletter').addClass('hidden');
       $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'none');
       mixpanel_track_once('Zero Balance Metamask Error', params);
     } else {
       $('#zero_balance_error').css('display', 'none');
       $('#unlock_metamask_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'none');
       $('#no_issue_error').css('display', 'block');
       $('#robot_error').addClass('hidden');
       $('#primary_form').removeClass('hidden');
@@ -755,21 +783,31 @@ var trigger_faucet_form_web3_hooks = function() {
       $('#faucet_form').addClass('hidden');
       mixpanel_track_once('No Metamask Error', params);
       return;
+    } else if (is_metamask_unlocked && !is_metamask_approved) {
+      $('#no_metamask_error').css('display', 'none');
+      $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'block');
+      $('#over_balance_error').css('display', 'none');
+      $('#faucet_form').addClass('hidden');
     } else if (!web3.eth.coinbase) {
       $('#no_metamask_error').css('display', 'none');
       $('#unlock_metamask_error').css('display', 'block');
+      $('#connect_metamask_error').css('display', 'none');
+      $('#over_balance_error').css('display', 'none');
       $('#faucet_form').addClass('hidden');
       return;
     } else if (balance >= faucet_amount) {
       $('#no_metamask_error').css('display', 'none');
       $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'none');
       $('#over_balance_error').css('display', 'block');
       $('#faucet_form').addClass('hidden');
       mixpanel_track_once('Faucet Available Funds Metamask Error', params);
     } else {
       $('#over_balance_error').css('display', 'none');
       $('#no_metamask_error').css('display', 'none');
       $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'none');
       $('#faucet_form').removeClass('hidden');
     }
   }
@@ -780,6 +818,11 @@ var trigger_faucet_form_web3_hooks = function() {
       mixpanel_track_once('No Metamask Error', params);
       return;
     }
+    if (is_metamask_unlocked && !is_metamask_approved) {
+      $('#unlock_metamask_error').css('display', 'none');
+      $('#connect_metamask_error').css('display', 'block');
+      $('#faucet_form').addClass('hidden');
+    }
     if (!web3.eth.coinbase) {
       $('#unlock_metamask_error').css('display', 'block');
       $('#faucet_form').addClass('hidden');

app/dashboard/templates/bounty/fulfill.html

@@ -35,6 +35,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row">

app/dashboard/templates/bounty/increase.html

@@ -37,6 +37,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       {% include 'shared/success_container.html' %}

app/dashboard/templates/bounty/kill.html

@@ -35,6 +35,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row">

app/dashboard/templates/bounty/new.html

@@ -39,6 +39,7 @@
         {% include 'shared/no_metamask_error.html' %}
         {% include 'shared/zero_balance_error.html' %}
         {% include 'shared/unlock_metamask.html' %}
+        {% include 'shared/connect_metamask.html' %}
       </div>
     </div>
     <div class="row">

app/dashboard/templates/bulk_payout_bounty.html

@@ -38,6 +38,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row" id="success_container" style="display: none; min-height: 500px;">

app/dashboard/templates/contribute_bounty.html

@@ -36,6 +36,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row">

app/dashboard/templates/ens/base.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="{% static "v2/css/jquery.select2.min.css" %}">
     <link rel="stylesheet" href="{% static "cookielaw/css/cookielaw.css" %}">
     <script src="{% static "v2/js/jquery.js" %}"></script>
+    <script src="{% static "v2/js/metamask-approval.js" %}"></script>
     <script src="{% static "v2/js/work_with_gitcoin.js" %}"></script>
     <!--[if lte IE 9]><link rel="stylesheet" href="{% static "onepager/css/ie9.css" %}"><![endif]-->
     <!--[if lte IE 8]><link rel="stylesheet" href="{% static "onepager/css/ie8.css" %}"><![endif]-->

app/dashboard/templates/onepager/base.html

@@ -139,5 +139,6 @@
         root: "{{ ipfs_config.root }}"
       };
     </script>
+    <script src="{% static "v2/js/metamask-approval.js" %}"></script>
   </body>
 </html>

app/dashboard/templates/payout_bounty.html

@@ -35,6 +35,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       {% include 'shared/success_container.html' %}

app/dashboard/templates/process_bounty.html

@@ -49,6 +49,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row">

app/dashboard/templates/shared/connect_metamask.html

@@ -0,0 +1,34 @@
+{% comment %}
+  Copyright (C) 2018 Gitcoin Core
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
+{% endcomment %}
+{% load i18n static %}
+<div id="connect_metamask_error" class="submit-notification metamask-error container-fluid" style="display: none;">
+  <div class="row align-items-center px-4 py-2 text-center text-lg-left">
+    <div class="col-lg-10 col-sm-12 py-2 px-5">
+      <h3>{% trans "Please Connect to Metamask to Continue" %}</h3>
+      <p>
+        {% trans "In order to continue, you'll need to connect to metamask." %}
+      </p>
+      <p>
+        {% trans "Please connect to Metamask and refresh the page." %}
+        <button id="metamask_connect" onclick="approve_metamask()">{% trans "Click here to connect to metamask" %}</button>
+      </p>
+    </div>
+    <div class="col-lg-2 col-sm-12">
+      <img src="{% static "v2/images/metamask.svg" %}" alt="Metamask Logo">
+    </div>
+  </div>
+</div>

app/dashboard/templates/social_contribution.html

@@ -36,6 +36,7 @@
           {% include 'shared/no_metamask_error.html' %}
           {% include 'shared/zero_balance_error.html' %}
           {% include 'shared/unlock_metamask.html' %}
+          {% include 'shared/connect_metamask.html' %}
         </div>
       </div>
       <div class="row">

app/faucet/templates/faucet_form.html

@@ -32,9 +32,10 @@
       <div class="col body">
         <div class="container-fluid no-gutter">
           <div class="form-container" id="form_container">
-            {% include 'shared/faucet_no_metamask_error.html' %}
+            {% include 'shared/no_metamask_error.html' %}
+            {% include 'shared/unlock_metamask.html' %}
+            {% include 'shared/connect_metamask.html' %}
             {% include 'shared/faucet_over_balance_error.html' %}
-            {% include 'shared/faucet_unlock_metamask.html' %}
             <div id="faucet_form">
               <div class="faucet-form" id="primary_form">
                 <h3>{% trans "Faucet Request" %} <span id="alpha">{% trans "Alpha" %}</span></h3>

app/faucet/templates/shared/faucet_over_balance_error.html

@@ -1,29 +1,41 @@
 {% comment %}
-    Copyright (C) 2018 Gitcoin Core
+  Copyright (C) 2018 Gitcoin Core
 
-    This program is free software: you can redistribute it and/or modify
-    it under the terms of the GNU Affero General Public License as published
-    by the Free Software Foundation, either version 3 of the License, or
-    (at your option) any later version.
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or
+  (at your option) any later version.
 
-    This program is distributed in the hope that it will be useful,
-    but WITHOUT ANY WARRANTY; without even the implied warranty of
-    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-    GNU Affero General Public License for more details.
-
-    You should have received a copy of the GNU Affero General Public License
-    along with this program. If not, see <http://www.gnu.org/licenses/>.
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
 
+  You should have received a copy of the GNU Affero General Public License
+  along with this program. If not, see <http://www.gnu.org/licenses/>.
 {% endcomment %}
 {% load i18n static %}
-                    <div id="over_balance_error" class="blocking_error" style="display: none">
-                        <img src="{% static "v2/images/prime.png" %}" style="max-height: 100px;">
-                        <br>
-                        <h3>{% trans "You Appear to Have Ether!" %}</h3>
-                        <p>
-                            {% trans "Thank you for your interest in receiving a faucet distribution." %}
-                        </p>
-                        <p>
-                            {% trans "You have more ether currently in your wallet than the distribution would provide. Please use that ether to pay the transaction cost." %}
-                        </p>
-                    </div>
+<div id="over_balance_error" class="submit-notification metamask-error container-fluid" style="display: none;">
+  <div class="row align-items-center px-4 py-2 text-center text-lg-left">
+    <div class="col-lg-10 col-sm-12 py-2 px-5">
+      <h3>{% trans "You Appear to Have Ether!" %}</h3>
+      <p>
+        {% trans "Thank you for your interest in receiving a faucet distribution." %}
+      </p>
+      <p>
+        {% trans "You have more ether currently in your wallet than the distribution would provide. Please use that ether to pay the transaction cost." %}
+      </p>
+      <div class="col-lg-2 col-sm-12">
+        <img id="metamask_logo" src="{% static "v2/images/metamask.svg" %}" alt="Metamask Logo">
+      </div>
+  </div>
+</div>
+<style type="text/css">
+  @media only screen and (min-width: 992px) {
+    #metamask_logo {
+      position: absolute;
+      left: 650%;
+      top: -100px;
+    }
+  }
+</style>