X402DOLLY

Floating Chat Component Demo

This page demonstrates the FloatingChat component from @repo/ui package. The chat button is in the bottom-right corner.

Connect Wallet

Click the wallet button in the header to connect your Solana wallet

Open Chat

Click the floating button in the bottom-right corner to open the chat dialog

Send Message

Type a message and it will trigger the X402 payment flow with your wallet

Component Features

✓Complete X402 payment flow integration with Solana
✓Wallet connection check and balance validation
✓Glassmorphism UI design with smooth animations
✓Customizable agent name, avatar, and description
✓Error handling with user-friendly messages
✓Transaction signature logging and explorer links

⚠️ Important: You need to run the backend API server for the payment flow to work. The API endpoint is configured via the apiEndpoint prop. Without a running server, you will see a “404 API endpoint not found” error.

Note: Make sure you have testnet USDC in your wallet. Get it from Circle Faucet

Usage Example

'use client';

import { FloatingChat } from '@askdolly/x402-embed-sdk';
import { useWallet } from '@solana/wallet-adapter-react';

export default function MyPage() {
  const wallet = useWallet();

  return (
    <>
      {/* Your page content */}

      <FloatingChat
        wallet={wallet}
        agentId="1"
        agentName="Agent Alpha"
        agentDescription="Specialized in DeFi trading"
        position="bottom-right"
        logoUrl="/logo.svg"
      />
    </>
  );
}