CipherLabs
/
blockscout
mirror of https://github.com/blockscout/blockscout
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2030 from maxgrapps/verify-link-to-other-explorers

Browse Source 
Verify link to other explorers blocks and modal dialog
pull/1890/head
Victor Baranov 6 years ago committed by GitHub
parent 0bb122d8b9 4d29805398
commit 12983605fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 248 additions and 33 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      CHANGELOG.md
  2. 156
      apps/block_scout_web/assets/css/components/_verify_other_explorers.scss
  3. BIN
      apps/block_scout_web/assets/static/images/icons/etherscan.png
  4. BIN
      apps/block_scout_web/assets/static/images/icons/etherscan@2x.png
  5. 120
      apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex

1
CHANGELOG.md
Unescape View File

@ -1,6 +1,7 @@
## Current
### Features
- [#2030](https://github.com/poanetwork/blockscout/pull/2030) - added 'Verify link to other explorers' block and modal dialog
- [#1963](https://github.com/poanetwork/blockscout/pull/1963), [#1959](https://github.com/poanetwork/blockscout/pull/1959), [#1948](https://github.com/poanetwork/blockscout/pull/1948), [#1936](https://github.com/poanetwork/blockscout/pull/1936), [#1925](https://github.com/poanetwork/blockscout/pull/1925), [#1922](https://github.com/poanetwork/blockscout/pull/1922), [#1903](https://github.com/poanetwork/blockscout/pull/1903), [#1874](https://github.com/poanetwork/blockscout/pull/1874), [#1895](https://github.com/poanetwork/blockscout/pull/1895) - added new themes and logos for poa, eth, rinkeby, goerli, ropsten, kovan, sokol, xdai, etc, rsk
- [#2010](https://github.com/poanetwork/blockscout/pull/2010) - added "block not found" and "tx not found pages"
- [#1928](https://github.com/poanetwork/blockscout/pull/1928) - pagination styles were updated

156
apps/block_scout_web/assets/css/components/_verify_other_explorers.scss
Unescape View File

@ -1,29 +1,183 @@
.verify-other-explorers {
display: flex;
margin-top: 26px;
flex-direction: column;
flex-wrap: wrap;
@media (min-width: 768px) {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
@media (min-width: 1200px) {
flex-wrap: nowrap;
}
h2 {
color: #a3a9b5;
font-size: 12px;
font-weight: 400;
line-height: 1.25;
display: inline-flex;
margin-bottom: 12px;
@media (min-width: 1200px) {
margin-right: 10px;
margin-bottom: 0;
}
}
}
.verify-other-explorers-row {
display: flex;
flex-direction: column;
flex-grow: 2;
@media (min-width: 768px) {
flex-direction: row;
}
}
.verify-other-explorers-elem {
display: inline-flex;
border: 1px solid #e2e5ec;
border-radius: 2px;
flex-grow: 2;
@media (min-width: 768px) {
margin-top: 0;
}
@media (min-width: 1200px) {
min-width: 145px;
}
& + .verify-other-explorers-elem {
margin-top: 10px;
@media (min-width: 768px) {
margin-top: 0;
margin-left: 10px;
}
}
.exp-logo {
min-width: 34px;
border-right: 1px solid #e2e5ec;
background-repeat: no-repeat;
background-position: center;
&.etherscan {
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px);
background-image: url("/images/icons/etherscan.png");
background-size: 15px 16px;
}
&.blockchair {
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px);
background-image: url("/images/icons/blockchair.png");
background-size: 10px 16px;
}
&.etherchain {
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px);
background-image: url("/images/icons/etherchain.png");
background-size: 16px 16px;
}
}
.exp-content {
padding: 6px 9px 4px 9px;
h3, div {
font-size: 10px;
line-height: 1;
}
h3 {
color: #333;
font-weight: 400;
margin-bottom: 0;
margin-bottom: 1px;
}
div {
color: #49a2ee;
display: block;
line-height: 1;
text-overflow: ellipsis;
overflow: hidden;
width: 170px;
white-space: nowrap;
@media (min-width: 576px) {
width: 398px;
}
@media (min-width: 768px) {
width: 130px;
}
@media (min-width: 992px) {
width: 90px;
}
@media (min-width: 1200px) {
width: 93px;
}
}
}
}
.verify-other-explorers-more {
min-width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid $secondary;
border-radius: 2px;
margin-top: 10px;
transition: .1s ease-in;
@media (min-width: 768px) {
margin-left: 10px;
margin-top: 0;
}
svg path {
fill: $secondary;
}
&:hover {
background-color: $secondary;
svg path {
fill: #fff;
}
}
}
.verify-other-explorers-dialog {
max-width: 450px;
}
.verify-other-explorers-table {
display: table;
}
.verify-other-explorers-row {
.verify-other-explorers-modal-row {
display: table-row;
height: 29px;
}
.verify-other-explorers-cell {
display: table-cell;
&.left {
min-width: 120px;
}
}
.link {
background-image: url("/images/icons/link.svg");
background-repeat: no-repeat;
padding-left: 15px;
background-size: 12px 12px;
}
.etherscan-logo {
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px);
background-image: url("/images/icons/etherscan.png");
background-repeat: no-repeat;
padding-left: 25px;
background-size: 15px 16px;
}
.blockchair-logo {
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px);
background-image: url("/images/icons/blockchair.png");
background-repeat: no-repeat;
padding-left: 25px;
background-size: 10px 16px;
background-position: left 3px center;
}
.etherchain-logo {
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px);
background-image: url("/images/icons/etherchain.png");

BIN
apps/block_scout_web/assets/static/images/icons/etherscan.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
apps/block_scout_web/assets/static/images/icons/etherscan@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

120
apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex
Unescape View File

@ -1,37 +1,97 @@
<div>
<h1 class="card-title mt-5">
Verify with other explorers
</h1>
<div class="verify-other-explorers-table">
<div class="verify-other-explorers">
<h2>Verify with other Explorers:</h2>
<div class="verify-other-explorers-row">
<div class="verify-other-explorers-cell">
<span class="blockchair-logo">
blockchair.com
</span>
</div>
<div class="verify-other-explorers-cell">
<span class='link'>
<%= link(
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
) %>
</span>
</div>
<a href="#" class="verify-other-explorers-elem">
<div class="exp-logo etherscan"></div>
<div class="exp-content">
<h3>Etherscan.io</h3>
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
</div>
</a>
<a href="#" class="verify-other-explorers-elem">
<div class="exp-logo blockchair"></div>
<div class="exp-content">
<h3>Blockchair.com</h3>
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
</div>
</a>
<a href="#" class="verify-other-explorers-elem">
<div class="exp-logo etherchain"></div>
<div class="exp-content">
<h3>Etherchain.org</h3>
<div>https://blockchair.com/ethereum/address/0x7c720f9b5bf7af340457e908555fecbd9db1f6da</div>
</div>
</a>
<a href="#" class="verify-other-explorers-more" data-toggle="modal" data-target="#explorersModal">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="4">
<path fill="#49A2EE" fill-rule="evenodd" d="M16 4a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 4zM9 4A2 2 0 1 1 8.999.001 2 2 0 0 1 9 4zM2 4A2 2 0 1 1 1.999.001 2 2 0 0 1 2 4z"/>
</svg>
</a>
</div>
<div class="verify-other-explorers-row">
<div class="verify-other-explorers-cell left">
<span class="etherchain-logo">
etherchain.org
</span>
</div>
<div class="verify-other-explorers-cell right">
<span class='link'>
<%= link(
address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false),
to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true)
) %>
</span>
</div>
<div class="modal fade" tabindex="-1" role="dialog" id="explorersModal">
<div class="modal-dialog verify-other-explorers-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Verify with other Explorers</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="verify-other-explorers-table">
<div class="verify-other-explorers-modal-row">
<div class="verify-other-explorers-cell">
<span class="etherscan-logo">
Etherscan.io
</span>
</div>
<div class="verify-other-explorers-cell">
<span class='link'>
<%= link(
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
) %>
</span>
</div>
</div>
<div class="verify-other-explorers-modal-row">
<div class="verify-other-explorers-cell">
<span class="blockchair-logo">
blockchair.com
</span>
</div>
<div class="verify-other-explorers-cell">
<span class='link'>
<%= link(
address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address, false),
to: address_link_to_other_explorer("https://blockchair.com/ethereum/address/", @address ,true)
) %>
</span>
</div>
</div>
<div class="verify-other-explorers-modal-row">
<div class="verify-other-explorers-cell left">
<span class="etherchain-logo">
etherchain.org
</span>
</div>
<div class="verify-other-explorers-cell right">
<span class='link'>
<%= link(
address_link_to_other_explorer("https://www.etherchain.org/account/", @address, false),
to: address_link_to_other_explorer("https://www.etherchain.org/account/", @address, true)
) %>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Write Preview
Loading…
Cancel
Save