Show visual feedback during token purchase

[Josue19-08]

➡️ Title
Implement visual feedback during token purchase in adoption flow

📘 Description
Replace the current simulated loading in tree-adoption.tsx with real visual feedback for on-chain token purchase transactions. The component currently uses a 3-second setTimeout to simulate adoption, but needs to integrate with the real token purchase service and show appropriate loading, success, and error states during Stellar transactions.

🚀 Requirements

Loading States:

• Show animated spinner during transaction execution
• Disable adoption button while processing
• Display descriptive text of current process
• Maintain visual feedback until transaction completion

Success States:

• Success toast with transaction details
• Smooth transition to next step in flow
• Show transaction hash or explorer link
• Update adoption completed state

Error States:

• Destructive toast with clear error message
• Keep form accessible for retry attempts
• Error logging for debugging purposes
• Fallback handling for network/wallet errors

📝 Implementation Notes

Files to modify:

• hooks/use-token-purchase.ts - Create custom hook for state management
• components/adoption-flow/tree-adoption.tsx - Integrate hook and replace simulated logic
• services/buy-token.service.ts - Improve error handling and responses

Existing components to reuse:

• @/components/ui/toast + @/hooks/use-toast for notifications
• Existing inline spinner in adoption button (line 435)
• @/components/ui/skeleton for additional loading states
• @/hooks/use-wallet.hook for wallet integration

Service integration:

• Connect with existing buy-token.service.ts
• Handle API responses and network errors
• Integrate with Stellar wallet for real transactions
• Maintain consistency with current adoption flow

✅ Acceptance Criteria

Functionality:

• use-token-purchase hook created with loading/success/error states
• Adoption button shows spinner during processing
• Success toast appears when transaction completes successfully
• Error toast appears with descriptive message on failures
• Automatic transition to next step after success
• Retry capability after error without page reload

Code:

• Uses kebab-case for file and folder names
• Does not use default imports or relative paths like ../../components/foo
• Uses alias paths with @, e.g. @/components/foo
• Structures code with reusable components
• Reuses existing UI components (toast, spinner, skeleton)

UX/UI:

• Visual feedback consistent with current design system
• Loading states don't block entire interface
• Error messages are informative and actionable
• Smooth transitions between states
• Maintains accessibility during all states

Testing:

• Properly handles network errors
• Handles wallet/connection errors
• Works with different transaction types
• Loading states don't cause unnecessary re-renders

⚠️ Technical Considerations

• Integrate with existing authentication system (useGlobalAuthenticationStore)
• Maintain compatibility with current adoption flow (5 steps)
• Preserve quantity selection and price calculation functionality
• Ensure errors don't break the complete adoption flow

[Pfed-prog]

I would like to be assigned this issue