From 7dc32c7dc30ccdaa2970d7d5ca4b971eee4cdf25 Mon Sep 17 00:00:00 2001 From: katibest Date: Tue, 31 Jul 2018 15:52:05 -0400 Subject: [PATCH] Updated transaction tiles throughout the site --- .../assets/css/components/_tile.scss | 14 +- .../_internal_transaction.html.eex | 16 +- .../index.html.eex | 29 ++-- .../address_transaction/_transaction.html.eex | 145 ++++++++---------- .../address_transaction/index.html.eex | 27 ++-- .../templates/block/overview.html.eex | 53 ++++--- .../templates/chain/_block.html.eex | 2 +- .../pending_transaction/index.html.eex | 21 ++- .../templates/transaction/_link.html.eex | 2 +- .../templates/transaction/_tile.html.eex | 36 +++-- .../templates/transaction/overview.html.eex | 66 ++++---- .../_internal_transaction.html.eex | 4 +- .../views/address_transaction_view.ex | 20 +-- .../explorer_web/views/transaction_view.ex | 10 +- 14 files changed, 219 insertions(+), 226 deletions(-) diff --git a/apps/explorer_web/assets/css/components/_tile.scss b/apps/explorer_web/assets/css/components/_tile.scss index 19a1ade3a7..e483fb71b5 100644 --- a/apps/explorer_web/assets/css/components/_tile.scss +++ b/apps/explorer_web/assets/css/components/_tile.scss @@ -85,12 +85,16 @@ } } } +} + +.tile-title { + font-size: 12px; + font-weight: 600; + color: $gray-700; + margin-bottom: 0; - .tile-title { - font-size: 14px; - font-weight: 600; - color: $gray-700; - margin-bottom: 0; + &-hash { + font-weight: 300; } } diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex index 52465d05a5..f2d04fc656 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/_internal_transaction.html.eex @@ -1,9 +1,9 @@
-
-
+
+
<%= gettext("Internal Transaction") %>
-
+
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @internal_transaction.transaction_hash %> <%= if @address.hash == @internal_transaction.from_address_hash do %> @@ -18,16 +18,16 @@ <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.InternalTransactionView.to_address_hash(@internal_transaction), contract: ExplorerWeb.AddressView.contract?(@internal_transaction.to_address), locale: @locale %> <% end %> + + <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %> + +
+
<%= if @address.hash == @internal_transaction.from_address_hash do %> <%= gettext "OUT" %> <% else %> <%= gettext "IN" %> <% end %>
-
- - <%= ExplorerWeb.TransactionView.value(@internal_transaction, include_label: false) %> <%= gettext "Ether" %> - -
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex index ac59c248ac..c3052a80b6 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_internal_transaction/index.html.eex @@ -126,20 +126,23 @@ <%= gettext "There are no internal transactions for this address." %>
<% end %> +
+ <%= if @next_page_params do %> + <%= link( + gettext("Older"), + class: "button button--secondary button--sm float-right", + to: address_internal_transaction_path( + @conn, + :index, + @conn.assigns.locale, + @address, + @next_page_params + ) + ) %> + <% end %> +
- <%= if @next_page_params do %> - <%= link( - gettext("Older"), - class: "button button--secondary button--sm u-float-right mt-3", - to: address_internal_transaction_path( - @conn, - :index, - @conn.assigns.locale, - @address, - @next_page_params - ) - ) %> - <% end %> + diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex index fb0976c525..ffba5177dd 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/_transaction.html.eex @@ -1,69 +1,64 @@
-
-
- - <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> - - - <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %> - -
-
+
+ + <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> + -
+ + <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %> + +
+
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> + + <%= if @address.hash == @transaction.from_address_hash do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address) %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %> + <% end %> - <%= if Enum.empty?(@transaction.token_transfers) || transfered_value?(@transaction.value) do %> - - <%= if @address.hash == @transaction.from_address_hash do %> - <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address) %> - <% else %> - <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %> - <% end %> + → - → - - <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %> - <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %> - <% else %> - <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %> - <% end %> + <%= if @address.hash == ExplorerWeb.TransactionView.to_address_hash(@transaction) do %> + <%= render ExplorerWeb.AddressView, "_responsive_hash.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address) %> + <% else %> + <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %> + <% end %> + + + + <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %> - - - <%= if @transaction.from_address_hash == @address.hash || @transaction.to_address_hash == @address.hash do %> - <%= if @transaction.from_address_hash == @address.hash do %> - - <%= gettext "OUT" %> - - <% else %> - - <%= gettext "IN" %> - - <% end %> + + <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %> + + +
+
+ + <%= link( + gettext("Block #%{number}", number: to_string(@transaction.block.number)), + to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) + ) %> + + + <%= if transaction_from_or_to_current_address?(@transaction, @address.hash) do %> + + <%= if @transaction.from_address_hash == @address.hash do %> + + <%= gettext "OUT" %> + + <% else %> + + <%= gettext "IN" %> + <% end %> - - - <%= link( - gettext("Block #%{number}", number: to_string(@transaction.block.number)), - to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) - ) %> - <% end %>
- <%= if Enum.empty?(@transaction.token_transfers) || transfered_value?(@transaction.value) do %> -
- - <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %> - - <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %> -
- <% end %> - - <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) && transfered_value?(@transaction.value) do %> + <%= if ExplorerWeb.TransactionView.involves_token_transfers?(@transaction) do %>

