Write contract: display currently connected address

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#3281](https://github.com/poanetwork/blockscout/pull/3281) - Write contract: display currently connected address
 - [#3279](https://github.com/poanetwork/blockscout/pull/3279) - NFT instance: link to the app
 - [#3278](https://github.com/poanetwork/blockscout/pull/3278) - Support of fetching of NFT tokens metadata from IPFS
 - [#3273](https://github.com/poanetwork/blockscout/pull/3273) - Update token metadata at burn/mint events

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

@@ -269,4 +269,10 @@ $card-tab-icon-color-active: #fff !default;
 
 .implementation-value {
   line-height: 30px;
+}
+
+.connect-container {
+  display: flex;
+  height: 36px;
+  line-height: 36px;
 }

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

@@ -19,18 +19,50 @@ const loadFunctions = (element) => {
     response => $element.html(response)
   )
     .done(function () {
+      const $connectTo = $('[connect-to]')
       const $connect = $('[connect-metamask]')
+      const $connectedTo = $('[connected-to]')
+      const $reconnect = $('[re-connect-metamask]')
+      const $connectedToAddress = $('[connected-to-address]')
+
+      window.ethereum && window.ethereum.on('accountsChanged', function (accounts) {
+        if (accounts.length === 0) {
+          $connectTo.removeClass('hidden')
+          $connect.removeClass('hidden')
+          $connectedTo.addClass('hidden')
+        } else {
+          $connectTo.addClass('hidden')
+          $connect.removeClass('hidden')
+          $connectedTo.removeClass('hidden')
+          $connectedToAddress.html(`<a href='/address/${accounts[0]}'>${accounts[0]}</a>`)
+        }
+      })
 
-      if (hideConnectButton()) {
-        $connect.addClass('hidden')
-      } else {
-        $connect.removeClass('hidden')
-      }
+      hideConnectButton().then(({ shouldHide, account }) => {
+        if (shouldHide && account) {
+          $connectTo.addClass('hidden')
+          $connect.removeClass('hidden')
+          $connectedTo.removeClass('hidden')
+          $connectedToAddress.html(`<a href='/address/${account}'>${account}</a>`)
+        } else if (shouldHide) {
+          $connectTo.removeClass('hidden')
+          $connect.addClass('hidden')
+          $connectedTo.addClass('hidden')
+        } else {
+          $connectTo.removeClass('hidden')
+          $connect.removeClass('hidden')
+          $connectedTo.addClass('hidden')
+        }
+      })
 
       $connect.on('click', () => {
         connectToWallet()
       })
 
+      $reconnect.on('click', () => {
+        connectToWallet()
+      })
+
       $('[data-function]').each((_, element) => {
         readWriteFunction(element)
       })

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

@@ -9,9 +9,17 @@ export const walletEnabled = () => {
     } else if (window.ethereum.isUnlocked === false && window.ethereum.isNiftyWallet) { // Nifty Wallet
       return Promise.resolve(false)
     } else {
-      window.ethereum.enable()
-      window.web3 = new Web3(window.web3.currentProvider)
-      return Promise.resolve(true)
+      if (window.ethereum.request) {
+        return window.ethereum.request({ method: 'eth_requestAccounts' })
+          .then((_res) => {
+            window.web3 = new Web3(window.web3.currentProvider)
+            return Promise.resolve(true)
+          })
+      } else {
+        window.ethereum.enable()
+        window.web3 = new Web3(window.web3.currentProvider)
+        return Promise.resolve(true)
+      }
     }
   } else if (window.web3) {
     window.web3 = new Web3(window.web3.currentProvider)
@@ -23,7 +31,11 @@ export const walletEnabled = () => {
 
 export const connectToWallet = () => {
   if (window.ethereum) {
-    window.ethereum.enable()
+    if (window.ethereum.request) {
+      window.ethereum.request({ method: 'eth_requestAccounts' })
+    } else {
+      window.ethereum.enable()
+    }
   }
 }
 
@@ -35,20 +47,28 @@ export const getCurrentAccount = async () => {
 }
 
 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
+  return new Promise((resolve) => {
+    if (window.ethereum) {
+      window.web3 = new Web3(window.ethereum)
+      if (window.ethereum.isNiftyWallet) {
+        resolve({ shouldHide: true, account: window.ethereum.selectedAddress })
+      } else if (window.ethereum.isMetaMask) {
+        window.ethereum.sendAsync({ method: 'eth_accounts' }, function (error, resp) {
+          if (error) {
+            resolve({ shouldHide: false })
+          }
+
+          if (resp) {
+            const { result: accounts } = resp
+            accounts.length > 0 ? resolve({ shouldHide: true, account: accounts[0] }) : resolve({ shouldHide: false })
+          }
+        })
       } else {
-        return false
+        console.log(window.ethereum.selectedAddress)
+        resolve({ shouldHide: true, account: window.ethereum.selectedAddress })
       }
     } else {
-      return true
+      resolve({ shouldHide: false })
     }
-  } else {
-    return false
-  }
+  })
 }

apps/block_scout_web/lib/block_scout_web/templates/icons/_inactive_icon.html.eex

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6">
+    <circle cx="3" cy="3" r="3" fill="#7f295e" />
+</svg>

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

@@ -12,7 +12,19 @@ to: address_contract_path(@conn, :index, metadata_for_verification.address_hash)
   <% end %>
 <% end %>
 <%= if @action== "write" do %>
-  <button connect-metamask class="button btn-line">Connect to Metamask</button>
+  <div connect-to class="connect-container">
+    <span style="margin-top: -2px;" class="mr-2">
+      <%= render BlockScoutWeb.IconsView, "_inactive_icon.html" %>
+    </span>
+     <h2 style="margin-top: -2px;">Disconnected</h2>
+    <button connect-metamask class="button btn-line ml-4">Connect to Metamask</button>
+  </div>
+  <div connected-to class="connect-container hidden">
+    <span style="margin-top: -2px;" class="mr-2">
+      <%= render BlockScoutWeb.IconsView, "_active_icon.html" %>
+    </span>
+    <h2 style="margin-top: -2px;">Connected to</h2><h3 connected-to-address class="ml-2"></h3>
+  </div>
 <% end %>
 <%= if @contract_type == "proxy" do %>
 <div class="implementation-container">

apps/block_scout_web/priv/gettext/default.pot

@@ -563,8 +563,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:57
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:92
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:69
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:104
 msgid "ETH"
 msgstr ""
 
@@ -1182,7 +1182,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:61
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
 msgid "Query"
 msgstr ""
 
@@ -1634,7 +1634,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:91
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:103
 msgid "WEI"
 msgstr ""
 
@@ -1925,7 +1925,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:61
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
 msgid "Write"
 msgstr ""
 

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

@@ -563,8 +563,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:57
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:92
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:69
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:104
 msgid "ETH"
 msgstr ""
 
@@ -1182,7 +1182,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:61
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
 msgid "Query"
 msgstr ""
 
@@ -1634,7 +1634,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:91
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:103
 msgid "WEI"
 msgstr ""
 
@@ -1925,7 +1925,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:61
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
 msgid "Write"
 msgstr ""