Technical Reference · Frontend

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.

Next.js · App Routerwagmi · viemPonder GraphQLBNB Smart ChainConnectKit
00

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.

What the app does: It connects to a user's crypto wallet, shows their on-chain state (token balance, earned rewards, referral network, protocol level), and lets them interact with the smart contracts — sharing referral links, claiming rewards, and gifting tokens to others.

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).

User WalletBuy CMXRewards Engine15-Level DistributionClaim BNB
01

Architecture

The app uses two smart contracts and two data layers. Understanding this split helps when reading any page.

LayerWhat it doesUsed for
Trade ContractHandles CMX purchases, gifting, and price calculationsBuy page, Gift MOS form
Rewards ContractTracks and distributes BNB referral rewards, royalty, holder poolRewards page, Account page
wagmi / viemLive contract reads — balances, rank, pending rewardsAll pages requiring wallet state
Ponder GraphQLIndexed event history — purchases, allocations, leaderboard roundsDashboard, Account, Leaderboard
Direct RPC CallsRaw eth_call to MOSStorage for user tooltip previewsDashboard — address badge tooltips
Wallet requirement: Most pages require a connected wallet. Pages gracefully fall back to a "Connect Your Wallet" state if no wallet is detected. The Account page additionally redirects to a "No Active Position" CTA if the wallet has never purchased CMX.
02

Shared Components

Several small building-block components appear across multiple pages. These are defined per-file but serve the same visual purpose throughout the app.

Avatar
Deterministic SVG avatar generated from a wallet address. Uses address bytes to pick colors and dot positions — same address always produces the same avatar. Used everywhere an address is displayed.
CoinAmount
Inline display of a numeric amount with its coin logo (BNB or CMX) and ticker label. Keeps coin displays consistent and visually paired with the correct icon.
AddressBadge
A truncated wallet address (0x1234…abcd) with avatar as a pill badge. Hovering triggers a live tooltip that fetches and shows that wallet's full on-chain stats from the storage contract.
RankBadge
Colored badge showing Protocol Level 0–4 with level-specific styling (zinc → indigo → violet → amber → emerald). Used in tables, cards, and tooltips.
SkeletonLine
Animated gray pulse placeholder shown while data is loading. Prevents layout shift during async contract reads.
USDTooltip
Wraps a USD estimate in a hover tooltip that shows the BNB equivalent and the conversion rate used. Applied to most monetary displays across the app.
03

Protocol Dashboard

/dashboard
Purpose: The global protocol explorer. Anyone (no wallet needed) can view every on-chain event — token purchases, reward distributions, rank upgrades, leaderboard history, and tier allocation claims — in a searchable, paginated table interface. It also shows live pool balances and a 30-day activity chart.
📊
Banner + Global Stats

The 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.

💰
Pool Balance Pills

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.

📈
ActivityChart

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.

🗂
Tabbed Event Tables

Five tabs, each showing a different category of on-chain events with cursor-based pagination (10 rows per page):

CMX.Acquisition
Every token purchase. Expandable rows show the BNB allocation breakdown (liquidity, operations, marketing, incentive engine) and the live referral distribution structure fetched from Ponder by transaction hash.
Reward.Allocation
Every referral reward event — showing referrer, buyer that triggered it, depth level (1–15), and BNB/CMX reward amounts.
Protocol.Level.Upgrades
Every time a wallet advanced from one protocol level to a higher one, showing old and new levels with colored badges.
Performance.Index
Historical leaderboard distribution rounds. Expandable rows show all 10 winners and individual BNB payouts from that round's pool.
Tier.Allocation
Every royalty/tier allocation claim — who claimed, their rank at the time, and the BNB amount received.
Address Tooltips: Every wallet address badge is hoverable. On hover, a live tooltip fires an RPC eth_call to the MOSStorage contract and displays that wallet's full stats — with results cached in memory to avoid redundant calls.
04

Account Page

/dashboard/account
Purpose: The connected user's personal dashboard. Shows their CMX token balance, protocol level progress, reward history chart, earnings summary, and a filterable activity feed of all events tied to their wallet.
🪪
MOSAllocationBanner

Full-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.

🏆
RankProgressCard

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.

📉
UserActivityChart

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.

💵
RewardSummary

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.