<%= gettext "Transfers" %>

@@ -71,8 +66,8 @@ <% end %> <%= for token_transfer <- @transaction.token_transfers do %> -
- +
+ <%= ExplorerWeb.AddressView.display_address_hash(@address, token_transfer.from_address, @locale) %> @@ -81,38 +76,22 @@ <%= ExplorerWeb.AddressView.display_address_hash(@address, token_transfer.to_address, @locale) %> -
-
<%= formatted_token_amount(token_transfer.amount, token_transfer.token.decimals) %> <%= token_transfer.token.symbol %>
- <% end %> - - <%= if Enum.any?(@transaction.token_transfers) && !transfered_value?(@transaction.value) do %> -
- - <%= if !address_sending_and_receiving_tokens?(@transaction, @address.hash) do %> - <%= if address_sending_tokens?(@transaction, @address.hash) do %> - - <%= gettext "OUT" %> - - <% else %> - <%= if address_receiving_tokens?(@transaction, @address.hash) do %> - - <%= gettext "IN" %> - - <% end %> - <% end %> +
+ <%= if token_transfer.from_address_hash == @address.hash || token_transfer.to_address_hash == @address.hash do %> + <%= if token_transfer.from_address_hash == @address.hash do %> + + <%= gettext "OUT" %> + + <% else %> + + <%= gettext "IN" %> + <% end %> - - - <%= link( - gettext("Block #%{number}", number: to_string(@transaction.block.number)), - to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) - ) %> - - + <% end %>
<% end %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex index 409f4500ca..04294fc7fd 100644 --- a/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/address_transaction/index.html.eex @@ -139,20 +139,21 @@ <%= gettext "There are no transactions for this address." %>
<% end %> + + <%= if @next_page_params do %> + <%= link( + gettext("Older"), + class: "button button--secondary button--sm float-right", + to: address_transaction_path( + @conn, + :index, + @conn.assigns.locale, + @address, + @next_page_params + ) + ) %> + <% end %>
- <%= if @next_page_params do %> - <%= link( - gettext("Older"), - class: "button button--secondary button--sm u-float-right mt-3", - to: address_transaction_path( - @conn, - :index, - @conn.assigns.locale, - @address, - @next_page_params - ) - ) %> - <% end %> diff --git a/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex index 04e46c808f..a3e93ad1c7 100644 --- a/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/block/overview.html.eex @@ -1,6 +1,6 @@
-
+
@@ -63,33 +63,38 @@
-
+
+
+
-
-
-

<%= gettext "Miner" %>

-
- - -

<%= link @block.miner, class: "text-white", to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %>

- - +
+
+

<%= gettext "Miner" %>

+
+ + +

<%= link @block.miner, class: "text-white", to: address_path(ExplorerWeb.Endpoint, :show, @locale, @block.miner) %>

