Skip to content
This repository has been archived by the owner on Oct 4, 2024. It is now read-only.

Create loading component #313

Draft
wants to merge 14 commits into
base: main
Choose a base branch
from
Draft

Create loading component #313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
4d38393
Create loading component
BertovDev Sep 28, 2023
c514c88
Improve component
BertovDev Sep 28, 2023
a787972
Add components to index
BertovDev Sep 28, 2023
3cbf35b
rollback
BertovDev Sep 28, 2023
2b6746d
Mock transaction table
BertovDev Sep 29, 2023
ec26d09
Merge branch 'main' into loading-state
BertovDev Sep 29, 2023
96d841b
Merge main
BertovDev Sep 29, 2023
e38ed2e
Add loading state to index view
BertovDev Sep 29, 2023
6868c6f
Remove comment
BertovDev Sep 29, 2023
d28cf4f
Fix sizes
BertovDev Sep 29, 2023
ee90d74
Remove unused component id
BertovDev Sep 29, 2023
52b5e4a
Change pulse animation
BertovDev Sep 29, 2023
2876801
Restore transactions assigns
BertovDev Sep 29, 2023
b6984cb
Fix hash responsive
BertovDev Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions assets/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,9 @@ module.exports = {
"ibm-plex": "'IBM Plex Sans', sans-serif",
mono: "'IBM Plex Mono', monospace",
},
animation: {
'pulseFill' : 'pulse 2s ease-in-out infinite'
},
colors: {
brand: "#AE2EFF",
container: "#1A1A24",
Expand Down
34 changes: 25 additions & 9 deletions lib/starknet_explorer_web/components/core_components.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -665,20 +665,21 @@ defmodule StarknetExplorerWeb.CoreComponents do

def copy_button(assigns) do
~H"""
<div class="copy-container shrink-0" id={Ecto.UUID.generate()} phx-hook="Copy">
<div class="relative">
<div class="ml-2 relative shrink-0">
<img class="copy-btn copy-text w-5 h-5" src="/images/copy.svg" data-text={@text} />
<img
class="copy-check absolute top-0 left-0 w-5 h-5 opacity-0 pointer-events-none"
src="/images/check-square.svg"
/>
<div class="copy-container shrink-0" id={Ecto.UUID.generate()} phx-hook="Copy">
<div class="relative">
<div class="ml-2 relative shrink-0">
<img class="copy-btn copy-text w-5 h-5" src="/images/copy.svg" data-text={@text} />
<img
class="copy-check absolute top-0 left-0 w-5 h-5 opacity-0 pointer-events-none"
src="/images/check-square.svg"
/>
</div>
</div>
</div>
</div>
"""
end

@spec tooltip(any) :: Phoenix.LiveView.Rendered.t()
def tooltip(assigns) do
~H"""
<img
Expand All @@ -690,4 +691,19 @@ defmodule StarknetExplorerWeb.CoreComponents do
/>
"""
end

@spec loading_state(any) :: Phoenix.LiveView.Rendered.t()
def loading_state(assigns) do
~H"""
<%= if @condition do %>
<%= @content %>
<% else %>
<div class="text-md pt-1 font-semibold rounded-lg bg-gray-100 text-gray-100 dark:bg-gray-700 dark:text-gray-700 inline-block w-full animate-pulseFill">
<%= @mock %>
</div>
<% end %>


"""
end
end
158 changes: 127 additions & 31 deletions lib/starknet_explorer_web/live/pages/home/index.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<div class="flex items-start gap-6 my-4 mx-8">
<img src={~p"/images/box.svg"} class="my-auto w-6 h-auto" />
<div>
<div class="text-sm text-gray-400">Blocks Height</div>
<div class="text-2xl mt-1"><%= assigns.block_height %></div>
<div class="text-sm text-gray-400">Blocks Height</div>
<div class="text-2xl mt-1">
<CoreComponents.loading_state
condition={assigns}
content={assigns.block_height}
mock="300000"
/>
</div>
</div>
</div>
<div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
Expand All @@ -88,7 +94,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<img src={~p"/images/message-square.svg"} class="my-auto w-6 h-auto" />
<div>
<div class="text-sm text-gray-400">Messages</div>
<div class="text-2xl mt-1"><%= @entities_count.messages_count %></div>
<div class="text-2xl mt-1">
<CoreComponents.loading_state
condition={@entities_count}
content={if @entities_count do @entities_count.messages_count end}
mock="300000"

/>
</div>
</div>
</div>
<div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
Expand All @@ -103,7 +116,14 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<img src={~p"/images/calendar.svg"} class="my-auto w-6 h-auto" />
<div>
<div class="text-sm text-gray-400">Events</div>
<div class="text-2xl mt-1"><%= @entities_count.events_count %></div>
<div class="text-2xl mt-1">
<CoreComponents.loading_state
condition={@entities_count}
content={if @entities_count do @entities_count.events_count end}
mock="300000"

/>
</div>
</div>
</div>
<div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
Expand All @@ -118,7 +138,16 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<img src={~p"/images/corner-up-right.svg"} class="my-auto w-6 h-auto" />
<div>
<div class="text-sm text-gray-400">Transactions</div>
<div class="text-2xl mt-1"><%= @entities_count.transaction_count %></div>
<div class="text-2xl mt-1">
<div class="text-2xl mt-1">
<CoreComponents.loading_state
condition={@entities_count}
content={if @entities_count do @entities_count.transaction_count end}
mock="10"

/>
</div>
</div>
</div>
</div>
<div class="flex justify-between border-t border-t-gray-700 py-3 px-8">
Expand Down Expand Up @@ -150,39 +179,74 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<div class="col-span-2">Status</div>
<div>Age</div>
</div>
<%= for block <- Enum.take(@blocks, 15) do %>
<div id={"block-#{block.number}"} class="grid-6 custom-list-item">
<%= for n <- 1..15 do %>
<div id={if Enum.at(@blocks,n-1) do
"block-#{Enum.at(@blocks,n-1).number}" end}
class="grid-6 custom-list-item">
<div>
<div class="list-h">Number</div>
<a href={Utils.network_path(assigns.network, "blocks/#{block.number}")} class="type">
<span><%= to_string(block.number) %></span>
<a
href={Utils.network_path(assigns.network, "blocks/#{
if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end
}")}
class={if Enum.at(@blocks,n-1) do "type" end}
>
<span>
<CoreComponents.loading_state
condition={@blocks && Enum.at(@blocks,n-1)}
content={if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).number end}
mock="00000"
/>
</span>
</a>
</div>
<div class="col-span-2">
<div class="list-h">Block Hash</div>
<div class="block-data">
<div class="block-data" id={if Enum.at(@blocks,n-1) do
"copy-block-#{(Enum.at(@blocks,n-1).number)}" end} phx-hook="Copy">
<div class="hash flex">
<a
href={Utils.network_path(assigns.network, "blocks/#{block.hash}")}
class="text-hover-link"
>
<span><%= Utils.shorten_block_hash(block.hash) %></span>
<a
href={Utils.network_path(assigns.network,
"blocks/#{if Enum.at(@blocks,n-1) do (Enum.at(@blocks,n-1).hash) end}")}
class="text-hover-link">
<span class="xl:text-sm lg:text-xs">
<CoreComponents.loading_state
condition={@blocks && Enum.at(@blocks,n-1)}
content={if Enum.at(@blocks,n-1) do
Utils.shorten_block_hash(Enum.at(@blocks,n-1).hash) end}
mock="00000"

/>
</span>
</a>
<CoreComponents.copy_button text={block.hash} />
<%= if Enum.at(@blocks,n-1) do %>
<CoreComponents.copy_button text={
if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).hash end} />
<% end %>
</div>
</div>
</div>
<div class="col-span-2">
<div class="list-h">Status</div>
<div>
<span class={"info-label #{String.downcase(block.status)}"}>
<%= block.status %>
<span class={"#{if Enum.at(@blocks,n-1) do
String.downcase(Enum.at(@blocks,n-1).status) <> " info-label" end}"}>
<CoreComponents.loading_state
condition={@blocks && Enum.at(@blocks,n-1)}
content={if Enum.at(@blocks,n-1) do Enum.at(@blocks,n-1).status end}
mock="00000"
/>
</span>
</div>
</div>
<div>
<div class="list-h">Age</div>
<%= Utils.get_block_age(block) %>
<CoreComponents.loading_state
condition={@blocks && Enum.at(@blocks,n-1)}
content={if Enum.at(@blocks,n-1) do
Utils.get_block_age(Enum.at(@blocks,n-1)) end}
mock="0000"
/>
</div>
</div>
<% end %>
Expand All @@ -208,44 +272,76 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
<div class="col-span-2">Status</div>
<div>Age</div>
</div>
<%= for {transaction, idx} <- Enum.take(Enum.with_index(@transactions), 15) do %>
<div id={"transaction-#{idx}"} class="grid-7 custom-list-item">
<%= for n <- 1..15 do %>
<div id={"transaction-#{n}"} class="grid-7 custom-list-item">
<div class="col-span-2">
<div class="list-h">Transaction Hash</div>
<div class="block-data">
<div class="hash flex">
<a
href={Utils.network_path(assigns.network, "transactions/#{transaction.hash}")}
href={if @transactions && Enum.at(@transactions,n) do Utils.network_path(assigns.network, "transactions/#{Enum.at(@transactions,n).hash}") end}
class="text-hover-link"
>
<span><%= Utils.shorten_block_hash(transaction.hash) %></span>
<span class="xl:text-sm lg:text-xs">
<CoreComponents.loading_state
condition={@transactions && Enum.at(@transactions,n)}
content={if Enum.at(@transactions,n) do Utils.shorten_block_hash(Enum.at(@transactions,n).hash) end}
mock="00000"

