OnchainKit Wallet Island Demo

This demo application showcases the integration of @coinbase/onchainkit Wallet Island component in a Next.js application.

It demonstrates how to implement wallet connectivity, user identity display, and wallet-related UI components using OnchainKit's pre-built components.

Features

• 🎨 Elegant, minimalist design with prebuilt themes
• 🔗 Seamless wallet integration and wallet balance
• 🌓 Dark mode optimized
• ⚡️ Built with Next.js for optimal performance
• 📱 Fully responsive design
• 🎭 Beautiful animations and transitions

Tech Stack

• Next.js 14
• @coinbase/onchainkit - Base UI components
• viem - TypeScript Interface for Ethereum
• TypeScript
• Tailwind CSS

Getting Started

Prerequisites

• Node.js 18+ installed
• Package manager (npm, yarn, pnpm, or bun)

Installation

1. Clone the repository
2. Install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Development

Run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Usage Example

The main wallet component implementation can be found in app/WalletDemo.tsx:

import { Wallet, ConnectWallet } from "@coinbase/onchainkit/wallet";
import { useAccount } from "wagmi";

export function WalletDemo() {
  const { address } = useAccount();
  return (
    <Wallet>
      <ConnectWallet text="Connect Wallet">
        {/* Wallet implementation */}
      </ConnectWallet>
      {/* Additional wallet components */}
    </Wallet>
  );
}

Learn More

• OnchainKit Documentation - Learn about OnchainKit features and components
• Next.js Documentation - Learn about Next.js features and API
• wagmi Documentation - Learn about wagmi hooks and utilities
• viem Documentation - Learn about viem's Ethereum interface

License

This project is MIT licensed.