Installation
Get started with the Tezos Wallet Boilerplate in your Next.js project.
Prerequisites
Before you begin, make sure you have the following installed:
- Node.js 18+ or Bun runtime
- Git for version control
- A code editor (VS Code recommended)
Clone the Repository
Using Git
# Clone the repository
git clone https://github.com/your-username/nextjs-tezos-wallet-boilerplate.git
# Navigate to the project directory
cd nextjs-tezos-wallet-boilerplate
# Install dependencies
bun install
# or
npm installPackage Dependencies
The boilerplate includes the following key dependencies:
| @airgap/beacon-dapp | Beacon SDK types and utilities |
| @airgap/beacon-sdk | Multi-wallet connection protocol |
| @taquito/taquito | Tezos JavaScript SDK for blockchain interactions |
| @taquito/beacon-wallet | Beacon wallet adapter for Taquito |
| kukai-embed | Direct Kukai wallet integration |
| zustand | Lightweight state management |
| next | React framework with App Router |
| tailwindcss | Utility-first CSS framework (v4) |
| @radix-ui/react-* | Accessible headless UI components |
| lucide-react | Beautiful icon library |
🔄 Auto-Installation
All dependencies are automatically installed when you run bun install or npm install. No additional setup required for wallet providers!
Development Server
Start the development server
# Start the development server
bun dev
# or
npm run dev
# Open http://localhost:3000 in your browserProject Structure
nextjs-tezos-wallet-boilerplate/
├── app/ # Next.js 15 App Router
│ ├── docs/ # Documentation pages
│ ├── globals.css # Global styles with Tailwind
│ ├── layout.tsx # Root layout with providers
│ └── page.tsx # Main application page
├── components/ # React components
│ ├── layout/ # Layout components
│ │ ├── Header.tsx # Navigation header
│ │ └── connect/ # Wallet connection components
│ ├── providers/ # React providers
│ │ └── wallet-provider.tsx # Wallet initialization
│ ├── ui/ # shadcn/ui components
│ ├── contract-playground.tsx # Smart contract interaction
│ ├── tez-faucet.tsx # Testnet token faucet
│ └── ... # Other dApp components
├── lib/ # Utilities and configuration
│ ├── tezos/ # Tezos-specific code
│ │ ├── store/ # Zustand state management
│ │ │ └── walletStore.ts # Wallet state store
│ │ └── useTezos.tsx # Main Tezos hook
│ ├── constants.ts # App constants
│ └── utils.ts # Utility functions
├── public/ # Static assets
├── package.json # Dependencies and scripts
├── tailwind.config.ts # Tailwind CSS 4 configuration
├── components.json # shadcn/ui configuration
└── next.config.mjs # Next.js configuration🏗️ Architecture Highlights
- • App Router: Uses Next.js 15 App Router for optimal performance
- • Provider Pattern: WalletProvider handles global wallet state
- • State Management: Zustand for lightweight, performant state
- • Auto-Restoration: Wallet connections persist across refreshes