# Project export: Otter

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: Cal Hacks 12.0
- Tagline: Decentralizing how humans communicate using SUI
- Devpost: https://devpost.com/software/otter
- GitHub: https://github.com/haotianli24/sui-otter/
- Demo: https://sui-otter.vercel.app/
- Video: https://www.youtube.com/embed/a123pX0egfc?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Result: winner (Sui: Best Use of Sui)
- Team: 4 GitHub contributor(s) — Dhiyaan (22 commits), Haotian Li (19 commits), anson lam (15 commits), Akash Mishra (6 commits)

## Devpost submission (written by the team)

### Inspiration

The Web3 ecosystem is powerful but fragmented. Traders use one platform, communities gather on another (like Discord or Telegram), and blockchain insights require a third tool. We were inspired to create a single, comprehensive platform that unifies these critical functions. Our goal was to build a "super-app" on the Sui blockchain where users can trade, communicate securely, govern communities, and gain AI-powered insights, all in one place.

### What it does

Otter is a comprehensive decentralized platform on Sui that combines intelligent trading, community building, and AI insights. Copy Trading: Allows users to follow and automatically replicate the trading strategies of expert traders with customizable risk settings. Community DAOs: Enables the creation and management of token-gated communities (DAOs) with built-in governance and member management. AI Agents: Integrates Fetch.ai and Google GenAI, allowing users to query in natural language for trading insights, community recommendations, and real-time blockchain guidance. Secure Messaging: Features end-to-end encrypted messaging for private communication between users and within communities, built on the Sui Messaging protocol. Real-Time Activity Stream: A live feed of on-chain activities, including swaps, NFT mints, transfers, and smart contract calls, allowing users to monitor the pulse of the network.

### How we built it

We built Otter using a modern, comprehensive tech stack to handle the demands of a real-time, decentralized application. Blockchain: We used the Sui blockchain, leveraging the Sui SDK, Sui dApp Kit for wallet connections, and native protocols like Sui Messaging and Sui Walrus (decentralized storage). Our smart contracts for copy trading and DAOs are written in Move. Frontend: A responsive UI built with React 18 and TypeScript, styled with Tailwind CSS, and routed with React Router. AI & Data: We integrated Fetch.ai for autonomous AI agents and Google GenAI for LLM-powered chat. React Query was crucial for managing server state and caching blockchain data. Backend & Database: A Node.js/Express.js API server handles off-chain logic, with Supabase (PostgreSQL) used for user profiles, community metadata, and data aggregation.

### Challenges we ran into

Real-time Data: Building the activity stream was a major challenge. We had to implement efficient polling (useTransactionPolling) and data aggregation to provide a live feed of on-chain transactions without overwhelming the frontend or our API. Complex State Management: Juggling blockchain state (wallet connections, contract data), server state (Supabase data), and local UI state was complex. React Query was essential in managing this. ZKLogin & Sponsored Transaction: Trying to use Enoki for ZKlogin and to sponsor transactions on our app for a seamless user experience had a larger learning curve than expected especially when dealing with oauth providers like Google and .build functions. Secure Messaging: Implementing end-to-end encryption with session key management using the new Sui Messaging protocol required a deep dive into its documentation to ensure a secure, seamless user experience. Document transfer on chain: Utilizing Walrus to employ file uploads such as images, videos, and other documents with the messaging SDK was rather difficult and required understanding of the Walrus docs.

### Accomplishments we're proud of

A Unified Platform: We are incredibly proud of successfully integrating five distinct, complex features (copy trading, DAOs, AI chat, messaging, and a real-time stream) into a single, cohesive application. The AI Agent: The Otter AI Chat, powered by Fetch.ai and Google GenAI, is a standout feature. It can understand natural language queries and provide genuinely helpful trading strategies and ecosystem guidance. On-Chain + Off-Chain Synergy: We created a robust architecture that skillfully balances on-chain smart contracts (for trust-minimized trading and governance) with an efficient off-chain backend (for data aggregation and user experience), all powered by Supabase. Polished UX: Despite the underlying complexity, we delivered a clean, responsive, and accessible UI with features like dark mode and a mobile-first design, thanks to Tailwind and Radix UI.

