@quantabit/points-sdk

QuantaBit Points System SDK - Points balance, check-in, transactions, and gifting

📦 Installation

npm install @quantabit/points-sdk
# or
yarn add @quantabit/points-sdk

🚀 Quick Start

1. Setup Provider

import { PointsProvider } from "@quantabit/points-sdk";
import "@quantabit/points-sdk/styles.css";

function App() {
  return (
    <PointsProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
      language="en"
      onCheckIn={(result) => console.log("Check-in successful:", result)}
    >
      <YourComponent />
    </PointsProvider>
  );
}

2. Using Components

import {
  PointsBalance,
  CheckInCalendar,
  PointsHistory,
  TransferPoints
} from '@quantabit/points-sdk';

// Points balance display
<PointsBalance showDetails showStats />

// Check-in calendar
<CheckInCalendar
  onCheckIn={() => console.log('Checked in!')}
  showStreak
  showRewards
/>

// Points history
<PointsHistory
  pageSize={20}
  showFilter
/>

// Points transfer
<TransferPoints
  onSuccess={(result) => console.log('Transfer successful:', result)}
/>

3. Using Hooks

import { usePoints } from "@quantabit/points-sdk";

function MyComponent() {
  const {
    account, // Points account info
    balance, // Current balance
    checkInStatus, // Check-in status
    loading,
    loadAccount, // Load account
    checkIn, // Execute check-in
    transfer, // Transfer points
    exchange, // Exchange
  } = usePoints();

  return (
    <div>
      <p>Balance: {balance}</p>
      <button onClick={checkIn}>Check In</button>
    </div>
  );
}

📚 Components

| Component | Description | | ----------------- | --------------------------------------------- | | PointsBalance | Points balance display card | | CheckInCalendar | Check-in calendar with streak rewards display | | PointsHistory | Points transaction history list | | TransferPoints | Points gifting form component |

🪝 Hooks

| Hook | Description | | ----------- | ----------------------------------------------------------------- | | usePoints | Get Points Context, includes account, check-in, transfer features |

⚙️ PointsProvider Configuration

| Prop | Type | Required | Description | | ------------ | ------------------ | -------- | ------------------------------ | | apiUrl | string | Yes | API base URL | | token | string | No | Auth Token | | language | 'zh' \| 'en' | No | Language setting, default zh | | onCheckIn | (result) => void | No | Check-in success callback | | onTransfer | (result) => void | No | Transfer success callback | | onError | (error) => void | No | Error callback |

📖 API Types

// Points account
interface PointsAccount {
  user_did: string;
  balance: number; // Available balance
  frozen_balance: number; // Frozen balance
  total_earned: number; // Total earned
  total_spent: number; // Total spent
  created_at: string;
  updated_at: string;
}

// Transaction types
type TransactionType =
  | "earn" // Earn
  | "spend" // Spend
  | "transfer" // Transfer
  | "exchange" // Exchange
  | "expire" // Expire
  | "refund"; // Refund

// Points sources
type PointSource =
  | "check_in" // Check-in
  | "task" // Task
  | "referral" // Referral
  | "activity" // Activity
  | "purchase" // Purchase
  | "transfer_in" // Transfer in
  | "admin_grant"; // System grant

🎨 Custom Styling

Use CSS variables for custom theming:

:root {
  --points-primary: #f59e0b;
  --points-success: #10b981;
  --points-bg: #ffffff;
}

📄 License

MIT License

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback