CelestiumX / CelestiumX/SkillChain-Frontend
Create Contract Creation Wizard
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
## 📚 Overview
Design and implement a multi-step form to guide users through creating service contracts. The form will handle selecting services, defining milestones, setting terms, and confirming on the blockchain.
If you need guidance on architecture or patterns, check the telegram groups: https://t.me/+YZEXOc_LOzIyYTgx
---
## 🔍 Background
Service contracts are the foundation of secure freelance transactions on SkillChain. By guiding users through a clear step-by-step creation process, we ensure structured, transparent agreements that benefit both clients and freelancers.
---
## 🛠 Requirements
- Create form under `src/components/modules/contracts`
- Implement steps:
- Service selection
- Milestone definition (`MilestoneBuilder` component)
- Contract terms
- Confirmation + blockchain transaction
- Add real-time XLM/USDC price converter
- Add preview modal for transaction
- Enable dynamic add/remove of milestones
---
## 🔧 Implementation Plan
### 1. Create Feature Branch
```bash
git checkout -b feature-contract-form-[issue-number]
```
### 2. Form Flow and Logic
- Use React state/hooks to manage form progression
- Add animated transitions between steps (e.g., Framer Motion)
- Validate fields using `Zod`
- Structure each step in its own component under `contracts/form/`
### 3. UI Components
- Build with SHADCN/UI and Tailwind CSS
- Use reusable input and validation components
- Include transaction preview modal
- Implement blockchain confirmation UI on final step
### 4. Blockchain Integration
- Add wallet requirement check before confirmation
- Show cost estimate using real-time conversion (XLM/USDC)
- Include confirmation status with visual feedback
### 5. Feedback and States
- Show smooth animated transitions between steps
- Display error states for each form section
- Show loading spinner on blockchain operations
### 6. Testing
- Unit test each form step and milestone builder
- Integration test full flow from start to confirmation
- Validate milestone addition/removal edge cases
### 7. Commit and Push
```bash
git add .
git commit -m "Feature: Multi-step Contract Creation Form"
git push origin feature-contract-form-[issue-number]
```
---
## ✅ Definition of Done
- [ ] Multi-step form with milestone support is complete.
- [ ] All form fields validated correctly using Zod.
- [ ] Smooth animated transitions implemented between steps.
- [ ] Blockchain transaction preview and confirmation completed.
- [ ] Developer attaches screenshots of each step.
- [ ] Pull request meets template standards.
---
## ⚙️ Technical Considerations
- Use a centralized `useContractForm` hook for managing state.
- Validate milestone data structure before submission.
- Consider debounce for real-time XLM/USDC fetches.
---
## 🖼️ Mockups




---
## 📆 Timeframe
4 days
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.