feat: decode transaction input on overview

NFT42 · Nov 8, 2018 · dd5dec4 · dd5dec4
1 parent b5844f4
commit dd5dec4
Show file tree

Hide file tree

Showing 16 changed files with 325 additions and 63 deletions.
diff --git a/apps/block_scout_web/assets/css/app.scss b/apps/block_scout_web/assets/css/app.scss
@@ -81,6 +81,7 @@ $fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
 @import "components/token_tile_view_more";
 @import "components/dropdown";
 @import "components/loading-spinner";
+@import "components/transaction-input";
 
 :export {
   primary: $primary;

diff --git a/apps/block_scout_web/assets/css/components/_transaction-input.scss b/apps/block_scout_web/assets/css/components/_transaction-input.scss
@@ -0,0 +1,9 @@
+.raw-transaction-input{
+    display: none;
+}
+
+.transaction-input-text{
+    resize: vertical;
+    overflow: auto;
+    word-break: break-all;
+}
diff --git a/apps/block_scout_web/assets/js/app.js b/apps/block_scout_web/assets/js/app.js
@@ -44,3 +44,4 @@ import './lib/token_balance_dropdown_search'
 import './lib/token_transfers_toggle'
 import './lib/tooltip'
 import './lib/try_api'
+import './lib/swappable_item'
diff --git a/apps/block_scout_web/assets/js/lib/clipboard_buttons.js b/apps/block_scout_web/assets/js/lib/clipboard_buttons.js
@@ -5,11 +5,14 @@ const clipboard = new ClipboardJS('[data-clipboard-text]')
 
 clipboard.on('success', ({trigger}) => {
   const copyButton = $(trigger)
+  copyButton.tooltip('dispose')
+
   copyButton.tooltip({
     title: 'Copied!',
     trigger: 'click',
     placement: 'top'
   }).tooltip('show')
+
   setTimeout(() => {
     copyButton.tooltip('dispose')
   }, 1000)

diff --git a/apps/block_scout_web/assets/js/lib/swappable_item.js b/apps/block_scout_web/assets/js/lib/swappable_item.js
@@ -0,0 +1,21 @@
+import $ from 'jquery'
+
+const swapItems = (element, event) => {
+  const $element = $(element)
+  const item = $element.parent().closest('[swappable-item]')
+  const next = item.nextAll('[swappable-item]:first')
+
+  item.hide()
+
+  if (next.length) {
+    next.show()
+  } else {
+    item.parent().find('[swappable-item]:first').show()
+  }
+
+  return false
+}
+
+$('[swappable-item] [swapper]').on('click', function (event) {
+  swapItems(this, event)
+})
diff --git a/..._scout_web/lib/block_scout_web/controllers/transaction_internal_transaction_controller.ex b/..._scout_web/lib/block_scout_web/controllers/transaction_internal_transaction_controller.ex
@@ -16,6 +16,7 @@ defmodule BlockScoutWeb.TransactionInternalTransactionController do
                [created_contract_address: :names] => :optional,
                [from_address: :names] => :optional,
                [to_address: :names] => :optional,
+               [to_address: :smart_contract] => :optional,
                :token_transfers => :optional
              }
            ) do

diff --git a/apps/block_scout_web/lib/block_scout_web/controllers/transaction_log_controller.ex b/apps/block_scout_web/lib/block_scout_web/controllers/transaction_log_controller.ex
@@ -16,6 +16,7 @@ defmodule BlockScoutWeb.TransactionLogController do
                [created_contract_address: :names] => :optional,
                [from_address: :names] => :required,
                [to_address: :names] => :optional,
+               [to_address: :smart_contract] => :optional,
                :token_transfers => :optional
              }
            ) do

diff --git a/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex b/apps/block_scout_web/lib/block_scout_web/templates/transaction/overview.html.eex
@@ -76,14 +76,100 @@
 
           <!-- Input -->
           <dl class="row mb-0">
