Top One Trader · Battle For the Belt

Registration form — React component

A drop-in React + TypeScript component for the competition registration form. All 9 fields, live countdown, validation, prize block, and success modal — self-contained. Styles are namespaced under .bftb-root so they won't collide with your app's CSS.

▶ Open live preview ↓ BattleForTheBelt.tsx ↓ BattleForTheBelt.css

Usage

App.tsx

import BattleForTheBelt from './BattleForTheBelt';

<BattleForTheBelt
  closesAt={new Date('2026-06-15T23:59:59')}
  termsUrl="/legal/competition-terms"
  onSubmit={async (data) => { await api.registerForCompetition(data); }}
/>

The dev wires one thing: the onSubmit prop. It fires only after client-side validation passes and returns a typed object with all 9 fields (firstName, lastName, email, phone, city, country, zip, address, agree). Point it at your registration endpoint / CRM.

Component

BattleForTheBelt.tsx

Loading…

Styles

BattleForTheBelt.css

Loading…

Two placeholders to finalize: the helmet logo SVG in the component, and the exact close time / timezone on June 15 (set via the closesAt prop). Funded prize shows $800K.