+ + +
+
-
- +
-
-
-

<%= gettext "Gas Used" %>

-
- -

- <%= @block.gas_used |> Cldr.Number.to_string! %> - (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) -

- - <%= @block.gas_limit |> Cldr.Number.to_string! %> <%= gettext "Gas Limit" %> +
+
+

<%= gettext "Gas Used" %>

+
+ +

+ <%= @block.gas_used |> Cldr.Number.to_string! %> + (<%= (@block.gas_used / @block.gas_limit) |> Cldr.Number.to_string!(format: "#.#%") %>) +

+ + <%= @block.gas_limit |> Cldr.Number.to_string! %> <%= gettext "Gas Limit" %> +
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex b/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex index 88cbe9d301..062f5ce51b 100644 --- a/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex @@ -1,4 +1,4 @@ -
+
<%= link(@block, to: block_path(ExplorerWeb.Endpoint, :show, @locale, @block), class: "tile-title") %>
diff --git a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex index 72bd5e74d9..065c474452 100644 --- a/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/pending_transaction/index.html.eex @@ -48,14 +48,12 @@ <%= for transaction <- @transactions do %>
-
-
-
- <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %> -
<%= ExplorerWeb.TransactionView.formatted_status(transaction) %>
-
+
+
+ <%= ExplorerWeb.TransactionView.transaction_display_type(transaction) %> +
<%= ExplorerWeb.TransactionView.formatted_status(transaction) %>
-
+
<%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: transaction.hash %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(transaction.from_address), locale: @locale %> @@ -66,10 +64,11 @@ <%= gettext("Contract Address Pending") %> <% end %> -
-
- <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %> - <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether) %> <%= gettext "Fee" %> + + <%= ExplorerWeb.TransactionView.value(transaction, include_label: false) %> <%= gettext "Ether" %> + <%= ExplorerWeb.TransactionView.formatted_fee(transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %> + +
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex index 4f11057907..bfb290ccfd 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/_link.html.eex @@ -1,4 +1,4 @@ <%= link(@transaction_hash, to: transaction_path(ExplorerWeb.Endpoint, :show, @locale, @transaction_hash), "data-test": "transaction_hash_link", - "class": "tile-title text-truncate") %> + "class": "text-truncate") %> diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex index c2b5dd41aa..d34a38f318 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex @@ -1,31 +1,35 @@
-
- <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> -
<%= ExplorerWeb.TransactionView.formatted_status(@transaction) %>
+
+ + <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %> + +
+ <%= ExplorerWeb.TransactionView.formatted_status(@transaction) %> +
-
- <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> +
+ <%= render ExplorerWeb.TransactionView, "_link.html", locale: @locale, transaction_hash: @transaction.hash %> <%= render ExplorerWeb.AddressView, "_link.html", address_hash: @transaction.from_address_hash, contract: ExplorerWeb.AddressView.contract?(@transaction.from_address), locale: @locale %> → <%= render ExplorerWeb.AddressView, "_link.html", address_hash: ExplorerWeb.TransactionView.to_address_hash(@transaction), contract: ExplorerWeb.AddressView.contract?(@transaction.to_address), locale: @locale %> - - - - <%= link( - gettext("Block #%{number}", number: to_string(@transaction.block.number)), - to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) - ) %> + + + <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %> + <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether, include_label: false) %> <%= gettext "TX Fee" %>
-
- - <%= ExplorerWeb.TransactionView.value(@transaction, include_label: false) %> <%= gettext "Ether" %> +
+ + <%= link( + gettext("Block #%{number}", number: to_string(@transaction.block.number)), + to: block_path(ExplorerWeb.Endpoint, :show, @locale, @transaction.block) + ) %> - <%= ExplorerWeb.TransactionView.formatted_fee(@transaction, denomination: :ether) %> <%= gettext "Fee" %> +
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex index ba86f5a7bb..6e6749ef85 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction/overview.html.eex @@ -1,8 +1,8 @@ <% block = @transaction.block %>
-
- +
+

<%= gettext "Transaction Details" %>

@@ -74,36 +74,44 @@
- -
-
-
-

