Tezos LogoTezos Boilerplate

Tezos Wallet Boilerplate Docs

Configuration

Configure your Tezos dApp with the right network settings and providers.

Network Configuration

The boilerplate automatically configures networks based on your environment. The wallet store handles RPC endpoint selection.

Mainnethttps://rpc.tzkt.io/mainnet
Shadownet (Testnet)https://rpc.tzkt.io/shadownet

Automatic Network Configuration

// lib/tezos/store/walletStore.ts
import { ENV } from '../../constants';

export const useWalletStore = create<WalletState>((set, get) => ({
  Tezos: new TezosToolkit(
    ENV === 'dev' 
      ? 'https://rpc.tzkt.io/shadownet' 
      : 'https://rpc.tzkt.io/mainnet'
  ),
  // ... rest of store
}));

// lib/constants.ts 
export const NETWORK = process.env.NEXT_PUBLIC_NETWORK || 'shadownet';
export const ENV: 'dev' | 'prod' = NETWORK === 'shadownet' ? 'dev' : 'prod';

Wallet Store Configuration

The new wallet store automatically handles multi-wallet initialization and state management.

Wallet Store Architecture

// lib/tezos/store/walletStore.ts
interface WalletState {
  Tezos: TezosToolkit;
  wallet: BeaconWallet | null;
  kukai: KukaiEmbed | null;
  address: string | null;
  isInitialized: boolean;
  initializeWallets: () => Promise<void>;
  connectWallet: () => Promise<void>;
  connectKukai: () => Promise<void>;
  disconnectWallet: () => Promise<void>;
}

export const useWalletStore = create<WalletState>((set, get) => ({
  // Auto-initialization on app start
  initializeWallets: async () => {
    // Check for existing Beacon connections
    const activeAccount = await wallet.client.getActiveAccount();
    if (activeAccount) {
      set({ address: activeAccount.address });
    }
    
    // Check for existing Kukai sessions  
    const userInfo = kukai.user;
    if (userInfo?.pkh) {
      set({ address: userInfo.pkh });
    }
  }
}));

Environment Variables

Configure your environment variables for different deployment environments.

.env.local

# Network Configuration (only variable needed!)
NEXT_PUBLIC_NETWORK=shadownet
# or 
# NEXT_PUBLIC_NETWORK=mainnet

# Optional: Custom RPC endpoints (uses defaults if not set)
# NEXT_PUBLIC_RPC_MAINNET=https://your-mainnet-rpc.com
# NEXT_PUBLIC_RPC_SHADOWNET=https://your-shadownet-rpc.com

🎯 Simplified Configuration

The new architecture only requires NEXT_PUBLIC_NETWORK to be set. All other configuration (RPC endpoints, wallet providers, network types) is handled automatically.

Supported Wallets

The Beacon SDK automatically supports all major Tezos wallets:

🔗 Temple Wallet

Popular browser extension wallet

📱 Kukai

Web-based wallet with social login

📟 Ledger

Hardware wallet support

🔐 AirGap

Mobile wallet with QR code signing

👻 Spire

Modern mobile wallet

🦄 Umami

Desktop wallet application

TzKT API Configuration

Configure TzKT API for blockchain data and indexing services.

Mainnet APIhttps://api.tzkt.io
Shadownet APIhttps://api.shadownet.tzkt.io

TzKT API Usage

// Fetch account information
const response = await fetch(
  `https://api.shadownet.tzkt.io/v1/accounts/${address}`
);
const account = await response.json();

// Fetch account operations
const opsResponse = await fetch(
  `https://api.shadownet.tzkt.io/v1/accounts/${address}/operations`
);
const operations = await opsResponse.json();

Next Steps

🧩 Components

Learn about the available components and their APIs

Explore components →

💡 Examples

See working examples of common dApp patterns

View examples →