Add chain to MetaMask in the footer

pull/5167/head
Viktor Baranov 3 years ago
parent 9c0d74afd5
commit 1f1c781ef2
  1. 1
      apps/block_scout_web/assets/css/app.scss
  2. 28
      apps/block_scout_web/assets/css/components/_btn_add_to_mm.scss
  3. 1
      apps/block_scout_web/assets/css/main-page.scss
  4. 39
      apps/block_scout_web/assets/js/lib/add_chain_to_mm.js
  5. 16
      apps/block_scout_web/assets/js/pages/layout.js
  6. 61
      apps/block_scout_web/assets/static/images/icons/metamask-fox.svg
  7. 5
      apps/block_scout_web/assets/webpack.config.js
  8. 3
      apps/block_scout_web/lib/block_scout_web/templates/layout/_footer.html.eex
  9. 2
      apps/block_scout_web/lib/block_scout_web/templates/tokens/_token_icon.html.eex
  10. 18
      apps/block_scout_web/priv/gettext/default.pot
  11. 18
      apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po
  12. 3
      docker/Makefile

@ -98,6 +98,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import "components/stakes_variables";
@import "components/stakes_table";
@import "components/form";
@import "components/btn_add_to_mm";
@import "components/btn_copy";
@import "components/btn_qr";
@import "components/btn_wallet";

