LazorkitProvider

The LazorkitProvider component wraps your application to provide wallet context and handle SDK initialization.

Import

import { LazorkitProvider } from '@lazorkit/wallet';

Usage

function App() {
  return (
    <LazorkitProvider
      rpcUrl="https://api.devnet.solana.com"
      paymasterUrl="https://lazorkit-paymaster.onrender.com"
      ipfsUrl="https://portal.lazor.sh"
    >
      <YourApplication />
    </LazorkitProvider>
  );
}

Props

rpcUrl (required)

• Type: string
• Description: Solana RPC endpoint URL
• Examples:
  • Devnet: "https://api.devnet.solana.com"
  • Custom: "https://your-rpc-endpoint.com"

paymasterUrl (required)

• Type: string
• Description: Paymaster service URL for gasless transactions
• Example: "https://lazorkit-paymaster.onrender.com"

ipfsUrl (optional)

• Type: string
• Default: "https://portal.lazor.sh"
• Description: LazorKit portal URL for wallet dialogs

children

• Type: ReactNode
• Description: Your application components

Configuration Examples

Development Setup (Devnet)

<LazorkitProvider
  rpcUrl="https://api.devnet.solana.com"
  paymasterUrl="https://lazorkit-paymaster.onrender.com"
>
  <App />
</LazorkitProvider>

Custom RPC Configuration

<LazorkitProvider
  rpcUrl={process.env.REACT_APP_RPC_URL}
  paymasterUrl={process.env.REACT_APP_PAYMASTER_URL}
  ipfsUrl={process.env.REACT_APP_PORTAL_URL}
>
  <App />
</LazorkitProvider>

Environment Variables

Create a .env file with your configuration:

REACT_APP_RPC_URL=https://api.devnet.solana.com
REACT_APP_PAYMASTER_URL=https://lazorkit-paymaster.onrender.com
REACT_APP_PORTAL_URL=https://portal.lazor.sh

Event Handling

The provider automatically handles all SDK events and updates the wallet state. The following events are managed internally:

Connection Events

• connect:start → Sets isConnecting: true
• connect:success → Updates account and clears loading state
• connect:error → Sets error and clears loading state

Disconnect Events

• disconnect:start → Sets loading state
• disconnect:success → Clears account and loading state
• disconnect:error → Sets error and clears loading state

Reconnection Events

• reconnect:start → Sets isConnecting: true
• reconnect:success → Updates account and clears loading state
• reconnect:error → Sets error and clears loading state

Transaction Events

• transaction:start → Sets isSigning: true
• transaction:success → Clears signing state
• transaction:sent → Clears signing state
• transaction:error → Sets error and clears signing state

Internal State Management

The provider uses Zustand for state management with the following structure:

interface LazorkitState {
  sdk: Lazorkit | null;
  account: WalletAccount | null;
  isConnecting: boolean;
  isSigning: boolean;
  error: Error | null;
}

Context Access

All child components can access the wallet state through the useWallet hook:

function MyComponent() {
  const { isConnected, connect, smartWalletPubkey } = useWallet();
  
  return (
    <div>
      {isConnected ? (
        <p>Connected: {smartWalletPubkey?.toString()}</p>
      ) : (
        <button onClick={connect}>Connect</button>
      )}
    </div>
  );
}

Provider Placement

The provider should wrap your entire application or the portion that needs wallet functionality:

// ✅ Correct - App level
function App() {
  return (
    <LazorkitProvider {...config}>
      <Router>
        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/wallet" element={<WalletPage />} />
        </Routes>
      </Router>
    </LazorkitProvider>
  );
}
 
// ❌ Incorrect - Too deep in component tree
function WalletPage() {
  return (
    <LazorkitProvider {...config}>
      <WalletComponent />
    </LazorkitProvider>
  );
}

Network Configuration

Devnet (Default)

<LazorkitProvider
  rpcUrl="https://api.devnet.solana.com"
  paymasterUrl="https://lazorkit-paymaster.onrender.com"
>

Mainnet (When Available)

<LazorkitProvider
  rpcUrl="https://api.mainnet-beta.solana.com"
  paymasterUrl="https://your-mainnet-paymaster.com"
>

Local Development

<LazorkitProvider
  rpcUrl="http://localhost:8899"
  paymasterUrl="http://localhost:3001"
>

Cleanup

The provider automatically handles cleanup when the component unmounts:

• Removes all event listeners
• Cleans up SDK instance
• Clears state

You don't need to manually manage SDK lifecycle when using the provider.

TypeScript

The provider is fully typed and will provide IntelliSense for all props:

interface LazorkitProviderProps {
  children: ReactNode;
  rpcUrl: string;
  ipfsUrl?: string;
  paymasterUrl: string;
}