JavaScript SDK

# npm
npm install @xp-sdk/core

# yarn
yarn add @xp-sdk/core

# pnpm
pnpm add @xp-sdk/core

# CDN (browser)
<script src="https://cdn.funstack.io/sdk/v2/xp-sdk.min.js"></script>

import { XPSDK } from '@xp-sdk/core';

// Initialize the SDK
const xp = new XPSDK({
  apiKey: 'your-api-key',
  environment: 'testnet', // or 'production'
  debug: true,
});

// Wait for SDK to be ready
await xp.init();
console.log('XP SDK initialized!');

// Guest login (device fingerprint)
const player = await xp.auth.loginAsGuest();
console.log('Player ID:', player.id);

// Wallet login (EIP-1193)
const wallet = await xp.auth.connectWallet();
console.log('Wallet:', wallet.address);

// Check auth state
if (xp.auth.isLoggedIn) {
  const balance = await xp.getXPBalance();
  console.log('XP Balance:', balance);
}

// Logout
await xp.auth.logout();

// Track game events
await xp.progression.trackEvent('level_complete', {
  level: 5,
  score: 12500,
  time: 120.5,
});

// Award XP (server-validated)
const result = await xp.progression.awardXP(100, 'Boss defeated');
console.log('New balance:', result.newBalance);

// Get player stats
const stats = await xp.progression.getStats();
console.log(`Level: ${stats.level}, Total XP: ${stats.totalXP}`);

// Check achievements
const achievements = await xp.progression.getAchievements();
achievements.forEach(a => console.log(a.name, a.unlocked));

// Check if ad is ready
const adReady = await xp.ads.isRewardedAdReady();

// Show rewarded ad
if (adReady) {
  const result = await xp.ads.showRewardedAd({
    placement: 'level_complete',
    onStart: () => console.log('Ad started'),
    onComplete: (reward) => console.log('Earned', reward.xp, 'XP'),
    onError: (err) => console.error('Ad error:', err),
  });
}

// Preload next ad
xp.ads.preloadRewardedAd();

import { XPProvider, useXP, useAuth, useBalance } from '@xp-sdk/react';

// Wrap your app
function App() {
  return (
    <XPProvider apiKey="your-api-key">
      <GameUI />
    </XPProvider>
  );
}

// Use hooks in components
function GameUI() {
  const { trackEvent } = useXP();
  const { player, login, logout } = useAuth();
  const { balance, refresh } = useBalance();

  return (
    <div>
      <p>XP: {balance}</p>
      <button onClick={() => trackEvent('click')}>
        Track Event
      </button>
    </div>
  );
}