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

Commit

Permalink
Upgrade Message details (#176)
Browse files Browse the repository at this point in the history 
* polish message details

* remove warning

* fee fix

* remove unused function

* readd search bar

* fix case
  • Loading branch information
@igamigo
igamigo authored Sep 19, 2023
1 parent 8b3756a commit d5e25c4
Show file tree
Hide file tree
Showing 4 changed files with 153 additions and 42 deletions.
7 changes: 0 additions & 7 deletions lib/starknet_explorer/block/block_utils.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,13 +73,6 @@ defmodule StarknetExplorer.BlockUtils do
end
end

def format_hex_for_display(hex) do
case Integer.parse(hex |> String.replace_prefix("0x", ""), 16) do
{decimal, _} -> (decimal / :math.pow(10, 18)) |> :erlang.float_to_binary([{:decimals, 18}])
:error -> "Wrong number formatting"
end
end

def calculate_gateway_block_steps(_gateway_block = %{"transaction_receipts" => receipts}) do
receipts
|> get_steps_from_gateway_receipts
Expand Down
150 changes: 128 additions & 22 deletions lib/starknet_explorer_web/live/message_live.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,18 +10,62 @@ defmodule StarknetExplorerWeb.MessageDetailLive do
flash: @flash,
session: %{"network" => @network}
) %>
<div class="max-w-7xl mx-auto bg-container p-4 md:p-6 rounded-md">
<%= render_info(assigns) %>
</div>
"""
end

def render_info(assigns) do
~H"""
<div
id="dropdown"
class="dropdown relative bg-[#232331] p-5 mb-5 rounded-md lg:hidden"
phx-hook="Dropdown"
>
<span class="absolute inset-y-0 right-5 transform translate-1/2 flex items-center">
<img class="transform rotate-90 w-5 h-5" src={~p"/images/dropdown.svg"} />
</span>
</div>
<div class="options hidden"></div>
<div class="max-w-7xl mx-auto bg-container p-4 md:p-6 rounded-md">
<div class="flex flex-col lg:flex-row gap-2 items-baseline pb-5">
<h2>Message</h2>
<div class="flex flex-col md:flex-row justify-between mb-5 lg:mb-0">
<div class="font-semibold">
<%= @message.message_hash %>
<h3>Message <%= @message.message_hash %></h3>
</div>
<div class="text-gray-400">
<%= @message.timestamp
|> DateTime.from_unix()
|> then(fn {:ok, time} -> time end)
|> Calendar.strftime("%c") %> UTC
</div>
</div>
<div class="flex flex-col lg:flex-row gap-2 items-baseline pb-5"></div>
<div class="grid-4 custom-list-item">
<div class="block-label !mt-0">Message Hash</div>
<div class="col-span-3">
<%= @message.message_hash |> Utils.shorten_block_hash() %>
<div
class="copy-container col-span-3 text-hover-blue"
id={"copy-block-hash-#{@message.message_hash}"}
phx-hook="Copy"
>
<div class="relative">
<div class="col-span-3">
<%= @message.message_hash %>
<div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={@message.message_hash}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-4 custom-list-item">
Expand All @@ -40,37 +84,88 @@ defmodule StarknetExplorerWeb.MessageDetailLive do
</div>
<div class="grid-4 custom-list-item">
<div class="block-label !mt-0">Transaction Hash</div>
<div class="col-span-3">
<%= @message.transaction_hash %>
<div
class="copy-container col-span-3 text-hover-blue"
id={"copy-block-hash-#{@message.message_hash}"}
phx-hook="Copy"
>
<div class="relative">
<div class="col-span-3">
<%= live_redirect(@message.transaction_hash,
to: ~p"/#{@network}/transactions/#{@message.transaction_hash}"
) %>
<div class="absolute top-1/2 -right-6 tranform -translate-y-1/2">
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={@message.transaction_hash}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-4 custom-list-item">
<div class="block-label !mt-0">Timestamp</div>
<div class="col-span-3"><%= Utils.get_block_age_from_timestamp(@message.timestamp) %></div>
</div>
<%= if !Message.is_l2_to_l1(@message.type) do %>
<div class="custom-list-item grid-4 w-full">
<div class="custom-list-item grid-4 w-full !border-none">
<div class="block-label !mt-0">L2 Selector</div>
</div>
<div>
<%= @message.selector %>
</div>
</div>
<div class="custom-list-item grid-4 w-full">
<div class="custom-list-item grid-4 w-full !border-none">
<div class="block-label !mt-0">Nonce</div>
</div>
<div>
<span class="pink-label">
<%= @message.nonce %>
</span>
</div>
</div>
<% end %>
<div class="custom-list-item">
<div class="block-label !mt-0">Message Details</div>
<div class="bg-black/10 p-5">
<div class="custom-list-item grid-4 w-full !border-none">
<div class="block-label !mt-0">From Contract Address</div>
<div>
<%= if Message.is_l2_to_l1(@message.type) do %>
<div class="block-label !mt-0">From L2 Contract Address</div>
<% else %>
<div class="block-label !mt-0">From L1 Contract Address</div>
<% end %>
<div
class="copy-container col-span-3 text-hover-blue"
id={"copy-block-hash-#{@message.to_address}"}
phx-hook="Copy"
>
<%= @message.from_address %>
</div>
<div class="relative">
<img
class="copy-btn copy-text w-4 h-4"
src={~p"/images/copy.svg"}
data-text={@message.from_address}
/>
<img
class="copy-check absolute top-0 left-0 w-4 h-4 opacity-0 pointer-events-none"
src={~p"/images/check-square.svg"}
/>
</div>
</div>
<div class="custom-list-item grid-4 w-full">
<div class="block-label !mt-0">To Contract Address</div>
<div>
<div class="custom-list-item grid-4 w-full !border-none">
<%= if Message.is_l2_to_l1(@message.type) do %>
<div class="block-label !mt-0">To L1 Contract Address</div>
<% else %>
<div class="block-label !mt-0">To L2 Contract Address</div>
<% end %>
</div>
<div
class="copy-container col-span-3 text-hover-blue"
id={"copy-block-hash-#{@message.to_address}"}
phx-hook="Copy"
>
<%= @message.to_address %>
</div>
</div>
Expand Down Expand Up @@ -108,6 +203,17 @@ defmodule StarknetExplorerWeb.MessageDetailLive do
def mount(_params = %{"identifier" => hash}, _session, socket) do
message = Message.get_by_hash(hash, socket.assigns.network)

