Merge pull request #5167 from blockscout/vb-add-chain-to-mm-in-footer
"Add chain to MetaMask" button to the footerpull/5170/head
commit
6ba4aa98f6
@ -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; |
||||
} |
||||
} |
@ -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) |
||||
} |
||||
} |
After Width: | Height: | Size: 3.9 KiB |
@ -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'"/> |
Loading…
Reference in new issue