Skip to content

Installation

Requirements

Before installing LazorKit, ensure your development environment meets these requirements:

Browser Support

  • Chrome: 88+ (latest recommended)
  • Firefox: 90+ (latest recommended)
  • Safari: 15+ (latest recommended)
  • Edge: 88+ (latest recommended)

All modern browsers that support WebAuthn Level 2 and Passkeys are compatible.

Development Environment

  • HTTPS in local: Required for WebAuthn

Package Installation

npm install @lazorkit/wallet

Environment Configuration

Create environment variables for your application:

# Required
REACT_APP_RPC_URL=https://api.devnet.solana.com
REACT_APP_PAYMASTER_URL=your-paymaster-service-url
REACT_APP_PORTAL_URL=your-portal-service-url

# Optional: External payer integration
REACT_APP_EXTERNAL_PAYER_ADDRESS=your-external-payer-public-key
REACT_APP_API_ENDPOINT=your-backend-api-url
REACT_APP_API_KEY=your-api-authentication-key

2. Browser Polyfills (if needed)

For some build environments, you may need to add Buffer polyfills:

// polyfills.js
import { Buffer } from 'buffer';
 
if (typeof window !== 'undefined') {
  window.Buffer = Buffer;
}

Then import this file early in your application:

// main.tsx or index.tsx
import './polyfills';
import React from 'react';
// ... rest of your app

Framework Integration

React Setup

Wrap your application with the LazorkitProvider:

import { LazorkitProvider } from '@lazorkit/wallet';
 
export default function App() {
  return (
    <LazorkitProvider
      rpcUrl={process.env.REACT_APP_RPC_URL || 'https://api.devnet.solana.com'}
      paymasterUrl={process.env.REACT_APP_PAYMASTER_URL}
      ipfsUrl={process.env.REACT_APP_PORTAL_URL}
    >
      <YourApp />
    </LazorkitProvider>
  );
}

TypeScript Configuration

Ensure your tsconfig.json includes the necessary compiler options:

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  }
}

Network Configuration

Devnet (Default)

The SDK currently supports Solana Devnet by default:

<LazorkitProvider
  rpcUrl={process.env.REACT_APP_RPC_URL}
  paymasterUrl={process.env.REACT_APP_PAYMASTER_URL}
>

Custom RPC

You can use your own RPC endpoint:

<LazorkitProvider
  rpcUrl="https://your-custom-rpc.com"
  paymasterUrl="https://your-paymaster.com"
>

Verification

To verify your installation is working correctly, create a simple test component:

import { useWallet } from '@lazorkit/wallet';
 
function InstallationTest() {
  const { connect, isConnected, smartWalletPubkey } = useWallet();
 
  return (
    <div>
      <h2>LazorKit Installation Test</h2>
      <p>Status: {isConnected ? 'Connected' : 'Disconnected'}</p>
      {smartWalletPubkey && (
        <p>Wallet: {smartWalletPubkey.toString().slice(0, 8)}...</p>
      )}
      <button onClick={connect} disabled={isConnected}>
        Test Connection
      </button>
    </div>
  );
}

Next Steps

Once installation is complete:

  1. Read the Getting Started guide for basic usage
  2. Explore the API Reference for detailed documentation
  3. Check out the Integration Guide for advanced usage patterns

Troubleshooting

Common Issues

Build errors with Buffer/crypto
  • Add the polyfills mentioned above
  • Check your bundler configuration
TypeScript errors
  • Ensure all peer dependencies are installed
  • Update your tsconfig.json as shown above
Connection fails
  • Verify your environment variables are set correctly
  • Check that you're using a WebAuthn-capable browser
  • Ensure you're testing on HTTPS (required for WebAuthn)