Mock labels (#38)

* home labels * list and details labels
lambdaclass · Jul 13, 2023 · bfe8629 · bfe8629
1 parent ebbc041
commit bfe8629
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 16 deletions.
diff --git a/lib/starknet_explorer_web/live/class_index_live.ex b/lib/starknet_explorer_web/live/class_index_live.ex
@@ -26,8 +26,9 @@ defmodule StarknetExplorerWeb.ClassIndexLive do
       flash: @flash
     ) %>
     <div class="max-w-7xl mx-auto">
-      <div class="table-header">
+      <div class="table-header !justify-start gap-5">
         <h2>Classes</h2>
+        <span class="gray-label text-sm">Mocked</span>
       </div>
       <div class="table-block">
         <div class="grid-3 table-th">

diff --git a/lib/starknet_explorer_web/live/contract_index_live.ex b/lib/starknet_explorer_web/live/contract_index_live.ex
@@ -10,8 +10,9 @@ defmodule StarknetExplorerWeb.ContractIndexLive do
       flash: @flash
     ) %>
     <div class="max-w-7xl mx-auto">
-      <div class="table-header">
+      <div class="table-header !justify-start gap-5">
         <h2>Contracts</h2>
+        <span class="gray-label text-sm">Mocked</span>
       </div>
       <div class="table-block">
         <div class="grid-4 table-th">

diff --git a/lib/starknet_explorer_web/live/event_index_live.ex b/lib/starknet_explorer_web/live/event_index_live.ex
@@ -10,8 +10,9 @@ defmodule StarknetExplorerWeb.EventIndexLive do
       flash: @flash
     ) %>
     <div class="max-w-7xl mx-auto">
-      <div class="table-header">
+      <div class="table-header !justify-start gap-5">
         <h2>Events</h2>
+        <span class="gray-label text-sm">Mocked</span>
       </div>
       <div class="table-block">
         <div class="grid-6 table-th">

diff --git a/lib/starknet_explorer_web/live/message_index_live.ex b/lib/starknet_explorer_web/live/message_index_live.ex
@@ -10,8 +10,9 @@ defmodule StarknetExplorerWeb.MessageIndexLive do
       flash: @flash
     ) %>
     <div class="max-w-7xl mx-auto">
-      <div class="table-header">
+      <div class="table-header !justify-start gap-5">
         <h2>Messages</h2>
+        <span class="gray-label text-sm">Mocked</span>
       </div>
       <div class="table-block">
         <div class="grid-9 table-th">

diff --git a/lib/starknet_explorer_web/live/pages/block_detail.ex b/lib/starknet_explorer_web/live/pages/block_detail.ex
@@ -250,7 +250,12 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
       <div class="block-label">
         Total execution resources
       </div>
-      <div class="col-span-3"><%= 543_910 %></div>
+      <div class="col-span-3">
+        <div class="flex flex-col lg:flex-row items-start lg:items-center gap-2">
+          <div class="gray-label text-sm">Mocked</div>
+          <%= 543_910 %>
+        </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
@@ -42,21 +42,24 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
           </div>
         </div>
       </div>
-      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5 relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <img src={~p"/images/code.svg"} />
         <div class="text-sm">
           <div>Classes</div>
           <div>4,536</div>
         </div>
       </div>
-      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5 relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <img src={~p"/images/message-square.svg"} />
         <div class="text-sm">
           <div>Messages</div>
           <div>905,510</div>
         </div>
       </div>
-      <div class="flex items-start gap-3 bg-container p-4 md:p-5">
+      <div class="flex items-start gap-3 bg-container p-4 md:p-5 relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <img src={~p"/images/file.svg"} />
         <div class="text-sm">
           <div>Contracts</div>
@@ -73,11 +76,13 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
       </div>
     </div>
     <div class="mx-auto max-w-7xl grid md:grid-cols-3 gap-5 mb-10" phx-hook="Stats" id="stats_table">
-      <div class="pt-5 bg-container">
+      <div class="pt-5 bg-container relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <div class="ml-7 text-gray-500">Transactions</div>
         <div id="transactions-chart"></div>
       </div>
-      <div class="pt-5 bg-container">
+      <div class="pt-5 bg-container relative">
+        <div class="absolute top-2 right-2 gray-label text-sm">Mocked</div>
         <div class="ml-7 text-gray-500">Transaction Fees</div>
         <div id="fees"></div>
       </div>

diff --git a/lib/starknet_explorer_web/live/transaction_live.ex b/lib/starknet_explorer_web/live/transaction_live.ex
@@ -49,23 +49,23 @@ defmodule StarknetExplorerWeb.TransactionLive do
         ,
         phx-value-view="events"
       >
-        Events
+        Events <span class="gray-label text-sm">Mocked</span>
       </div>
       <div
         class={"btn border-b pb-3 px-3 transition-all duration-300 #{if assigns.transaction_view == "message_logs", do: "border-b-se-blue", else: "border-b-transparent"}"}
         phx-click="select-view"
         ,
         phx-value-view="message_logs"
       >
-        Message Logs
+        Message Logs <span class="gray-label text-sm">Mocked</span>
       </div>
       <div
         class={"btn border-b pb-3 px-3 transition-all duration-300 #{if assigns.transaction_view == "internal_calls", do: "border-b-se-blue", else: "border-b-transparent"}"}
         phx-click="select-view"
         ,
         phx-value-view="internal_calls"
       >
-        Internal Calls
+        Internal Calls <span class="gray-label text-sm">Mocked</span>
       </div>
     </div>
     """
@@ -385,7 +385,9 @@ defmodule StarknetExplorerWeb.TransactionLive do
       <div class="col-span-3"><%= @transaction["nonce"] %></div>
     </div>
     <div class="custom-list-item">
-      <div class="mb-5 text-gray-500 md:text-white">Input Data</div>
+      <div class="mb-5 text-gray-500 md:text-white !flex-row gap-2">
+        <span>Input Data</span><span class="gray-label text-sm">Mocked</span>
+      </div>
       <div class="col-span-full">
         <div class="w-full bg-black/20 p-5 mt-5">
           call <span class="text-se-violet">approve</span>(<span class="text-blue-400">spender</span>, <span class="text-blue-400">amount</span>)
@@ -510,7 +512,9 @@ defmodule StarknetExplorerWeb.TransactionLive do
       </div>
     </div>
     <div class="custom-list-item">
-      <div class="mb-5 text-gray-500 md:text-white">Signature</div>
+      <div class="mb-5 text-gray-500 md:text-white !flex-row gap-5">
+        <span>Signature</span><span class="gray-label text-sm">Mocked</span>
+      </div>
       <div class="bg-black/10 lg:p-5">
         <div class="w-full grid-8 table-th">
           <div>Index</div>
@@ -531,7 +535,9 @@ defmodule StarknetExplorerWeb.TransactionLive do
       </div>
     </div>
     <div class="pt-3 mb-3 border-t border-t-gray-700">
-      <div class="mb-5 text-gray-500 md:text-white">Execution Resources</div>
+      <div class="mb-5 text-gray-500 md:text-white !flex-row gap-5">
+        <span>Execution Resources</span><span class="gray-label text-sm">Mocked</span>
+      </div>
       <div class="flex flex-col lg:flex-row items-center gap-5 px-5 md:p-0">
         <div class="flex flex-col justify-center items-center gap-2">
           <span class="blue-label">STEPS</span> 5083