/>
</span>
</a>
<CoreComponents.copy_button text={transaction.hash} />
<%= if Enum.at(@transactions,n) do%>
<CoreComponents.copy_button
text={if Enum.at(@transactions,n) do Enum.at(@transactions,n).hash end} />
<% end %>
</div>
</div>
</div>
<div class="col-span-2">
<div class="list-h">Type</div>
<div class={"type #{String.downcase(transaction.type)}"}>
<span>
<%= transaction.type %>
<div class={"#{if Enum.at(@transactions,n) do
String.downcase(Enum.at(@transactions,n).type) <> " type" end }"}>
<span >
<CoreComponents.loading_state
condition={@transactions && Enum.at(@transactions,n)}
content={if Enum.at(@transactions,n) do Enum.at(@transactions,n).type end}
mock="00000"

/>
<%= %>
</span>
</div>
</div>
<div class="col-span-2">
<div class="list-h">Status</div>
<div>
<span class={"info-label #{String.downcase(transaction.block_status)}"}>
<%= transaction.block_status %>
<span class={"#{if Enum.at(@transactions,n) do
String.downcase(Enum.at(@transactions,n).block_status) <> " info-label" end}"}>
<CoreComponents.loading_state
condition={@transactions && Enum.at(@transactions,n)}
content={
if Enum.at(@transactions,n) do Enum.at(@transactions,n).block_status end}
mock="0000"

/>
</span>
</div>
</div>
<div>
<div class="list-h">Age</div>
<%= Utils.get_block_age_from_timestamp(transaction.block_timestamp) %>
<CoreComponents.loading_state
condition={@transactions && Enum.at(@transactions,n)}
content={
if Enum.at(@transactions,n) do
Utils.get_block_age_from_timestamp(Enum.at(@transactions,n).block_timestamp) end}
mock="0000"

/>
</div>
</div>
<% end %>

</div>
</div>
</div>
Expand Down Expand Up @@ -294,7 +390,7 @@ defmodule StarknetExplorerWeb.HomeLive.Index do
{:ok, block_height} = StarknetExplorer.Rpc.get_block_height(socket.assigns.network)
block_height = StarknetExplorer.Utils.format_number_for_display(block_height)

assign(socket,
assign(socket,
blocks: blocks,
transactions: transactions,
entities_count: entities_count,
Expand Down
Loading