[Frontend] add timestamp hover in frontend (#361)

* add timestamp hover in frontend * fix CSS for hovers --------- Co-authored-by: Santiago Pittella <[email protected]>
lambdaclass · Nov 10, 2023 · 4b4a07c · 4b4a07c
1 parent 717bcf7
commit 4b4a07c
Show file tree

Hide file tree

Showing 9 changed files with 120 additions and 12 deletions.
diff --git a/lib/starknet_explorer_web/live/block_index_live.ex b/lib/starknet_explorer_web/live/block_index_live.ex
@@ -54,9 +54,21 @@ defmodule StarknetExplorerWeb.BlockIndexLive do
                 </span>
               </div>
             </div>
-            <div>
+            <div class="block-data">
               <div class="list-h">Age</div>
-              <%= Utils.get_block_age(block) %>
+              <div class="hash flex">
+                <div class="flex items-center gap-2">
+                  <%= Utils.get_block_age(block) %>
+                  <CoreComponents.tooltip
+                    id="block-timestamp-tooltip"
+                    text={"#{block.timestamp
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+                    class="translate-y-px"
+                  />
+                </div>
+              </div>
             </div>
           </div>
         <% end %>

diff --git a/lib/starknet_explorer_web/live/class_index_live.ex b/lib/starknet_explorer_web/live/class_index_live.ex
@@ -68,8 +68,16 @@ defmodule StarknetExplorerWeb.ClassIndexLive do
             <div>
               <div class="list-h">Declared at</div>
               <div class="block-data">
-                <div class="hash flex">
+                <div class="flex items-center gap-2">
                   <%= Utils.get_block_age_from_timestamp(class.timestamp) %>
+                  <CoreComponents.tooltip
+                    id="class-timestamp-tooltip"
+                    text={"#{class.timestamp
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+                    class="translate-y-px"
+                  />
                 </div>
               </div>
             </div>

diff --git a/lib/starknet_explorer_web/live/contract_index_live.ex b/lib/starknet_explorer_web/live/contract_index_live.ex
@@ -50,8 +50,16 @@ defmodule StarknetExplorerWeb.ContractIndexLive do
             </div>
             <div>
               <div class="list-h">Deployed At</div>
-              <div>
+              <div class="flex items-center gap-2">
                 <%= Utils.get_block_age_from_timestamp(contract.timestamp) %>
+                <CoreComponents.tooltip
+                  id="contract-timestamp-tooltip"
+                  text={"#{contract.timestamp
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+                  class="translate-y-px"
+                />
               </div>
             </div>
           </div>

diff --git a/lib/starknet_explorer_web/live/event_index_live.ex b/lib/starknet_explorer_web/live/event_index_live.ex
@@ -85,8 +85,16 @@ defmodule StarknetExplorerWeb.EventIndexLive do
             </div>
             <div>
               <div class="list-h">Age</div>
-              <div>
+              <div class="flex items-center gap-2">
                 <%= Utils.get_block_age_from_timestamp(event.age) %>
+                <CoreComponents.tooltip
+                  id="event-timestamp-tooltip"
+                  text={"#{event.age
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+                  class="translate-y-px"
+                />
               </div>
             </div>
           </div>

diff --git a/lib/starknet_explorer_web/live/messages/message_info.html.heex b/lib/starknet_explorer_web/live/messages/message_info.html.heex
@@ -78,7 +78,19 @@
         text="The date and time when the message log was validated."
       /> Timestamp
     </div>
-    <div><%= Utils.get_block_age_from_timestamp(@message.timestamp) %></div>
+    <div>
+      <div class="flex items-center gap-2">
+        <%= Utils.get_block_age_from_timestamp(@message.timestamp) %>
+        <CoreComponents.tooltip
+          id="message-timestamp-tooltip"
+          text={"#{@message.timestamp
+            |> DateTime.from_unix()
+            |> then(fn {:ok, time} -> time end)
+            |> Calendar.strftime("%c")} UTC"}
+          class="translate-y-px"
+        />
+      </div>
+    </div>
   </div>
   <%= if !Message.is_l2_to_l1(@message.type) do %>
     <div class="custom-list-item grid-4 w-full">

diff --git a/lib/starknet_explorer_web/live/pages/block_detail.ex b/lib/starknet_explorer_web/live/pages/block_detail.ex
@@ -631,7 +631,17 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
         </div>
         <div>
           <div class="list-h">Age</div>
-          <div><%= Utils.get_block_age_from_timestamp(@block.timestamp) %></div>
+          <div class="flex items-center gap-2">
+            <%= Utils.get_block_age_from_timestamp(@block.timestamp) %>
+            <CoreComponents.tooltip
+              id="transaction-timestamp-tooltip"
+              text={"#{@block.timestamp
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+              class="translate-y-px"
+            />
+          </div>
         </div>
       </div>
     <% end %>
@@ -904,7 +914,17 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
         </div>
         <div>
           <div class="list-h">Age</div>
-          <div><%= @block_age %></div>
+          <div class="flex items-center gap-2">
+            <%= @block_age %>
+            <CoreComponents.tooltip
+              id="event-timestamp-tooltip"
+              text={"#{event.age
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+              class="translate-y-px"
+            />
+          </div>
         </div>
       </div>
     <% end %>

diff --git a/lib/starknet_explorer_web/live/pages/home/index.ex b/lib/starknet_explorer_web/live/pages/home/index.ex
@@ -204,7 +204,17 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age(block) %>
+                <div class="flex items-center gap-2">
+                  <%= Utils.get_block_age(block) %>
+                  <CoreComponents.tooltip
+                    id="tps-tooltip"
+                    text={"#{block.timestamp
+                    |> DateTime.from_unix()
+                    |> then(fn {:ok, time} -> time end)
+                    |> Calendar.strftime("%c")} UTC"}
+                    class="translate-y-px"
+                  />
+                </div>
               </div>
             </div>
           <% end %>
@@ -264,7 +274,17 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
               </div>
               <div>
                 <div class="list-h">Age</div>
-                <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+                <div class="flex items-center gap-2">
+                  <%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
+                  <CoreComponents.tooltip
+                    id="transaction-timestamp-tooltip"
+                    text={"#{transaction.block_timestamp
+                    |> DateTime.from_unix()
+                    |> then(fn {:ok, time} -> time end)
+                    |> Calendar.strftime("%c")} UTC"}
+                    class="translate-y-px"
+                  />
+                </div>
               </div>
             </div>
           <% end %>

diff --git a/lib/starknet_explorer_web/live/transaction_index_live.ex b/lib/starknet_explorer_web/live/transaction_index_live.ex
@@ -76,7 +76,17 @@ defmodule StarknetExplorerWeb.TransactionIndexLive do
                 </div>
                 <div>
                   <div class="list-h">Age</div>
-                  <%= Utils.get_block_age_from_timestamp(transaction.timestamp) %>
+                  <div class="flex items-center gap-2">
+                    <%= Utils.get_block_age_from_timestamp(transaction.timestamp) %>
+                    <CoreComponents.tooltip
+                      id="transaction-timestamp-tooltip"
+                      text={"#{transaction.timestamp
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+                      class="translate-y-px"
+                    />
+                  </div>
                 </div>
               </div>
             <% end %>

diff --git a/lib/starknet_explorer_web/live/transaction_live.ex b/lib/starknet_explorer_web/live/transaction_live.ex
@@ -179,7 +179,17 @@ defmodule StarknetExplorerWeb.TransactionLive do
         </div>
         <div>
           <div class="list-h">Age</div>
-          <div><%= Utils.get_block_age_from_timestamp(event.age) %></div>
+          <div class="flex items-center gap-2">
+            <%= Utils.get_block_age_from_timestamp(event.age) %>
+            <CoreComponents.tooltip
+              id="event-timestamp-tooltip"
+              text={"#{event.age
+                        |> DateTime.from_unix()
+                        |> then(fn {:ok, time} -> time end)
+                        |> Calendar.strftime("%c")} UTC"}
+              class="translate-y-px"
+            />
+          </div>
         </div>
       </div>
     <% end %>