From d13f7738d28986ac57bab571aac4955e4f77e32b Mon Sep 17 00:00:00 2001
From: Santiago Pittella <87827390+SantiagoPittella@users.noreply.github.com>
Date: Wed, 22 Nov 2023 17:25:16 -0300
Subject: [PATCH] fix tx filter in block detail (#372)

* fix tx filter in block detail

* fix CSS

---------

Co-authored-by: Santiago Pittella <santiagopittella@Santiagos-MacBook-Air.local>
---
 .../live/pages/block_detail.ex                | 85 ++++---------------
 1 file changed, 15 insertions(+), 70 deletions(-)

diff --git a/lib/starknet_explorer_web/live/pages/block_detail.ex b/lib/starknet_explorer_web/live/pages/block_detail.ex
index 9175e17a..7c97500a 100644
--- a/lib/starknet_explorer_web/live/pages/block_detail.ex
+++ b/lib/starknet_explorer_web/live/pages/block_detail.ex
@@ -482,79 +482,24 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
     """
   end
 
+  def filter_options, do: ["ALL", "INVOKE", "DEPLOY_ACCOUNT", "DEPLOY", "DECLARE", "L1_HANDLER"]
+
   def render_tx_filter(assigns) do
     ~H"""
-    <div>
-      <div>
-        <div
-          id="dropdown"
-          class="dropdown relative bg-[#232331] p-5 mb-2 rounded-md lg:hidden"
-          phx-hook="Dropdown"
-        >
-          <span class="networkSelected capitalize"><%= assigns.tx_filter %></span>
-          <span class="absolute inset-y-0 right-5 transform translate-1/2 flex items-center">
-            <img
-              alt="Dropdown menu of transaction types"
-              class="transform rotate-90 w-5 h-5"
-              src={~p"/images/dropdown.svg"}
-            />
-          </span>
-        </div>
-        <div>
-          <div class="options hidden">
-            <div
-              class={"option #{if Map.get(assigns, :tx_filter) == "ALL", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-              phx-click="select-filter"
-              ,
-              phx-value-filter="ALL"
-            >
-              All
-            </div>
-            <%= if @tabs? do %>
-              <div
-                class={"option #{if Map.get(assigns, :tx_filter) == "INVOKE", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-                phx-click="select-filter"
-                ,
-                phx-value-filter="INVOKE"
-              >
-                Invoke
-              </div>
-              <div
-                class={"option #{if Map.get(assigns, :tx_filter) == "DEPLOY_ACCOUNT", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-                phx-click="select-filter"
-                ,
-                phx-value-filter="DEPLOY_ACCOUNT"
-              >
-                Deploy Account
-              </div>
-              <div
-                class={"option #{if Map.get(assigns, :tx_filter) == "DEPLOY", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-                phx-click="select-filter"
-                ,
-                phx-value-filter="DEPLOY"
-              >
-                Deploy
-              </div>
-              <div
-                class={"option #{if Map.get(assigns, :tx_filter) == "DECLARE", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-                phx-click="select-filter"
-                ,
-                phx-value-filter="DECLARE"
-                ,
-              >
-                Declare
-              </div>
-            <% end %>
-            <div
-              class={"option #{if Map.get(assigns, :tx_filter) == "L1_HANDLER", do: "lg:!border-b-se-blue text-white", else: "lg:border-b-transparent text-gray-400"}"}
-              phx-click="select-filter"
-              ,
-              phx-value-filter="L1_HANDLER"
-              ,
+    <div class="table-header flex flex-col md:flex-row gap-5 !items-start">
+      <div class="w-1/2 pr-6 max-w-[15rem] flex gap-3 items-center">
+        <span class="hidden md:block text-gray-400">TYPE:</span>
+        <div class="relative z-20">
+          <form id="test" phx-change="select-filter">
+            <select
+              value={@tx_filter}
+              name="filter"
+              id="filter"
+              class="bg-container border border-gray-700 text-brand rounded-md text-sm py-1 w-full"
             >
-              L1 Handler
-            </div>
-          </div>
+              <%= Phoenix.HTML.Form.options_for_select(filter_options(), @tx_filter) %>
+            </select>
+          </form>
         </div>
       </div>
     </div>