@ -0,0 +1,28 @@
.btn-add-to-mm {
background-image: url("/images/icons/metamask-fox.svg");
background-position: center;
background-size: 22px 22px;
margin-bottom: 1px;
width: 22px;
height: 22px;
background-repeat: no-repeat;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
.btn-add-chain-to-mm {
background-image: url("/images/icons/metamask-fox.svg");
background-position: center;
background-size: 20px 20px;
background-repeat: no-repeat;
background-position-x: 30px;
background-position-y: center;
padding-left: 40px;
outline: none;
&.in-footer {
background-position-x: 0px;
padding-left: 25px;
}
}

@ -62,6 +62,7 @@
@import "components/btn_full";
@import "components/btn_line";
@import "components/stakes_variables";
@import "components/btn_add_to_mm";
@import "components/btn_swap";
@import "components/errors";
@import "components/btn_no_border";

@ -0,0 +1,39 @@
import 'bootstrap'
export async function addChainToMM ({ btn }) {
try {
const chainID = await window.ethereum.request({ method: 'eth_chainId' })
const chainIDFromEnvVar = parseInt(process.env.CHAIN_ID)
const chainIDHex = chainIDFromEnvVar && `0x${chainIDFromEnvVar.toString(16)}`
const blockscoutURL = location.protocol + '//' + location.host + process.env.NETWORK_PATH
if (chainID !== chainIDHex) {
await window.ethereum.request({
method: 'wallet_addEthereumChain',
params: [{
chainId: chainIDHex,
chainName: process.env.SUBNETWORK,
nativeCurrency: {
name: process.env.COIN_NAME,
symbol: process.env.COIN_NAME,
decimals: 18
},
rpcUrls: [process.env.JSON_RPC],
blockExplorerUrls: [blockscoutURL]
}]
})
} else {
btn.tooltip('dispose')
btn.tooltip({
title: `You're already connected to ${process.env.SUBNETWORK}`,
trigger: 'click',
placement: 'bottom'
}).tooltip('show')
setTimeout(() => {
btn.tooltip('dispose')
}, 3000)
}
} catch (error) {
console.error(error)
}
}

@ -1,4 +1,5 @@
import $ from 'jquery'
import { addChainToMM } from '../lib/add_chain_to_mm'
$(document).click(function (event) {
const clickover = $(event.target)
@ -14,11 +15,16 @@ const search = (value) => {
}
}
$(document).on('keyup', function (event) {
if (event.key === '/') {
$('.main-search-autocomplete').trigger('focus')
}
})
$(document)
.on('keyup', function (event) {
if (event.key === '/') {
$('.main-search-autocomplete').trigger('focus')
}
})
.on('click', '.js-btn-add-chain-to-mm', event => {
const $btn = $(event.target)
addChainToMM({ btn: $btn })
})
$('.main-search-autocomplete').on('keyup', function (event) {
if (event.key === 'Enter') {

@ -0,0 +1,61 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 318.6 318.6"
style="enable-background:new 0 0 318.6 318.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:#E2761B;stroke:#E2761B;stroke-linecap:round;stroke-linejoin:round;}
.st1{fill:#E4761B;stroke:#E4761B;stroke-linecap:round;stroke-linejoin:round;}
.st2{fill:#D7C1B3;stroke:#D7C1B3;stroke-linecap:round;stroke-linejoin:round;}
.st3{fill:#233447;stroke:#233447;stroke-linecap:round;stroke-linejoin:round;}
.st4{fill:#CD6116;stroke:#CD6116;stroke-linecap:round;stroke-linejoin:round;}
.st5{fill:#E4751F;stroke:#E4751F;stroke-linecap:round;stroke-linejoin:round;}
.st6{fill:#F6851B;stroke:#F6851B;stroke-linecap:round;stroke-linejoin:round;}
.st7{fill:#C0AD9E;stroke:#C0AD9E;stroke-linecap:round;stroke-linejoin:round;}
.st8{fill:#161616;stroke:#161616;stroke-linecap:round;stroke-linejoin:round;}
.st9{fill:#763D16;stroke:#763D16;stroke-linecap:round;stroke-linejoin:round;}
</style>
<polygon class="st0" points="274.1,35.5 174.6,109.4 193,65.8 "/>
<g>
<polygon class="st1" points="44.4,35.5 143.1,110.1 125.6,65.8 "/>
<polygon class="st1" points="238.3,206.8 211.8,247.4 268.5,263 284.8,207.7 "/>
<polygon class="st1" points="33.9,207.7 50.1,263 106.8,247.4 80.3,206.8 "/>
<polygon class="st1" points="103.6,138.2 87.8,162.1 144.1,164.6 142.1,104.1 "/>
<polygon class="st1" points="214.9,138.2 175.9,103.4 174.6,164.6 230.8,162.1 "/>
<polygon class="st1" points="106.8,247.4 140.6,230.9 111.4,208.1 "/>
<polygon class="st1" points="177.9,230.9 211.8,247.4 207.1,208.1 "/>
</g>
<g>
<polygon class="st2" points="211.8,247.4 177.9,230.9 180.6,253 180.3,262.3 "/>
<polygon class="st2" points="106.8,247.4 138.3,262.3 138.1,253 140.6,230.9 "/>
</g>
<polygon class="st3" points="138.8,193.5 110.6,185.2 130.5,176.1 "/>
<polygon class="st3" points="179.7,193.5 188,176.1 208,185.2 "/>
<g>
<polygon class="st4" points="106.8,247.4 111.6,206.8 80.3,207.7 "/>
<polygon class="st4" points="207,206.8 211.8,247.4 238.3,207.7 "/>
<polygon class="st4" points="230.8,162.1 174.6,164.6 179.8,193.5 188.1,176.1 208.1,185.2 "/>
<polygon class="st4" points="110.6,185.2 130.6,176.1 138.8,193.5 144.1,164.6 87.8,162.1 "/>
</g>
<g>
<polygon class="st5" points="87.8,162.1 111.4,208.1 110.6,185.2 "/>
<polygon class="st5" points="208.1,185.2 207.1,208.1 230.8,162.1 "/>
<polygon class="st5" points="144.1,164.6 138.8,193.5 145.4,227.6 146.9,182.7 "/>
<polygon class="st5" points="174.6,164.6 171.9,182.6 173.1,227.6 179.8,193.5 "/>
</g>
<polygon class="st6" points="179.8,193.5 173.1,227.6 177.9,230.9 207.1,208.1 208.1,185.2 "/>
<polygon class="st6" points="110.6,185.2 111.4,208.1 140.6,230.9 145.4,227.6 138.8,193.5 "/>
<polygon class="st7" points="180.3,262.3 180.6,253 178.1,250.8 140.4,250.8 138.1,253 138.3,262.3 106.8,247.4 117.8,256.4
140.1,271.9 178.4,271.9 200.8,256.4 211.8,247.4 "/>
<polygon class="st8" points="177.9,230.9 173.1,227.6 145.4,227.6 140.6,230.9 138.1,253 140.4,250.8 178.1,250.8 180.6,253 "/>
<g>
<polygon class="st9" points="278.3,114.2 286.8,73.4 274.1,35.5 177.9,106.9 214.9,138.2 267.2,153.5 278.8,140 273.8,136.4
281.8,129.1 275.6,124.3 283.6,118.2 "/>
<polygon class="st9" points="31.8,73.4 40.3,114.2 34.9,118.2 42.9,124.3 36.8,129.1 44.8,136.4 39.8,140 51.3,153.5 103.6,138.2
140.6,106.9 44.4,35.5 "/>
</g>
<polygon class="st6" points="267.2,153.5 214.9,138.2 230.8,162.1 207.1,208.1 238.3,207.7 284.8,207.7 "/>
<polygon class="st6" points="103.6,138.2 51.3,153.5 33.9,207.7 80.3,207.7 111.4,208.1 87.8,162.1 "/>
<polygon class="st6" points="174.6,164.6 177.9,106.9 193.1,65.8 125.6,65.8 140.6,106.9 144.1,164.6 145.3,182.8 145.4,227.6
173.1,227.6 173.3,182.8 "/>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

@ -175,8 +175,11 @@ const appJs =
new ContextReplacementPlugin(/moment[\/\\]locale$/, /en/),
new webpack.DefinePlugin({
'process.env.SOCKET_ROOT': JSON.stringify(process.env.SOCKET_ROOT),
'process.env.NETWORK_PATH': JSON.stringify(process.env.NETWORK_PATH),
'process.env.CHAIN_ID': JSON.stringify(process.env.CHAIN_ID),
'process.env.JSON_RPC': JSON.stringify(process.env.JSON_RPC)
'process.env.JSON_RPC': JSON.stringify(process.env.JSON_RPC),
'process.env.SUBNETWORK': JSON.stringify(process.env.SUBNETWORK),
'process.env.COIN_NAME': JSON.stringify(process.env.COIN_NAME)
}),
new webpack.ProvidePlugin({
process: 'process/browser',

@ -40,6 +40,9 @@
<li><a href="https://github.com/blockscout/blockscout" rel="noreferrer" class="footer-link"><%= gettext("Contribute") %></a></li>
<li><a href="http://discord.gg/gnosischain" rel="noreferrer" class="footer-link"><%= gettext("Chat (#blockscout)") %></a></li>
<li><a href="https://forum.poa.network/c/blockscout" rel="noreferrer" class="footer-link"><%= gettext("Forum") %></a></li>
<%= if System.get_env("COIN_NAME") && System.get_env("NETWORK_PATH") && System.get_env("SUBNETWORK") && System.get_env("JSON_RPC") && System.get_env("CHAIN_ID") do %>
<li><a class="footer-link js-btn-add-chain-to-mm btn-add-chain-to-mm in-footer" style="cursor: pointer;"><%= gettext("Add") <> " #{System.get_env("SUBNETWORK")} " <> gettext("to MetaMask") %></a></li>
<% end %>
</ul>
</div>
<% main_nets = main_nets(other_networks()) %>

@ -1,2 +1,2 @@
<% token_icon_url = Explorer.Chain.get_token_icon_url_by(@chain_id, @address) %>
<img height=15 width=15 src="<%= token_icon_url %>" style="margin-top: -2px; min-height: 15px; min-width: 15px; border: none; outline: none;<%= if assigns[:style], do: @style %>" class="<%= if assigns[:additional_classes] do @additional_classes |> Enum.join(" ") end %>" alt="" onerror="this.style.visibility='hidden'"/>
<img width=15 src="<%= token_icon_url %>" style="margin-top: -2px; min-height: 15px; min-width: 15px; border: none; outline: none;<%= if assigns[:style], do: @style %>" class="<%= if assigns[:additional_classes] do @additional_classes |> Enum.join(" ") end %>" alt="" onerror="this.style.visibility='hidden'"/>

@ -1487,7 +1487,7 @@ msgid "ME"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:49
#: lib/block_scout_web/templates/layout/_footer.html.eex:52
msgid "Main Networks"
msgstr ""
@ -1734,7 +1734,7 @@ msgid "Ordered"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:73
#: lib/block_scout_web/templates/layout/_footer.html.eex:76
msgid "Other Explorers"
msgstr ""
@ -2236,7 +2236,7 @@ msgid "Telegram"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:62
#: lib/block_scout_web/templates/layout/_footer.html.eex:65
msgid "Test Networks"
msgstr ""
@ -2936,7 +2936,7 @@ msgid "Verify the contract "
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:88
#: lib/block_scout_web/templates/layout/_footer.html.eex:91
msgid "Version"
msgstr ""
@ -3344,3 +3344,13 @@ msgstr ""
#: lib/block_scout_web/templates/address/overview.html.eex:290
msgid "Number of blocks validated by this validator."
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:44
msgid "Add"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:44
msgid "to MetaMask"
msgstr ""

@ -1487,7 +1487,7 @@ msgid "ME"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:49
#: lib/block_scout_web/templates/layout/_footer.html.eex:52
msgid "Main Networks"
msgstr ""
@ -1734,7 +1734,7 @@ msgid "Ordered"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:73
#: lib/block_scout_web/templates/layout/_footer.html.eex:76
msgid "Other Explorers"
msgstr ""
@ -2236,7 +2236,7 @@ msgid "Telegram"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:62
#: lib/block_scout_web/templates/layout/_footer.html.eex:65
msgid "Test Networks"
msgstr ""
@ -2936,7 +2936,7 @@ msgid "Verify the contract "
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:88
#: lib/block_scout_web/templates/layout/_footer.html.eex:91
msgid "Version"
msgstr ""
@ -3344,3 +3344,13 @@ msgstr ""
#: lib/block_scout_web/templates/address/overview.html.eex:290
msgid "Number of blocks validated by this validator."
msgstr ""
#, elixir-format, fuzzy
#: lib/block_scout_web/templates/layout/_footer.html.eex:44
msgid "Add"
msgstr ""
#, elixir-format
#: lib/block_scout_web/templates/layout/_footer.html.eex:44
msgid "to MetaMask"
msgstr ""

@ -368,6 +368,9 @@ endif
ifdef API_RATE_LIMIT_WHITELISTED_IPS
BLOCKSCOUT_CONTAINER_PARAMS += -e 'API_RATE_LIMIT_WHITELISTED_IPS=$(API_RATE_LIMIT_WHITELISTED_IPS)'
endif
ifdef COIN_NAME
BLOCKSCOUT_CONTAINER_PARAMS += -e 'COIN_NAME=$(COIN_NAME)'
endif
HAS_BLOCKSCOUT_IMAGE := $(shell docker images | grep -sw ${DOCKER_IMAGE})
build:

Loading…
Cancel
Save