Setup Guide

Configure XenConnect in your app

To use XenConnect, you need to set up the provider and integrate the wallet connection button. Follow these steps to get everything working seamlessly with lightning-fast wallet connections.

Before You Start

Make sure you have your Project ID and App Name from Reown ready.

Get your credentials here →

Step 1: Configure the Provider

Wrap your app with XenConnectProvider. This enables wallet connection features throughout your application.

javascript

"use client";
import "xenconnect/dist/tailwind.css"; // ✅ Import XenConnect styles

import { XenConnectProvider } from "xenconnect";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "./globals.css";

const queryClient = new QueryClient();

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <QueryClientProvider client={queryClient}>
          <XenConnectProvider projectId="yourprojectid" appName="yourappname">
            {children}
          </XenConnectProvider>
        </QueryClientProvider>
      </body>
    </html>
  );
}

💡 Tip: Place this in your root layout for global access across all pages.

Step 2: Add the Connect Button

Use the WalletButton component to let users connect their wallets. Fully customizable to match your design.

javascript

"use client";

import { WalletButton } from "xenconnect";

export default function Home() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <WalletButton 
        label="Connect Wallet"
        style="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md shadow-md transition"
      />
    </div>
  );
}

What You Get

🚀 Lightning Fast

Optimized connection flow that's faster than traditional WalletConnect.

🎨 Fully Customizable

Style the connect button to perfectly match your brand and design system.

🔒 Secure & Reliable

Built with security best practices and supports all major wallets.

👨‍💻 Developer Friendly

Simple API with TypeScript support and comprehensive documentation.

Setup Complete!

Your XenConnect integration is now ready. Users can connect their wallets and start interacting with your dApp!

What's Next?

Learn how to customize your wallet button to match your brand perfectly and explore advanced features.

Customize Your Button