Add parse input errors view; fix empty method_id

.dialyzer-ignore

@@ -18,7 +18,7 @@ lib/phoenix/router.ex:402
 lib/block_scout_web/views/layout_view.ex:145: The call 'Elixir.Poison.Parser':'parse!'
 lib/block_scout_web/views/layout_view.ex:237: The call 'Elixir.Poison.Parser':'parse!'
 lib/block_scout_web/controllers/api/rpc/transaction_controller.ex:22
-lib/explorer/smart_contract/reader.ex:461
+lib/explorer/smart_contract/reader.ex:430
 lib/indexer/fetcher/token_total_supply_on_demand.ex:16
 lib/explorer/exchange_rates/source.ex:110
 lib/explorer/exchange_rates/source.ex:113

CHANGELOG.md

@@ -9,6 +9,7 @@
 - [#4931](https://github.com/blockscout/blockscout/pull/4931) - Web3 modal with Wallet Connect for Write contract page and Staking Dapp
 
 ### Fixes
+- [#5045](https://github.com/blockscout/blockscout/pull/5045) - Contracts interaction improvements
 - [#5032](https://github.com/blockscout/blockscout/pull/5032) - Fix token transfer csv export 
 - [#5020](https://github.com/blockscout/blockscout/pull/5020) - Token instance image display imrovement
 - [#5019](https://github.com/blockscout/blockscout/pull/5019) - Fix fetch_last_token_balance function termination

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

@@ -55,8 +55,11 @@ const readWriteFunction = (element) => {
   const $responseContainer = $element.find('[data-function-response]')
 
   $form.on('submit', (event) => {
-    const action = $form.data('action')
     event.preventDefault()
+    const action = $form.data('action')
+    const $errorContainer = $form.parent().find('[input-parse-error-container]')
+
+    $errorContainer.hide()
 
     const $functionInputs = $form.find('input[name=function_input]')
     const $functionName = $form.find('input[name=function_name]')
@@ -68,7 +71,13 @@ const readWriteFunction = (element) => {
       const contractAbi = getContractABI($form)
       const inputs = getMethodInputs(contractAbi, functionName)
       const $methodId = $form.find('input[name=method_id]')
-      const args = prepareMethodArgs($functionInputs, inputs)
+      try {
+        var args = prepareMethodArgs($functionInputs, inputs)
+      } catch (exception) {
+        $errorContainer.show()
+        $errorContainer.text(exception)
+        return
+      }
       const type = $('[data-smart-contract-functions]').data('type')
 
       walletEnabled()

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

@@ -99,6 +99,7 @@
           </div>
         </form>
 
+        <div class="alert alert-danger py-2 word-break-all" style="margin-bottom: 0; display: none;" input-parse-error-container></div>
         <%= if outputs?(function["outputs"]) do %>
           <div class='p-2 text-muted <%= if (queryable?(function["inputs"]) == true), do: "w-100" %>'>
             <%= if (queryable?(function["inputs"])), do: raw "&#8627;" %>

apps/block_scout_web/priv/gettext/default.pot

@@ -1018,7 +1018,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_token/overview.html.eex:1
 #: lib/block_scout_web/templates/smart_contract/_functions.html.eex:93 lib/block_scout_web/templates/smart_contract/_functions.html.eex:93
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:132
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:133
 msgid "ETH"
 msgstr ""
 
@@ -3004,7 +3004,7 @@ msgid "Vyper contract"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:131
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:132
 msgid "WEI"
 msgstr ""
 

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

@@ -1018,7 +1018,7 @@ msgstr ""
 #, elixir-format
 #: lib/block_scout_web/templates/address_token/overview.html.eex:1
 #: lib/block_scout_web/templates/smart_contract/_functions.html.eex:93 lib/block_scout_web/templates/smart_contract/_functions.html.eex:93
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:132
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:133
 msgid "ETH"
 msgstr ""
 
@@ -3004,7 +3004,7 @@ msgid "Vyper contract"
 msgstr ""
 
 #, elixir-format
-#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:131
+#: lib/block_scout_web/templates/smart_contract/_functions.html.eex:132
 msgid "WEI"
 msgstr ""
 

apps/explorer/lib/explorer/smart_contract/reader.ex

@@ -296,42 +296,11 @@ defmodule Explorer.SmartContract.Reader do
   end
 
   defp get_abi_with_method_id(abi) do
-    parsed_abi =
-      abi
-      |> ABI.parse_specification()
-
-    abi_with_method_id =
-      abi
-      |> Enum.map(fn target_method ->
-        methods =
-          parsed_abi
-          |> Enum.filter(fn method ->
-            Atom.to_string(method.type) == Map.get(target_method, "type") &&
-              method.function == Map.get(target_method, "name") &&
-              Enum.count(method.input_names) == Enum.count(Map.get(target_method, "inputs")) &&
-              input_types_matched?(method.types, target_method)
-          end)
-
-        if Enum.count(methods) > 0 do
-          method = Enum.at(methods, 0)
-          method_id = Map.get(method, :method_id)
-          method_with_id = Map.put(target_method, "method_id", Base.encode16(method_id, case: :lower))
-          method_with_id
-        else
-          target_method
-        end
-      end)
-
-    abi_with_method_id
-  end
-
-  defp input_types_matched?(types, target_method) do
-    types
-    |> Enum.with_index()
-    |> Enum.all?(fn {target_type, index} ->
-      type_to_compare = Map.get(Enum.at(Map.get(target_method, "inputs"), index), "type")
-      target_type_formatted = format_type(target_type)
-      target_type_formatted == type_to_compare
+    abi
+    |> Enum.map(fn method ->
+      parsed_method = [method] |> ABI.parse_specification() |> Enum.at(0)
+      method_id = Map.get(parsed_method, :method_id)
+      Map.put(method, "method_id", Base.encode16(method_id, case: :lower))
     end)
   end