Skip to main content
This guide walks you through setting up your local development environment to build chain-abstracted applications with OneBalance and Privy.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js 18.x or higher
  • pnpm package manager (recommended) or npm
  • Git for version control
  • A code editor (VS Code recommended)

​
Clone the repository

Start by cloning the OneBalance Chain-Abstracted Swap repository: 
git clone https://github.com/dzimiks/onebalance-chain-abstracted-swap
cd onebalance-chain-abstracted-swap

​
Install dependencies

Install all required packages using pnpm: 
pnpm install

​
Core dependencies

The project includes these essential dependencies:

OneBalance

Chain abstraction and token swapping via API integration

Privy

Web3 authentication and embedded wallet management

Next.js 15

React framework with App Router and TypeScript

TanStack Query

Asynchronous state management for API calls

​
Project structure

Once installed, your project will have this structure: 
onebalance-chain-abstracted-swap/
├── app/                      # Next.js App Router pages
│   ├── (trading)/           # Trading interface routes
│   ├── api/                 # API route handlers
│   ├── layout.tsx           # Root layout
│   └── providers.tsx        # App-wide providers
├── components/              # React components
│   ├── ui/                  # shadcn UI components
│   ├── wallet/              # Wallet-related components
│   └── onboarding/          # User onboarding flow
├── lib/                     # Core utilities
│   ├── api/                 # API client functions
│   ├── hooks/               # Custom React hooks
│   ├── types/               # TypeScript definitions
│   └── utils/               # Helper functions
└── public/                  # Static assets

​
Development scripts

The following npm scripts are available in package.json: 
pnpm dev

​
Start the development server

After completing the setup, start the development server: 
pnpm dev
Your application will be available at http://localhost:3000.
Without proper environment variables configured, the application will not function correctly. Make sure to complete the configuration step before testing.

​
TypeScript configuration

The project uses TypeScript with strict mode enabled. The configuration is defined in tsconfig.json:
  • Strict mode: Enabled for better type safety
  • Path aliases: @/ maps to the root directory for clean imports
  • JSX: Configured for React 19

​
Next steps

Now that your development environment is set up:
1

Configure environment variables

Set up your API keys and credentials in the configuration section.
2

Integrate OneBalance API

Learn how to use the OneBalance API for chain abstraction in the OneBalance API guide.
3

Set up Privy authentication

Configure Privy for wallet authentication in the Privy wallet guide.

Build docs developers (and LLMs) love

Get started for freeTalk to us