<%= gettext "Ether" %> <%= gettext "Value" %>

-
-

<%= value(@transaction) %>

- <%= formatted_usd_value(@transaction, @exchange_rate) %> + +
+
+
+ +
+
+

<%= gettext "Ether" %> <%= gettext "Value" %>

+
+

<%= value(@transaction) %>

+ <%= formatted_usd_value(@transaction, @exchange_rate) %> +
+
-
- -
-
-

<%= gettext "Gas" %>

-
- -

- - <%= gettext "Used" %> - <%= gas_used(@transaction) %> @ - <%= gas_price(@transaction, :gwei) %> - -

- - - <%= gettext "Limit" %> - <%= format_gas_limit(@transaction.gas) %> - +
+ +
+
+

<%= gettext "Gas" %>

+
+ +

+ + <%= gettext "Used" %> + <%= gas_used(@transaction) %> @ + <%= gas_price(@transaction, :gwei) %> + +

+ + + <%= gettext "Limit" %> + <%= format_gas_limit(@transaction.gas) %> + +
+
+
diff --git a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex index 7ea087e986..4a0151286a 100644 --- a/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex +++ b/apps/explorer_web/lib/explorer_web/templates/transaction_internal_transaction/_internal_transaction.html.eex @@ -1,6 +1,6 @@
-
-
+
+
<%= gettext("Internal Transaction") %>
diff --git a/apps/explorer_web/lib/explorer_web/views/address_transaction_view.ex b/apps/explorer_web/lib/explorer_web/views/address_transaction_view.ex index aa37288515..e24baf4c1c 100644 --- a/apps/explorer_web/lib/explorer_web/views/address_transaction_view.ex +++ b/apps/explorer_web/lib/explorer_web/views/address_transaction_view.ex @@ -14,22 +14,6 @@ defmodule ExplorerWeb.AddressTransactionView do end end - def address_sending_and_receiving_tokens?(%Transaction{} = transaction, address_hash) do - address_receiving_tokens?(transaction, address_hash) && address_sending_tokens?(transaction, address_hash) - end - - def address_receiving_tokens?(%Transaction{token_transfers: token_transfers}, address_hash) do - Enum.any?(token_transfers, &(&1.to_address_hash == address_hash)) - end - - def address_sending_tokens?(%Transaction{token_transfers: token_transfers}, address_hash) do - Enum.any?(token_transfers, &(&1.from_address_hash == address_hash)) - end - - def transfered_value?(%Explorer.Chain.Wei{value: value}) do - Decimal.to_integer(value) != 0 - end - @doc """ Formats the given amount according to given decimals. @@ -52,4 +36,8 @@ defmodule ExplorerWeb.AddressTransactionView do |> Decimal.reduce() |> Decimal.to_string(:normal) end + + def transaction_from_or_to_current_address?(%Transaction{} = transaction, address_hash) do + transaction.from_address_hash == address_hash || transaction.to_address_hash == address_hash + end end diff --git a/apps/explorer_web/lib/explorer_web/views/transaction_view.ex b/apps/explorer_web/lib/explorer_web/views/transaction_view.ex index 3c264dd291..8fcd8215b4 100644 --- a/apps/explorer_web/lib/explorer_web/views/transaction_view.ex +++ b/apps/explorer_web/lib/explorer_web/views/transaction_view.ex @@ -132,10 +132,6 @@ defmodule ExplorerWeb.TransactionView do format_wei_value(value, :ether, include_unit_label: include_label?) end - defp fee_to_currency({fee_type, fee}, denomination: denomination) do - {fee_type, format_wei_value(Wei.from(fee, :wei), denomination)} - end - defp fee_to_currency({fee_type, fee}, exchange_rate: %Token{} = exchange_rate) do formatted = fee @@ -145,4 +141,10 @@ defmodule ExplorerWeb.TransactionView do {fee_type, formatted} end + + defp fee_to_currency({fee_type, fee}, opts) do + denomination = Keyword.get(opts, :denomination) + include_label? = Keyword.get(opts, :include_label, true) + {fee_type, format_wei_value(Wei.from(fee, :wei), denomination, include_unit_label: include_label?)} + end end