New UX Feedback Components for Transaction Workflows #169
Description
📌 Problem
Murphy SDK provides a rich set of transaction-based and protocol-based components (Token Swap, Stake, Candy Machine, Fusion, etc.). However, there is currently no unified way to track, visualize, or provide feedback for multi-step transaction workflows.
Many real-world dApps involve flows like:
Connect Wallet → Prepare → Submit → Confirm → Done
But Murphy currently lacks reusable components to clearly guide users through such flows.
As a result, developers must reimplement toasts, spinners, progress indicators, and error fallback UIs — leading to redundant work and inconsistent UX.
💡 Proposal
Introduce a set of user-facing feedback and flow components that help visualize transactions, errors, retries, confirmations, and general transaction state.
These components will be:
- Lightweight, reusable, and theme-consistent
- Compatible with
useWallet,useConnection, and Murphy tx logic - Useful for both atomic actions (e.g. Mint CNFT) and multi-step flows
- Accessible and mobile-friendly
🧱 Proposed Components
| Component | Description | Status |
|---|---|---|
| TxProgressSteps | Horizontal/vertical step tracker (e.g. Connect → Submit → Confirm) | 🟢 Ready |
| TxFeedbackToast | Toast component to show transaction status (loading, success, error) | 🟢 Ready |
| TxErrorFallback | UI to display when a transaction fails, with retry and log support | 🟢 Ready |
| TxRetryButton | Button wrapper with built-in retry handling | 🟢 Ready |
| SuccessDialog | Modal shown on successful completion (e.g. "Minted Successfully 🎉") | 🟢 Ready |
| TxExplorerLink | Renders a link to Solana Explorer from tx signature | 🟢 Ready |
| StepFlowDialog | Modal for multi-step interaction (e.g. Mint NFT → Verify Holder...) | 🟢 Ready |
| InlineTxStatus | Small inline status chips/icons for loading, success, or failed txs | 🟢 Ready |
| TxPendingIndicator | Global indicator showing that 1+ txs are pending confirmation | 🟢 Ready |
These will be used as dependencies or wrappers to maintain consistency and reduce duplication.
✅ Existing Components
Murphy already provides some base components that will work well in combination with this proposal:
| Component | Description |
|---|---|
| Connect Wallet Button | Wallet connect UI already present |
| Token Input | Token selection and input field |
| Send Token Form | Form to send SPL tokens |
| Mint CNFT Form | Form to mint CNFTs using Bubblegum v1/v2 |
| Card, Dialog, Button | Core building blocks from ShadCN already integrated |
These will be used as dependencies or wrappers to maintain consistency and reduce duplication.
🤔 Why It Matters
With the rise of multi-step DeFi/NFT workflows, Murphy SDK needs built-in feedback components to:
-
Improve UX and onboarding in wallet-connected dApps
-
Provide confidence and transparency to users on transaction state
-
Prevent developers from reinventing UI logic across projects
-
Strengthen Murphy’s position as a full-featured SDK — not just form wrappers
🔜 Next Steps
-
Define prop interfaces:
status,step,txSignature,onRetry,onSuccess, etc. -
Use
Tailwind CSS+shadcn/uito ensure theme compatibility -
Allow both standalone and embedded usage
-
Document all components with
.mdxusage examples
👋 Contributor Offer
I’d love to contribute these feedback components in a modular, documented, and tested format.
I'm happy to break this down into multiple PRs, follow a design or implementation roadmap, and work with maintainers to align with Murphy’s vision.
Looking forward to your thoughts!