@quantabit/task-sdk

QuantaBit Task System SDK - Task publishing, claiming, completion, and rewards

📦 Installation

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

🚀 Quick Start

1. Setup Provider

import { TaskProvider } from "@quantabit/task-sdk";
import "@quantabit/task-sdk/styles.css";

function App() {
  return (
    <TaskProvider
      apiUrl="https://api.example.com/v1"
      token="your-auth-token"
      language="en"
      onTaskComplete={(task) => console.log("Task completed:", task)}
      onRewardClaim={(reward) => console.log("Reward claimed:", reward)}
    >
      <YourComponent />
    </TaskProvider>
  );
}

2. Using Components

import { TaskCard, TaskList, TaskDetail } from '@quantabit/task-sdk';

// Task card
<TaskCard
  task={taskData}
  onClaim={(task) => handleClaim(task)}
  onClaimReward={(task) => handleReward(task)}
/>

// Task list
<TaskList
  type="daily"     // daily | weekly | main | my
  showFilter
  showStats
/>

// Task detail
<TaskDetail
  task={taskData}
  userTask={userTaskData}
  onClaim={handleClaim}
  onSubmit={handleSubmit}
  onClaimReward={handleReward}
/>

3. Using Hooks

import { useTask } from "@quantabit/task-sdk";

function MyComponent() {
  const {
    tasks, // Available task list
    myTasks, // My tasks
    stats, // Task statistics
    loading,
    loadTasks, // Load tasks
    claimTask, // Claim task
    submitTask, // Submit task
    claimReward, // Claim reward
    claimAllRewards, // Batch claim
  } = useTask();

  return <div>...</div>;
}

📚 Components

| Component | Description | | ------------ | ----------------------------------------------------- | | TaskCard | Task card showing task info, progress, action buttons | | TaskList | Task list with filtering, categories, statistics | | TaskDetail | Task detail page showing full info and steps |

🪝 Hooks

| Hook | Description | | --------- | ------------------------------------------------------- | | useTask | Get Task Context, includes task list and action methods |

⚙️ TaskProvider Configuration

| Prop | Type | Required | Description | | ---------------- | ------------------ | -------- | ------------------------------ | | apiUrl | string | Yes | API base URL | | token | string | No | Auth Token | | language | 'zh' \| 'en' | No | Language setting, default zh | | onTaskComplete | (task) => void | No | Task completion callback | | onRewardClaim | (reward) => void | No | Reward claim callback | | onError | (error) => void | No | Error callback |

📖 API Types

// Task types
type TaskType =
  | "daily" // Daily task
  | "weekly" // Weekly task
  | "monthly" // Monthly task
  | "main" // Main quest
  | "side" // Side quest
  | "event" // Event task
  | "achievement" // Achievement task
  | "onboarding"; // Onboarding task

// Task status
type TaskStatus =
  | "available" // Available to claim
  | "in_progress" // In progress
  | "completed" // Completed, reward pending
  | "claimed" // Reward claimed
  | "expired" // Expired
  | "locked"; // Locked

// Reward types
type RewardType =
  | "points" // Points
  | "exp" // Experience points
  | "token" // Token
  | "badge" // Badge
  | "item" // Item
  | "privilege"; // Privilege

// Task structure
interface Task {
  id: string;
  type: TaskType;
  title: string;
  description: string;
  icon?: string;
  rewards: Reward[];
  steps?: string[];
  target: number;
  start_time?: string;
  end_time?: string;
}

🎨 Custom Styling

Use CSS variables for custom theming:

:root {
  --task-primary: #6366f1;
  --task-success: #10b981;
  --task-warning: #f59e0b;
}

📄 License

MIT License

🌐 Brand & Links

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