Quick Demo using OnchainKit (5 mins)

This option uses the OnchainKit Wallet component. It is perfect for quickly experiencing Smart Wallet functionality with minimal setup.

Step 1: Clone the Template Repository

Let's start by cloning the repository. Open a terminal and execute the following:

git clone https://github.com/coinbase/onchain-app-template
cd onchain-app-template

Step 2: Set Up Environment Variables

Before running your project, you need to set up your environment variables. Follow these steps:

Get a ReOwn Project ID

1. Sign up to ReOwn Cloud
2. Click on Create, and go through the steps (screenshot below):
   • Name your app (eg. OnchainKit-Template)
   • Select a product - Choose WalletKit
   • Select a platform - Choose JavaScript

Screenshot of the steps to get your ReOwn Project ID

Get a Coinbase Developer Platform (CDP) Client API Key

1. Sign up to Coinbase Developer Platform (CDP)
2. Create a new project and copy the Client API Key (screenshot below)

Coinbase Developer Platform Client API Key

Create your .env file

Now that you have obtained your ReOwn Project ID and CDP API Key, it is time to create the .env file:

1. Copy .env.local.default from to the repository root and name it .env
2. Leave NEXT_PUBLIC_GOOGLE_ANALYTICS_ID and NEXT_PUBLIC_ENVIRONMENT as they are
3. Replace NEXT_PUBLIC_CDP_API_KEY and NEXT_PUBLIC_WC_PROJECT_ID with their respective values obtained from the previous steps

Congratulations! We are ready to run the application.

Step 3: Install Dependencies and Run

Open your terminal, make sure you are at the directory /onchain-app-template and execute the following:

# Install packages
bun i
 
# Run Next app
bun run dev

Your app will be available at http://localhost:3000

Step 4: Explore Smart Wallet Features

The template includes:

• Pre-integrated Wallet component
• OnchainKit components for blockchain interactions
• Basic authentication flow
• Transaction handling (NFT Mint)

This setup is ideal for:

• Beginners exploring onchain apps and Smart Wallet functionality
• Developers evaluating Smart Wallet capabilities
• Quick prototyping

If you are looking for a more in depth understanding of Smart Wallet, jump ahead to the Explore More Features section.