Merge pull request #1356 from poanetwork/improve-footer

feat: better footer, configurable network list

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

@@ -1,17 +1,13 @@
-$footer-height: 4rem;
 $footer-padding: 1em;
-$social-link-size: 2rem;
 $footer-text-color: rgba($white, 0.7);
 
 .footer {
   font-size: 12px;
   background: $primary;
   color: $footer-text-color;
-  text-align: center;
   margin-top: $footer-padding;
   padding: $footer-padding;
   position: relative;
-  line-height: $social-link-size;
 
 
   @media (max-width: 768px) {
@@ -19,30 +15,47 @@ $footer-text-color: rgba($white, 0.7);
   }
 }
 
-.footer-body {
+.footer-social-icons {
-  position: relative;
+  // float: right;
+  padding-top: 0.5em;
 }
 
-.footer-brand {
+.footer-info {
-  display: block;
+  padding-top: 1em;
-  position: absolute;
-  left: 0;
-  font-size: 1.25rem;
-  line-height: inherit;
-  white-space: nowrap;
 }
 
-.footer-logo {
+.footer-link {
-  height: 1.5em;
+  color: inherit;
 }
 
-.footer .icon-links {
+.footer-link:hover {
-  position: absolute;
+  color: white;
-  right: 0;
+}
 
-  @media (max-width: 768px) {
+.footer-list {
-    position: static;
+  padding-top: 1em;
-    justify-content: center;
+
-    margin-bottom: 5px;
+  h3 {
+    margin-bottom: 0em;
+    // text-align: center;
+  }
+
+  hr {
+    margin-top: 0em;
+    margin-bottom: 1em;
+    border: 0;
+    height: 0;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  ul {
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: 0;
+
+    li {
+      padding-bottom: 0.5em;
+    }
   }
 }

apps/block_scout_web/config/config.exs

@@ -17,6 +17,57 @@ config :block_scout_web, BlockScoutWeb.Chain,
   logo: System.get_env("LOGO"),
   has_emission_funds: false
 
+config :block_scout_web,
+  link_to_other_explorers: System.get_env("LINK_TO_OTHER_EXPLORERS") == "true",
+  other_explorers: %{
+    "Etherscan" => "https://etherscan.io/",
+    "EtherChain" => "https://www.etherchain.org/",
+    "Bloxy" => "https://bloxy.info/"
+  },
+  other_networks: [
+    %{
+      title: "POA Core",
+      url: "https://blockscout.com/poa/core"
+    },
+    %{
+      title: "POA Sokol",
+      url: "https://blockscout.com/poa/sokol",
+      test_net?: true
+    },
+    %{
+      title: "xDai Chain",
+      url: "https://blockscout.com/poa/dai"
+    },
+    %{
+      title: "Ethereum Mainnet",
+      url: "https://blockscout.com/eth/mainnet"
+    },
+    %{
+      title: "Kovan Testnet",
+      url: "https://blockscout.com/eth/kovan",
+      test_net?: true
+    },
+    %{
+      title: "Ropsten Testnet",
+      url: "https://blockscout.com/eth/ropsten",
+      test_net?: true
+    },
+    %{
+      title: "Goerli Testnet",
+      url: "https://blockscout.com/eth/goerli",
+      test_net?: true
+    },
+    %{
+      title: "Rinkeby Testnet",
+      url: "https://blockscout.com/eth/rinkeby",
+      test_net?: true
+    },
+    %{
+      title: "Ethereum Classic",
+      url: "https://blockscout.com/etc/mainnet"
+    }
+  ]
+
 # Configures the endpoint
 config :block_scout_web, BlockScoutWeb.Endpoint,
   instrumenters: [BlockScoutWeb.Prometheus.Instrumenter, SpandexPhoenix.Instrumenter],

apps/block_scout_web/lib/block_scout_web.ex

@@ -17,6 +17,14 @@ defmodule BlockScoutWeb do
   and import those modules here.
   """
 
+  # This is intentionally compiled in. Version is set
+  # at compile time, and we don't want to make a system
+  # env call to retreive it every time anyone loads any
+  # page.
+  @version System.get_env("BLOCKSCOUT_VERSION") || "unknown"
+
+  def version(), do: @version
+
   def controller do
     quote do
       use Phoenix.Controller, namespace: BlockScoutWeb

apps/block_scout_web/lib/block_scout_web/templates/layout/_footer.html.eex

@@ -1,21 +1,97 @@
 <footer class="footer">
   <div class="footer-body container">
+    <div class="row">
+      <div class="col-md-4">
         <%= link to: chain_path(@conn, :show), class: "footer-brand" do %>
           <img class="footer-logo" src="<%= logo() %>" alt="<%= subnetwork_title() %>" />
         <% end %>
-    <div class="icon-links icon-links-primary">
+      </div>
-      <a href="https://github.com/poanetwork" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Github") %>">
+      <div class="col-md-5">
+      </div>
+
+      <div class="col-md-3">
+        <div class="icon-links icon-links-primary footer-social-icons">
+          <a href="https://github.com/poanetwork" rel="noreferrer" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Github") %>">
             <i class="fab fa-github"></i>
           </a>
-      <a href="https://www.twitter.com/PoaNetwork/" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Twitter") %>">
+          <a href="https://www.twitter.com/PoaNetwork/" rel="noreferrer" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Twitter") %>">
             <i class="fab fa-twitter"></i>
           </a>
-      <a href="http://t.me/oraclesnetwork" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
+          <a href="http://t.me/oraclesnetwork" rel="noreferrer" target="_blank" class="icon-link" data-toggle="tooltip" data-placement="top" title="<%= gettext("Telegram") %>">
             <i class="fab fa-telegram-plane"></i>
           </a>
         </div>
+      </div>
+    </div>
+
+    <div class="row footer-info">
+      <div class="col-12">
+        <%= gettext("Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.") %>
+      </div>
+    </div>
 
-    <%= gettext "Copyright %{year} POA", year: 2018 %>
+    <% other_explorers = other_explorers() %>
+
+    <% col_size = if Enum.empty?(other_explorers), do: 4, else: 3 %>
+
+    <div class="row">
+      <div class="col-md-<%= col_size %> footer-list">
+        <h3>BlockScout</h3>
+        <hr>
+        <ul>
+          <li><a href="<%= issue_link(@conn) %>" rel="noreferrer" class="footer-link" target="_blank"><%= gettext("Submit an Issue") %></a></li>
+          <li><a href="https://github.com/poanetwork/blockscout" rel="noreferrer" class="footer-link"><%= gettext("Contribute") %></a></li>
+          <li><a href="https://gitter.im/poanetwork/blockscout" rel="noreferrer" class="footer-link"><%= gettext("Chat") %></a></li>
+        </ul>
+      </div>
+      <% main_nets = main_nets() %>
+
+      <%= unless Enum.empty?(main_nets) do %>
+        <div class="col-md-<%= col_size %> footer-list">
+          <h3><%= gettext("Main Networks") %></h3>
+          <hr>
+          <ul>
+            <%= for %{title: title, url: url} <- main_nets do %>
+              <li><a href="<%= url%>" rel="norefferer" class="footer-link"> <%= title %> </a></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
 
+      <% test_nets = test_nets() %>
+
+      <%= unless Enum.empty?(test_nets) do %>
+        <div class="col-md-<%= col_size %> footer-list">
+          <h3><%= gettext("Test Networks") %></h3>
+          <hr>
+          <ul>
+            <%= for %{title: title, url: url} <- test_nets do %>
+              <li><a href="<%= url%>" rel="noreferrer" class="footer-link"> <%= title %> </a></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+
+
+      <%= unless Enum.empty?(other_explorers) do %>
+        <div class="col-md-<%= col_size %> footer-list">
+          <h3><%= gettext("Other Explorers") %></h3>
+          <hr>
+          <ul>
+            <%= for {name, url} <- other_explorers do %>
+              <li><a href="<%= url%>" rel="noreferrer" class="footer-link"> <%= name %> </a></li>
+            <% end %>
+          </ul>
+        </div>
+      <% end %>
+    </div>
+
+    <% version = version() %>
+
+    <%= unless ignore_version?(version) do %>
+      <div class="muted text-muted">
+        <%= gettext("Version") %>: <%= version %>
+      </div>
+    <% end %>
   </div>
 </footer>

apps/block_scout_web/lib/block_scout_web/templates/layout/_topnav.html.eex

@@ -103,8 +103,9 @@
               <%= subnetwork_title() %>
             </a>
             <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <a class="dropdown-item" href="https://sokol.blockscout.com/"><%= gettext("POA Sokol") %></a>
+              <%= for %{url: url, title: title} <- other_networks() do %>
-              <a class="dropdown-item" href="https://poa.blockscout.com/"><%= gettext("POA Core") %></a>
+                <a class="dropdown-item" href="<%= url%>"><%= title %></a>
+              <% end %>
             </div>
           </li>
         </ul>

apps/block_scout_web/lib/block_scout_web/views/layout_view.ex

@@ -1,6 +1,10 @@
 defmodule BlockScoutWeb.LayoutView do
   use BlockScoutWeb, :view
 
+  alias Plug.Conn
+
+  @issue_url "https://github.com/poanetwork/blockscout/issues/new"
+
   alias BlockScoutWeb.SocialMedia
 
   def network_icon_partial do
@@ -26,4 +30,76 @@ defmodule BlockScoutWeb.LayoutView do
   def configured_social_media_services do
     SocialMedia.links()
   end
+
+  def issue_link(conn) do
+    params = [
+      labels: "BlockScout",
+      body: issue_body(conn),
+      title: subnetwork_title() <> ": <Issue Title>"
+    ]
+
+    [@issue_url, "?", URI.encode_query(params)]
+  end
+
+  defp issue_body(conn) do
+    user_agent =
+      case Conn.get_req_header(conn, "user-agent") do
+        [] -> "unknown"
+        user_agent -> user_agent
+      end
+
+    """
+    *Describe your issue here.*
+
+    ### Environment
+    * Elixir Version: #{System.version()}
+    * Erlang Version: #{System.otp_release()}
+    * BlockScout Version: #{version()}
+
+    * User Agent: `#{user_agent}`
+
+    ### Steps to reproduce
+
+    *Tell us how to reproduce this issue. If possible, push up a branch to your fork with a regression test we can run to reproduce locally.*
+
+    ### Expected Behaviour
+
+    *Tell us what should happen.*
+
+    ### Actual Behaviour
+
+    *Tell us what happens instead.*
+    """
+  end
+
+  def version do
+    BlockScoutWeb.version()
+  end
+
+  def ignore_version?("unknown"), do: true
+  def ignore_version?(_), do: false
+
+  def other_networks do
+    :block_scout_web
+    |> Application.get_env(:other_networks, [])
+    |> Enum.reject(fn %{title: title} ->
+      title == subnetwork_title()
+    end)
+  end
+
+  def main_nets do
+    Enum.reject(other_networks(), &Map.get(&1, :test_net?))
+  end
+
+  def test_nets do
+    Enum.filter(other_networks(), &Map.get(&1, :test_net?))
+  end
+
+  def other_explorers do
+    if Application.get_env(:block_scout_web, :link_to_other_explorers) do
+      Application.get_env(:block_scout_web, :other_explorers, [])
+    else
+      []
+    end
+  end
 end

apps/block_scout_web/priv/gettext/default.pot

@@ -334,11 +334,6 @@ msgstr ""
 msgid "Copy Txn Hash"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:18
-msgid "Copyright %{year} POA"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:50
 msgid "Created by"
@@ -462,7 +457,7 @@ msgid "Gas Used"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:7
+#: lib/block_scout_web/templates/layout/_footer.html.eex:14
 msgid "Github"
 msgstr ""
 
@@ -656,16 +651,6 @@ msgstr ""
 msgid "Owner Address"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:107
-msgid "POA Core"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:106
-msgid "POA Sokol"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:6
 msgid "POST"
@@ -802,7 +787,7 @@ msgid "TX Fee"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:13
+#: lib/block_scout_web/templates/layout/_footer.html.eex:20
 msgid "Telegram"
 msgstr ""
 
@@ -1006,7 +991,7 @@ msgid "Try it out"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:10
+#: lib/block_scout_web/templates/layout/_footer.html.eex:17
 msgid "Twitter"
 msgstr ""
 
@@ -1525,3 +1510,43 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:102
 msgid "Something went wrong, click to retry."
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:29
+msgid "Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks."
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:44
+msgid "Chat"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:43
+msgid "Contribute"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:51
+msgid "Main Networks"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:78
+msgid "Other Explorers"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:42
+msgid "Submit an Issue"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:65
+msgid "Test Networks"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:93
+msgid "Version"
+msgstr ""

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -334,11 +334,6 @@ msgstr ""
 msgid "Copy Txn Hash"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:18
-msgid "Copyright %{year} POA"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/address/overview.html.eex:50
 msgid "Created by"
@@ -462,7 +457,7 @@ msgid "Gas Used"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:7
+#: lib/block_scout_web/templates/layout/_footer.html.eex:14
 msgid "Github"
 msgstr ""
 
@@ -656,16 +651,6 @@ msgstr ""
 msgid "Owner Address"
 msgstr ""
 
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:107
-msgid "POA Core"
-msgstr ""
-
-#, elixir-format
-#: lib/block_scout_web/templates/layout/_topnav.html.eex:106
-msgid "POA Sokol"
-msgstr ""
-
 #, elixir-format
 #: lib/block_scout_web/templates/api_docs/_action_tile.html.eex:6
 msgid "POST"
@@ -802,7 +787,7 @@ msgid "TX Fee"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:13
+#: lib/block_scout_web/templates/layout/_footer.html.eex:20
 msgid "Telegram"
 msgstr ""
 
@@ -1006,7 +991,7 @@ msgid "Try it out"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/layout/_footer.html.eex:10
+#: lib/block_scout_web/templates/layout/_footer.html.eex:17
 msgid "Twitter"
 msgstr ""
 
@@ -1525,3 +1510,43 @@ msgstr ""
 #: lib/block_scout_web/templates/chain/show.html.eex:102
 msgid "Something went wrong, click to retry."
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:29
+msgid "Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks."
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:44
+msgid "Chat"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:43
+msgid "Contribute"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:51
+msgid "Main Networks"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:78
+msgid "Other Explorers"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:42
+msgid "Submit an Issue"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:65
+msgid "Test Networks"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/layout/_footer.html.eex:93
+msgid "Version"
+msgstr ""