### What we learned

Deep Dive into Sui: This project was a massive learning experience in the Sui ecosystem. We gained deep, hands-on expertise with the Sui SDK, the dApp Kit, and especially the newer protocols like Sui Messaging and Walrus. Practical AI Application: We learned how to move beyond simple AI chat prompts and integrate LLMs (Google GenAI) and autonomous agents (Fetch.ai) to perform complex, data-driven tasks related to blockchain activity. Real-Time Data Architectures: We learned the challenges and best practices for handling real-time data feeds from a blockchain, using a combination of smart contract events, API polling, and frontend state management with React Query.

### What's next

Mainnet Deployment: Our immediate next step is to complete audits on our smart contracts and deploy Otter to the Sui mainnet. Expanded AI Capabilities: We plan to enhance our AI agents to allow for autonomous actions, such as executing trades based on user-defined strategies or providing proactive alerts. Mobile App: To truly be a "super-app," we aim to develop native mobile applications for iOS and Android. Advanced DAO Tooling: We want to add more sophisticated governance modules, such as treasury management and integration with other DeFi protocols, for our community DAOs.

## README (from the GitHub repository)

# Otter: Decentralized Trading & Community Platform on Sui

## Usage Guide 
- Download Slush Wallet from google chrome store 
- Make sure your network is set to TESTNET 
- Connect your wallet! 

## 🎯 Overview

Otter is a comprehensive decentralized platform built on the Sui blockchain that combines intelligent trading tools, community-driven DAOs, and AI-powered insights. Whether you're a trader looking to replicate successful strategies, a community builder creating exclusive groups, or an investor seeking real-time blockchain intelligence, Otter provides the tools to navigate and thrive in the Web3 ecosystem.

### Key Features

- **Copy Trading**: Follow and automatically replicate trades from expert traders with customizable settings
- **Community DAOs**: Create and join token-gated communities with governance capabilities
- **AI Agents**: Interact with Fetch.ai-powered AI agents for trading insights and blockchain guidance
- **Real-Time Activity Stream**: Monitor on-chain transactions, swaps, NFT activities, and contract calls
- **Secure Messaging**: End-to-end encrypted messaging for community members and traders
- **User Profiles & Discovery**: Discover traders, communities, and connect with like-minded participants
- **Smart Contract Integration**: Direct blockchain interaction with Sui smart contracts for trading and governance

---

## 🛠️ Tech Stack

### Frontend
- **React 18.3** - Modern UI framework with hooks
- **TypeScript 5.9** - Type-safe development
- **Vite 7.1** - Lightning-fast build tool
- **Tailwind CSS 4.1** - Utility-first styling
- **React Router 6.30** - Client-side routing

### Blockchain & Web3
- **Sui SDK (@mysten/sui 1.38.0)** - Native Sui blockchain integration
- **Sui dApp Kit (@mysten/dapp-kit 0.18.0)** - Wallet connection & transaction signing
- **Sui Messaging (@mysten/messaging 0.0.2)** - Encrypted messaging protocol
- **Sui Walrus (@mysten/walrus 0.8.1)** - Decentralized storage
- **Sui Seal (@mysten/seal 0.6.0)** - Data integrity verification
- **BCS (@mysten/bcs 1.8.0)** - Binary encoding/decoding

### AI & Data
- **Google GenAI (@google/genai 1.27.0)** - LLM integration for AI agents
- **Fetch.ai Integration** - Autonomous AI agents for trading insights
- **React Query (@tanstack/react-query 5.87.1)** - Server state management

### Backend & Database
- **Node.js API Server** - Custom backend for off-chain operations
- **Supabase (@supabase/supabase-js 2.76.1)** - PostgreSQL database & auth
- **Express.js** - RESTful API framework

