🚀

Simple Integration

This example demonstrates how easy it is to integrate Walletz into a Next.js project using the client providers layout model.

Step 1: Wrap Your App with WalletzProvider

Create or modify your app/providers.tsx:

"use client";

import React from "react";
import { WalletzProvider, WalletzConfig } from "walletz";

const LocalWalletzConfig: WalletzConfig = {
  rpcUrl: "https://solana.drpc.org/",
  autoConnect: true,
  theme: "dark" //or "light"
};

export default function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WalletzProvider config={LocalWalletzConfig}>
      {children}
    </WalletzProvider>

Step 2: Wrap your layout.tsx in your Providers

Create or modify your app/layout.tsx:

import React from "react";
import Providers from "./providers";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
        <body>
          <Providers>
            {children}
          </Providers>
        </body>
    </html>

Step 3: Use WalletzButton and WalletzModal Anywhere in Your App

Modify your app/page.tsx:

import { WalletzButton, WalletzModal } from "walletz";

export default function Home() {
  return (
    <main>
      <h1>Welcome to My Solana dApp</h1>
      <WalletzButton />
      <WalletzModal />
    </main>

And that's it! 🎉 Your app now supports Solana wallets with automatic detection and a one-click connection button.