Connect to Metamask button

CHANGELOG.md

@@ -7,6 +7,7 @@
 - [#3145](https://github.com/poanetwork/blockscout/pull/3145) - Pending txs per address API endpoint
 
 ### Fixes
+- [#3201](https://github.com/poanetwork/blockscout/pull/3201) - Connect to Metamask button
 - [#3192](https://github.com/poanetwork/blockscout/pull/3192) - Dropdown menu doesn't open at "not found" page
 - [#3190](https://github.com/poanetwork/blockscout/pull/3190) - Contract log/method decoded view improvements: eliminate horizontal scroll, remove excess borders, whitespaces
 - [#3185](https://github.com/poanetwork/blockscout/pull/3185) - Transaction page: decoding logs from nested contracts calls

apps/block_scout_web/assets/css/components/_card.scss

@@ -258,6 +258,10 @@ $card-tab-icon-color-active: #fff !default;
   } 
 }
 
+.implementation-container {
+  margin-top: 10px;
+}
+
 .implementation-title {
   float: left;
   margin-right: 5px;

apps/block_scout_web/assets/js/lib/smart_contract/functions.js

@@ -1,6 +1,6 @@
 import $ from 'jquery'
 import ethNetProps from 'eth-net-props'
-import { walletEnabled, getCurrentAccount } from './write.js'
+import { walletEnabled, connectToWallet, getCurrentAccount, hideConnectButton } from './write.js'
 import { openErrorModal, openWarningModal, openSuccessModal, openModalWithMessage } from '../modals.js'
 import '../../pages/address'
 
@@ -19,6 +19,18 @@ const loadFunctions = (element) => {
     response => $element.html(response)
   )
     .done(function () {
+      const $connect = $('[connect-metamask]')
+
+      if (hideConnectButton()) {
+        $connect.addClass('hidden')
+      } else {
+        $connect.removeClass('hidden')
+      }
+
+      $connect.on('click', () => {
+        connectToWallet()
+      })
+
       $('[data-function]').each((_, element) => {
         readWriteFunction(element)
       })

apps/block_scout_web/assets/js/lib/smart_contract/write.js

@@ -3,10 +3,10 @@ import Web3 from 'web3'
 export const walletEnabled = () => {
   if (window.ethereum) {
     window.web3 = new Web3(window.ethereum)
-    if (window.ethereum._state && window.ethereum._state.isUnlocked) { // Nifty Wallet
+    if (window.ethereum.isUnlocked && window.ethereum.isNiftyWallet) { // Nifty Wallet
       window.web3 = new Web3(window.web3.currentProvider)
       return Promise.resolve(true)
-    } else if (window.ethereum._state && window.ethereum._state.isUnlocked === false) { // Nifty Wallet
+    } else if (window.ethereum.isUnlocked === false && window.ethereum.isNiftyWallet) { // Nifty Wallet
       return Promise.resolve(false)
     } else {
       window.ethereum.enable()
@@ -21,9 +21,34 @@ export const walletEnabled = () => {
   }
 }
 
+export const connectToWallet = () => {
+  if (window.ethereum) {
+    window.ethereum.enable()
+  }
+}
+
 export const getCurrentAccount = async () => {
   const accounts = await window.web3.eth.getAccounts()
   const account = accounts[0] ? accounts[0].toLowerCase() : null
 
   return account
 }
+
+export const hideConnectButton = () => {
+  if (window.ethereum) {
+    window.web3 = new Web3(window.ethereum)
+    if (window.ethereum.isNiftyWallet) {
+      return true
+    } else if (window.ethereum.isMetaMask) {
+      if (window.ethereum.selectedAddress) {
+        return true
+      } else {
+        return false
+      }
+    } else {
+      return true
+    }
+  } else {
+    return false
+  }
+}

apps/block_scout_web/lib/block_scout_web/controllers/smart_contract_controller.ex

@@ -58,7 +58,8 @@ defmodule BlockScoutWeb.SmartContractController do
         contract_abi: contract_abi,
         implementation_address: implementation_address_hash_string,
         implementation_abi: implementation_abi,
-        contract_type: contract_type
+        contract_type: contract_type,
+        action: action
       )
     else
       :error ->

apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex

@@ -1,5 +1,8 @@
+<%= if @action== "write" do %>
+  <button connect-metamask class="button btn-line">Connect to Metamask</button>
+<% end %>
 <%= if @contract_type == "proxy" do %>
-<div>
+<div class="implementation-container">
     <h2 class="implementation-title">Implementation address: </h2><h3  class="implementation-value"><%= link(
                   @implementation_address,
                   to: address_path(@conn, :show, @implementation_address)

apps/block_scout_web/priv/gettext/default.pot

@@ -562,8 +562,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:40
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:75
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:43
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:78
 msgid "ETH"
 msgstr ""
 
@@ -1180,7 +1180,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:44
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:47
 msgid "Query"
 msgstr ""
 
@@ -1631,7 +1631,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:74
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:77
 msgid "WEI"
 msgstr ""
 
@@ -1919,7 +1919,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:44
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:47
 msgid "Write"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -562,8 +562,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:40
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:75
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:43
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:78
 msgid "ETH"
 msgstr ""
 
@@ -1180,7 +1180,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:44
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:47
 msgid "Query"
 msgstr ""
 
@@ -1631,7 +1631,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:74
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:77
 msgid "WEI"
 msgstr ""
 
@@ -1919,7 +1919,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:44
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:47
 msgid "Write"
 msgstr ""
 
@@ -1934,7 +1934,7 @@ msgstr ""
 msgid "Apps"
 msgstr ""
 
-#, elixir-format, fuzzy
+#, elixir-format
 #: lib/block_scout_web/templates/transaction_raw_trace/index.html.eex:15
 msgid "Copy Raw Trace"
 msgstr ""