message =
case Message.is_l2_to_l1(message) do
false ->
tx = StarknetExplorer.Transaction.get_by_hash(message.transaction_hash)
decimal_nonce = tx.nonce |> String.replace("0x", "") |> String.to_integer(16)
message |> Map.put(:selector, tx.entry_point_selector) |> Map.put(:nonce, decimal_nonce)

_ ->
message
end

assigns = [
message: message
]
Expand Down
2 changes: 1 addition & 1 deletion lib/starknet_explorer_web/live/pages/block_detail.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ defmodule StarknetExplorerWeb.BlockDetailLive do
case Gateway.fetch_block(socket.assigns.block.number, socket.assigns.network) do
{:ok, block = %{"gas_price" => gas_price}} ->
execution_resources = BlockUtils.calculate_gateway_block_steps(block)
gas_price = BlockUtils.format_hex_for_display(gas_price)
gas_price = Utils.hex_wei_to_eth(gas_price)

{gas_price, execution_resources}

Expand Down
36 changes: 24 additions & 12 deletions lib/starknet_explorer_web/live/transaction_live.ex
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
defmodule StarknetExplorerWeb.TransactionLive do
alias StarknetExplorer.BlockUtils
use StarknetExplorerWeb, :live_view
alias StarknetExplorerWeb.Utils
alias StarknetExplorer.Data
Expand Down Expand Up @@ -457,17 +456,22 @@ defmodule StarknetExplorerWeb.TransactionLive do
</span>
</div>
</div>
<div class="grid-4 custom-list-item">
<div class="block-label">Max Fee</div>
<div class="col-span-3">
<span class="text-se-cash-green rounded-full px-4 py-1">
<%= @transaction.max_fee %> ETH
</span>
<%= if @transaction.sender_address do %>
<div class="grid-4 custom-list-item">
<div class="block-label">Max Fee</div>
<div class="col-span-3">
<span class="text-se-cash-green green-label rounded-full px-4 py-1">
<%= @transaction.max_fee %> ETH
</span>
</div>
</div>
</div>
<% end %>
<div class="grid-4 custom-list-item">
<div class="block-label">Nonce</div>
<div class="col-span-3"><%= @transaction.nonce %></div>
<div class="col-span-3">
<%= @transaction.nonce |> String.replace("0x", "") |> String.to_integer(16) %>
</div>
</div>
<div class="custom-list-item">
<div class="mb-5 text-gray-500 md:text-white !flex-row gap-2">
Expand Down Expand Up @@ -582,11 +586,19 @@ defmodule StarknetExplorerWeb.TransactionLive do
|> Enum.reject(&is_nil/1)

# change fee formatting
actual_fee = BlockUtils.format_hex_for_display(transaction.receipt.actual_fee)
max_fee = BlockUtils.format_hex_for_display(transaction.max_fee)
actual_fee = Utils.hex_wei_to_eth(transaction.receipt.actual_fee)

transaction =
case transaction.type do
"L1_HANDLER" ->
max_fee = Utils.hex_wei_to_eth(transaction.max_fee)
transaction |> Map.put(:max_fee, max_fee)

_ ->
transaction
end

receipt = transaction.receipt |> Map.put(:actual_fee, actual_fee)
transaction = transaction |> Map.put(:max_fee, max_fee)

assigns = [
transaction: transaction,
Expand Down

0 comments on commit d5e25c4

Please sign in to comment.