@ -0,0 +1,189 @@ |
||||
.verify-other-explorers { |
||||
display: flex; |
||||
margin-top: 26px; |
||||
flex-direction: column; |
||||
flex-wrap: wrap; |
||||
@media (min-width: 768px) { |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
flex-wrap: nowrap; |
||||
} |
||||
h2 { |
||||
color: #a3a9b5; |
||||
font-size: 12px; |
||||
font-weight: 400; |
||||
line-height: 1.25; |
||||
display: inline-flex; |
||||
margin-bottom: 12px; |
||||
@media (min-width: 1200px) { |
||||
margin-right: 10px; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-row { |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex-grow: 2; |
||||
@media (min-width: 768px) { |
||||
flex-direction: row; |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-elem { |
||||
display: inline-flex; |
||||
border: 1px solid #e2e5ec; |
||||
border-radius: 2px; |
||||
flex-grow: 2; |
||||
@media (min-width: 768px) { |
||||
margin-top: 0; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
min-width: 145px; |
||||
} |
||||
& + .verify-other-explorers-elem { |
||||
margin-top: 10px; |
||||
@media (min-width: 768px) { |
||||
margin-top: 0; |
||||
margin-left: 10px; |
||||
} |
||||
} |
||||
|
||||
.exp-logo { |
||||
min-width: 34px; |
||||
border-right: 1px solid #e2e5ec; |
||||
background-repeat: no-repeat; |
||||
background-position: center; |
||||
&.etherscan { |
||||
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px); |
||||
background-image: url("/images/icons/etherscan.png"); |
||||
background-size: 15px 16px; |
||||
} |
||||
&.blockchair { |
||||
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px); |
||||
background-image: url("/images/icons/blockchair.png"); |
||||
background-size: 10px 16px; |
||||
} |
||||
&.etherchain { |
||||
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px); |
||||
background-image: url("/images/icons/etherchain.png"); |
||||
background-size: 16px 16px; |
||||
} |
||||
} |
||||
|
||||
.exp-content { |
||||
padding: 6px 9px 4px 9px; |
||||
h3, div { |
||||
font-size: 10px; |
||||
line-height: 1; |
||||
} |
||||
h3 { |
||||
color: #333; |
||||
font-weight: 400; |
||||
margin-bottom: 0; |
||||
margin-bottom: 1px; |
||||
} |
||||
div { |
||||
color: #49a2ee; |
||||
display: block; |
||||
line-height: 1; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
width: 170px; |
||||
white-space: nowrap; |
||||
@media (min-width: 576px) { |
||||
width: 398px; |
||||
} |
||||
@media (min-width: 768px) { |
||||
width: 130px; |
||||
} |
||||
@media (min-width: 992px) { |
||||
width: 90px; |
||||
} |
||||
@media (min-width: 1200px) { |
||||
width: 93px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-more { |
||||
min-width: 34px; |
||||
height: 34px; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border: 1px solid $secondary; |
||||
border-radius: 2px; |
||||
margin-top: 10px; |
||||
transition: .1s ease-in; |
||||
@media (min-width: 768px) { |
||||
margin-left: 10px; |
||||
margin-top: 0; |
||||
} |
||||
svg path { |
||||
fill: $secondary; |
||||
} |
||||
&:hover { |
||||
background-color: $secondary; |
||||
svg path { |
||||
fill: #fff; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.verify-other-explorers-dialog { |
||||
max-width: 330px; |
||||
} |
||||
|
||||
.verify-other-explorers-table { |
||||
display: table; |
||||
} |
||||
|
||||
.verify-other-explorers-modal-row { |
||||
display: table-row; |
||||
height: 29px; |
||||
} |
||||
|
||||
.verify-other-explorers-cell { |
||||
display: table-cell; |
||||
&.left { |
||||
min-width: 120px; |
||||
} |
||||
} |
||||
|
||||
.link { |
||||
background-image: url("/images/icons/link.svg"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 15px; |
||||
background-size: 12px 12px; |
||||
} |
||||
|
||||
.etherscan-logo { |
||||
@include image-2x('/images/icons/etherscan@2x.png', 15px, 16px); |
||||
background-image: url("/images/icons/etherscan.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 15px 16px; |
||||
} |
||||
|
||||
.blockchair-logo { |
||||
@include image-2x('/images/icons/blockchair@2x.png', 10px, 16px); |
||||
background-image: url("/images/icons/blockchair.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 10px 16px; |
||||
background-position: left 3px center; |
||||
} |
||||
|
||||
.etherchain-logo { |
||||
@include image-2x('/images/icons/etherchain@2x.png', 16px, 16px); |
||||
background-image: url("/images/icons/etherchain.png"); |
||||
background-repeat: no-repeat; |
||||
padding-left: 25px; |
||||
background-size: 16px 16px; |
||||
} |
After Width: | Height: | Size: 18 KiB |
After Width: | Height: | Size: 20 KiB |
After Width: | Height: | Size: 1.2 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 1.8 KiB |
After Width: | Height: | Size: 3.4 KiB |
After Width: | Height: | Size: 708 B |
@ -0,0 +1,15 @@ |
||||
<%= if @type=="address" do %> |
||||
<a href="<%= address_link_to_other_explorer(@address_link, @hash ,true) %>" class="verify-other-explorers-elem"> |
||||
<% else %> |
||||
<a href="<%= address_link_to_other_explorer(@tx_link, @hash ,true) %>" class="verify-other-explorers-elem"> |
||||
<% end %> |
||||
<div class="exp-logo <%= @class %>"></div> |
||||
<div class="exp-content"> |
||||
<h3><%= @header %></h3> |
||||
<%= if @type=="address" do %> |
||||
<div><%= address_link_to_other_explorer(@address_link, @hash ,true) %></div> |
||||
<% else %> |
||||
<div><%= address_link_to_other_explorer(@tx_link, @hash ,true) %></div> |
||||
<% end %> |
||||
</div> |
||||
</a> |
@ -0,0 +1,22 @@ |
||||
<div class="verify-other-explorers-modal-row"> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class="etherscan-logo"> |
||||
<%= @header %> |
||||
</span> |
||||
</div> |
||||
<div class="verify-other-explorers-cell"> |
||||
<span class='link'> |
||||
<%= if @type=="address" do %> |
||||
<%= link( |
||||
address_link_to_other_explorer(@address_link, @hash, false), |
||||
to: address_link_to_other_explorer(@address_link, @hash ,true) |
||||
) %> |
||||
<% else %> |
||||
<%= link( |
||||
address_link_to_other_explorer(@tx_link, @hash, false), |
||||
to: address_link_to_other_explorer(@tx_link, @hash ,true) |
||||
) %> |
||||
<% end %> |
||||
</span> |
||||
</div> |
||||
</div> |
@ -0,0 +1,37 @@ |
||||
<div> |
||||
|
||||
<div class="verify-other-explorers"> |
||||
<h2>Verify with other Explorers:</h2> |
||||
<div class="verify-other-explorers-row"> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Etherscan.io", class: "etherscan", address_link: "https://etherscan.io/address/", tx_link: "https://etherscan.io/tx/" %> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Blockchair.com", class: "blockchair", address_link: "https://blockchair.com/ethereum/address/", tx_link: "https://blockchair.com/ethereum/transaction/" %> |
||||
<%= render "_verify_other_explorer.html", hash: @hash, type: @type, header: "Etherchain.org", class: "etherchain", address_link: "https://www.etherchain.org/account/", tx_link: "https://www.etherchain.org/tx/" %> |
||||
<a href="#" class="verify-other-explorers-more" data-toggle="modal" data-target="#explorersModal"> |
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="4"> |
||||
<path fill="#49A2EE" fill-rule="evenodd" d="M16 4a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 4zM9 4A2 2 0 1 1 8.999.001 2 2 0 0 1 9 4zM2 4A2 2 0 1 1 1.999.001 2 2 0 0 1 2 4z"/> |
||||
</svg> |
||||
</a> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="modal fade" tabindex="-1" role="dialog" id="explorersModal"> |
||||
<div class="modal-dialog verify-other-explorers-dialog" role="document"> |
||||
<div class="modal-content"> |
||||
<div class="modal-header"> |
||||
<h5 class="modal-title">Verify with other Explorers</h5> |
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> |
||||
<span aria-hidden="true">×</span> |
||||
</button> |
||||
</div> |
||||
<div class="modal-body"> |
||||
<div class="verify-other-explorers-table"> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Etherscan.io", class: "etherscan", address_link: "https://etherscan.io/address/", tx_link: "https://etherscan.io/tx/" %> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Blockchair.com", class: "blockchair", address_link: "https://blockchair.com/ethereum/address/", tx_link: "https://blockchair.com/ethereum/transaction/" %> |
||||
<%= render "_verify_other_explorer_modal.html", hash: @hash, type: @type, header: "Etherchain.org", class: "etherchain", address_link: "https://www.etherchain.org/account/", tx_link: "https://www.etherchain.org/tx/" %> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
@ -0,0 +1,123 @@ |
||||
<div data-test="transaction_log" class="tile tile-muted"> |
||||
<dl class="row"> |
||||
<dt class="col-md-1"> <%= gettext "Address" %> </dt> |
||||
<dd class="col-md-11"> |
||||
<h3 class=""> |
||||
<%= link( |
||||
@log.address, |
||||
to: address_path(@conn, :show, @log.address), |
||||
"data-test": "log_address_link", |
||||
"data-address-hash": @log.address |
||||
) %> |
||||
</h3> |
||||
</dd> |
||||
<dt class="col-md-1"><%= gettext "Decoded" %></dt> |
||||
<dd class="col-md-11"> |
||||
<%= case decode(@log, @transaction) do %> |
||||
<% {:error, :contract_not_verified} -> %> |
||||
<div class="alert alert-info"> |
||||
<%= gettext "To see decoded input data, the contract must be verified." %> |
||||
<%= case @transaction do %> |
||||
<% %{to_address: %{hash: hash}} -> %> |
||||
<%= gettext "Verify the contract " %><a href="<%= address_verify_contract_path(@conn, :new, hash)%>"><%= gettext "here" %></a> |
||||
<% _ -> %> |
||||
<%= nil %> |
||||
<% end %> |
||||
</div> |
||||
<% {:error, :could_not_decode} -> %> |
||||
<div class="alert alert-danger"> |
||||
<%= gettext "Failed to decode log data." %> |
||||
</div> |
||||
<% {:ok, method_id, text, mapping} -> %> |
||||
<table summary="Transaction Info" class="table thead-light table-bordered transaction-input-table"> |
||||
<tr> |
||||
<td>Method Id</td> |
||||
<td colspan="3"><code>0x<%= method_id %></code></td> |
||||
</tr> |
||||
<tr> |
||||
<td>Call</td> |
||||
<td colspan="3"><code><%= text %></code></td> |
||||
</tr> |
||||
</table> |
||||
<table style="color: black;" summary="<%= gettext "Log Data" %>" class="table thead-light table-bordered table-responsive"> |
||||
<tr> |
||||
<th scope="col"></th> |
||||
<th scope="col"><%= gettext "Name" %></th> |
||||
<th scope="col"><%= gettext "Type" %></th> |
||||
<th scope="col"><%= gettext "Indexed?" %></th> |
||||
<th scope="col"><%= gettext "Data" %></th> |
||||
<tr> |
||||
<%= for {name, type, indexed?, value} <- mapping do %> |
||||
<tr> |
||||
<th scope="row"> |
||||
<%= case BlockScoutWeb.ABIEncodedValueView.copy_text(type, value) do %> |
||||
<% :error -> %> |
||||
<%= nil %> |
||||
<% copy_text -> %> |
||||
<span |
||||
aria-label='<%= gettext "Copy Value" %>' |
||||
class="btn-copy-ico" |
||||
data-clipboard-text="<%= copy_text %>" |
||||
data-placement="top" |
||||
data-toggle="tooltip" |
||||
> |
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.5 32.5" width="32" height="32"> |
||||
<path fill-rule="evenodd" d="M23.5 20.5a1 1 0 0 1-1-1v-9h-9a1 1 0 0 1 0-2h10a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zm-3-7v10a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-10a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1zm-2 1h-8v8h8v-8z"/> |
||||
</svg> |
||||
</span> |
||||
<% end %> |
||||
</th> |
||||
<td><%= name %></td> |
||||
<td><%= type %></td> |
||||
<td><%= indexed? %></td> |
||||
<td> |
||||
<pre class="transaction-input-text tile"><code><%= BlockScoutWeb.ABIEncodedValueView.value_html(type, value) %></code></pre> |
||||
</td> |
||||
</tr> |
||||
<% end %> |
||||
</table> |
||||
<% _ -> %> |
||||
<%= nil %> |
||||
<% end %> |
||||
|
||||
<dt class="col-md-1"><%= gettext "Topics" %></dt> |
||||
<dd class="col-md-11"> |
||||
<div class="raw-transaction-log-topics"> |
||||
<%= unless is_nil(@log.first_topic) do %> |
||||
<div class="text-dark"> |
||||
<span class="text-dark">[0]</span> |
||||
<%= @log.first_topic %> |
||||
</div> |
||||
<% end %> |
||||
<%= unless is_nil(@log.second_topic) do %> |
||||
<div class="text-dark"> |
||||
<span class="">[1] </span> |
||||
<%= @log.second_topic %> |
||||
</div> |
||||
<% end %> |
||||
<%= unless is_nil(@log.third_topic) do %> |
||||
<div class="text-dark"> |
||||
<span>[2]</span> |
||||
<%= @log.third_topic %> |
||||
</div> |
||||
<% end %> |
||||
<%= unless is_nil(@log.fourth_topic) do %> |
||||
<div class="text-dark"> |
||||
<span>[3]</span> |
||||
<%= @log.fourth_topic %> |
||||
</div> |
||||
<% end %> |
||||
</div> |
||||
</dd> |
||||
<dt class="col-md-1"> |
||||
<%= gettext "Data" %> |
||||
</dt> |
||||
<dd class="col-md-11"> |
||||
<%= unless is_nil(@log.data) do %> |
||||
<div class="text-dark raw-transaction-log-data"> |
||||
<%= @log.data %> |
||||
</div> |
||||
<% end %> |
||||
</dd> |
||||
</dl> |
||||
</div> |