### UI & UX
- **Radix UI** - Accessible component primitives
- **Lucide React 0.548** - Beautiful icon library
- **React Markdown 10.1** - Markdown rendering for AI responses
- **Date-fns 4.1** - Date manipulation utilities

### Development Tools
- **TypeScript** - Static type checking
- **Tailwind CSS PostCSS** - Advanced CSS processing
- **Concurrently** - Run multiple processes simultaneously

---

## 🚀 Getting Started

### Prerequisites
- Node.js 18+ and npm/yarn
- A Sui wallet (Sui Wallet, Martian, or similar)
- Supabase account for database (optional for local dev)

### Installation

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd sui-otter/otter-webapp
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Set up environment variables**
   Create a `.env` file in the root directory:
   
   ```env
   # Supabase (optional for local dev)
   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_key
   
   # Fetch.ai API Key (for AI Agents)
   VITE_FETCHAI_API_KEY=your_fetchai_api_key
   
   # Google Gemini API Key (for AI Transaction Explanations)
   # Get your key from: https://aistudio.google.com/app/apikey
   GEMINI_API_KEY=your_gemini_api_key
   ```

4. **Start the development server**
   ```bash
   # Terminal 1: Start the API server
   npm run api
   
   # Terminal 2: Start the frontend dev server
   npm run dev
   ```
   
   Or run both simultaneously:
   ```bash
   npm run dev:full
   ```

5. **Open in browser**
   Navigate to `http://localhost:5173`

### Build for Production
```bash
npm run build
npm run preview
```

---

## 📱 Core Features & Pages

### 1. **Messages** (`/messages`)
- End-to-end encrypted messaging using Sui Messaging protocol
- Create direct channels with other users
- Real-time message synchronization
- Session key management for security

### 2. **Copy Trading** (`/copy-trading`)
- Browse and follow expert traders
- View trader statistics (followers, total trades, P&L)
- Customize copy settings per trader:
  - Copy percentage allocation
  - Maximum trade size limits
  - Auto-copy toggle
- Track copied trade history
- Blockchain-backed follower relationships

### 3. **Communities & DAOs** (`/groups` & `/discover`)
- Discover token-gated communities
- Create custom DAOs with membership requirements
- Join communities with SUI token threshold
- Preset DAO communities:
  - SUI Test DAO (0.1 SUI minimum)
  - SUI Whales DAO (1000 SUI minimum)
  - SUI Builders DAO (500 SUI minimum)
  - SUI Validators DAO (2000 SUI minimum)
- Community governance and member management

### 4. **AI Agents** (`/agents`)
- **Otter AI Chat**: Powered by ASI:One (Fetch.ai)
- Natural language understanding for blockchain queries
- Real-time insights on:
  - Trading strategies
  - Community recommendations
  - NFT analysis
  - Network activity
- Expert guidance on Sui ecosystem

### 5. **Activity Stream** (`/stream`)
- Real-time transaction monitoring
- **AI-Powered Transaction Explanations**: Click any transaction for a natural language explanation
- Filter by activity type:
  - Transfers (incoming/outgoing)
  - Swaps
  - NFT activities
  - Smart contract calls
- Time range filtering (hour, day, week, all-time)
- Live polling for new transactions
- Pagination for historical data
- Powered by Google Gemini for intelligent transaction analysis

### 6. **Profile** (`/profile`)
- User profile management
- Trading statistics and history
- Community memberships
- Follower/following relationships
- Customizable profile information

### 7. **Settings** (`/settings`)
- Wallet management
- Theme preferences (light/dark/system)
- Notification settings
- Privacy controls
- Account preferences

---

## 🏗️ Architecture

### Smart Contracts (Move)
Located in `/move` directory:
- **Copy Trading Module**: Manages trader follows and trade replication
- **Community Module**: DAO creation, membership, and governance
- **Messaging Module**: Encrypted message channels