📋
FilterableActivityList

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.

Guard state: If the wallet has never purchased CMX, the entire page is replaced by a NotPurchasedCTA component showing the current token price and a "Purchase CMX" button. This prevents users from seeing an empty dashboard.
05

Performance Index

/dashboard/leaderboard
Purpose: Shows the live daily leaderboard of the top 10 wallets ranked by their network's accumulated BNB volume in the current UTC day, plus a full history of past daily distribution rounds. The top 10 each day share a performance pool distributed automatically at UTC midnight.
Banner — Pool + Countdown

The 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.

👑
LiveTop10

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.

📜
PastDistributions

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.

06

Protocol Levels

/dashboard/ranks
Purpose: Explains the five protocol levels (0–4) and shows the connected user their current level, progress to the next one, and what rewards/perks unlock at each tier. Levels are earned automatically on-chain when a wallet meets threshold requirements.
LevelDirect RefsHoldersVolumeKey Unlock
Level 0 default000 BNBDepth 1 rewards (2.5% BNB + CMX)
Level 1 L151010 BNBDepth 2–5 BNB rewards
Level 2 L2105020 BNBDepth 6–10 + Tier Allocation Pool (1%)
Level 3 L320250100 BNBDepth 11–15 + Tier Allocation Pool (2%)
Level 4 L4251000200 BNBMax rewards + Tier Pool (3%) + Leaderboard
📊
Rank Progress Card

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.

🃏
Five Rank Cards

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.

07

Reward Engine

/dashboard/rewards
Purpose: The primary interface for claiming BNB rewards. Users can claim their pending network incentive (referral) rewards and their tier allocation (royalty) rewards directly from this page by triggering on-chain transactions.
🎁
Network Incentive Allocation Card

Shows 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.

👑
Tier Allocation Layer Card

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.

Transaction flow: Both claim actions use wagmi's useWriteContract + useWaitForTransactionReceipt pattern. A toast notification appears at the bottom-right confirming submission, and the page refetches on-chain data after success.
08

CMX Distribution Ledger

/dashboard/claim
Purpose: Shows the user's CMX token allocation status — how many tokens they have from their purchase, how many are locked under the vesting schedule, and when those locked tokens become claimable. This page is informational; actual token transfer happens post-sale finalization.
🪙
CMX Allocation Card

Displays 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.

🔒
Vested Incentive Allocation Card

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.

📊
Distribution Progress Bar

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.

09

Network Activation

/dashboard/invite
Purpose: The referral hub. Users share their unique Protocol Access Link to bring new participants into the protocol. Purchases made through the link trigger the 15-level BNB reward distribution. Users can also directly gift CMX to another wallet address by paying BNB on their behalf.
📊
Stats Strip

Four 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.

🔗
Protocol Access Link Card

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.

🎁
CMX Allocation Transfer (Gift)

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).

10

Data Sources Reference

HookSourceUsed In
useMOSUserDataContract reads (wagmi)Account, Ranks, Rewards, Claim, Invite — all user-specific live state
useAccountDataPonder GraphQLAccount — historical reward totals
useAccountActivityPonder GraphQLAccount — per-event activity feed
useAccountChartPonder GraphQLAccount — 30-day daily reward chart
useLiveLeaderboardPonder GraphQLLeaderboard (live top 10), Dashboard Header
usePastDistributionsPonder GraphQLLeaderboard — historical distribution rounds
useProtocolStatsPonder GraphQLDashboard — global stats banner
useOverviewPurchasesPonder GraphQLDashboard — CMX.Acquisition tab
useOverviewRefAllocationsPonder GraphQLDashboard — Reward.Allocation tab
useOverviewRankUpgradesPonder GraphQLDashboard — Protocol.Level.Upgrades tab
useOverviewTop10DistributionsPonder GraphQLDashboard — Performance.Index tab
useOverviewRoyaltyClaimsPonder GraphQLDashboard — Tier.Allocation tab
useOverviewPoolBalancesPonder GraphQLDashboard — pool balance pills
useOverviewChartPonder GraphQLDashboard — 30-day activity chart
Direct RPC eth_callBSC RPC → MOSStorageDashboard — address badge hover tooltips

CMX Protocol · Frontend Documentation · Generated from Source