Issue 13: Micro-Meter Provisioning Flow Interacting with Client QR Generators

[elizabetheonoja-art]

Scope

File: src/components/spatial/Provisioner.tsx

Problem

Field engineers currently have no guided UI for pairing new hardware meters with on-chain Soroban records. The manual process is error-prone and lacks QR-based device pairing that field teams expect from modern IoT deployments.

Requirements

1. Build a 4-step wizard in Provisioner.tsx:
   • Step 0: Form — Hardware ID, Meter Type dropdown, Lat/Lng, Install Date
   • Step 1: Confirmation — Review entered details
   • Step 2: QR Generation — Display a scannable QR code encoding the provisioning payload
   • Step 3: Success — Show confirmation with on-chain transaction hash
2. Each step must be independently testable (extract sub-components if needed).
3. QR code should be generated client-side using a library like qrcode or @ngneat/qrcode.
4. On step 2, call src/services/api.ts to submit the provisioning transaction.
5. Handle loading, error, and success states per step.

Resolution Strategy

• Use useState for step index and form payload.
• QR data: JSON string of { hw, type, lat, lng, ts }.
• On submit, POST to /api/provision then poll for confirmation.
• Full keyboard navigation (Enter to advance, Escape to go back).

Tags

spatial, provisioning, qr, hardware

[NikeRegy]

Hi Maintainer, I will love to work on this issue as I have a solid background and knowledge about it

[grantfox-oss]

🦊 GrantFox — @NikeRegy has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #13)
2. Your PR will be reviewed by the Utility-Protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@NikeRegy's PR #33 was approved and merged by @elizabetheonoja-art.

🏆 @NikeRegy: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (48 total points). Track your full progress on GrantFox.

👏 Great work, @NikeRegy! Keep contributing to Utility-Protocol.