Redesign Transaction Page -Update UI of Logs Tab

[pmjanus]

Issue: Improvements to Transaction Details View

Overview

This issue addresses several improvements and fixes needed for the transaction details view on the route: https://www.teloscan.io/tx/0x995762a72eec8078e6609cb98d1d97a531ec9ab71bc0c196994086012e15a5f7

1. Add Query Parameters for Tabs

Add query parameters to handle the different tabs in the transaction details view:

• LOGS
• Internal Transactions
• Overview (default)

2. Inconsistencies in Non-Human Readable View

In the non-human readable view, we have inconsistencies in the transaction object keys:

• Example 1:

{
  "transactionHash": "0x995762a72eec8078e6609cb98d1d97a531ec9ab71bc0c196994086012e15a5f7",
  "logIndex": 0,
  "removed": false,
  "blockNumber": 353052878,
  "blockHash": "0x3e613c459c5dd252460ec17f119dc3bcce2a9c80cf2556f0c0a820b9eb6df9b5",
  "address": "0xdD55c9200a8CBA7A1d62F440660f1EAE16d02e20",
  "data": "0x0000000000000000000000000000000000000000000000000033a634256970b1",
  "topics": [...],
  "transactionIndex": 0
} 

• Example 2:

{
  "transaction_hash": "0x995762a72eec8078e6609cb98d1d97a531ec9ab71bc0c196994086012e15a5f7",
  "transactionHash": "0x995762a72eec8078e6609cb98d1d97a531ec9ab71bc0c196994086012e15a5f7",
  "logIndex": 1,
  "removed": false,
  "blockNumber": 353052878,
  "blockHash": "0x3e613c459c5dd252460ec17f119dc3bcce2a9c80cf2556f0c0a820b9eb6df9b5",
  "address": "0xdD55c9200a8CBA7A1d62F440660f1EAE16d02e20",
  "data": "0x0000000000000000000000000000000000000000000000000033a634256970b1",
  "topics": [...],
  "transactionIndex": 0
} 

Required Fixes:

• Standardize the keys in the transaction objects. Use camelCase consistently.
• Ensure all objects have the same key format for transactionHash.

3. Human Readable View Enhancements

Enhance the human-readable view to include the following:

• Log Index: Display the log index.
• Address: Display the address, with easy copy functionality and navigation to the address.
• Topics: Display the topics.
• Data: Display the data with options for common data conversions (hex, decimal).

References for UI Inspiration:

• AVAScan Logs
• Etherscan Event Log

Expected Outcome

• The transaction details view should have clear, consistent, and easy-to-navigate information.
• Users should be able to switch between tabs using query parameters.
• Non-human readable data should be standardized in its structure.
• Human readable data should be enhanced for better usability and accessibility.