Super Smart Frontend SDK

A React-based TypeScript SDK for client-side blockchain gaming operations, providing easy-to-use components and hooks for frontend applications with Worldcoin integration.

Package Information

• Name: @hqlinhmmo/kahoot-react
• Version: 0.0.0-development
• Description: Super Smart Web3 SDK for blockchain gaming and pool management

Features

• 📱 Client Operations: Easy-to-use client-side SDK for frontend applications
• 🔐 Worldcoin Integration: Seamless authentication using Worldcoin MiniKit React
• 🎮 Gaming Interface: React components for gaming interactions
• 🎫 Ticket Management: User-friendly ticket purchasing and management
• 🏆 Real-time Updates: Live game status and result updates
• 🎨 UI Components: Pre-built React components for gaming interface
• 📊 User Analytics: Client-side user performance tracking

Installation

npm install @hqlinhmmo/kahoot-react

Quick Start

import { SuperSmartClientSDK } from "@hqlinhmmo/kahoot-react";

const clientSDK = new SuperSmartClientSDK({
  isProduction: false, // Set to true for mainnet
  superSmartContractAddress: "0x...", // Your contract address
  miniappId: "your-miniapp-id",
});

// Login with Worldcoin
const { commandPayload, finalPayload, nonce } = await clientSDK.login();

// Get user info
const userInfo = await clientSDK.getUserInfo();

// Join a game pool
const poolId = BigInt(1);
const ticketPrice = await clientSDK.getJoinPoolTicketPrice(poolId);
const receipt = await clientSDK.joinGame(poolId, ticketPrice);

React Components

Authentication Components

import { WorldcoinLogin, UserProfile } from "@hqlinhmmo/kahoot-react";

// Login component with Worldcoin integration
<WorldcoinLogin
  onLogin={(user) => console.log('User logged in:', user)}
  onError={(error) => console.error('Login error:', error)}
/>

// User profile display
<UserProfile
  user={userInfo}
  onLogout={() => console.log('User logged out')}
/>

API Reference

SuperSmartClientSDK

Constructor

new SuperSmartClientSDK({
  isProduction: boolean;
  superSmartContractAddress: string;
  miniappId: string;
})

Methods

• login(): Authenticate with Worldcoin and return login payload
• getUserInfo(): Get current user information
• getUserBalance(): Get user's token balance
• joinGame(poolId: bigint, ticketPrice: bigint): Join a gaming pool
• getJoinPoolTicketPrice(poolId: bigint): Get ticket price for a pool
• getUnclaimedRewards(): Get user's unclaimed rewards

React Hooks

useWorldcoinAuth

import { useWorldcoinAuth } from "@hqlinhmmo/kahoot-react";

function MyComponent() {
  const { user, login, logout, isLoading } = useWorldcoinAuth();

  return (
    <div>
      {user ? (
        <button onClick={logout}>Logout</button>
      ) : (
        <button onClick={login} disabled={isLoading}>
          Login with Worldcoin
        </button>
      )}
    </div>
  );
}

useGamePools

import { useGamePools } from "@hqlinhmmo/kahoot-react";

function GamePoolsList() {
  const { pools, loading, error, refreshPools } = useGamePools();

  if (loading) return <div>Loading pools...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      {pools.map((pool) => (
        <div key={pool.id}>
          <h3>{pool.name}</h3>
          <p>Ticket Price: {pool.ticketPrice} ETH</p>
        </div>
      ))}
    </div>
  );
}

useUserRewards

import { useUserRewards } from "@hqlinhmmo/kahoot-react";

function RewardsPanel() {
  const { rewards, claimReward, isLoading } = useUserRewards();

  return (
    <div>
      <h3>Your Rewards</h3>
      {rewards.map((reward) => (
        <div key={reward.id}>
          <span>{reward.amount} ETH</span>
          <button onClick={() => claimReward(reward.id)} disabled={isLoading}>
            Claim
          </button>
        </div>
      ))}
    </div>
  );
}

Configuration

Environment Variables

# Worldcoin Configuration
NEXT_PUBLIC_WORLDCOIN_APP_ID=your_miniapp_id
NEXT_PUBLIC_WORLDCOIN_ACTION=your_action_name

# Web3 Configuration
NEXT_PUBLIC_RPC_URL=your_rpc_url
NEXT_PUBLIC_SUPER_SMART_CONTRACT_ADDRESS=0x...

Provider Setup

import { SuperSmartProvider } from "@hqlinhmmo/kahoot-react";

function App() {
  return (
    <SuperSmartProvider
      config={{
        isProduction: false,
        superSmartContractAddress: "0x...",
        miniappId: "your-miniapp-id",
      }}
    >
      <YourApp />
    </SuperSmartProvider>
  );
}

Requirements

• Node.js >= 18.0.0
• TypeScript >= 5.0.0
• React >= 18.0.0
• Modern browser with Web3 support

Dependencies

• @worldcoin/minikit-react: Worldcoin React integration
• react: React library
• viem: Ethereum interaction library
• ethers: Ethereum utilities

Build

# Build ESM version
npm run build:esm

# Build CommonJS version
npm run build:cjs

# Build both versions
npm run build

# Clean build directory
npm run clean

License

MIT

Support

For support and questions, please open an issue on our GitHub repository.

Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our GitHub repository.