### Key Hooks
- `useTransactionPolling` - Real-time activity stream updates
- `useUserGroups` - Community data fetching
- `useMessaging` - Messaging context and operations
- `useSignAndExecuteTransaction` - Blockchain transaction execution

### API Server
- RESTful endpoints for off-chain operations
- Supabase integration for user data
- Transaction history aggregation
- Community management

---

## 🔐 Security Features

- **Wallet Integration**: Secure Sui wallet connection via dApp Kit
- **Session Keys**: Encrypted messaging with session key management
- **Smart Contract Verification**: All trading and DAO operations on-chain
- **Type Safety**: Full TypeScript coverage prevents runtime errors
- **Environment Variables**: Sensitive data never hardcoded

---

## 📊 Data Flow

```
User Wallet
    ↓
Sui dApp Kit (Connection & Signing)
    ↓
Smart Contracts (Copy Trading, DAOs, Messaging)
    ↓
Supabase (User profiles, community metadata)
    ↓
API Server (Aggregation & off-chain logic)
    ↓
React Frontend (Real-time UI updates)
```

---

## 🎨 UI/UX Highlights

- **Responsive Design**: Mobile-first approach with Tailwind CSS
- **Dark Mode Support**: System-aware theme switching
- **Accessibility**: Radix UI primitives for WCAG compliance
- **Real-time Updates**: React Query for optimistic updates
- **Loading States**: Skeleton screens and spinners for better UX
- **Error Boundaries**: Graceful error handling throughout the app

---

## 🔄 Development Workflow

### Run

[README truncated for size]

## Detected evidence (automated analysis)

