Getting Started
Complete guide to integrating the LazorKit React Native SDK.
Integration Guide
Default Configuration
Use these default values for quick integration on Devnet:
const DEFAULT_CONFIG = {
rpcUrl: 'https://api.devnet.solana.com',
portalUrl: 'https://portal.lazor.sh',
configPaymaster: {
paymasterUrl: 'https://kora.devnet.lazorkit.com',
// apiKey: 'YOUR_API_KEY' // Optional
}
};1. Installation
npm install @lazorkit/wallet-mobile-adapter2. Polyfills & Configuration
Since React Native doesn't have a standardized Node.js environment, some Solana libraries (like @solana/web3.js) need a little help to work correctly. You'll need to install a few polyfills.
Install Dependencies
npm install react-native-get-random-values react-native-url-polyfill bufferConfigure Entry Point
Add these imports to the very top of your entry file (e.g., app/_layout.tsx, index.js, or App.tsx):
import 'react-native-get-random-values';
import 'react-native-url-polyfill/auto';
import { Buffer } from 'buffer';
global.Buffer = global.Buffer || Buffer;Note: If you're using Expo and run into issues with random values, make sure
expo-cryptois installed.
3. Setup Provider
Wrap your application with LazorKitProvider. Ensure you have expo-web-browser installed.
// App.tsx
import { LazorKitProvider } from '@lazorkit/wallet-mobile-adapter';
export default function App() {
return (
<LazorKitProvider
rpcUrl="https://api.devnet.solana.com"
portalUrl="https://portal.lazor.sh"
configPaymaster={{
paymasterUrl: "https://kora.devnet.lazorkit.com"
}}
>
<HomeScreen />
</LazorKitProvider>
);
}4. Authentication
Use the connect method to log a user in. You'll need to provide a redirectUrl so the app knows where to return after the user finishes signing in on the portal.
Important: This
redirectUrlmust match the Custom URL Scheme you set up in yourapp.json(for Expo) orInfo.plist(for iOS).
// ConnectScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { Button, View, Text } from 'react-native';
export function ConnectScreen() {
const { connect, isConnected, wallet } = useWallet();
const APP_SCHEME = 'myapp://home';
if (isConnected) {
return <Text>Welcome back, {wallet?.smartWallet}</Text>;
}
return (
<Button
title="Connect with Passkey"
onPress={() => connect({ redirectUrl: APP_SCHEME })}
/>
);
}5. Signing Messages
Sign messages by directing users to the portal.
// SignScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { Button } from 'react-native';
export function SignScreen() {
const { signMessage } = useWallet();
const handleSign = async () => {
try {
const signature = await signMessage(
"Welcome to LazorKit!",
{ redirectUrl: 'myapp://callback' }
);
console.log("Verified Signature:", signature);
} catch (e) {
console.error(e);
}
};
return <Button title="Sign Message" onPress={handleSign} />;
}6. Sending Transactions
Send SOL or execute instructions on-chain.
// TransferScreen.tsx
import { useWallet } from '@lazorkit/wallet-mobile-adapter';
import { SystemProgram, PublicKey, LAMPORTS_PER_SOL } from '@solana/web3.js';
import { Button } from 'react-native';
export function TransferScreen() {
const { signAndSendTransaction, wallet } = useWallet();
const handleTransfer = async () => {
if (!wallet) return;
// 1. Create Instruction
const ix = SystemProgram.transfer({
fromPubkey: new PublicKey(wallet.smartWallet),
toPubkey: new PublicKey("RECIPIENT_ADDRESS"),
lamports: 0.01 * LAMPORTS_PER_SOL,
});
// 2. Sign and Send
const signature = await signAndSendTransaction(
{
instructions: [ix],
transactionOptions: { feeToken: 'USDC' }
},
{ redirectUrl: 'myapp://callback' }
);
console.log("Tx:", signature);
};
return <Button title="Send SOL" onPress={handleTransfer} />;
}7. Next Steps
See the Troubleshooting guide for help with common issues like deep linking configuration.