Passkey Raydium Swapper (using LazorKit)

This is a full-stack Solana dApp demonstrating wallet connection and transaction signing using the LazorKit SDK, which leverages Passkeys (WebAuthn) under the hood. The app allows users to interact with the Raydium protocol on the Solana devnet for token swapping.

Note: This implementation uses the @lazorkit/wallet SDK for handling wallet interactions and transaction signing. It simplifies the process compared to direct WebAuthn implementation but still relies on placeholder logic for Raydium interactions.

Core Features

• LazorKit Wallet Connection: Secure wallet connection using the LazorKit SDK, abstracting the underlying Passkey/WebAuthn flow. Provides a seamless connection experience for users with LazorKit wallets.
• Token Swapping (Conceptual): UI for swapping tokens on Solana devnet via Raydium. Includes selecting input/output tokens, specifying amounts, and viewing estimated output.
• Transaction Signing (via LazorKit): Demonstrates preparing a Solana transaction and signing it using the signMessage function provided by the @lazorkit/wallet hook. The signature is generated via the user's LazorKit wallet (which manages the Passkey-derived secp256r1 key).
• On-Chain Verification (Conceptual): The architecture assumes an on-chain Rust program (potentially using LazorKit's verification libraries) would verify the secp256r1 signatures generated by the LazorKit wallet. (Rust program not included in this scaffold).

Tech Stack

• Frontend: Next.js (React), TypeScript, Tailwind CSS, shadcn/ui
• Wallet Integration: @lazorkit/wallet SDK
• Solana Integration: @solana/web3.js
• Styling: Tailwind CSS, shadcn/ui components
• State Management: React Context API

Project Structure

.
├── public/
├── src/
│   ├── app/                # Next.js App Router pages
│   │   ├── globals.css     # Global styles & Tailwind directives
│   │   ├── layout.tsx      # Root layout
│   │   └── page.tsx        # Main application page (Swap UI)
│   ├── components/
│   │   ├── ui/             # shadcn/ui components
│   │   ├── auth-button.tsx # Handles LazorKit connect/disconnect UI
│   │   └── header.tsx      # Application header
│   ├── context/
│   │   └── solana-provider.tsx # Manages Solana connection & LazorKit wallet state/signing
│   ├── hooks/
│   │   ├── use-mobile.tsx  # Detects mobile devices
│   │   └── use-toast.ts    # Toast notification hook
│   ├── lib/
│   │   └── utils.ts        # Utility functions (e.g., cn, format/parse token amount)
│   ├── services/
│   │   └── raydium.ts      # Placeholder service for Raydium interactions
│   ├── ai/                 # Genkit AI related files (ignore/do not modify)
├── components.json         # shadcn/ui configuration
├── next.config.ts          # Next.js configuration
├── package.json
├── README.md               # This file
├── tailwind.config.ts      # Tailwind CSS configuration
└── tsconfig.json           # TypeScript configuration

Getting Started

Prerequisites

• Node.js (v18 or later recommended)
• npm or yarn
• A browser compatible with LazorKit (modern browsers supporting WebAuthn).
• A device with a security key or platform authenticator usable by LazorKit (e.g., FaceID, TouchID, Windows Hello, Android Biometrics).

Installation

1. Clone the repository:

   git clone <repository-url>
   cd passkey-raydium-swapper

2. Install dependencies:

   npm install
   # or
   yarn install

Running the Development Server

1. Start the Next.js app:

   npm run dev
   # or
   yarn dev

2. Open http://localhost:9002 (or the specified port) in your browser.

Usage

1. Connect Lazor Wallet:
   • Click the "Connect Lazor Wallet" button in the header.
   • Follow the prompts from the LazorKit SDK popup to connect your wallet (this might involve creating a wallet or signing in with an existing Passkey via LazorKit).
2. Swap Tokens:
   • Once connected, the swap interface will be enabled.
   • Select the input token and enter the amount.
   • Select the output token.
   • The estimated output amount will be displayed (using mock data).
   • Click "Swap".
   • The transaction will be prepared and sent to your LazorKit wallet for signing confirmation via a popup.
   • Approve the transaction in the LazorKit popup.
   • The signed transaction will be sent to the Solana network.
   • Check the UI for success/error messages and the browser console for logs.

Limitations & Future Work

• Mock Raydium Data: Token lists and swap estimations use hardcoded mock data. Integration with the Raydium SDK/API is necessary for real-time data and swap execution.
• Transaction Construction: The example uses a simple Memo instruction. Real swaps require generating complex instructions using the Raydium SDK based on the selected pair and amount.
• LazorKit Transaction Signing: The current implementation uses signMessage with the serialized transaction message. While functional for this demo, review LazorKit documentation for the officially recommended way to sign full Transaction or VersionedTransaction objects if a dedicated method exists.
• No On-Chain Program: The Rust program for verifying secp256r1 signatures on-chain (potentially using LazorKit tools) is not included.
• Fee Payer: The fee payer is correctly set to the connected LazorKit wallet's public key.
• Error Handling: Error handling can be further improved, especially for Solana, Raydium, and LazorKit interactions.
• State Management: For more complex scenarios, consider a dedicated state management library (e.g., Zustand, Jotai).

Deployment

Deploying this application requires:

1. Raydium Integration: Replace mock service calls with the official Raydium SDK or API.
2. LazorKit Whitelisting: Ensure your production domain is whitelisted with LazorKit.
3. Environment Variables: Configure environment variables for Solana RPC URLs (potentially beyond devnet), etc.
4. Platform: Choose a hosting platform (e.g., Vercel, Netlify, AWS, Google Cloud) and configure deployment pipelines.
5. On-Chain Program (Optional): Deploy the signature verification program if needed.

Testing

• LazorKit Connection: Test connecting and disconnecting the LazorKit wallet.
• Transaction Signing: Test the signing flow via the LazorKit popup.
• UI Interaction: Test the swap interface, token selection, amount input, and button states.
• Responsiveness: Check the layout on various screen sizes.

Note: End-to-end transaction testing requires the full implementation with the Raydium SDK.

LazorKit 🤍

https://github.com/lazor-kit/lazor-kit

Supplementary Documentation

https://geni-docs-just-s-wor-i19b.web.app/docs Generated by: gdocs.genistud.io