Add decode specification (v1)

[brunomenezes]

📄 Context

Currently, for the input's payload, we are displaying the content in three ways: as is (i.e. Raw), as Text (trying to convert the Hex value) and JSON that leverages the result of the latter. It would be an excellent addition to provide a way for the user (i.e. developer) to describe how it should be parsed and save that specification for reuse.

PS: I am calling the feature decode specification because the payload may be encoded with a non-standard-packed-mode and just dropping an ABI will not work; pre-steps are necessary (e.g. Slice bytes) before you define a piece of ABI to use.

✔️ Solution

Implement a UI that allows users to specify how to decode a given input payload into a human-readable form. The spec is a single or series of transformation steps, depending on the original encoding used.

• Support JSON-ABIs format.
• Support Human-Readable-ABI format.
• Support byte slices. e.g. Portals use a non-standard packed mode encodePacked so pre-steps are necessary.
• Support live feedback. i.e., set a payload while defining the specification so the user can see the result.
• Support conditional for auto-applying the spec to a given input. e.g. when app address x and msgSender y
  • Limit to a couple of properties: i.e. application-address, msgSender.
  • In case of multiple specs would match. The first match is the one selected.
• Should be able to choose a named specification against a payload manually. It should transform the content inside the Raw panel.
• Should be able to save the specification. (local-storage)

📈 Subtasks

• [x] Implement the custom specification UI.
• [x] Add support to byte slicing.
• [x] Add support to JSON-ABIs.
• [x] Add support to human-readable ABI.
• [x] Add live testing feedback.
• [x] Add support to conditionals.
• [x] Update the input details component to support specification selection.

🎯 Definition of Done

• [x] I can see a correct payload in human-readable form inside the raw panel. Also, show the specification selected.
• [x] specification can be saved. Persist through page refreshes.
• [x] Auto-select a Specification when conditional match.

[brunomenezes]

cc: @tuler

[brunomenezes]

Hi @tuler, I am adding here the compare so you can see the current commits. At the current point, I would point you to the tests inside decoder.test.ts and conditionals.test.ts to have a feel for its inner workings and what each piece accomplishes.

https://github.com/cartesi/rollups-explorer/compare/main...feature/165-add-decode-specification-v1

I will be working next in the form-ui + preview to define and play around while defining a specification, persistence and later the integration with the current input-data component we have (textarea displaying the payload in the input's table).

[brunomenezes]

There is a problem with a case: if the user is prototyping in the JSON ABI mode, changes to the struct will not be reflected in the generated JSON Abi unless the parameter name of this struct is also modified. e.g. from function myFunc(Baz baz) to function myFunc(Baz baz2).

More details are available in the issue created in the wevm/abitype repo: https://github.com/wevm/abitype/issues/247

cc: @tuler