Full Example

All Nitso addons wired together — balance, network switcher, tokens, activity, and WalletConnect.

Preview

connect-button-full-demo.tsx

"use client";import { useState } from "react";import {  NetworkSwitcherButton,  NetworkSwitcherView,} from "@/components/nitso/addons/network-switcher";import { TokenList } from "@/components/nitso/addons/token-list";import { TransactionList } from "@/components/nitso/addons/transaction-list";import { WalletBalance } from "@/components/nitso/addons/wallet-balance";import { WalletConnectModal } from "@/components/nitso/addons/wallet-connect-modal";import {  ConnectButton,  WalletDropdownContent,  type WalletDropdownContentProps,} from "@/components/nitso/connect-button/";function WalletDropdownFull(props: WalletDropdownContentProps) {  const [view, setView] = useState<"wallet" | "network">("wallet");  if (view === "network") {    return <NetworkSwitcherView onBack={() => setView("wallet")} />;  }  return (    <WalletDropdownContent      {...props}      actions={<NetworkSwitcherButton onClick={() => setView("network")} />}    >      <WalletBalance autoRefresh={false}/>      <TokenList />      <TransactionList />    </WalletDropdownContent>  );}export function ConnectButtonFullDemo() {  return (    <div className="flex min-h-40 items-center justify-center p-8">      <ConnectButton dropdownContent={WalletDropdownFull} />      <WalletConnectModal />    </div>  );}

What's included

Component	Slot	Description
`connect-button`	—	Address, copy, disconnect
`network-switcher`	`actions`	Globe button + network panel
`wallet-balance`	`children`	SOL balance with refresh
`token-list`	`children`	SPL token holdings
`transaction-list`	`children`	Recent activity
`wallet-connect-modal`	—	WalletConnect QR modal

Installation

One command installs everything:

npx shadcn@latest add https://nitso.fun/r/connect-button-full-demo.json

pnpm dlx shadcn@latest add https://nitso.fun/r/connect-button-full-demo.json

yarn dlx shadcn@latest add https://nitso.fun/r/connect-button-full-demo.json

bunx --bun shadcn@latest add https://nitso.fun/r/connect-button-full-demo.json

This installs connect-button-full-demo.tsx into your components/ folder — all addons pre-wired and ready to use.

Before wiring up the provider, add your environment variables. Get a free RPC key at helius.dev, quicknode.com, or alchemy.com. For the WalletConnect project ID, sign up at WalletConnect and enable Solana chain support — see the Solana setup guide.

.env.local

RPC_MAINNET=https://mainnet.helius-rpc.com/?api-key=your-key
RPC_DEVNET=https://devnet.helius-rpc.com/?api-key=your-key
WALLETCONNECT_PROJECT_ID=your-project-id

.env

VITE_RPC_MAINNET=https://mainnet.helius-rpc.com/?api-key=your-key
VITE_RPC_DEVNET=https://devnet.helius-rpc.com/?api-key=your-key
VITE_WALLETCONNECT_PROJECT_ID=your-project-id

First add NitsoProvider to your root layout:

app/provider.tsx

"use client";

import { NitsoProvider } from '@/components/nitso/nitso-provider';

// ⚠️ Public RPC endpoints are rate limited and not suitable for production.
// Replace these with your own — get a free key at helius.dev, quicknode.com, or alchemy.com
const clusters = [
  { id: 'solana:mainnet' as const, label: 'Mainnet Beta', url: process.env.RPC_MAINNET! },
  { id: 'solana:devnet'  as const, label: 'Devnet',       url: process.env.RPC_DEVNET! },
  { id: 'solana:testnet' as const, label: 'Testnet',      url: 'https://api.testnet.solana.com' },
];

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <NitsoProvider
      appName="My App"
      appUrl="https://myapp.com"
      clusters={clusters}
      walletConnect={{
        projectId: process.env.WALLETCONNECT_PROJECT_ID!,
      }}
    >
      {children}
    </NitsoProvider>
  );
}

Then use it in your root layout:

app/layout.tsx

import { Providers } from './provider';

export const metadata = {
  title: 'My App',
};

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

src/main.tsx

import { NitsoProvider } from '@/components/nitso/nitso-provider';

// ⚠️ Public RPC endpoints are rate limited and not suitable for production.
// Replace these with your own — get a free key at helius.dev, quicknode.com, or alchemy.com

const clusters = [
  { id: 'solana:mainnet' as const, label: 'Mainnet Beta', url: import.meta.env.VITE_RPC_MAINNET },
  { id: 'solana:devnet'  as const, label: 'Devnet',       url: import.meta.env.VITE_RPC_DEVNET },
  { id: 'solana:testnet' as const, label: 'Testnet',      url: 'https://api.testnet.solana.com' },
];

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <NitsoProvider
      appName="My App"
      appUrl="https://myapp.com"
      clusters={clusters}
      walletConnect={{
        projectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
      }}
    >
      <App />
    </NitsoProvider>
  </StrictMode>
);

Then drop it into your header:

import { ConnectButtonFullDemo } from '@/components/connect-button-full-demo';

export function Header() {
  return (
    <nav>
      <ConnectButtonFullDemo />
    </nav>
  );
}

Modify it however you need — remove addons you don't want, adjust the layout, rename the component.

Don't need all addons? Install components individually — each addon's docs page has its own wiring instructions.

Full Example

Preview

What's included

Installation

On this page