Standardize Toast notification styling across all transaction states

[Lakes41]

Difficulty: Intermediate
Type: UI/UX, refactor

Background

Notifications for transaction success, failure, and pending states are managed by different developer implementations throughout the codebase, leading to visual inconsistencies.

Problem

Some success toasts contain links to the block explorer, while others just say "Done". Some failure toasts auto-dismiss, while others require manual closing. This degrades the polish of the user experience.

Expected outcome

A unified TransactionToast wrapper is created, standardizing the icon, colors, text layout, and explorer linking behavior for all blockchain interactions.

Suggested implementation

1. Create a standardized configuration object/component for the application's Toast provider (e.g., react-hot-toast or sonner).
2. Design uniform layouts for PENDING, SUCCESS, and ERROR states.
3. Ensure every SUCCESS state automatically includes a correctly formatted link to the relevant block explorer using the transaction hash.

Acceptance criteria

• All blockchain transaction notifications share identical padding, font sizes, and icon alignments.
• Users can click a "View on Explorer" link directly from the success toast.
• Error toasts strictly require manual dismissal (no auto-timeout) so users can read the error.

Likely affected files/directories

• src/components/UI/ToastProvider.tsx
• src/hooks/useTransaction.ts

Requirements

• Explorer links must dynamically respect the currently connected network chain ID.

[DingiDinigi]

Hi I've built and standardized notification/toast systems in React frontends before, including wiring transaction-state UX (pending/success/error) consistently across a codebase where different devs had shipped their own one-off patterns. This is exactly the kind of scattered-implementation problem I like fixing — it's clear-scoped, visual, and the acceptance criteria leave little ambiguity.
I'll build the unified TransactionToast wrapper with consistent layout/icon/color treatment across all three states, wire success toasts to always link out to the block explorer using the correct URL for whichever chain is currently connected, and make sure error toasts require manual dismissal so users actually get to read them. Comfortable taking this on. Kindly assign to me

[DingiDinigi]

Hi I've built and standardized notification/toast systems in React frontends before, including wiring transaction-state UX (pending/success/error) consistently across a codebase where different devs had shipped their own one-off patterns. This is exactly the kind of scattered-implementation problem I like fixing — it's clear-scoped, visual, and the acceptance criteria leave little ambiguity.
I'll build the unified TransactionToast wrapper with consistent layout/icon/color treatment across all three states, wire success toasts to always link out to the block explorer using the correct URL for whichever chain is currently connected, and make sure error toasts require manual dismissal so users actually get to read them. Comfortable taking this on. Kindly assign to me

[grantfox-oss]

🦊 GrantFox — @DingiDinigi has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #115)
2. Your PR will be reviewed by the Adamantine-guild maintainers

Good luck! Track your progress on GrantFox.