npm package: @hqlinhmmo/kahut-react
Description: Super Smart Web3 SDK for blockchain gaming and pool management
Author: Super Smart Team
Latest version: 1.0.0

# 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

```bash
npm install @hqlinhmmo/kahoot-react
```

## Quick Start

```typescript
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

```typescript
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

```typescript
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

```typescript
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

```typescript
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

```typescript
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

```bash
# 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

```typescript
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

```bash
# 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](https://github.com/hqlinh-mmo/super-smart-web3/issues).

## Contributing

Contributions are welcome! Please read our contributing guidelines and submit pull requests to our [GitHub repository](https://github.com/hqlinh-mmo/super-smart-web3).