CMX Protocol
Page Documentation
A complete reference for every page and component in the CMX Protocol frontend — a BNB Smart Chain token sale platform with a 15-depth referral reward system, protocol levels, leaderboards, and real-time on-chain data.
Introduction
The CMX Protocol is a smart-contract-governed token sale on BNB Smart Chain. Users buy CMX tokens using BNB, and every purchase triggers an automated multi-level incentive engine that distributes BNB rewards up to 15 depth layers in a participant's referral network.
The frontend is split into two main data sources: contract reads via wagmi/viem (for live, real-time state like balances and ranks) and a Ponder-indexed GraphQL API (for historical events like purchases, reward allocations, and leaderboard history).
Architecture
The app uses two smart contracts and two data layers. Understanding this split helps when reading any page.
| Layer | What it does | Used for |
|---|---|---|
| Trade Contract | Handles CMX purchases, gifting, and price calculations | Buy page, Gift MOS form |
| Rewards Contract | Tracks and distributes BNB referral rewards, royalty, holder pool | Rewards page, Account page |
| wagmi / viem | Live contract reads — balances, rank, pending rewards | All pages requiring wallet state |
| Ponder GraphQL | Indexed event history — purchases, allocations, leaderboard rounds | Dashboard, Account, Leaderboard |
| Direct RPC Calls | Raw eth_call to MOSStorage for user tooltip previews | Dashboard — address badge tooltips |
Protocol Dashboard
/dashboardThe top banner displays four protocol-wide metrics pulled from the Ponder GraphQL API: total wallet activations, total CMX allocated (sold), 24-hour BNB volume, and combined reserve pool balance. Each stat is updated via the useProtocolStats hook.
Below the stats is a global address filter input. Typing any wallet address filters all five data tabs simultaneously — the address is persisted in the URL query string (?addr=0x…) so filtered views can be bookmarked or shared.
Four small strips showing the live BNB balance of each smart contract pool: Incentive Reserve (pending referral payouts), Liquidity Allocation (fetched via direct RPC eth_getBalance), Tier Allocation (royalty pool), and Performance Index (Top 10 daily distribution pool). These give a real-time snapshot of how much BNB is held across the protocol's sub-pools.
A 30-day Recharts line chart showing four daily BNB metrics side-by-side: CMX Acquisition volume, Incentive/Reward payouts, Top Contributor distributions, and Tier Allocation claims. Uses robust date parsing that handles both ISO date strings and Unix timestamps. Data comes from the useOverviewChart GraphQL hook.
Five tabs, each showing a different category of on-chain events with cursor-based pagination (10 rows per page):
eth_call to the MOSStorage contract and displays that wallet's full stats — with results cached in memory to avoid redundant calls.Account Page
/dashboard/accountFull-width banner at the top showing the user's wallet address (with copy button and BscScan link), their current rank badge, active/inactive state, total CMX holdings (available + locked), and a breakdown of available vs. locked token amounts. Data comes from the useMOSUserData contract read hook.
Shows the user's current protocol level and progress toward the next one. Three progress bars display Direct Network Activations, Active Network Nodes, and Network Volume — each showing current vs. required values. Locked perks of the next level are shown in grayed-out badges. At max level (4), a "Max Rank Achieved" badge replaces the progress bars.
A 30-day line chart showing the user's personal daily reward activity across four metrics: Allocated (BNB allocated to them), Allocation Executed (claimed), Performance Allocations, and Tier Allocations. Data comes from the useAccountChart GraphQL hook filtered by the user's address.
Four small stat cards showing lifetime reward totals from the Ponder GraphQL API: Total Allocation Executed (claimed referral BNB), Pending Allocation, Performance Allocation (leaderboard winnings), and Tier Allocation (royalty claimed). These are historical aggregates, not live contract reads.
A filterable, paginated feed of all on-chain events involving the user's wallet. Filter chips let the user switch between All Events, Allocation Events, Executed Allocations, Performance Allocations, and Tier Allocations. Each event row shows context-specific details: for referral allocations it shows the source buyer, depth level, and reward amounts; for leaderboard events it shows placement and pool size.
Performance Index
/dashboard/leaderboardThe top banner shows the current performance pool size (live BNB accumulating today) and a live countdown timer to the next UTC midnight distribution. The timer updates every second using a local setInterval.
Displays the current top 10 wallets ranked by today's accumulated downline referral volume. Each card shows rank (with gold/silver/bronze medal styling for top 3), wallet address with avatar, today's volume, total all-time volume, direct referral count, holder count, and current protocol level. Data refreshes every 30 seconds from useLiveLeaderboard. Shows skeleton cards while loading and an empty state if no volume has been recorded today.
A grid of past distribution round cards. Each card shows the date, total BNB distributed, and the top 3 winners with their payouts. A "show more" button expands to reveal all winners from that round. Cards link to BscScan for transaction verification. Initially shows 6 rounds; a "View all N rounds" button expands further. Data comes from usePastDistributions.
Protocol Levels
/dashboard/ranks| Level | Direct Refs | Holders | Volume | Key Unlock |
|---|---|---|---|---|
| Level 0 default | 0 | 0 | 0 BNB | Depth 1 rewards (2.5% BNB + CMX) |
| Level 1 L1 | 5 | 10 | 10 BNB | Depth 2–5 BNB rewards |
| Level 2 L2 | 10 | 50 | 20 BNB | Depth 6–10 + Tier Allocation Pool (1%) |
| Level 3 L3 | 20 | 250 | 100 BNB | Depth 11–15 + Tier Allocation Pool (2%) |
| Level 4 L4 | 25 | 1000 | 200 BNB | Max rewards + Tier Pool (3%) + Leaderboard |
Only shown if the user is not at max level. Displays a progress bar for each of the three requirements toward the next level (direct referrals, holders, and volume), reading live values from useMOSUserData. Bars turn green when a requirement is met. An "Invite & Earn" button links to the Network Activation page.
One card per level, always shown. Each displays the level's SVG badge image, requirements, perks (with lock/unlock icons based on the user's current level), level reward percentages, and whether the tier allocation pool applies. Cards for unlocked levels use colored styling; locked ones are grayed out. The current active level gets a highlighted border.
Reward Engine
/dashboard/rewardsShows pending BNB (ready to claim) and total historically claimed BNB from referral rewards. The claim button calls claimReferralRewards on the Rewards contract. Disabled if the user has already claimed today (once-per-day cooldown enforced on-chain) or if there are no pending rewards. Shows a spinner during transaction confirmation and a success state after.
Shows claimable and total-claimed tier allocation (royalty) BNB. Locked with an informational message if the user is below Level 2. At Level 2+, the claim button calls claimGlobalRoyalty. A cooldown-active state is shown if the user has already claimed this cycle.
useWriteContract + useWaitForTransactionReceipt pattern. A toast notification appears at the bottom-right confirming submission, and the page refetches on-chain data after success.CMX Distribution Ledger
/dashboard/claimDisplays the user's purchased CMX balance (availMOS) with a USD estimate at projected listing price. A badge shows "Pending" or "Claimable" depending on whether the sale has been finalized. Until finalization, a disabled "Awaiting sale finalization" button is shown with a tooltip explaining the condition.
Displays lockedRefMOS — CMX earned from referral incentives that is subject to a 12-month vesting lock. The lock opens only after: (1) the sale has ended, and (2) one full year has passed since sale end. The unlock button becomes active only when both conditions are true.
A progress bar showing how many of the total 50,000,000 CMX tokens have been sold/distributed so far, expressed as a percentage with remaining token count. Uses totalTokensSold and totalTokensForSale from the contract read.
Network Activation
/dashboard/inviteFour stat cards at the top showing the user's network metrics: Level-1 Activations (direct referrals), Network Nodes (total downline holders), Total Volume (aggregate BNB volume from downline), and Current Protocol Level. All values come from the useMOSUserData hook.
Shows the user's personal referral URL ({origin}/r/{address}) with a copy button. Below the link are four social share buttons for Twitter/X, Telegram, WhatsApp, and Facebook — each opens the platform's native share intent with a pre-written message containing the referral link. Links are disabled until the address is loaded.
A form to execute a CMX purchase on behalf of another wallet. The sender pays BNB; the recipient receives CMX. The form validates that the recipient address is a valid Ethereum address and that the BNB amount is within the allowed min/max range. Quick-select buttons for 1, 3, 5, 10 BNB are provided.
A live estimate panel shows three values calculated before the transaction: Execution Cost (BNB + USD), Recipient Allocation (CMX tokens they'll receive at current price), and Incentive Allocation (2.5% BNB the sender earns as a referral reward). Calls giftMOS on the Trade contract. The recipient must not have previously purchased CMX (enforced on-chain).
Data Sources Reference
| Hook | Source | Used In |
|---|---|---|
| useMOSUserData | Contract reads (wagmi) | Account, Ranks, Rewards, Claim, Invite — all user-specific live state |
| useAccountData | Ponder GraphQL | Account — historical reward totals |
| useAccountActivity | Ponder GraphQL | Account — per-event activity feed |
| useAccountChart | Ponder GraphQL | Account — 30-day daily reward chart |
| useLiveLeaderboard | Ponder GraphQL | Leaderboard (live top 10), Dashboard Header |
| usePastDistributions | Ponder GraphQL | Leaderboard — historical distribution rounds |
| useProtocolStats | Ponder GraphQL | Dashboard — global stats banner |
| useOverviewPurchases | Ponder GraphQL | Dashboard — CMX.Acquisition tab |
| useOverviewRefAllocations | Ponder GraphQL | Dashboard — Reward.Allocation tab |
| useOverviewRankUpgrades | Ponder GraphQL | Dashboard — Protocol.Level.Upgrades tab |
| useOverviewTop10Distributions | Ponder GraphQL | Dashboard — Performance.Index tab |
| useOverviewRoyaltyClaims | Ponder GraphQL | Dashboard — Tier.Allocation tab |
| useOverviewPoolBalances | Ponder GraphQL | Dashboard — pool balance pills |
| useOverviewChart | Ponder GraphQL | Dashboard — 30-day activity chart |
| Direct RPC eth_call | BSC RPC → MOSStorage | Dashboard — address badge hover tooltips |
Dashboard Header
useLiveLeaderboard, a live countdown to UTC midnight distribution, and a pulsing green dot indicating the pool is actively accumulating.CMX Protocol · Frontend Documentation · Generated from Source