Loyalty Token Balance & Redemption Drawer

[meshackyaro]

Description

This issue aims to address the implementation of Loyalty Token Balance & Redemption Drawer.

The core objective is to: Create a loyalty drawer that shows token balances and walks users through redeeming rewards with clear confirmation and pending states.

By completing this feature, we will ensure that the GuildWorkman protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🟡 Medium

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Loyalty Token Balance & Redemption Drawer
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Create a loyalty drawer that shows token balances and walks users through redeeming rewards with clear confirmation and pending states.
• Any PR that introduces TypeScript errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

1-2 days

[HulbertAlejandro]

Hi! I'd like to work on this issue.

I have experience with React, Next.js, TypeScript, and Tailwind CSS, and I've already set up the project locally to become familiar with its structure and design system.

I can implement the Loyalty Token Balance & Redemption Drawer following the existing UI architecture, ensuring responsive behavior, clear redemption confirmation and pending states, while verifying the implementation with lint, typecheck, and production build before submitting the PR.

Looking forward to contributing!

[charlesbarleyman]

Hi maintainers, I’d like to work on this issue.

I’ve reviewed the requirements and can implement the loyalty token balance and redemption
drawer in the web application. I’ll focus on:

• Clear loading, empty, success, and error states
• Accurate token balance display
• Wallet connection and transaction-state handling
• Redemption form validation and disabled states
• Transaction confirmation and failure feedback
• Responsive and accessible UI
• Reusable components that follow the existing project conventions
• Tests covering rendering, validation, wallet states, and transaction outcomes

[grantfox-oss]

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

Next steps:

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

Good luck! Track your progress on GrantFox.