-            <dt class="col-sm-3 text-muted"> <%= gettext "Input" %> </dt>
-            <dd class="col-sm-9">
-              <div class="tile tile-muted">
-                <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0">
-<code><%= @transaction.input %></code>
-                </pre>
+            <%= case decoded_input_data(@transaction) do %>
+              <% {:error, :contract_not_verified} -> %>
+                <dt class="col-sm-3 text-muted"> <%= gettext "Input" %> </dt>
+                <dd class="col-sm-9">
+                  <div class="alert alert-danger">
+                    To see decoded input data, the <a href="<%= address_verify_contract_path(@conn, :new, @transaction.to_address.hash)%>">contract must be verified.</a>
+                  </div>
+                </dd>
+              <% {:error, :could_not_decode} -> %>
+                <dt class="col-sm-3 text-muted"> <%= gettext "Input" %> </dt>
+                <dd class="col-sm-9">
+                  <div class="alert alert-danger">
+                    Failed to decode input data. Some dynamic types are not currently supported.
+                  </div>
+                </dd>
+              <% {:ok, method_id, text, mapping} -> %>
+                <dt class="col-sm-3 text-muted"> <%= gettext "Input" %> </dt>
+                <dd class="col-sm-9">
+                <table summary="Transaction Info" class="table thead-light table-bordered">
+                  <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 summary="Transaction Inputs" class="table thead-light table-bordered table-responsive">
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">Name</th>
+                    <th scope="col">Type</th>
+                    <th scope="col">Data</th>
+                    <th scope="col"></th>
+                  <tr>
+                <%= for {{name, type, value}, index} <- Enum.with_index(mapping) do %>
+                    <tr>
+                      <th scope="row"><%= index %></th>
+                      <td><%= name %></td>
+                      <td><%= type %></td>
+                      <%= case type do %>
+                        <% "address" -> %>
+                          <% address = "0x" <> Base.encode16(value, case: :lower) %>
+                          <td>
+                          <div class="transaction-input-text">
+                            <a href="<%= address_path(@conn, :show, address) %>" target="_blank"> <%= address %> </a>
+                          </div>
+                          </td>
+                          <td>
+                            <button type="button" class="copy" id="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="<%= address %>" aria-label="Copy Value">
+                              <%= gettext "copy"%>
+                            </button>
+                          </td>
+
+                        <% _ -> %>
+                        <td>
+                          <div class="transaction-input-text"><%= value %></textarea>
+                        </td>
+                        <td>
+                          <button type="button" class="copy" id="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="<%= value %>" aria-label="Copy Value">
+                            <%= gettext "copy"%>
+                          </button>
+                        </td>
+                      <% end %>
+                    </tr>
+                <% end %>
+                </table>
+                </dd>
+              <% _ -> %>
+                <%= nil %>
+            <% end %>
+
+            <%= unless @transaction.input.bytes in [<<>>, nil] do %>
+              <dt class="col-sm-3 text-muted"><%= gettext "Raw Input" %></dt>
+              <dd class="col-sm-9">
+              <div swappable-item>
+                <button swapper class="button button-primary"><%= gettext "Show Raw Input"%></button>
               </div>
-            </dd>
+              <div swappable-item class="raw-transaction-input">
+                <button swapper type="button" class="close pr-2" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                <div class="tile tile-muted">
+                  <button type="button" class="copy" id="button" data-toggle="tooltip" data-placement="top" data-clipboard-text="<%= @transaction.input %>" aria-label="Copy Value">
+                    <%= gettext "copy"%>
+                  </button>
+                  <pre class="pre-scrollable pre-scrollable-shorty pre-wrap mb-0">
+                    <code><%= @transaction.input %></code>
+                  </pre>
+                </div>
+              </div>
+              </dd>
+            <% end %>
           </dl>
         </div>
       </div>

diff --git a/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex b/apps/block_scout_web/lib/block_scout_web/views/transaction_view.ex
@@ -73,6 +73,10 @@ defmodule BlockScoutWeb.TransactionView do
     Cldr.Number.to_string!(gas)
   end
 
+  def decoded_input_data(transaction) do
+    Transaction.decoded_input_data(transaction)
+  end
+
   @doc """
   Converts a transaction's gas price to a displayable value.
   """

diff --git a/apps/block_scout_web/priv/gettext/default.pot b/apps/block_scout_web/priv/gettext/default.pot
@@ -283,12 +283,12 @@ msgid "Contract Address Pending"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/transaction_view.ex:127
+#: lib/block_scout_web/views/transaction_view.ex:131
 msgid "Contract Call"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/transaction_view.ex:126
+#: lib/block_scout_web/views/transaction_view.ex:130
 msgid "Contract Creation"
 msgstr ""
 
@@ -403,7 +403,7 @@ msgstr ""
 #: lib/block_scout_web/templates/internal_transaction/_tile.html.eex:16
 #: lib/block_scout_web/templates/transaction/_pending_tile.html.eex:19
 #: lib/block_scout_web/templates/transaction/_tile.html.eex:26