Indexed codebase: 123 recognized source files, 758 KB.
- CSS (language) — detected in the code
- Express (technology) — detected in the code
- Google Gemini (technology) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- Python (language) — detected in the code
- React (technology) — detected in the code
- SQL (language) — detected in the code
- Supabase (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Node.js (technology) — claimed on Devpost, not found in the code
- PostgreSQL (technology) — claimed on Devpost, not found in the code
- Vue (technology) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (120 of 147)

```
.gitignore
agent/agent1qvhrpglg5u_data.json
agent/api-server.js
agent/contract_queries.py
agent/copy-trading-agent.py
agent/followed_traders.json
agent/package.json
agent/requirements-copy-trading.txt
agent/sui_executor.py
agent/test_contract_queries.py
agent/trade_history.json
api-server.js
api/gemini.js
api/transaction-explain.js
deploy-username-registry.sh
docs/AGENTS_CHAT_SETUP.md
docs/ASI_CHAT_IMPLEMENTATION.md
docs/FIXES_APPLIED.txt
docs/GEMINI_INTEGRATION.md
index.html
move/community/.gitignore
move/community/Move.toml
move/community/sources/community.move
move/community/tests/community_tests.move
move/copy-trading/deployed.json
move/copy-trading/Move.toml
move/copy-trading/sources/copy_trading.move
move/usernameRegistry/.gitignore
move/usernameRegistry/Move.toml
move/usernameRegistry/sources/usernameregistry.move
move/usernameRegistry/tests/usernameregistry_tests.move
package.json
postcss.config.js
README.md
src/App.tsx
src/components/agents/ChatInput.tsx
src/components/agents/ChatInterface.tsx
src/components/agents/ChatMessage.tsx
src/components/agents/ProfileBadge.tsx
src/components/agents/ProfileSetupModal.tsx
src/components/ErrorBoundary.tsx
src/components/groups/community-card.tsx
src/components/groups/create-community-modal.tsx
src/components/groups/create-group.tsx
src/components/groups/group-gallery.tsx
src/components/groups/group-list.tsx
src/components/groups/member-sidebar.tsx
src/components/layout/sidebar.tsx
src/components/layout/topbar.tsx
src/components/messages/blockchain-conversation-list.tsx
src/components/messages/blockchain-message-bubble.tsx
src/components/messages/Channel.tsx
src/components/messages/ChannelList.tsx
src/components/messages/ContactsSidebar.tsx
src/components/messages/conversation-list.tsx
src/components/messages/copy-trade-modal.tsx
src/components/messages/CreateChannel.tsx
src/components/messages/empty-messages.tsx
src/components/messages/message-bubble.tsx
src/components/messages/message-input.tsx
src/components/messages/message-with-media.tsx
src/components/messages/MessagingStatus.tsx
src/components/stream/activity-item.tsx
src/components/stream/activity-list.tsx
src/components/stream/ai-explanation-modal.tsx
src/components/theme-provider.tsx
src/components/transaction/ExpandableText.tsx
src/components/transaction/TransactionEmbed.tsx
src/components/transaction/TransactionEmbedSkeleton.tsx
src/components/ui/alert.tsx
src/components/ui/avatar.tsx
src/components/ui/badge.tsx
src/components/ui/button.tsx
src/components/ui/card.tsx
src/components/ui/clickable-avatar.tsx
src/components/ui/dialog.tsx
src/components/ui/dropdown-menu.tsx
src/components/ui/empty-state.tsx
src/components/ui/gradient-avatar.tsx
src/components/ui/input.tsx
src/components/ui/label.tsx
src/components/ui/loading.tsx
src/components/ui/select.tsx
src/components/ui/switch.tsx
src/components/ui/textarea.tsx
src/components/ui/toast.tsx
src/components/ui/user-profile-popup.tsx
src/components/ui/zero-background.tsx
src/components/wallet-connection.tsx
src/contexts/messaging-context.tsx
src/contexts/UserProfileContext.tsx
src/hooks/use-transaction-polling.ts
src/hooks/useGroupMessaging.ts
src/hooks/useMessaging.ts
src/hooks/useUserBalances.ts
src/hooks/useUserGroups.ts
src/hooks/useUsernameRegistry.ts
src/hooks/useUserProfile.ts
src/index.css
src/layouts/MainLayout.tsx
src/lib/api/addressActivity.ts
src/lib/api/randomAddress.ts
src/lib/api/recentTransactions.ts
src/lib/api/transaction-explorer.ts
src/lib/api/transactionExplain.ts
src/lib/api/transactionExplorer.ts
src/lib/copy-trading-contract.ts
src/lib/format-date.ts
src/lib/gemini-service.ts
src/lib/integration-points.ts
src/lib/memory-manager.ts
src/lib/messaging-service.ts.old
src/lib/messagingHelpers.ts
src/lib/mock-data.ts
src/lib/mock-walrus.ts
src/lib/prompt-builder.ts
src/lib/protocol-registry.ts
src/lib/suiClient.ts.old
src/lib/supabase.ts
src/lib/transaction-cache.ts
[27 more files omitted for size]
```

### Dependencies

- agent/package.json: cors@^2.8.5, express@^4.18.2, nodemon@^3.0.1
- package.json: @google/generative-ai@^0.21.0, @mysten/bcs@^1.8.0, @mysten/dapp-kit@0.18.0, @mysten/messaging@^0.0.2, @mysten/seal@^0.6.0, @mysten/sui@1.38.0, @mysten/walrus@^0.8.1, @radix-ui/react-label@^2.1.7, @radix-ui/react-select@^2.2.6, @radix-ui/themes@^3.2.1, @supabase/supabase-js@^2.76.1, @tailwindcss/postcss@^4.1.16, @tanstack/react-query@^5.87.1, @types/react@^18.3.3, @types/react-dom@^18.3.0, @vitejs/plugin-react-swc@^3.11.0, autoprefixer@^10.4.21, class-variance-authority@^0.7.1, clsx@^2.1.1, concurrently@^9.2.1, date-fns@^4.1.0, dotenv@^17.2.3, lru-cache@^11.2.2, lucide-react@^0.548.0, postcss@^8.5.6, react@^18.3.1, react-dom@^18.3.1, react-markdown@^10.1.0, react-router-dom@^6.30.1, tailwind-merge@^3.3.1, tailwindcss@^4.1.16, typescript@^5.9.2, vite@^7.1.5, zod@^4.1.12

### Recent commits (newest first)

- Update README.md
- gemini fixes
- t
- t
- t
- t
- test
- t
- .
- Test
- changes
- vercel fix
- refactor: consolidate codebase to otter-webapp only
- Read me
- feat: improve Walrus integration with HTTP API upload and better error handling
- feat: enhance LLM prompts to recognize user addresses and remove mock data usage
- UI changes
- Merge pull request #7 from haotianli24/fetch-ai-chatbot
- docs: Remove documentation files
- feat: Add Personalized OtterAI Twin with Supabase integration

## Key source files (fetched from GitHub, selected and truncated for size)

### VERCEL_ENV_SETUP.md

```markdown
# Vercel Environment Variables Setup

The build is failing because Supabase environment variables are not configured in Vercel.

## Required Environment Variables

Add these environment variables in your Vercel project dashboard:

### 1. Go to Vercel Dashboard
- Navigate to your project: https://vercel.com/[your-username]/sui-otter/settings/environment-variables

### 2. Add the following variables:

**For the Next.js app (in `/otter` directory):**
```
NEXT_PUBLIC_SUPABASE_URL=https://tnofvkkfojnjagylvvbh.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRub2Z2a2tmb2puamFneWx2dmJoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjE0NDE5OTIsImV4cCI6MjA3NzAxNzk5Mn0.trUa2kic1xIj8KxC2HVVmS_BCD9NbYhURnK3uVQTXlM
NEXT_PUBLIC_GOOGLE_CLIENT_ID=<your-google-client-id>
ENOKI_SECRET_KEY=<your-enoki-secret-key>
NEXT_PUBLIC_SUI_NETWORK=testnet
```

**For the Vite app (in `/otter-webapp` directory):**
```
VITE_SUPABASE_URL=https://tnofvkkfojnjagylvvbh.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InRub2Z2a2tmb2puamFneWx2dmJoIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjE0NDE5OTIsImV4cCI6MjA3NzAxNzk5Mn0.trUa2kic1xIj8KxC2HVVmS_BCD9NbYhURnK3uVQTXlM

VITE_FETCHAI_API_KEY=sk_1ca6bd86b301469c87e42c79875dc6ecfa7684f8aaf54dd093bab30c619051a7
```

**For Vercel Serverless Functions (API routes):**
```
GEMINI_API_KEY=AIzaSyBdgumYb0N71EZLT1jt-y0chhC54aL7zuc
```

Note: The Gemini API key is now set as a server-side environment variable (`GEMINI_API_KEY`) for security. It is only accessible by the serverless function in `/api/gemini.js` and not exposed to the client.

### 3. Enable for all environments:
- Production
- Preview
- Development

### 4. Redeploy

After adding the variables, redeploy your project. The build should now succeed.

## Fix Applied

The issue was in `/otter/src/app/api/enoki/derive/route.ts` where Supabase was being initialized without checking for environment variables. The code has been updated to:
- Only create Supabase client if environment variables are present
- Gracefully handle missing Supabase configuration
- Return responses even when Supabase is not configured

## Alternative: Disable Supabase Features

If you don't want to use Supabase, you can disable it by making the client optional in all files that use it.


```

### docs/AGENTS_CHAT_SETUP.md

```markdown
# 🎉 ASI:One Chat Now in Otter-Webapp!

## ✅ What Was Done

I've moved the ASI:One chat integration into your main **`otter-webapp`** application (Vite/React) and integrated it into the **Agents** section!

### Files Created in `otter-webapp`:

1. **`src/pages/AgentsPage.tsx`** - Main agents landing page with cards
2. **`src/components/agents/ChatInterface.tsx`** - Full chat UI with ASI:One integration
3. **`src/components/agents/ChatMessage.tsx`** - Message bubbles (blue/green)
4. **`src/components/agents/ChatInput.tsx`** - Input field with send button

### Files Modified:

1. **`src/router.tsx`** - Added `/agents` route
2. **`src/components/layout/sidebar.tsx`** - Updated with:
   - 🤖 **Agents** - Your new AI chat (with Bot icon)
   - 📈 **Copy Trading** - Separated into its own menu item

## 🚀 How to Use

### 1. Start the App (if not running)

```bash
cd otter-webapp
npm run dev
```

### 2. Access the Chat

Open **http://localhost:3000** and look at the sidebar:

```
📱 DMs
👥 Groups
🌊 Stream
🤖 Agents        ← CLICK THIS!
📈 Copy Trading
🧭 Discover
👤 Profile
⚙️ Settings
```

### 3. Click on "Agents"

You'll see:
- **Otter AI Chat** card - Click "Start Chatting"
- **Copy Trading Agent** card - Info about your autonomous agent
- Placeholder for future agents

### 4. Start Chatting!

Click **"Start Chatting"** to open the chat interface and talk to Otter AI powered by Fetch.ai's ASI:One!

## 🎨 Features

- ✅ Full chat interface with history
- ✅ User messages in blue, AI in green
- ✅ Auto-scroll to latest message
- ✅ Loading spinner during responses
- ✅ Enter key to send
- ✅ Dark mode support
- ✅ Responsive design
- ✅ Back button to return to agents page

## 🔑 API Key

Your API key is already configured in the code:
```
sk_1ca6bd86b301469c87e42c79875dc6ecfa7684f8aaf54dd093bab30c619051a7
```

⚠️ **Security Note**: For production, move the API key to a backend server to keep it secure!

## 🧪 Test Questions

Try asking:
- "What is Sui blockchain?"
- "How do I start with NFTs on Sui?"
- "Tell me about Sui communities"
- "What are the benefits of using Sui?"

## 📦 Git Status

```
✅ Branch: fetch-ai-chatbot
✅ Commit: 52e5e5c
✅ Pushed to GitHub
✅ Files: 7 files changed, 431+ lines added
```

## 🎯 What's Different from Before

**Before**: Chat was in the separate Next.js `otter` app

**Now**: Chat is integrated into your main `otter-webapp` app in the Agents section!

## 🔄 Navigation Flow

```
Sidebar → Click "Agents" → Agents Page
                              ↓
                    Click "Start Chatting"
                              ↓
                        Chat Interface
                              ↓
                        Talk to Otter AI!
```

## 📱 Sidebar Update

The sidebar now has both:
- **Agents** 🤖 - AI chat and agent overview
- **Copy Trading** 📈 - Your copy trading features

They're separated so you can access each feature independently!

## ✨ Ready to Test!

Everything is ready! Just:
1. Make sure `otter-webapp` dev server 
[truncated — 255 more characters]
```

### package.json

```
{
  "name": "otter-webapp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "api": "node api-server.js",
    "dev:full": "concurrently \"npm run api\" \"npm run dev\"",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@google/generative-ai": "^0.21.0",
    "@mysten/bcs": "^1.8.0",
    "@mysten/dapp-kit": "0.18.0",
    "@mysten/messaging": "^0.0.2",
    "@mysten/seal": "^0.6.0",
    "@mysten/sui": "1.38.0",
    "@mysten/walrus": "^0.8.1",
    "@radix-ui/react-label": "^2.1.7",
    "@radix-ui/react-select": "^2.2.6",
    "@radix-ui/themes": "^3.2.1",
    "@supabase/supabase-js": "^2.76.1",
    "@tanstack/react-query": "^5.87.1",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^4.1.0",
    "dotenv": "^17.2.3",
    "lru-cache": "^11.2.2",
    "lucide-react": "^0.548.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-markdown": "^10.1.0",
    "react-router-dom": "^6.30.1",
    "tailwind-merge": "^3.3.1",
    "zod": "^4.1.12"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.16",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@vitejs/plugin-react-swc": "^3.11.0",
    "autoprefixer": "^10.4.21",
    "concurrently": "^9.2.1",
    "postcss": "^8.5.6",
    "tailwindcss": "^4.1.16",
    "typescript": "^5.9.2",
    "vite": "^7.1.5"
  }
}

```

### agent/package.json

```
{
  "name": "copy-trading-agent-api",
  "version": "1.0.0",
  "description": "API server for syncing followed traders from webapp to agent",
  "main": "api-server.js",
  "scripts": {
    "start": "node api-server.js",
    "dev": "nodemon api-server.js"
  },
  "dependencies": {
    "express": "^4.18.2",
    "cors": "^2.8.5"
  },
  "devDependencies": {
    "nodemon": "^3.0.1"
  }
}


```

### src/App.tsx

```typescript
import { RouterProvider } from 'react-router-dom';
import { router } from './router';

function App() {
    return <RouterProvider router={router} />;
}

export default App;


```

### src/main.tsx

```typescript
import React from "react";
import ReactDOM from "react-dom/client";
import "@mysten/dapp-kit/dist/index.css";
import "@radix-ui/themes/styles.css";
import "./index.css";

import { SuiClientProvider, WalletProvider } from "@mysten/dapp-kit";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import App from "./App.tsx";
import { getFullnodeUrl } from "@mysten/sui/client";
import { createNetworkConfig } from "@mysten/dapp-kit";
import { SuiClient } from "@mysten/sui/client";
import { ThemeProvider } from "./components/theme-provider.tsx";
import { UserProfileProvider } from "./contexts/UserProfileContext.tsx";

const queryClient = new QueryClient();

const { networkConfig } = createNetworkConfig({
    devnet: { url: getFullnodeUrl("devnet") },
    testnet: { url: getFullnodeUrl("testnet") },
    mainnet: { url: getFullnodeUrl("mainnet") },
});

const createClient = () => {
    return new SuiClient({
        url: "https://fullnode.testnet.sui.io:443",
        mvr: {
            overrides: {
                packages: {
                    '@local-pkg/sui-stack-messaging': "0x984960ebddd75c15c6d38355ac462621db0ffc7d6647214c802cd3b685e1af3d",
                },
            },
        },
    })
}

ReactDOM.createRoot(document.getElementById("root")!).render(
    <React.StrictMode>
        <ThemeProvider defaultTheme="system" storageKey="otter-ui-theme">
            <QueryClientProvider client={queryClient}>
                <SuiClientProvider createClient={createClient} networks={networkConfig} defaultNetwork="testnet">
                    <WalletProvider autoConnect>
                        <UserProfileProvider>
                            <App />
                        </UserProfileProvider>
                    </WalletProvider>
                </SuiClientProvider>
            </QueryClientProvider>
        </ThemeProvider>
    </React.StrictMode>,
);


```

### postcss.config.js

```javascript
export default {
    plugins: {
        '@tailwindcss/postcss': {
            content: [
                "./index.html",
                "./src/**/*.{js,ts,jsx,tsx}",
            ],
        },
        autoprefixer: {},
    },
}

```

### tailwind.config.js

```javascript
/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        "./src/**/*.{js,ts,jsx,tsx}",
    ],
    darkMode: "class",
    theme: {
        extend: {
            fontFamily: {
                sans: ['DM Sans', 'system-ui', 'sans-serif'],
            },
        },
    },
};

```

### deploy-username-registry.sh

```shell
#!/bin/bash

# Deploy Username Registry Contract
echo "Deploying Username Registry contract..."

# Navigate to the contract directory
cd move/username_registry

# Deploy the contract
sui client publish --gas-budget 100000000

echo "Contract deployment completed!"
echo "Please update the USERNAME_REGISTRY_PACKAGE_ID and USERNAME_REGISTRY_ID in the frontend code."

```

### vite.config.ts

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
    plugins: [react()],
    server: {
        port: 3000,
        proxy: {
            '/api': {
                target: 'http://localhost:3001',
                changeOrigin: true,
                secure: false,
            },
        }
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src')
        }
    }
})


```

[113 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]