Merge pull request #2005 from maxgrapps/master

"tx not found" and "block not found" error pages

CHANGELOG.md

@@ -2,6 +2,7 @@
 - [#2000](https://github.com/poanetwork/blockscout/pull/2000) - docker/Makefile: always set a container name
 
 ### Features
+- [#2005](https://github.com/poanetwork/blockscout/pull/2005) - added "block not found" and "tx not found pages"
 - [#1963](https://github.com/poanetwork/blockscout/pull/1963) - added rinkeby theme and rinkeby logo
 - [#1959](https://github.com/poanetwork/blockscout/pull/1959) - added goerli theme and goerli logo
 - [#1928](https://github.com/poanetwork/blockscout/pull/1928) - pagination styles were updated

apps/block_scout_web/assets/css/app.scss

@@ -120,6 +120,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/transaction";
 @import "components/api";
 @import "components/alerts";
+@import "components/errors";
 
 :export {
   primary: $primary;

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

@@ -0,0 +1,137 @@
+$error-tablet-breakpoint: 768px;
+
+// Block Not Found
+
+.block-not-found {
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 50px;
+	@media (min-width: $error-tablet-breakpoint) {
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		padding-top: 52px;
+	}
+}
+
+.block-not-found-img {
+	margin-bottom: 40px;
+	text-align: center;
+	@media (min-width: $error-tablet-breakpoint) {
+		margin-bottom: 0;
+		text-align: left;
+	}
+	img {
+		max-width: 100%;
+		height: auto;
+	}
+}
+
+.block-not-found-content {
+	text-align: center;
+	@media (min-width: $error-tablet-breakpoint) {
+		text-align: left;
+		padding-left: 52px;
+		max-width: 396px;
+	}
+}
+
+.error-title {
+	margin-bottom: 20px !important;
+}
+
+.error-descr {
+	display: block;
+	font-size: 14px;
+	color: #a3a9b5;
+	line-height: 1.714;
+	margin-bottom: 22px;
+	word-wrap: break-word;
+}
+
+.error-btn {
+	background: transparent;
+	display: inline-flex !important;
+}
+
+// TX Not Found
+.tx-nf {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-direction: column;
+	padding-bottom: 50px;
+	@media (min-width: $error-tablet-breakpoint) {
+		flex-direction: row;
+		padding-top: 52px;
+	}
+}
+
+.tx-nf-content {
+	margin-top: 52px;
+	max-width: 700px;
+	@media (min-width: $error-tablet-breakpoint) {
+		margin-left: 90px;
+		margin-top: 0;
+	}
+}
+
+.tx-nf-blocks {
+	margin-bottom: 40px;
+	margin-top: 40px;
+}
+
+.tx-nf-block {
+	background-color: #fff;
+	box-shadow: 0px 0px 30px 0px rgba(202, 199, 226, 0.5);
+	padding: 17px 40px 17px 20px;
+	position: relative;
+	border-radius: 6px;
+	@media (min-width: $error-tablet-breakpoint) {
+		width: calc(50% - 20px);
+	}
+}
+
+.tx-nf-block {
+	.error-descr {
+		margin-bottom: 0;
+	}
+	& + .tx-nf-block {
+		margin-top: 30px;
+		@media (min-width: $error-tablet-breakpoint) {
+			margin-top: 0;
+		}
+	}
+}
+
+.tx-nf-blocks-row {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	@media (min-width: $error-tablet-breakpoint) {
+		flex-direction: row;
+	}
+	& + .tx-nf-blocks-row {
+		margin-top: 30px;
+		@media (min-width: $error-tablet-breakpoint) {
+			margin-top: 40px;
+		}
+	}
+}
+
+.tx-nf-number {
+	display: inline-block;
+	position: absolute;
+	top: -15px;
+	left: -15px;
+	width: 30px;
+	height: 30px;
+	border-radius: 15px;
+	background-color: $secondary;
+	box-shadow: 0px 3px 5px 0px rgba($secondary, 0.25);
+	color: #fff;
+	font-weight: 700;
+	font-size: 14px;
+	text-align: center;
+	line-height: 32px;
+}

apps/block_scout_web/lib/block_scout_web/templates/block_transaction/404.html.eex

@@ -1,16 +1,12 @@
 <section class="container">
-  <div class="row">
-    <div class="col-12">
-      <div class="card">
-        <div class="card-body">
-          <h1 class="card-title" data-test="detail_type">
-            <%= gettext("Block Details") %>
-          </h1>
-          <div class="tile tile-muted text-center" data-selector="block-not-found-message">
-            <%= block_not_found_message(@block_above_tip) %>
-          </div>
-        </div>
-      </div>
+  <div class="block-not-found">
+    <div class="block-not-found-img">
+      <img alt="Block Not Found" src="/images/errors-img/eth-block-not-found.png" srcset="/images/eth-block-not-found@2x.png 2x">
+    </div>
+    <div class="block-not-found-content">
+      <h1 class="card-title error-title"><%= gettext("Block Details") %></h1>
+      <p class="error-descr"><%= block_not_found_message(@block_above_tip) %></p>
+      <a class="error-btn btn-line" href="/">Back Home</a>
     </div>
   </div>
-</section>
+</section>

apps/block_scout_web/lib/block_scout_web/templates/transaction/not_found.html.eex

@@ -1,47 +1,33 @@
 <section class="container">
-  <section data-page="transaction-details" data-page-transaction-hash="<%= @transaction_hash %>">
-    <div class="row">
-      <div class="col-12">
-        <div class="card">
-          <div class="card-body">
-            <div class="icon-links float-right">
-              <span data-clipboard-text="<%= @transaction_hash %>">
-                <span
-                  aria-label='<%= gettext("Copy Transaction Hash") %>'
-                  class="btn-copy-ico"
-                  data-placement="top"
-                  data-toggle="tooltip"
-                  title='<%= gettext("Copy Txn Hash") %>'
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32">
-                    <path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/>
-                  </svg>
-                </span>
-              </span>
-            </div>
-            <h1 class="card-title"><%= gettext "Transaction Details" %> </h1>
-            <div class="tile tile-muted text-center">
-              <div class="loading-spinner mx-auto">
-                <span class="loading-spinner-block-1"></span>
-                <span class="loading-spinner-block-2"></span>
-              </div>
-              <br>
-              <span><%= gettext("The transaction %{bold_hash} was not processed yet", bold_hash: "<span class=\"font-weight-bold\">#{@transaction_hash}</span>") |> raw() %> <span>
-            </div>
-            <hr>
-            <div class="text-center">
-              <h2><%= gettext "Once we have the transaction's data this page will refresh automatically" %></h2>
-              <h3><%= gettext "The possible reasons for this transaction not being processed include the following:" %></h3>
-              <ul class="d-inline-block text-left">
-                <li><%= gettext "The transaction was made a few seconds ago" %></li>
-                <li><%= gettext "The transaction may be in the pool of a node that didn't broadcast it yet" %></li>
-                <li><%= gettext "Some transactions may take a while longer to be indexed depending on the load on the network" %></li>
-                <li><%= gettext "The transaction still does not exist" %></li>
-              </ul>
-            </div>
+  <div class="tx-nf">
+    <div class="tx-nf-illustr">
+      <img alt="Block Not Found" src="/images/errors-img/eth-tx-not-found.png" srcset="/images/errors-img/eth-tx-not-found@2x.png 2x">
+    </div>
+    <div class="tx-nf-content">
+      <h1 class="card-title error-title">Sorry, We are unable to locate this transaction Hash</h1>
+      <div class="tx-nf-blocks">
+        <div class="tx-nf-blocks-row">
+          <div class="tx-nf-block">
+            <span class="tx-nf-number">1</span>
+            <p class="error-descr">If you have just submitted this transaction please wait for at least 30 seconds before refreshing this page.</p>
+          </div>
+          <div class="tx-nf-block">
+            <span class="tx-nf-number">2</span>
+            <p class="error-descr">It could still be in the TX Pool of a different node, waiting to be broadcasted.</p>
+          </div>
+        </div>
+        <div class="tx-nf-blocks-row">
+          <div class="tx-nf-block">
+            <span class="tx-nf-number">3</span>
+            <p class="error-descr">During times when the network is busy (i.e during ICOs) it can take a while for your transaction to propagate through the network and for us to index it.</p>
+          </div>
+          <div class="tx-nf-block">
+            <span class="tx-nf-number">4</span>
+            <p class="error-descr">If it still does not show up after 1 hour, please check with your sender/exchange/wallet/transaction provider for additional information.</p>
           </div>
         </div>
       </div>
+      <a class="error-btn btn-line" href="/">Back Home</a>
     </div>
-  </section>
+  </div>
 </section>

apps/block_scout_web/priv/gettext/default.pot

@@ -307,13 +307,11 @@ msgid "Copy Address"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:10
 #: lib/block_scout_web/templates/transaction/overview.html.eex:16
 msgid "Copy Transaction Hash"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:14
 #: lib/block_scout_web/templates/transaction/overview.html.eex:20
 msgid "Copy Txn Hash"
 msgstr ""
@@ -910,7 +908,6 @@ msgid "Transaction %{transaction}, %{subnetwork} %{transaction}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:22
 #: lib/block_scout_web/templates/transaction/overview.html.eex:11
 msgid "Transaction Details"
 msgstr ""
@@ -1164,11 +1161,6 @@ msgstr ""
 msgid "Raw Input"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/block_transaction/404.html.eex:7
-msgid "Block Details"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/views/block_transaction_view.ex:15
 msgid "Block not found, please try again later."
@@ -1189,41 +1181,6 @@ msgstr ""
 msgid "Invalid Transaction Hash"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:33
-msgid "Once we have the transaction's data this page will refresh automatically"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:38
-msgid "Some transactions may take a while longer to be indexed depending on the load on the network"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:34
-msgid "The possible reasons for this transaction not being processed include the following:"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:29
-msgid "The transaction %{bold_hash} was not processed yet"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:37
-msgid "The transaction may be in the pool of a node that didn't broadcast it yet"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:39
-msgid "The transaction still does not exist"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/transaction/not_found.html.eex:36
-msgid "The transaction was made a few seconds ago"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/transaction/invalid.html.eex:8
 msgid "is not a valid transaction hash"
@@ -1749,6 +1706,8 @@ msgid "of"
 msgstr ""
 
 #, elixir-format
+#: lib/block_scout_web/templates/block_transaction/404.html.eex:7
+msgid "Block Details"
 #: lib/block_scout_web/templates/address_contract/index.html.eex:83
 msgid "Contract Byte Code"
 msgstr ""