[FEATURE] Decode EVM Transaction Call Data for User Readability

[lmcmz]

#EPIC
Outblock/FRW#84

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.

• When ABI is available: The backend provides fully decoded transaction metadata.
• When ABI is unavailable: The backend returns basic metadata with limited details.

The client needs to handle the response and present the decoded data in the appropriate UI states.

---

Acceptance Criteria

• Display the decoded transaction metadata when ABI is available.
• Display fallback metadata when ABI is unavailable.
• Handle three UI states as per the design:
  1. Initial state.
  2. Loading state.
  3. Decoded transaction (with ABI or fallback for non-ABI).
• Ensure seamless integration with the existing transaction-signing flow.

---

Implementation Details

Client-Side Responsibilities

1. Send Transaction Data to Backend:

   • Ensure the full transaction object (including calldata and contractAddress) is sent to the backend API.

2. Handle Backend Response:

   • Parse the response to identify whether the decoding was performed with or without ABI.
   • Update the UI based on the response.

3. UI States (Refer to Figma for Designs):

   • Initial State: Default screen before transaction data is sent.
   • Loading State: Shown while waiting for backend decoding.
   • Decoded Transaction Display:
     • With ABI: Show detailed metadata for the operation.
     • Without ABI: Show fallback metadata (e.g., raw calldata or method ID).

---

Feature Flag

• Flag Name: evm-tx-decoding
• Default State: Off.
• Rollout Plan: Gradual rollout to users after QA validation.

---

Tasks

• API Integration:

  • Implement API call to send transaction data to the backend.
  • Handle backend responses for ABI and non-ABI cases.

• UI Updates:

  • Implement the initial, loading, and decoded states per the design.
  • Ensure the UI correctly renders detailed metadata or fallback information.

• Error Handling:

  • Display a user-friendly message if decoding fails.