Building a Modular Web3 Rewards Claim System for a FinTech Platform

A production financial platform already had one on-chain rewards mechanism live and generating real user activity. Leadership wanted to test a second rewards provider to compare performance and engagement, but the existing system could not be touched. Any bug introduced during the new integration risked breaking reward payouts for active users, which made stability the top priority. The two systems also needed to share the same wallet connection layer, so users would not be asked to reconnect or re-authenticate depending on which rewards program they were using.

Rather than bolting the second provider directly onto the existing codebase, I designed a modular service layer that treated each rewards provider as an interchangeable module behind a shared interface. This meant the new integration could be built, tested, and shipped without modifying a single line of the original implementation. Reusable React hooks handled eligibility checks, reward-balance fetching, and claim status independently of which provider was active, while wallet authentication and transaction signing were shared across both systems so users experienced one consistent connection flow regardless of which rewards program they interacted with. Handling the full transaction lifecycle — pending, success, failure, and retry — was central to the work, since on-chain transactions can fail or stay pending for reasons outside the application's control, and users needed clear, honest feedback at every stage rather than a spinner that never resolved.

1. 01

   Designed a modular service layer that decoupled each rewards provider from shared UI components, so a new provider could be added or removed without touching existing code.

2. 02

   Built reusable React hooks for eligibility checks, reward balance fetching, and on-chain claim transactions.

3. 03

   Integrated wallet authentication and transaction signing shared across both reward systems.

4. 04

   Implemented full transaction lifecycle handling — pending, success, and failure states — with clear feedback at every step.

5. 05

   Added loading skeletons, automatic retries, response caching, and comprehensive error handling to keep the experience resilient to network and RPC issues.

6. 06

   Structured the module so it could be promoted to a permanent feature or removed entirely without affecting the original rewards implementation.