Create TipConfirmation component for success/error states

[davedumto]

Description

After a tip transaction is submitted, users need clear feedback about whether the transaction succeeded or failed. We need to create a TipConfirmation component that displays transaction results with appropriate actions.

Current State

• TipModal component handles the transaction flow
• No dedicated UI for showing transaction success/error states
• Users need visual confirmation and next steps after tipping

What Needs to Happen

1. Create a new TipConfirmation component at components/tipping/TipConfirmation.tsx
2. Implement success state UI:
   • Success icon/animation (checkmark, confetti, etc.)
   • Success message ("Tip sent successfully!")
   • Amount sent display
   • Recipient username
   • Transaction hash with link to Stellar Explorer
   • "Send Another Tip" button
   • "Close" button
3. Implement error state UI:
   • Error icon
   • Error message display (user-friendly error text)
   • Technical error details (collapsible/expandable)
   • "Try Again" button
   • "Close" button
4. Handle different error types:
   • Wallet signature rejected
   • Insufficient balance
   • Network errors
   • Invalid transaction
   • Timeout errors
5. Add transaction hash link generation:
   • Testnet: https://stellar.expert/explorer/testnet/tx/{hash}
   • Mainnet: https://stellar.expert/explorer/public/tx/{hash}
6. Create TypeScript interfaces for props
7. Add animations for state transitions

Code Structure

// components/tipping/TipConfirmation.tsx
import { getStellarExplorerUrl } from '@/lib/stellar/config';

interface TipConfirmationProps {
  state: 'success' | 'error';
  amount?: string;
  recipientUsername?: string;
  txHash?: string;
  error?: {
    message: string;
    details?: string;
    code?: string;
  };
  onClose: () => void;
  onRetry?: () => void;
  onSendAnother?: () => void;
}

export function TipConfirmation({
  state,
  amount,
  recipientUsername,
  txHash,
  error,
  onClose,
  onRetry,
  onSendAnother
}: TipConfirmationProps) {
  const explorerUrl = txHash ? getStellarExplorerUrl('tx', txHash) : null;

  if (state === 'success') {
    return (
      // Success UI with:
      // - Success icon/animation
      // - Amount and recipient
      // - Transaction hash link
      // - "Send Another Tip" and "Close" buttons
    );
  }

  return (
    // Error UI with:
    // - Error icon
    // - Error message
    // - Technical details (expandable)
    // - "Try Again" and "Close" buttons
  );
}

Files Affected

• components/tipping/TipConfirmation.tsx (NEW)
• components/tipping/index.ts (UPDATE) - Add export
• lib/stellar/config.ts (UPDATE) - Add getStellarExplorerUrl() helper function

Acceptance Criteria

• TipConfirmation component created with TypeScript
• Success state displays:
  • Success icon/animation
  • Amount sent and recipient username
  • Transaction hash with clickable link to Stellar Explorer
  • "Send Another Tip" and "Close" buttons
• Error state displays:
  • Error icon
  • User-friendly error message
  • Expandable technical error details
  • "Try Again" and "Close" buttons
• Different error types handled with specific messages
• Stellar Explorer links work correctly for both testnet and mainnet
• getStellarExplorerUrl() helper added to lib/stellar/config.ts
• Component has smooth transitions/animations
• Component is accessible (ARIA attributes, keyboard navigation)
• Component is responsive on mobile and desktop
• Loom video submitted showing both success and error states with different error scenarios

Useful Resources

• Stellar Expert Explorer: https://stellar.expert/
• Framer Motion (for animations): https://www.framer.com/motion/
• Lucide React (for icons): https://lucide.dev/
• Stellar Error Codes: https://developers.stellar.org/docs/data/horizon/api-reference/errors

Notes

• Make error messages user-friendly, not technical jargon
• Consider adding a "Share" button to share successful tips on social media
• Success animation should be celebratory but not overwhelming
• Ensure transaction hash is copyable (click to copy functionality)
• Error details should help users troubleshoot (e.g., "Check your wallet balance")

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[David-patrick-chuks]

@David-patrick-chuks has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Kindly assign this to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @David-patrick-chuks to this issue.

[steph-crown]

@steph-crown has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I specialize in the React/TypeScript stack and have extensive experience using Framer Motion for the kind of "celebratory yet refined" animations this issue calls for. I can implement the TipConfirmation component with a focus on absolute clarity: using Lucide React for immediate visual cues, building an expandable "technical details" section for error transparency, and ensuring the Stellar Explorer links are dynamically generated based on the network context.

Relevant Experience:

UI Lead: I have built transaction success/failure flows that processed millions of operations, focusing on accessibility and "human-readable" error messages.

Precision & UX: I prioritize responsive, accessible (ARIA), and pixel-perfect components that match the Figma intent while adding that extra layer of polish through smooth state transitions.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @steph-crown to this issue.

[Samuel1505]

@Samuel1505 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I can work on this issue, please assign me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Samuel1505 to this issue.

[chibokaxavier]

@chibokaxavier has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m Xavier, a full-stack developer with a background in building high-fidelity Stellar interfaces and resilient transaction feedback systems. I’m applying to create the TipConfirmation Component for StreamFi-x.

Actionable Feedback & Polish: I’ll build a high-fidelity success state featuring Framer Motion animations (like confetti or a smooth checkmark draw) and a clear summary of the tip amount, recipient, and clickable Stellar Expert links.

Intelligent Error Handling: My solution includes a robust error UI that translates technical Stellar codes into user-friendly messages handling everything from insufficient balances to rejected signatures with expandable technical logs for power users.

Production-Ready Features: I’ll ensure the component is fully accessible and responsive, adding "Click to Copy" functionality for transaction hashes and an optional "Share" feature to help users celebrate their successful tips on social media.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chibokaxavier to this issue.

[DanielEmmanuel1]

@DanielEmmanuel1 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi team,
I'd like to be assigned this issue. I'm a frontend engineer with solid experience building transaction feedback UIs and I can deliver the full TipConfirmation component success and error states, all error type handling, Stellar Explorer link generation for testnet and mainnet, expandable error details, animations, copy-to-clipboard for the transaction hash, and the getStellarExplorerUrl helper fully accessible and responsive.

Please assign it to me!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @DanielEmmanuel1 to this issue.

[Agbasimere]

@Agbasimere has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Can i work on this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Agbasimere to this issue.

[codebestia]

@codebestia has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello Maintainer
Can i work on this?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @codebestia to this issue.

[josephchimebuka]

@josephchimebuka has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I have read this and I can handle it, and it is within my skill sets. I’m Joseph Chimebuka, a Full-stack and Blockchain Developer with a strong background in open-source contributions. I’m a top open-source contributor on OnlyDust, have participated in multiple hackathons, and enjoy solving complex problems.

I’m currently building with TypeScript and Rust, and I’m confident I can tackle this issue and deliver results quickly. Let’s get to work!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @josephchimebuka to this issue.

[drips-wave]

Congratulations, @codebestia! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @codebestia: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