Skip to content

getting-started.md

Latest commit

 

History

History
134 lines (100 loc) · 3.71 KB

getting-started.md

File metadata and controls

134 lines (100 loc) · 3.71 KB
Raw

Getting Started

This guide walks you through setting up the Lazorkit React Native example from scratch.

Prerequisites

Before you begin, ensure you have:

Step 1: Clone and Install

# Clone the repository
git clone https://github.com/AngryPacifist/zero-app.git
cd zero-app

# Install dependencies
npm install

Step 2: Understand the Key Dependencies

The project uses these core packages:

{
  "@lazorkit/wallet-mobile-adapter": "^1.5.1",
  "@solana/web3.js": "^1.98.0",
  "@react-navigation/native": "^7.x",
  "expo-system-ui": "^4.x"
}

Required Polyfills

React Native requires polyfills for Node.js APIs. These are configured at the top of src/App.tsx:

// Polyfills - MUST be at the very top
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { Buffer } from 'buffer';
global.Buffer = global.Buffer || Buffer;

Important: These imports must come before any other imports.

Step 3: Configure the App

Edit src/config.ts to customize the configuration:

export const CONFIG = {
    // Solana RPC endpoint
    RPC_URL: 'https://api.devnet.solana.com',
    
    // Kora paymaster for gasless transactions
    PAYMASTER_URL: 'https://kora.devnet.lazorkit.com',
};

Network Options

Network RPC URL Paymaster URL Notes
Devnet https://api.devnet.solana.com https://kora.devnet.lazorkit.com Free, no API key
Mainnet https://api.mainnet-beta.solana.com https://kora.lazorkit.com Requires API key

For mainnet, you must apply for an API key.

Step 4: Set Up LazorKitProvider

The app must be wrapped in LazorKitProvider. See src/App.tsx:

import { LazorKitProvider } from '@lazorkit/wallet-mobile-adapter';

export default function App() {
    return (
        <LazorKitProvider
            config={{
                paymasterUrl: CONFIG.PAYMASTER_URL,
                rpcUrl: CONFIG.RPC_URL,
            }}
        >
            <SafeAreaProvider>
                <AppContent />
                <StatusBar style="light" />
            </SafeAreaProvider>
        </LazorKitProvider>
    );
}

Step 5: Run the App

# Start the development server
npx expo start --clear

You'll see a QR code in your terminal. Scan it with:

  • iOS: Camera app → tap the Expo Go banner
  • Android: Expo Go app → Scan QR code

Step 6: Test the App

  1. Create Wallet: Tap "Create Wallet" and authenticate with your biometric
  2. Get Devnet SOL: Use the Solana Faucet to airdrop SOL
  3. Send Transaction: Try sending SOL to another address

Project Structure

my-mobile-app/
├── src/
│   ├── App.tsx              # Main app entry
│   ├── config.ts            # Configuration
│   ├── screens/             # UI screens
│   └── utils/               # Helper functions
├── docs/                    # Documentation
├── package.json
├── metro.config.js          # Metro bundler config
└── tsconfig.json

Next Steps