Adding Smart Wallet to an Existing Application

Smart Wallet allows users to create an account in seconds without needing an app or extension. This is achieved through the use of passkeys for signing in, which are generated and securely stored on users' devices.

Project Setup

git clone https://github.com/projectbuidlonbase/buidl-on-base-starter
cd buidl-on-base-starter

Adding Smart Wallet Dependencies

npm install @coinbase/onchainkit

Implementation

Create a new component for the Smart Wallet button:

import { SmartWallet } from '@coinbase/onchainkit';

export default function WalletButton() {
  return (
    <SmartWallet
      buttonClassName="gradient-button"
      onboardingButtonLabel="Create Account"
    />
  );
}

Styling

.gradient-button {
  background: linear-gradient(to right, #4F46E5, #9333EA);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
}

Testing

Test the Smart Wallet integration by running your application locally:

npm run dev