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

Verify link to other explorers blocks and modal dialog

CHANGELOG.md

@@ -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

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

@@ -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");

apps/block_scout_web/lib/block_scout_web/templates/address/_verify_other_explorers.html.eex

@@ -1,9 +1,64 @@
 <div>
-  <h1 class="card-title mt-5">
+
-    Verify with other explorers
+  <div class="verify-other-explorers">
-  </h1>
+    <h2>Verify with other Explorers:</h2>
-  <div class="verify-other-explorers-table">
     <div class="verify-other-explorers-row">
+      <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>
+
+  <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
@@ -18,7 +73,7 @@
                 </span>
               </div>
             </div>
-    <div class="verify-other-explorers-row">
+            <div class="verify-other-explorers-modal-row">
               <div class="verify-other-explorers-cell left">
                 <span class="etherchain-logo">
                   etherchain.org
@@ -35,3 +90,8 @@
             </div>
           </div>
         </div>
+      </div>
+    </div>
+  </div>
+
+</div>