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

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

🎯 Definition of Done

• I can see a correct payload in human-readable form inside the raw panel. Also, show the specification selected.
• specification can be saved. Persist through page refreshes.
• 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.

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).