UI/UX: Show revert reason for failed transactions

[tom2drum]

Description and Related Issue(s)

Resolves #3545

Reworks how failed transactions display revert reasons on the transaction details page, matching the Figma mockups. The status row now shows the revert reason in the error tooltip (when available), with a collapsible "Show revert reason" section for full details. "Failed to call" text in the sub-heading is styled in red.

Proposed Changes

• Extract status/method rendering into a new TxDetailsStatus component with an inline collapsible revert-reason block
• Add getRevertReasonText utility to extract human-readable reason from decoded parameters
• Restyle TxRevertReason with a red background and handle missing/empty raw reasons
• Allow LogDecodedInputDataTable to accept style props for the revert-reason table background
• Color "failed to call" text red in TxInterpretation
• Move revert-reason visual tests from TxDetails.pw.tsx to dedicated TxDetailsStatus.pw.tsx coverage
• Add transaction mocks for revert-reason edge cases

Breaking or Incompatible Changes

None.

Additional Information

Figma mockups

Checklist for PR author

• I have tested these changes locally.
• I added tests to cover any new functionality, following this guide
• Whenever I fix a bug, I include a regression test to ensure that the bug does not reappear silently.
• If I have added a feature or functionality that is not privacy-compliant (e.g., tracking, analytics, third-party services), I have disabled it for private mode.
• If I have added, changed, renamed, or removed an environment variable
  • I updated the list of environment variables in the documentation
  • I made the necessary changes to the validator script according to the guide
  • I added "ENVs" label to this pull request

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. To trigger a review, include @coderabbitai review in the PR description. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 3f636490-2cb7-47d7-8434-20dd6991a125

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

This PR updates the transaction details UI to surface revert reasons for failed transactions in the status row tooltip and a collapsible “Show revert reason” section, aligning the failed-tx experience with the referenced design/issue.

Changes:

• Introduces TxDetailsStatus to render status + method + (when available) a collapsible revert-reason section, and wires it into TxDetails.
• Adds getRevertReasonText utility to extract a human-readable revert reason from decoded parameters for use in the status tooltip.
• Restyles TxRevertReason, adds Playwright coverage for revert-reason scenarios, and extends decoded-input table components to accept style props.

Reviewed changes

Copilot reviewed 11 out of 23 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/slices/tx/utils/get-revert-reason-text.ts	Adds helper to extract a readable revert reason from decoded parameters.
src/slices/tx/pages/details/TxSubHeading.pw.tsx	Updates a mock tx status in a screenshot test.
src/slices/tx/pages/details/info/TxDetails.tsx	Replaces inline status/method rendering with TxDetailsStatus; removes separate “Revert reason” field row.
src/slices/tx/pages/details/info/TxDetails.pw.tsx	Removes revert-reason visual tests (moved to TxDetailsStatus).
src/slices/tx/pages/details/info/parts/TxRevertReason.tsx	Restyles revert reason display and handles missing/non-hex raw reasons; passes bg styling into decoded table.
src/slices/tx/pages/details/info/parts/TxDetailsStatus.tsx	New status/method component with tooltip text derived from revert reason and collapsible details block.
src/slices/tx/pages/details/info/parts/TxDetailsStatus.pw.tsx	New visual coverage for revert-reason variants and tooltip hover state.
src/slices/tx/mocks/details.ts	Adds mocks for revert-reason edge cases (missing reason, decoded param reason).
src/slices/log/components/LogDecodedInputDataTable.tsx	Allows passing Chakra style props down to the decoded input table grid.
src/slices/log/components/LogDecodedInputData.tsx	Adds inputsTableProps passthrough to style the decoded input table.
src/features/tx-interpretation/common/components/TxInterpretation.tsx	Colors “failed to call” text red by applying conditional span color.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.