feat(frontend): polish on-chain pending transaction state

[stackingsaunter]

Summary

• treat unconfirmed on-chain transactions as pending in the Wallet UI without changing backend state values
• use the pending label in the details dialog while keeping the existing sending/receiving directional copy
• apply the lightning-style blue pending treatment consistently across the on-chain row and dialog states

Test plan

• cd frontend && yarn tsc:compile
• Broadcast an outgoing on-chain transaction and verify it renders with blue pending styling before confirmations
• Observe an incoming unconfirmed transaction and verify it renders as receiving/pending with blue styling
• Verify confirmed transactions still render with the existing sent/received colors

Made with Cursor

Summary by CodeRabbit

• Bug Fixes
  • Transaction status labels now display "Pending" instead of "Unconfirmed" for improved clarity.
  • Visual loading indicators and styling now consistently reflect pending transaction states.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 93ec8b18-838a-4917-b9c2-b8717f6f852c

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/onchain-pending-ui-state

---

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 and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

frontend/src/components/channels/OnchainTransactionsTable.tsx (1)

69-69: Consider aligning pending predicate with transactionStatusLabel logic.

isPending currently checks only "unconfirmed", while status text treats any non-"confirmed" state as pending. Using one condition avoids future drift across label vs styling logic.

♻️ Suggested small consistency refactor

-  const isPending = tx.state === "unconfirmed";
+  const isPending = tx.state !== "confirmed";

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@frontend/src/components/channels/OnchainTransactionsTable.tsx` at line 69,
The isPending predicate only checks for tx.state === "unconfirmed" which can
diverge from the transactionStatusLabel logic that treats any state !==
"confirmed" as pending; update the isPending computation (used in
OnchainTransactionsTable) to mirror transactionStatusLabel's condition by
treating any tx.state that is not "confirmed" as pending so styling and labels
remain consistent across tx.state, isPending, and transactionStatusLabel.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@frontend/src/components/channels/OnchainTransactionsTable.tsx`:
- Line 69: The isPending predicate only checks for tx.state === "unconfirmed"
which can diverge from the transactionStatusLabel logic that treats any state
!== "confirmed" as pending; update the isPending computation (used in
OnchainTransactionsTable) to mirror transactionStatusLabel's condition by
treating any tx.state that is not "confirmed" as pending so styling and labels
remain consistent across tx.state, isPending, and transactionStatusLabel.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 87c81398-9e11-446f-9e18-1049637c2c73

📥 Commits

Reviewing files that changed from the base of the PR and between 9b457e6 and 79b6af1.

📒 Files selected for processing (1)

• frontend/src/components/channels/OnchainTransactionsTable.tsx

[bumi]

coderabbit is right, but it was like that before.