UI/UX: Design transaction-success feedback with explorer link beyond generic toast

[Baskarayelu]

Description

After creating a bond, Bond.tsx shows a generic addToast('success', 'Bond created successfully.') with no transaction hash, no link to a Stellar block explorer, and no summary of what changed (amount locked, unlock date). For an on-chain protocol, success feedback should give users a verifiable record. We need to design richer success feedback — either an enhanced toast with a "View on explorer" action or a success panel summarizing the transaction.

Requirements and context

• UI/UX scope only — success-feedback design; tx hash can be mocked.
• Reference src/pages/Bond.tsx, src/components/ToastProvider.tsx, and src/components/Banner.tsx (which supports an action).
• Define what success communicates: amount, unlock date, truncated tx hash, explorer link.
• Decide channel: action-bearing toast vs inline success Banner/panel.
• Note: the Toast type currently has no action slot — flag whether one is needed.

Suggested execution

• Branch: uiux/tx-success-feedback.
• Wire a success Banner with action (or extend toast) into Bond.tsx.
• Deliver: success-feedback redline and explorer-link spec.

Test and commit

• Visual QA at 375px and 1280px.
• npm run build and npm run lint pass.
• a11y checks: success announced, explorer link labeled and keyboard accessible.

Example commit message

feat(uiux): add richer transaction-success feedback with explorer link

Guidelines

• Clear documentation of success content.
• Design consistency with Banner/Toast.
• Timeframe: 96 hours