feat(TxDetail): refactor and improve styling

[cstenglein]

fixes #93

Before:

After:

[cstenglein]

Todo: Fee is missing

[escapedcat]

Looks much nicer! 👏 💅
Just some nits/suggestions/questions.

• nit: Bottom padding looks off
  
• I clicked the red entry but in the details I see green?
  

[escapedcat]

If we want to somewhat stick to conventional commits the comit should be i.e. "feat(TxDetail): refactor and improve styling"

[escapedcat]

Now that I think about it using SVG just to achieve a similar look to the progress icon we use seems a bit of an overhead.
Wouldn't it be possible to just use the same progress icons we use in the list but "just" show it bigger in the detail-modal?

Or just use something like this?

[cstenglein]

Thank you for the suggestions! Will address them soon! 🙏 👍

[cstenglein]

Now that I think about it using SVG just to achieve a similar look to the progress icon we use seems a bit of an overhead. Wouldn't it be possible to just use the same progress icons we use in the list but "just" show it bigger in the detail-modal?

Or just use something like this?

Good idea!

[cstenglein]

With the ConfirmationIcons, it looks a bit weird:

So I'll be trying the CircularProgress

[escapedcat]

With the ConfirmationIcons, it looks a bit weird:

Does the job, not too bad I would say :)

[cstenglein]

With the CircularProgress:

[Copilot]

Pull request overview

This PR refactors the transaction detail modal by consolidating the separate OnchainDetails and LNDetails components into a unified TransactionDetails component, while introducing several new reusable components and improving the overall styling and user experience.

Key Changes:

• Unified transaction details display for both on-chain and Lightning transactions
• Added interactive transaction ID component with expand/collapse and copy functionality
• Introduced visual confirmation status indicator with circular progress ring
• Created reusable card components for consistent styling

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
TransactionId.tsx	New component for displaying transaction ID with expand/collapse toggle and copy-to-clipboard functionality
TransactionDetails.tsx	Unified component that handles both on-chain and Lightning transaction details, replacing separate detail components
TransactionDetailModal.tsx	Simplified to use the new unified TransactionDetails component instead of conditional rendering
MempoolBadge.tsx	New component for displaying mempool.space link as a styled badge for on-chain transactions
KeyValueCard.tsx	New reusable component for consistent key-value pair display with optional label support
ConfirmationsRing.tsx	New component displaying confirmation status as an interactive circular progress indicator
OnchainDetails.tsx	Removed - functionality consolidated into TransactionDetails
LNDetails.tsx	Removed - functionality consolidated into TransactionDetails
en.json	Added new translation keys for expand/collapse tooltips and additional transaction details
backend-mock/transactions.js	Updated transaction indices for proper ordering in mock data