Onchain Vibes Store (Profiles)

​

Overview

Onchain Vibes Store demonstrates how to use Smart Wallet Profiles to securely collect user information (like email and physical address) during an onchain transaction. This feature enables seamless, privacy-first data collection for e-commerce and other onchain apps.

​

What Are Smart Wallet Profiles?

Smart Wallet Profiles allow your app to request personal information from users as part of a transaction. Supported data types include:

• Email address
• Phone number
• Physical address
• Name
• Onchain wallet address

Users are always in control: they see exactly what you request and can choose to share or withhold any information.

​

How It Works in This App

1. User clicks Buy: The checkout UI lets users select what info to share (email, address).
2. App requests data: The app sends a transaction with a dataCallback capability, specifying the requested data and a callback URL for validation.
3. Smart Wallet prompts the user: The wallet UI collects the requested info.
4. Validation: The wallet POSTs the data to your callback API for validation.
5. Transaction proceeds: If validation passes, the transaction completes and the app displays the collected info.

​

Skip ahead

If you want to skip ahead and just get the final code, you can find it here:

​

UI Walkthrough: CheckoutButton

The main logic lives in src/components/CheckoutButton.tsx:

const requests = [];
if (dataToRequest.email) requests.push({ type: "email", optional: false });
if (dataToRequest.address) requests.push({ type: "physicalAddress", optional: false });

const response: any = await provider?.request({
  method: "wallet_sendCalls",
  params: [{
    version: "1.0",
    chainId: numberToHex(84532), // Base Sepolia
    calls: [
      {
        to: "0x036CbD53842c5426634e7929541eC2318f3dCF7e", // USDC contract
        data: encodeFunctionData({
          abi: erc20Abi,
          functionName: "transfer",
          args: [
            "0xd8da6bf26964af9d7eed9e03e53415d37aa96045",
            parseUnits("0.01", 6),
          ],
        }),
      },
    ],
    capabilities: {
      dataCallback: {
        requests,
        callbackURL: getCallbackURL(),
      },
    },
  }],
});

• The user selects which data to share (checkboxes for email/address).
• The app sends a transaction with a dataCallback capability.
• The callback URL is set to your API endpoint (must be HTTPS, e.g. via ngrok in dev).

​

API Walkthrough: Data Validation

The callback API is implemented in src/api/data-validation/route.ts:

export async function POST(request: NextRequest) {
  const requestData = await request.json();
  try {
    const email = requestData.requestedInfo.email;
    const physicalAddress = requestData.requestedInfo.physicalAddress;
    const errors: any = {};
    if (email && email.endsWith("@example.com")) {
      errors.email = "Example.com emails are not allowed";
    }
    if (physicalAddress) {
      if (physicalAddress.postalCode && physicalAddress.postalCode.length < 5) {
        if (!errors.physicalAddress) errors.physicalAddress = {};
        errors.physicalAddress.postalCode = "Invalid postal code";
      }
      if (physicalAddress.countryCode === "XY") {
        if (!errors.physicalAddress) errors.physicalAddress = {};
        errors.physicalAddress.countryCode = "We don't ship to this country";
      }
    }
    if (Object.keys(errors).length > 0) {
      return NextResponse.json({ errors });
    }
    return NextResponse.json({
      calls: requestData.calls,
      chainId: requestData.chainId,
      capabilities: requestData.capabilities
    });
  } catch (error) {
    return NextResponse.json({ errors: { server: "Server error validating data" } });
  }
}

• The API receives the user’s data, validates it, and returns errors if needed.
• If validation passes, it must return the original calls, chainId, and capabilities.
• If errors are returned, the wallet prompts the user to correct their info.

​

Wagmi & Wallet Setup

The app uses Wagmi and the Coinbase Wallet connector, configured for Smart Wallet and profiles:

import { coinbaseWallet } from "wagmi/connectors";
const cbWalletConnector = coinbaseWallet({
  appName: "Vibes Store",
  preference: {
    keysUrl: "https://keys.coinbase.com/connect",
    options: "smartWalletOnly",
  },
});

​

Testing Locally

1. Start your dev server: npm run dev
2. Start ngrok: ngrok http 3000
3. Set VITE_NGROK_URL in your .env to your ngrok HTTPS URL
4. Try a purchase and share profile data

​

Best Practices

• Only request what you need: Ask for the minimum info required.
• Explain why: Tell users why you need each field.
• Validate thoroughly: Implement robust server-side validation.
• Handle errors gracefully: Show clear error messages.
• Use HTTPS: Your callback URL must be HTTPS (ngrok for local dev).

​

Resources

• Profiles Guide
• Profiles Reference
• Smart Wallet Docs
• Wagmi Docs