Add search bar to layout (#17)

* Add search bar to layout

* Working search input

* Fix app.html encoding

* Search bar: Show error with flash

lib/starknet_explorer_web/components/layouts/app.html.heex

@@ -3,11 +3,12 @@
     <div class="flex items-center gap-4">
       <a href="/"><img src={~p"/images/logo.svg"} width="36" /></a>
       <p class="bg-brand/5 text-brand rounded-full px-2 font-medium leading-6">
-        v<%= Application.spec(:phoenix, :vsn) %>
+        <%= Application.spec(:phoenix, :vsn) %>
       </p>
     </div>
     <div class="flex items-center gap-4 font-semibold leading-6 text-white">
       <a href="/" class="hover:text-zinc-700"> Home </a>
+      <%= live_render(@socket, StarknetExplorerWeb.SearchLive, id: "search-bar", flash: @flash) %>
       <a href="/blocks" class="hover:text-zinc-700"> Blocks </a>
       <a href="/transactions" class="hover:text-zinc-700"> Transactions </a>
     </div>
@@ -16,7 +17,6 @@
 <div class="flex justify-center items-center pt-14">
   <h1 class="text-white text-4xl font-mono">Starknet Explorer</h1>
 </div>
-
 <main class="px-4 py-20 sm:px-6 lg:px-8 flex justify-center items-center">
   <div class=""><.flash_group flash={@flash} /> <%= @inner_content %></div>
 </main>

lib/starknet_explorer_web/live/search.ex

@@ -0,0 +1,92 @@
+defmodule StarknetExplorerWeb.SearchLive do
+  use StarknetExplorerWeb, :live_view
+  alias StarknetExplorer.Rpc
+
+  def render(assigns) do
+    ~H"""
+    <form phx-change="update-input" phx-submit="search">
+      <.input
+        phx-change="update-input"
+        type="text"
+        name="search-input"
+        value={@query}
+        placeholder="Search..."
+      />
+    </form>
+    """
+  end
+
+  def mount(_params, _session, socket) do
+    {:ok, assign(socket, query: "", loading: false, matches: [], errors: [])}
+  end
+
+  def handle_event("update-input", %{"search-input" => query}, socket) do
+    {:noreply, assign(socket, :query, query)}
+  end
+
+  def handle_event("search", %{"search-input" => query}, socket) when byte_size(query) <= 100 do
+    send(self(), {:search, query})
+    {:noreply, assign(socket, query: query, result: "Searching...", loading: true, matches: [])}
+  end
+
+  def handle_info({:search, query}, socket) do
+    query = String.trim(query)
+
+    navigate_fun =
+      case try_search(query) do
+        {:tx, _tx} ->
+          fn -> push_navigate(socket, to: ~p"/transactions/#{query}") end
+
+        {:block, _block} ->
+          fn -> push_navigate(socket, to: ~p"/block/#{query}") end
+
+        :noquery ->
+          fn ->
+            socket
+            |> put_flash(:error, "No results found")
+            |> push_navigate(to: "/")
+          end
+      end
+
+    {:noreply, navigate_fun.()}
+  end
+
+  defp try_search(query) do
+    case infer_query(query) do
+      :hex -> try_by_hash(query)
+      {:number, number} -> try_by_number(number)
+      :noquery -> :noquery
+    end
+  end
+
+  def try_by_number(number) do
+    case Rpc.get_block_by_number(number) do
+      {:ok, block} -> {:block, number}
+      {:error, :not_found} -> :noquery
+    end
+  end
+
+  def try_by_hash(hash) do
+    case Rpc.get_transaction(hash) do
+      {:ok, transaction} ->
+        {:tx, hash}
+
+      {:error, _} ->
+        case Rpc.get_block_by_hash(hash) do
+          {:ok, block} -> {:block, block}
+          {:error, _} -> :noquery
+        end
+    end
+  end
+
+  defp infer_query(query = <<"0x", rest::binary>>), do: :hex
+
+  defp infer_query(query) do
+    case Integer.parse(query) do
+      {parsed, ""} -> {:number, parsed}
+      _ -> :noquery
+    end
+  end
+
+  defp infer_query(query), do: :noquery
+end