This is a TypeScript monorepo for developing a 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

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

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

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.

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.

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

pnpm install

pnpm --filter panna-sdk build

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

pnpm --filter example-app dev

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

pnpm --filter panna-sdk test

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

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!