From ffdbf096138efac838787b1635b23dc8638816ad Mon Sep 17 00:00:00 2001 From: Victor Baranov Date: Thu, 3 Sep 2020 19:03:56 +0300 Subject: [PATCH] Write contract: display currently connected address --- CHANGELOG.md | 1 + .../assets/css/components/_card.scss | 6 +++ .../assets/js/lib/smart_contract/functions.js | 42 +++++++++++++-- .../assets/js/lib/smart_contract/write.js | 52 +++++++++++++------ .../templates/icons/_inactive_icon.html.eex | 3 ++ .../smart_contract/_functions.html.eex | 14 ++++- apps/block_scout_web/priv/gettext/default.pot | 10 ++-- .../priv/gettext/en/LC_MESSAGES/default.po | 10 ++-- 8 files changed, 106 insertions(+), 32 deletions(-) create mode 100644 apps/block_scout_web/lib/block_scout_web/templates/icons/_inactive_icon.html.eex diff --git a/CHANGELOG.md b/CHANGELOG.md index 882809f84d..c172480cfc 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/apps/block_scout_web/assets/css/components/_card.scss b/apps/block_scout_web/assets/css/components/_card.scss index 0896bb403d..2621f08903 100644 --- a/apps/block_scout_web/assets/css/components/_card.scss +++ b/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; } \ No newline at end of file diff --git a/apps/block_scout_web/assets/js/lib/smart_contract/functions.js b/apps/block_scout_web/assets/js/lib/smart_contract/functions.js index 9628df565f..ecb59940bc 100644 --- a/apps/block_scout_web/assets/js/lib/smart_contract/functions.js +++ b/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(`${accounts[0]}`) + } + }) - 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(`${account}`) + } 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) }) diff --git a/apps/block_scout_web/assets/js/lib/smart_contract/write.js b/apps/block_scout_web/assets/js/lib/smart_contract/write.js index c74b2a0bc4..138d27ba57 100644 --- a/apps/block_scout_web/assets/js/lib/smart_contract/write.js +++ b/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 - } + }) } diff --git a/apps/block_scout_web/lib/block_scout_web/templates/icons/_inactive_icon.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/icons/_inactive_icon.html.eex new file mode 100644 index 0000000000..93b7a650d1 --- /dev/null +++ b/apps/block_scout_web/lib/block_scout_web/templates/icons/_inactive_icon.html.eex @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex index e79eef7e0b..09da969cbd 100644 --- a/apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex +++ b/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 %> - +
+ + <%= render BlockScoutWeb.IconsView, "_inactive_icon.html" %> + +

Disconnected

+ +
+ <% end %> <%= if @contract_type == "proxy" do %>
diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot index 9b8b1885c9..97436f79c0 100644 --- a/apps/block_scout_web/priv/gettext/default.pot +++ b/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 "" diff --git a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po b/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po index 9b8b1885c9..97436f79c0 100644 --- a/apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po +++ b/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 ""