Panna Monorepo

This is a TypeScript monorepo for developing a Panna SDK.

📦 Packages

panna-sdk

Wallet, transaction, chain and contract logic, including optional React components and hooks.

• Written in TypeScript
• Built with tsup (ESM + CJS)
• Contains both core logic (headless) and React UI/Hooks

🌐 Apps

example-app

Example Next.js 14 app demonstrating how to use the panna-sdk.

• React 19+ App Router
• Tailwind CSS
• Consumes panna-sdk directly

📚 Documentation

Core Module Documentation

Comprehensive guides for all SDK modules are available in the core package:

📖 View Core Module Docs

The documentation includes:

• Client - SDK initialization and configuration
• Wallet - User authentication and account management
• Transaction - Blockchain transaction handling
• Chain - Network configuration
• Onramp - Fiat-to-crypto gateway
• Util - Helper functions and utilities

Each module includes detailed usage examples, API references, and integration guides.

React Module Documentation

Complete documentation for building React applications with the Panna SDK:

⚛️ View React Module Docs

The React module includes:

• Components - Pre-built React components for authentication, transactions, and account management
• Hooks - React hooks for wallet state, blockchain data, and user interactions
• Utils - Utility functions for address formatting, conversions, and more
• Types - TypeScript type definitions for React components and hooks
• Consts - Constants and configuration for tokens, countries, and currencies

Each module includes comprehensive examples, type definitions, and best practices for React development.

🧰 Tooling

• Monorepo: PNPM Workspaces
• Build: tsup (for SDK bundling)
• Testing: jest, ts-jest
• Linting: eslint, prettier
• TypeScript: Strict mode with project references

🛠 Getting Started

1. Install Dependencies

pnpm install

2. Build SDK

pnpm --filter panna-sdk build

3. Configure Example App

Copy the environment file and add your credentials:

cp apps/example-app/.env.example apps/example-app/.env

Edit apps/example-app/.env and fill in the required values:

NEXT_PUBLIC_CLIENT_ID=your-client-id
NEXT_PUBLIC_PARTNER_ID=your-partner-id
NEXT_PUBLIC_CHAIN_ID=1135  # or 4202 for testnet

4. Run Example App

pnpm --filter example-app dev

Open http://localhost:3000 to view the app.

🧪 Test SDK

pnpm --filter panna-sdk test

📁 Project Structure

your-monorepo/
├── apps/
│   └── example-app/        # Next.js app using the SDK
├── packages/
│   └── panna-sdk/           # Core logic + React wrappers built on thirdweb
├── pnpm-workspace.yaml     # Workspace definitions
├── tsconfig.json           # Base TS config
├── jest.config.js          # Jest config for SDK testing
├── .eslintrc.js            # Linting rules
└── .prettierrc             # Prettier formatting

💬 Support & Community

Need help or want to connect with the community?

Join our Discord - Get support, share feedback, and collaborate with other developers.

For questions, issues, or contributions, feel free to reach out through our Discord community!