@quantabit/social-sdk

Universal social interaction SDK providing full social feature support for the DID ecosystem.

✨ Features

• 🎯 Like System - Quick like/unlike with real-time counting
• ⭐ Bookmark Feature - Save interesting content
• 👥 Follow System - Follow users or projects
• 📍 Progress Tracking - Track project progress
• 💬 Comment System - Nested replies, likes, edit, and delete
• 🔗 Share Feature - One-click sharing to multiple platforms (Twitter, Facebook, WeChat, etc.)
• 💡 Suggestions - Submit, vote, and accept suggestions
• 🎁 Tip System - Multi-currency support (XWIN, USDT, BTC, ETH, and 10+ currencies)
• 🔔 Reminder Settings - Email, push, and SMS multi-channel reminders
• 🌍 Multi-Language Support - Chinese, English, Japanese, Korean

📦 Installation

npm install @quantabit/social-sdk
# or
yarn add @quantabit/social-sdk
# or
pnpm add @quantabit/social-sdk

🚀 Quick Start

1. Import Styles

/* In your global CSS file */
@import "@quantabit/social-sdk/dist/styles.css";

Or in JavaScript:

import "@quantabit/social-sdk/styles";

2. Configure Provider

import { SocialProvider } from "@quantabit/social-sdk";

function App() {
  return (
    <SocialProvider
      apiBaseUrl="/api/v1/interactions"
      getToken={() => localStorage.getItem("access_token")}
      language="en"
      onAuthRequired={() => {
        // Navigate to login page
        window.location.href = "/login";
      }}
    >
      <YourApp />
    </SocialProvider>
  );
}

3. Using Components

import {
  LikeButton,
  FavoriteButton,
  CommentSection,
  InteractionBar,
  TipButton,
  ShareButton,
} from "@quantabit/social-sdk";

function ProjectDetail({ project }) {
  return (
    <div>
      <h1>{project.title}</h1>

      {/* Interaction bar */}
      <InteractionBar targetType="project" targetId={project.id} />

      {/* Or use individual buttons */}
      <div className="actions">
        <LikeButton targetType="project" targetId={project.id} />
        <FavoriteButton targetType="project" targetId={project.id} />
        <ShareButton
          targetType="project"
          targetId={project.id}
          title={project.title}
        />
        <TipButton
          targetType="project"
          targetId={project.id}
          receiverId={project.creatorId}
          receiverName={project.creatorName}
        />
      </div>

      {/* Comment section */}
      <CommentSection targetType="project" targetId={project.id} />
    </div>
  );
}

📖 API Reference

Provider

<SocialProvider>

| Prop | Type | Required | Description | | -------------- | --------------- | -------- | -------------------------------------------- | | apiBaseUrl | string | No | API base URL, default /api/v1/interactions | | getToken | () => string | No | Token getter function | | language | string | No | Language code: en, zh, ja, ko | | userId | string | No | Current user ID | | onAuthRequired | () => void | No | Auth required callback | | onError | (error) => void | No | Error handling callback |

Components

Interaction Buttons

| Component | Description | | ------------------ | --------------- | | <LikeButton> | Like button | | <FavoriteButton> | Bookmark button | | <FollowButton> | Follow button | | <TrackButton> | Track button | | <ShareButton> | Share button | | <TipButton> | Tip button | | <ReminderButton> | Reminder button |

Common props:

| Prop | Type | Description | | ---------- | ------------------------- | -------------------------------------------- | | targetType | string | Target type: project, user, post, etc. | | targetId | string | Target ID | | size | string | Size: small, medium, large | | showCount | boolean | Whether to show count | | className | string | Custom class name | | onToggle | (isActive, count) => void | Toggle state callback |

Interaction Bar

<InteractionBar
  targetType="project"
  targetId="123"
  showLike={true}
  showFavorite={true}
  showComment={true}
  showShare={true}
  showTip={true}
  onCommentClick={() => {}}
  onShareClick={() => {}}
  onTipClick={() => {}}
/>

Comment Component

