L.Pass Claim Page (Lotte)

An interactive web page built for users who completed the Daily Mission project to claim NFTs as rewards. Clicking a 3D cube at the center of the screen and connecting a wallet triggers an intuitive UX where lights turn on if claiming is available, or off if not.

The original requirement was to upload all participating wallet addresses directly to the smart contract. However, the external contract development team implemented this logic as-is, resulting in excessive gas fees. To resolve this, I designed a database for off-chain wallet verification and restructured the architecture to minimize the contract's role, dramatically reducing gas costs.

ROLE

Handled Three.js 3D scene implementation, frontend development, and wallet integration. Led the DB design and contract architecture restructuring for gas fee optimization.

FEATURES

3D Interaction — Implemented a cube object with lighting effects using Three.js. Provided intuitive visual feedback where lights turn on for eligible claims and off for ineligible ones.

Gas Fee Optimization — Redesigned the architecture from on-chain wallet storage to DB-based off-chain verification with minimal on-chain logic, drastically reducing gas costs.

RETROSPECT

The first project where Three.js was applied in production, laying the foundation for 3D web development. The client was highly satisfied with the simple yet visually impressive result, and the experience of identifying structural issues in an external team's contract and proposing cost-saving alternatives was particularly memorable.

SKILLS

Next.js · Three.js · Ethers.js · Solidity (ETH Claim Contract)