Merge pull request #3532 from poanetwork/vb-int-input-easy-set-power

Contract interaction: an easy setting of precision for integer input

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## Current
 
 ### Features
+- [#3532](https://github.com/poanetwork/blockscout/pull/3532) - Contract interaction: an easy setting of precision for integer input
 - [#3531](https://github.com/poanetwork/blockscout/pull/3531) - Allow double quotes in input data of contract methods
 - [#3515](https://github.com/poanetwork/blockscout/pull/3515) - CRC total balance
 - [#3513](https://github.com/poanetwork/blockscout/pull/3513) - Allow square brackets for an array input data in contracts interaction
@@ -16,7 +17,7 @@
 - [#3513](https://github.com/poanetwork/blockscout/pull/3513) - Fix input data processing for method call (array type of data)
 - [#3509](https://github.com/poanetwork/blockscout/pull/3509) - Fix QR code tooltip appearance in mobile view
 - [#3507](https://github.com/poanetwork/blockscout/pull/3507), [#3510](https://github.com/poanetwork/blockscout/pull/3510) - Fix left margin of balance card in mobile view
-- [#3506](https://github.com/poanetwork/blockscout/pull/3506) - Fix token trasfer's tile styles: prevent overlapping of long names
+- [#3506](https://github.com/poanetwork/blockscout/pull/3506) - Fix token transfer's tile styles: prevent overlapping of long names
 - [#3505](https://github.com/poanetwork/blockscout/pull/3505) - Fix Staking DApp first loading
 - [#3433](https://github.com/poanetwork/blockscout/pull/3433) - Token balances and rewards tables deadlocks elimination
 - [#3494](https://github.com/poanetwork/blockscout/pull/3494), [#3497](https://github.com/poanetwork/blockscout/pull/3497), [#3504](https://github.com/poanetwork/blockscout/pull/3504), [#3517](https://github.com/poanetwork/blockscout/pull/3517) - Contracts interaction: fix method call with array[] inputs

apps/block_scout_web/assets/css/components/_card.scss

@@ -293,6 +293,25 @@ $card-tab-icon-color-active: #fff !default;
   padding: 6px 8px !important;
   height: 31px !important;
   font-size: 11px;
+  margin-left: 20px;
+}
+
+.contract-plus-btn-container {
+  height: 31px !important;
+  &:hover i {
+    color: #fff !important;
+  }
+}
+
+.contract-plus-btn {
+  color: $primary;
+  font-size: 15px;
+}
+
+.custom-power-input {
+  height: 20px;
+  width: 50px !important;
+  margin-top: -10px !important;
 }
 
 .list-title-description {

apps/block_scout_web/assets/css/components/_dropdown.scss

@@ -28,6 +28,11 @@ $dropdown-menu-item-hover-background: rgba($secondary, 0.1) !default;
       border-top-right-radius: 0;
     }
   }
+
+  &.exponention-dropdown {
+    width: 100px;
+    min-width: 100px;
+  }
 }
 
 .dropdown-item {

apps/block_scout_web/assets/css/theme/_dark-theme.scss

@@ -1069,6 +1069,12 @@ $dark-stakes-banned-background: #3e314c;
 			background: $yellow !important;
 		}
 	}
+	.contract-plus-btn {
+		color: $dark-primary;
+	}
+	.custom-power-input {
+		border-color: $dark-primary;
+	}
 }
 
 .navbar-dark .navbar-toggler {

apps/block_scout_web/assets/js/lib/smart_contract/functions.js

@@ -52,6 +52,24 @@ const loadFunctions = (element) => {
       $('[data-function]').each((_, element) => {
         readWriteFunction(element)
       })
+
+      $('.contract-exponentiation-btn').on('click', (event) => {
+        const $customPower = $(event.currentTarget).find('[name=custom_power]')
+        let power
+        if ($customPower.length > 0) {
+          power = parseInt($customPower.val(), 10)
+        } else {
+          power = parseInt($(event.currentTarget).data('power'), 10)
+        }
+        const $input = $(event.currentTarget).parent().parent().parent().find('[name=function_input]')
+        const currentInputVal = parseInt($input.val(), 10) || 1
+        const newInputVal = (currentInputVal * Math.pow(10, power)).toString()
+        $input.val(newInputVal.toString())
+      })
+
+      $('[name=custom_power]').on('click', (event) => {
+        $(event.currentTarget).parent().parent().toggleClass('show')
+      })
     })
     .fail(function (response) {
       $element.html(response.statusText)

apps/block_scout_web/lib/block_scout_web/templates/smart_contract/_functions.html.eex

@@ -58,14 +58,30 @@ to: address_contract_path(@conn, :index, metadata_for_verification.address_hash)
 
           <%= if queryable?(function["inputs"]) do %>
             <%= for input <- function["inputs"] do %>
-              <div class="form-group pr-2">
+              <div class="form-group pr-3">
+                <%= if int?(input["type"]) do %>
+                  <input type="number" name="function_input" class="form-control form-control-sm address-input-sm mt-2" placeholder='<%= input["name"] %>(<%= input["type"] %>)'  />
+                  <span data-dropdown-toggle="" data-toggle="dropdown">
+                    <span class="button btn-line button-xs contract-plus-btn-container ml-1 mt-2">
+                      <i class="fa fa-plus contract-plus-btn"></i>
+                    </span>
+                    <div class="dropdown-menu exponention-dropdown">  
+                      <div class="dropdown-item contract-exponentiation-btn" data-power=6>10<sup>6</sup></div>
+                      <div class="dropdown-item contract-exponentiation-btn" data-power=8>10<sup>8</sup></div>
+                      <div class="dropdown-item contract-exponentiation-btn" data-power=18>10<sup>18</sup></div>
+                      <div class="dropdown-item contract-exponentiation-btn" data-power>10<input type="number" name="custom_power" class="form-control form-control-sm address-input-sm ml-1 custom-power-input" /></div> 
+                    </div>
+                  </span>
+
+                <% else %>
                   <input type="text" name="function_input" class="form-control form-control-sm address-input-sm mt-2" placeholder='<%= input["name"] %>(<%= input["type"] %>)'  />
+                <% end %>
               </div>
             <% end %>
           <% end %>
 
           <%= if payable?(function) do %>
-            <div class="form-group pr-2">
+            <div class="form-group pr-3">
               <input type="text" name="function_input" tx-value class="form-control form-control-sm address-input-sm mt-2" placeholder='value(<%= gettext("ETH")%>)'  />
             </div>
           <% end %>

apps/block_scout_web/lib/block_scout_web/views/smart_contract_view.ex

@@ -34,6 +34,7 @@ defmodule BlockScoutWeb.SmartContractView do
   end
 
   def address?(type), do: type in ["address", "address payable"]
+  def int?(type), do: String.contains?(type, "int") && !String.contains?(type, "[")
 
   def named_argument?(%{"name" => ""}), do: false
   def named_argument?(%{"name" => nil}), do: false

apps/block_scout_web/priv/gettext/default.pot

@@ -561,8 +561,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:69
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:85
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:104
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:120
 msgid "ETH"
 msgstr ""
 
@@ -1182,7 +1182,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:89
 msgid "Query"
 msgstr ""
 
@@ -1635,7 +1635,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:103
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:119
 msgid "WEI"
 msgstr ""
 
@@ -1926,7 +1926,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:89
 msgid "Write"
 msgstr ""
 

apps/block_scout_web/priv/gettext/en/LC_MESSAGES/default.po

@@ -561,8 +561,8 @@ msgid "ERC-721 "
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:69
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:85
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:104
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:120
 msgid "ETH"
 msgstr ""
 
@@ -1182,7 +1182,7 @@ msgid "QR Code"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:89
 msgid "Query"
 msgstr ""
 
@@ -1635,7 +1635,7 @@ msgid "View transaction %{transaction} on %{subnetwork}"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:103
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:119
 msgid "WEI"
 msgstr ""
 
@@ -1926,7 +1926,7 @@ msgid "Waiting for transaction's confirmation..."
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:73
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:89
 msgid "Write"
 msgstr ""