[EPIC] Decode EVM Transaction Call Data for User Readability

[lmcmz]

Description

This feature will enable users to view a decoded, human-readable structure of the EVM transaction call data they are about to sign.

Currently, there is no simulator or decoder for transactions, making it difficult for users to understand the operations involved.

• With ABI: The backend will decode the calldata and return detailed metadata for the operation.
• Without ABI: The backend will provide fallback metadata, including basic details (e.g., method ID, raw calldata).

The client will send the full transaction object (including calldata and contractAddress) to the backend. The response from the backend will determine the UI presentation.

Design considerations include the following states:

1. Initial state.
2. Loading state.
3. Decoded transaction (with ABI or fallback for non-ABI).

Refer to the Figma Design for UI mockups and flows.

---

Acceptance Criteria

• Backend:

  • Process the transaction object and decode calldata accurately.
  • Handle both ABI and non-ABI scenarios.
  • Provide structured metadata in the API response.

• Client:

  • Send the full transaction object to the backend.
  • Display decoded transaction metadata based on the backend response.
  • Handle the three UI states (initial, loading, decoded).

• Design:

  • Provide finalized designs for the three states:
    • Initial state.
    • Loading state.
    • Decoded transaction with ABI.
    • Decoded transaction without ABI.
  • Ensure fallback design gracefully handles minimal metadata.

---

Implementation Details

Backend:

• API Endpoint:

  • Accepts a transaction object containing:
    • calldata
    • contractAddress (to)
  • Logic:
    • Decode calldata using ABI (if available).
    • Provide fallback decoding when ABI is unavailable.
    • Return structured metadata in JSON format.

• Error Handling:

  • Handle malformed calldata or unsupported contract addresses.
  • Provide clear error responses for the client to display.

• Testing:

  • Unit tests for ABI decoding logic.
  • Integration tests for API endpoint behavior with various inputs.

---

Client:

• API Integration:

  • Send the transaction object to the backend API.
  • Handle API responses (decoded metadata or fallback).

• UI States (Refer to Figma):

  • Initial State: Before the transaction is sent.
  • Loading State: While awaiting the backend response.
  • Decoded Transaction Display:
    • With ABI: Display detailed operation metadata.
    • Without ABI: Display fallback metadata.

• Error Handling:

  • Display user-friendly error messages for decoding failures.

• Testing:

  • Unit tests for API integration and response parsing.
  • UI tests for all design states.

---

Design:

• Finalize Mockups:

  • Initial state.
  • Loading state.
  • Decoded transaction (with ABI or fallback).

• Edge Cases:

  • Design for minimal metadata in non-ABI scenarios.
  • Error states (e.g., decoding failure).

• Collaboration:

  • Work with the client and backend teams to ensure alignment on the API response format and metadata structure.

---

Feature Flag

• Flag Name: enable-transaction-decoding
• Default State: Off.
• Rollout Plan: Gradual rollout after QA testing.

---

Tasks

Backend

• Create API endpoint to accept transaction object.
• Implement decoding logic for ABI and non-ABI cases.
• Write tests for decoding logic and API responses.

Client

• Integrate with the backend API for transaction decoding.
• Implement UI states for initial, loading, and decoded views.
• Write unit tests for API and UI logic.

Design

• Finalize designs for all UI states.
• Provide responsive and accessible designs for fallback scenarios.
• Conduct a design review with stakeholders.

---

Additional Notes

• Ensure seamless integration between client, backend, and design workflows.
• Monitor API and UI performance to avoid slow transaction processing.
• Refer to the Figma Design for detailed UI guidelines.