LazorConnect

LazorConnect Component

LazorConnect is a plug-and-play React component that provides a UI for connecting a user's Lazor Kit wallet. It handles the wallet connection flow, displays a connect button, and calls your callback when the user connects successfully.

Usage

import { LazorConnect } from '@lazorkit/wallet';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://api.devnet.solana.com');

function App() {
  return (
    <LazorConnect
      connection={connection}
      onConnect={publicKey => {
        console.log('Connected wallet public key:', publicKey);
      }}
    />
  );
}

Props

Prop	Type	Description
connection	Connection	Solana connection instance (required)
onConnect	(publicKey: string) => any	Callback when wallet is successfully connected
...others		You can pass additional props for customization

---

useWallet Hook and connect Function

The useWallet hook provides programmatic access to wallet features, including the connect function for triggering the wallet connection flow from your own UI or logic. Use this when you want to build a custom wallet connect button or integrate wallet logic into your own components.

Usage

import { useWallet } from '@lazorkit/wallet';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://api.devnet.solana.com');
const {
  isConnected,    // boolean: wallet connection status
  publicKey,      // string | null: user's public key
  connect,        // () => Promise<void>: connect wallet
  disconnect,     // () => void: disconnect wallet
  signMessage,    // (message: Uint8Array) => Promise<Uint8Array>: sign a message
  error,          // string | null: error message if any
} = useWallet(connection);

connect

• connect(): Promise<void>

  • Opens the wallet connection popup.

  • Resolves when the user connects their wallet.

  • Updates state in the hook.

Example: Custom Connect Button

import { useWallet } from '@lazorkit/wallet';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://api.devnet.solana.com');
const { connect, isConnected, publicKey } = useWallet(connection);

function MyConnectButton() {
  return (
    <button onClick={connect}>
      {isConnected ? `Connected: ${publicKey}` : 'Connect Wallet'}
    </button>
  );
}

---

Complete Example

import { LazorConnect, useWallet } from '@lazorkit/wallet';
import { Connection } from '@solana/web3.js';

const connection = new Connection('https://api.devnet.solana.com');

function App() {
  const { isConnected, publicKey, connect, disconnect, error } = useWallet(connection);

  return (
    <div>
      <LazorConnect connection={connection} onConnect={connect} />
      {isConnected && <div>Public Key: {publicKey}</div>}
      {error && <div style={{color: 'red'}}>{error}</div>}
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}

---