<CommentSection
  targetType="project"
  targetId="123"
  pageSize={20}
  onCommentCreated={() => {}}
/>

Suggestion Component

<SuggestionSection targetType="project" targetId="123" canAccept={isOwner} />

Tip Component

<TipModal
  isOpen={showTipModal}
  onClose={() => setShowTipModal(false)}
  targetType="project"
  targetId="123"
  receiverId={creatorId}
  receiverName={creatorName}
  onSuccess={(tip) => console.log('Tip sent!', tip)}
/>

<TipList targetType="project" targetId="123" />
<TipRanking targetType="project" targetId="123" />

Hooks

useInteraction

const {
  isLiked,
  isFavorited,
  isFollowing,
  isTracking,
  loading,
  toggleLike,
  toggleFavorite,
  toggleFollow,
  toggleTrack,
} = useInteraction("project", projectId);

useComments

const {
  comments,
  total,
  hasMore,
  loading,
  createComment,
  updateComment,
  deleteComment,
  likeComment,
  loadMore,
} = useComments("project", projectId);

useTips

const { tips, ranking, currencies, sendTip, confirmTip } = useTips(
  "project",
  projectId,
);

useShare

const { shareUrl, qrCodeUrl, copied, shareTo, copyLink, nativeShare } =
  useShare("project", projectId, { title, description });

useSuggestions

const { suggestions, createSuggestion, vote, accept } = useSuggestions(
  "project",
  projectId,
);

useStats

const {
  likeCount,
  favoriteCount,
  commentCount,
  shareCount,
  viewCount,
  tipTotalUsd,
} = useStats("project", projectId);

🎨 Theme Customization

The SDK uses CSS variables for easy theme customization:

:root {
  /* Primary color */
  --social-primary: #6366f1;
  --social-primary-hover: #4f46e5;

  /* Interaction colors */
  --social-like: #ef4444;
  --social-favorite: #f59e0b;
  --social-follow: #10b981;
  --social-tip: #8b5cf6;

  /* Background colors */
  --social-bg: #ffffff;
  --social-bg-secondary: #f8fafc;

  /* Text colors */
  --social-text: #1e293b;
  --social-text-secondary: #64748b;

  /* Border radius */
  --social-radius: 8px;
  --social-radius-full: 9999px;
}

Dark Mode

Add data-theme="dark" or .dark class to the root element to enable dark mode.

🌍 Internationalization

import { setLanguage, t } from "@quantabit/social-sdk";

// Set language
setLanguage("en");

// Get translation
const text = t("like"); // "Like"

Supported languages:

• en - English
• zh - Chinese
• ja - Japanese
• ko - Korean

💰 Supported Currencies

The tip system supports the following currencies:

| Currency | Name | Type | | -------- | ------------- | -------------- | | XWIN | XWIN Token | Platform Token | | QBT | QBit Token | Platform Token | | USDT | Tether USD | Stablecoin | | USD | US Dollar | Fiat | | BTC | Bitcoin | Cryptocurrency | | ETH | Ethereum | Cryptocurrency | | SOL | Solana | Cryptocurrency | | MATIC | Polygon | Cryptocurrency | | BNB | BNB | Cryptocurrency | | AVAX | Avalanche | Cryptocurrency |

📝 Backend API

The SDK requires the following backend API endpoints:

• POST /interactions/toggle - Toggle interaction status
• GET /interactions/status/{type}/{id} - Get user interaction status
• GET /interactions/stats/{type}/{id} - Get statistics data
• POST /interactions/comments - Create comment
• GET /interactions/comments/{type}/{id} - Get comment list
• POST /interactions/shares - Create share
• POST /interactions/suggestions - Create suggestion
• GET /interactions/tips/currencies - Get supported currencies
• POST /interactions/tips - Create tip
• POST /interactions/reminders - Create reminder

For detailed API specifications, please refer to the backend documentation.

📄 License

MIT License

🤝 Contributing

Welcome to submit Issues and Pull Requests!

🌐 Brand & Links

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