Build Reusable Stepper Component and Core Infrastructure

[MPSxDev]

📘 Issue Description

Create the foundational stepper component and core infrastructure needed for wallet transaction flows. This component will be reusable across withdraw, deposit, and future transaction flows.

🔍 Steps

1. Design Stepper Components

   • Create reusable stepper component with progress indicators
   • Implement step validation and navigation logic
   • Add keyboard navigation support
   • Create step container and step content components

2. Build Core Infrastructure

   • Transaction state management utilities
   • Form validation schemas for amounts and addresses
   • Error handling framework for transactions
   • Loading states and skeleton screens

3. Add Foundation Components

   • Amount input component with validation
   • Address input/selection component
   • Fee calculation utilities
   • Transaction summary display component

✅ Acceptance Criteria

• Reusable stepper component with progress tracking
• Step validation and navigation functionality
• Mobile-responsive stepper design
• Accessibility compliance (ARIA labels, keyboard navigation)
• Core transaction utilities and state management
• Unit tests for stepper component
• Storybook documentation for components
• Integration with existing design system

🌎 References

• [Stepper UX Patterns](https://www.nngroup.com/articles/stepper-design/)
• [React Hook Form Best Practices](https://react-hook-form.com/docs)
• [ARIA Design Patterns for Steps](https://www.w3.org/WAI/ARIA/apg/patterns/carousel/)

📜 Additional Notes

• Focus on reusability and extensibility
• Ensure component can handle dynamic number of steps
• Follow existing design system patterns
• Create comprehensive TypeScript interfaces

[Lizzy223]

I would like to work on this issue. I would Create the foundational stepper component and core infrastructure needed for wallet transaction flows. I'll ensure the component is reusable across withdraw, deposit, and future transaction flows.

[harjibbolar26]

Hi @MPSxDev
I’m a frontend developer with about three years of experience, specializing in JavaScript, TypeScript, and the Next.js framework built on React.js. I’m also comfortable working with any styling library.
I’d love the opportunity to contribute to this project and help fix the mentioned issues, as they align well with my expertise.
I can assure you of high-quality work, attention to detail, and timely delivery.

[System625]

Hi! I would love to work on this issue.

I will create the foundational stepper component with progress indicators, validation, and navigation logic, ensuring it is fully reusable for withdraw, deposit, and future transaction flows. Alongside the UI, I will build the supporting infrastructure: transaction state management, validation schemas, error handling, and loading states.

The component will be responsive, accessible (ARIA + keyboard navigation), and integrated with the existing design system. I’ll also add unit tests and Storybook documentation for maintainability and reusability.

Kindly assign it to me. ETA: within 24 hours.

Thank you!