Trading Points Module

This module provides a complete points system implementation for trading campaigns, including points tracking, leaderboards, referral links, and stage management.

Features

- 📊 Points Dashboard: Display user's trading points, PnL points, and referral points
- 🏆 Leaderboard: Show rankings with support for different time ranges (this week, last week, all time)
- 🎯 Campaign Stages: Support multiple campaign stages with different statuses (active, pending, completed)
- 🔗 Referral System: Generate and share referral links and codes
- ⏱️ Countdown Timer: Display countdown for pending campaigns

Basic Usage

$3

``tsx
import { PointSystemPage } from "@orderly.network/trading-points";

function MyApp() {
const handleRouteChange = (option) => {
// Handle navigation
console.log("Navigate to:", option.href);
};

return ;
}
`

Advanced Usage

$3

The usePoints hook provides access to all points-related data and methods:

`tsx
import { usePoints } from "@orderly.network/trading-points";

function CustomPointsComponent() {
const {
stages, // All campaign stages
userStatistics, // User's points statistics
currentStage, // Currently selected stage
setCurrentStage, // Function to change stage
isLoading, // Loading state
isNoCampaign, // Whether there's no active campaign
refLink, // Referral link
refCode, // Referral code
selectedTimeRange, // Current time range filter
setSelectedTimeRange, // Function to change time range
pointsDisplay, // Formatted points display data
allTimePointsDisplay, // All-time points display data
isCurrentStagePending, // Whether current stage is pending
isCurrentStageCompleted, // Whether current stage is completed
getRankingUrl, // Function to get ranking API URL
} = usePoints();

return (



);
}
`

Components Overview

$3

- PointSystemPage: The main entry point component
- Countdown: Displays countdown timer for pending campaigns
- Intro: Shows campaign introduction and stage selection
- User: Displays user's points, stats, and referral information
- GeneralLeaderboardWidget: Shows the leaderboard/rankings

$3

`
pages/points/
├── page.tsx # Main page component
├── main.tsx # Layout and composition
├── countdown.tsx # Countdown timer
├── intro.tsx # Campaign intro
├── user.tsx # User stats
└── faq.tsx # FAQ section

components/
├── leaderboard/ # Leaderboard components
└── ranking/ # Ranking components

hooks/
└── usePointsData/ # Points data management
``