new screens for when the transaction is not found or the hash is invalid

apps/block_scout_web/lib/block_scout_web/controllers/transaction_controller.ex

@@ -85,9 +85,18 @@ defmodule BlockScoutWeb.TransactionController do
   end
 
   def show(conn, %{"id" => id}) do
-    {:ok, transaction_hash} = Chain.string_to_transaction_hash(id)
+    case Chain.string_to_transaction_hash(id) do
+      {:ok, transaction_hash} -> show_transaction(conn, id, Chain.hash_to_transaction(transaction_hash))
+      :error -> conn |> put_status(422) |> render("invalid.html", transaction_hash: id)
+    end
+  end
+
+  defp show_transaction(conn, id, {:error, :not_found}) do
+    conn |> put_status(404) |> render("not_found.html", transaction_hash: id)
+  end
 
-    if Chain.transaction_has_token_transfers?(transaction_hash) do
+  defp show_transaction(conn, id, {:ok, %Chain.Transaction{} = transaction}) do
+    if Chain.transaction_has_token_transfers?(transaction.hash) do
       redirect(conn, to: transaction_token_transfer_path(conn, :index, id))
     else
       redirect(conn, to: transaction_internal_transaction_path(conn, :index, id))

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

@@ -0,0 +1,14 @@
+<section class="container">
+  <div class="row">
+    <div class="col-12"> 
+      <div class="card">
+        <div class="card-body">
+          <h1 class="card-title"><%= gettext "Invalid Transaction Hash" %></h1>
+          <div class="tile tile-muted text-center">
+            <span> <span class="font-weight-bold"><%= @transaction_hash %></span> <%= gettext "is not a valid transaction hash" %> </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,39 @@
+<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 %>">
+                <button type="button" class="icon-link" id="button" data-toggle="tooltip" data-placement="top" title="<%= gettext("Copy Txn Hash") %>" aria-label="<%= gettext("Copy Transaction Hash") %>">
+                  <i class="fas fa-clone"></i>
+                </button>
+              </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>
+        </div>
+      </div>
+    </div>
+  </section>
+</section>

apps/block_scout_web/test/block_scout_web/controllers/transaction_controller_test.exs

@@ -102,6 +102,19 @@ defmodule BlockScoutWeb.TransactionControllerTest do
   end
 
   describe "GET show/3" do
+    test "responds with 404 with the transaction missing", %{conn: conn} do
+      hash = transaction_hash()
+      conn = get(conn, transaction_path(BlockScoutWeb.Endpoint, :show, hash))
+
+      assert html_response(conn, 404)
+    end
+
+    test "responds with 422 when the hash is invalid" do
+      conn = get(conn, transaction_path(BlockScoutWeb.Endpoint, :show, "wrong"))
+
+      assert html_response(conn, 422)
+    end
+
     test "redirects to transactions/:transaction_id/token_transfers when there are token transfers", %{conn: conn} do
       transaction = insert(:transaction)
       insert(:token_transfer, transaction: transaction)