-#: lib/block_scout_web/templates/transaction/overview.html.eex:96
+#: lib/block_scout_web/templates/transaction/overview.html.eex:182
 #: lib/block_scout_web/views/wei_helpers.ex:72
 msgid "Ether"
 msgstr ""
@@ -442,7 +442,7 @@ msgid "GET"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:109
+#: lib/block_scout_web/templates/transaction/overview.html.eex:195
 msgid "Gas"
 msgstr ""
 
@@ -486,7 +486,9 @@ msgid "Indexing Tokens"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:79
+#: lib/block_scout_web/templates/transaction/overview.html.eex:81
+#: lib/block_scout_web/templates/transaction/overview.html.eex:88
+#: lib/block_scout_web/templates/transaction/overview.html.eex:95
 msgid "Input"
 msgstr ""
 
@@ -505,7 +507,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:43
 #: lib/block_scout_web/templates/transaction_internal_transaction/index.html.eex:10
 #: lib/block_scout_web/views/address_view.ex:213
-#: lib/block_scout_web/views/transaction_view.ex:176
+#: lib/block_scout_web/views/transaction_view.ex:180
 msgid "Internal Transactions"
 msgstr ""
 
@@ -523,15 +525,15 @@ msgid "Less than"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:121
+#: lib/block_scout_web/templates/transaction/overview.html.eex:207
 msgid "Limit"
 msgstr ""
 
 #, elixir-format
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:21
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:48
 #: lib/block_scout_web/templates/transaction_log/index.html.eex:10
-#: lib/block_scout_web/views/transaction_view.ex:177
+#: lib/block_scout_web/views/transaction_view.ex:181
 msgid "Logs"
 msgstr ""
 
@@ -680,7 +682,7 @@ msgstr ""
 #: lib/block_scout_web/templates/layout/_topnav.html.eex:44
 #: lib/block_scout_web/templates/transaction/overview.html.eex:54
 #: lib/block_scout_web/views/transaction_view.ex:57
-#: lib/block_scout_web/views/transaction_view.ex:83
+#: lib/block_scout_web/views/transaction_view.ex:87
 msgid "Pending"
 msgstr ""
 
@@ -896,7 +898,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/tokens/transfer/_token_transfer.html.eex:4
 #: lib/block_scout_web/templates/transaction_token_transfer/_token_transfer.html.eex:4
-#: lib/block_scout_web/views/transaction_view.ex:125
+#: lib/block_scout_web/views/transaction_view.ex:129
 msgid "Token Transfer"
 msgstr ""
 
@@ -908,7 +910,7 @@ msgstr ""
 #: lib/block_scout_web/templates/transaction/_tabs.html.eex:36
 #: lib/block_scout_web/templates/transaction_token_transfer/index.html.eex:10
 #: lib/block_scout_web/views/tokens/overview_view.ex:35
-#: lib/block_scout_web/views/transaction_view.ex:175
+#: lib/block_scout_web/views/transaction_view.ex:179
 msgid "Token Transfers"
 msgstr ""
 
@@ -950,7 +952,7 @@ msgid "Total transactions"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/views/transaction_view.ex:128
+#: lib/block_scout_web/views/transaction_view.ex:132
 msgid "Transaction"
 msgstr ""
 
@@ -1018,7 +1020,7 @@ msgid "Unique Token"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:114
+#: lib/block_scout_web/templates/transaction/overview.html.eex:200
 msgid "Used"
 msgstr ""
 
@@ -1039,7 +1041,7 @@ msgid "Validations"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/transaction/overview.html.eex:96
+#: lib/block_scout_web/templates/transaction/overview.html.eex:182
 msgid "Value"
 msgstr ""
 
@@ -1216,3 +1218,20 @@ msgstr ""
 #: lib/block_scout_web/templates/api_docs/index.html.eex:7
 msgid "This API is provided for developers transitioning their applications from Etherscan to BlockScout. It supports GET and POST requests."
 msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/transaction/overview.html.eex:153
+msgid "Raw Input"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/transaction/overview.html.eex:156
+msgid "Show Raw Input"
+msgstr ""
+
+#, elixir-format
+#: lib/block_scout_web/templates/transaction/overview.html.eex:130
+#: lib/block_scout_web/templates/transaction/overview.html.eex:140
+#: lib/block_scout_web/templates/transaction/overview.html.eex:164
+msgid "copy"
+msgstr ""