Redesign Transaction Page

[pmjanus]

The /tx route needs to be updated to better reflect transaction details specific to our blockchain, which does not implement EIP-1559. The update should focus on enhancing user comprehension and navigation, with detailed information and tooltips for each field. Below are the proposed changes:

Transaction Details

• Transaction Hash

  • Tooltip: "The unique identifier of the transaction."
  • Display the hash value.

• Status

  • Tooltip: "Indicates whether the transaction was successful, failed, or is pending."
  • Show the transaction status.

• Block

  • Tooltip: "The block number in which this transaction was included."

  • Display the block number as a link to the block, e.g., /block/{blocknum}.

  • Confirmations

    • Tooltip: "The number of blocks added to the blockchain since this transaction was included, increasing its reliability."
    • Show the number of confirmations.

• Timestamp

  • Tooltip: "The time and date the transaction was confirmed."
  • Format: [clock icon] X unit ago (MMM-DD-YYYY HH:MM:SS AM/PM +UTC).

• Transaction Action

  • Tooltip: "The operation performed by this transaction, such as a transfer or contract execution."
  • Display the action.

• From/To

  • Tooltip for From: "The address initiating the transaction."
  • Tooltip for To: "The recipient address of the transaction."
  • Display addresses, with the address being clickable links to the address page of the address

• ERC-20 Tokens Transferred: --> #557

• Value

  -Tooltip: "The amount of cryptocurrency transferred in this transaction."

  • Format: X ETH (equivalent in USD), using real-time conversion rates where applicable.

• Transaction Fee

  • Tooltip: "The total fee paid for this transaction, in ETH and USD."
  • Format: X ETH (equivalent in USD).

• Gas Price

  • Tooltip: "The price per unit of gas paid for the transaction."
  • Display the gas price, formatted for readability.

• More Details (accordion)L

  • Gas Limit & Usage by Txn

    • Tooltip: "The maximum amount of gas that was allowed for the transaction, and the actual amount of gas used."
    • Display both gas limit and gas used, formatted for readability.

  • Other Attributes:

    • Nonce

      • Tooltip: "A sequential number tied to every transaction made by the same address, ensuring transactions are processed in order." - Display the nonce.

    • Position in Block

      • Tooltip: "The transaction's ordinal position within its block."
      • Show the position.

• Input Data

  • Tooltip: "Data sent along with the transaction, typically used for contract interactions."
  • value: #747

• Close Accordion Button

Each detail should be presented clearly with a tooltip explaining its significance to help users understand the transaction data better. This refactoring aims to improve the user experience by providing comprehensive, accessible information. In the future when we implement 1559 we can revisit the page in a different issue and add the fields required by that transaction type.