Token Gate Page
The Token Gate page provides on-chain utility to Colored Key NFTs by granting holders exclusive access to messaging and content. It uses secure authentication mechanisms, including Sign-In with Ethereum (SiWE), so connecting your wallet feels like a privilege rather than a routine step. State-based logic guides you to mint if you do not have a key or to burn if you have already used yours, ensuring you always know what to do next. Inside the gate, you can send a message directly to Rito Rhymes and unlock an unreleased track.
File Paths
- Completion.tsx
- Completion.module.css
- GatedContentRenderer.tsx
- GatedContentRenderer.module.css
- GateModal.tsx
- GateModal.module.css
- GatePageWrapper.tsx
- GatePageWrapper.module.css
- page.module.css
- metadata.ts
- page.tsx
- page.unit.test.ts
Components of Note
| Component | Location | Purpose |
|---|---|---|
| Completion | app/gate/components/Completion/Completion.tsx | Shows confirmation once your message is sent and marks your key as used. |
| GatedContentRenderer | app/gate/components/GatedContentRenderer/GatedContentRenderer.tsx | Renders the messaging form or exclusive media based on your token state. |
| GateModal | app/gate/components/GateModal/GateModal.tsx | Manages wallet connection, SiWE signature flow, and directs you to mint or burn as needed. |
| GatePageWrapper | app/gate/components/GatePageWrapper.tsx | Orchestrates authentication, state transitions, and mounts the gate modal or gated content. |
| gatedContent | app/lib/server/gatedContent.ts | Defines JSON payloads for welcome text, submission form, and exclusive audio data. |
Music
This track is a mystery until you unlock it. Hint: it involves Bitcoin and Britney Spears.
Detailed technical breakdown of the complex structure of the Token Gate.
Token Gate Structure