Setup

To use XenConnect, you need to set up the provider and integrate the wallet connection button.

1. Configure the Provider

The XenConnectProvider must wrap your application. It requires a Project ID and App Name, which you can obtain from here.

"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>
  );
}

2. Add the Connect Button

Once the provider is configured, you can add the WalletButton to your application. This button allows users to connect their wallets effortlessly.

"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>
  );
}

Final Steps

Your setup is now complete! You can further customize the button and connection experience to match your app’s UI.