Project Info

Winner

Sui: Best Use of Sui

Otter

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.

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

Clone the repository

git clone <repository-url>
cd sui-otter/otter-webapp

Install dependencies
```
npm install
```

Set up environment variables Create a .env file in the root directory:

# 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

Start the development server

# Terminal 1: Start the API server
npm run api

# Terminal 2: Start the frontend dev server
npm run dev

Or run both simultaneously:

npm run dev:full

Open in browser Navigate to http://localhost:5173

Build for Production

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

Running Tests

# Unit tests (when available)
npm test

Code Quality

TypeScript strict mode enabled
ESLint configuration (if present)
Prettier formatting (if configured)

Database Schema

See supabase-schema.sql for the complete database structure including:

User profiles
Community/DAO information
Trading relationships
Message channels

📦 Deployment

Deploy to Netlify

npm run build
# Upload the `dist` folder to Netlify

Environment Setup for Production

Update API endpoints to production URLs
Configure production Supabase project
Set appropriate CORS policies
Enable wallet network switching (mainnet/testnet)

🤝 Contributing

Create a feature branch: git checkout -b feature/amazing-feature
Commit changes: git commit -m 'Add amazing feature'
Push to branch: git push origin feature/amazing-feature
Open a Pull Request

📝 Project Structure

otter-webapp/
├── src/
│   ├── pages/              # Route pages (Messages, CopyTrading, etc.)
│   ├── components/         # Reusable UI components
│   ├── hooks/              # Custom React hooks
│   ├── contexts/           # React context providers
│   ├── lib/                # Utility functions & smart contract interactions
│   ├── providers/          # Provider components (Messaging, SessionKey)
│   ├── layouts/            # Layout components
│   ├── utils/              # Helper utilities
│   ├── App.tsx             # Root component
│   ├── router.tsx          # Route configuration
│   └── main.tsx            # Entry point
├── move/                   # Sui smart contracts
├── api-server.js           # Backend API server
├── supabase-schema.sql     # Database schema
├── package.json            # Dependencies
├── tailwind.config.js      # Tailwind configuration
├── tsconfig.json           # TypeScript configuration
└── vite.config.ts          # Vite configuration

🐛 Troubleshooting

Wallet Connection Issues

Ensure your Sui wallet is installed and unlocked
Try switching networks in wallet settings
Clear browser cache and reconnect

Transaction Failures

Check wallet balance for gas fees
Verify smart contract addresses in environment
Check Sui network status

Messaging Not Working

Initialize messaging session on first use
Ensure both parties have initialized messaging
Check browser console for detailed errors

AI Explanation "Failed to generate explanation"

If you see this error, it means the AI transaction explanation feature isn't working. To fix:

Make sure the API server is running:

npm run dev:full  # Runs both frontend and API server

Set up your Gemini API key:
- Get a free API key from: https://aistudio.google.com/app/apikey
- Add to your .env file:
```
GEMINI_API_KEY=your_api_key_here
```
For production/Vercel deployment:
- Add GEMINI_API_KEY to your Vercel environment variables
- The /api/transaction-explain.js serverless function will handle requests
Check the console:
- Open browser DevTools → Console
- Look for detailed error messages
- Ensure API requests are reaching http://localhost:3001/api/transaction-explain

📚 Resources

📄 License

This project is part of the Cal Hacks hackathon submission.

🦦 Team

Built with ❤️ for the Sui ecosystem and Web3 community.

Questions or feedback? Open an issue or reach out to the team!

Analysis

Compare with all teams

View

Metric

Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.

Technology

Found in codeClaimed only

CSSIn code
ExpressIn code
Google GeminiIn code
HTMLIn code
JavaScriptIn code
PythonIn code
ReactIn code
SQLIn code
SupabaseIn code
Tailwind CSSIn code
TypeScriptIn code
Node.jsClaimed
PostgreSQLClaimed
VueClaimed

11 of 14 appear in the indexed code. 3 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.

AI coding agents

No AI coding agent signals were found in this repository.

Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.

Codebase size

Source size

758 KB

Source files

123

Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.

Feature verification

8 Verified1 Code-supported1 Claimed only

AI Agents (Fetch.ai / ASI:One natural language chat)Verified
Integrates Fetch.ai, allowing users to query in natural language for trading insights, community recommendations, and blockchain guidance via Otter AI Chat
Claimed on Devposthigh confidence
- src/components/agents/ChatInterface.tsx:131 — Calls Fetch.ai's ASI:One chat completions API (api.asi1.ai) with model asi1-mini for natural language queries
- agent/copy-trading-agent.py:33 — Standalone uAgents-based Fetch.ai autonomous agent that monitors traders and executes copy trades
- src/pages/AgentsPage.tsx:12 — AgentsPage routes to ChatInterface for the Otter AI Chat feature
AI-powered transaction explanations (Google Gemini)Verified
Powered by Google Gemini for intelligent transaction analysis; click any transaction for a natural language explanation
Claimed on readmehigh confidence
- api/transaction-explain.js:3 — Serverless function imports GoogleGenerativeAI and parses Sui transactions (protocol/token resolution) to build explanations
- src/lib/gemini-service.ts:1 — Frontend service module for calling the Gemini-backed explanation API
- src/lib/api/transactionExplain.ts:1 — API client wrapper used by the stream UI to request explanations
Community DAOs (token-gated, presets)Verified
Enables the creation and management of token-gated communities (DAOs) with built-in governance and member management, including preset DAO communities with SUI thresholds
Claimed on readmehigh confidence
- move/community/sources/community.move:43 — Community struct has is_dao, dao_token_type, dao_token_threshold fields; Move module manages membership NFTs
- src/pages/DiscoverPage.tsx:24 — PRESET_DAO_COMMUNITIES array defines SUI Test/Whales/Builders/Validators DAOs with tokenThreshold values matching README
- src/pages/DiscoverPage.tsx:89 — moveCall transactions are built to join/create communities on-chain using signAndExecuteTransaction
Copy Trading (follow traders, on-chain settings)Verified
Allows users to follow and automatically replicate the trading strategies of expert traders with customizable risk settings (copy percentage, max trade size, auto-copy toggle)
Claimed on Devposthigh confidence
- move/copy-trading/sources/copy_trading.move:22 — Move module defines FollowerRelationship struct with copy_percentage, max_trade_size, auto_copy_enabled fields and a CopyTradingRegistry
- src/lib/copy-trading-contract.ts:17 — buildFollowTraderTx builds a moveCall to copy_trading::follow_trader with deployed package/registry IDs
- src/pages/CopyTradingPage.tsx:346 — UI wires copyPercentage and maxTradeSize settings into transaction calls and displays them per-trader
Decentralized storage via Sui Walrus (media uploads in messaging)Verified
Sui Walrus (decentralized storage) is used for document/image/video transfer within the messaging SDK
Claimed on readmemedium confidence
- src/lib/walrus-service.ts:101 — uploadFileToWalrusHTTP posts files to real Walrus testnet publisher/aggregator endpoints and parses blob IDs
- src/components/messages/message-input.tsx:6 — Message input component imports walrus-service helpers (getFileMetadata, validateFile) for attachments
Real-Time Activity Stream (on-chain transaction polling)Verified
A live feed of on-chain activities including swaps, NFT mints, transfers, and smart contract calls, with polling and filtering
Claimed on Devposthigh confidence
- src/hooks/use-transaction-polling.ts:33 — useTransactionPolling hook implements interval-based polling of /api/address-activity with cursor/pagination state
- src/pages/StreamPage.tsx:12 — StreamPage consumes useTransactionPolling and provides filter/time-range UI matching README's described filters
- src/lib/api/addressActivity.ts:1 — API helper for fetching address activity backing the stream
Secure end-to-end encrypted messaging (Sui Messaging protocol)Verified
Features end-to-end encrypted messaging for private communication between users and within communities, built on the Sui Messaging protocol, with session key management
Claimed on Devposthigh confidence
- src/hooks/useMessaging.ts:6 — Uses @mysten/messaging SDK types (DecryptedChannelObject, DecryptMessageResult) and createChannelFlow to build encrypted channels
- src/providers/SessionKeyProvider.tsx:1 — Dedicated provider for session key management referenced by useMessaging
- src/pages/MessagesPage.tsx:1 — MessagesPage wires SessionKeyProvider and MessagingClientProvider together for the messaging UI
User Profiles & DiscoveryVerified
Discover traders, communities, and connect with like-minded participants; user profile management with trading stats and follower relationships
Claimed on readmemedium confidence
- src/pages/ProfilePage.tsx:15 — ProfilePage uses UserProfileContext and on-chain username registry hooks to display/edit profile data
- src/hooks/useUserProfile.ts:1 — Dedicated hook for profile data fetching/updating
Supabase backend for profiles, communities, and data aggregationCode-supported
Supabase (PostgreSQL) used for user profiles, community metadata, and data aggregation
Claimed on Devpostmedium confidence
- src/lib/supabase.ts:1 — Initializes a Supabase client from env vars, exported for app-wide use
- supabase-schema.sql:1 — Schema file referenced by README defines the database structure (not opened in full, but present in repo root per README structure)
ZKLogin & sponsored transactions via EnokiClaimed only
Trying to use Enoki for zkLogin and to sponsor transactions on the app for a seamless user experience
Claimed on Devposthigh confidence

An AI agent derived these features from the project’s Devpost page and readme, then searched the code for each one. Verified features are backed by cited code; claimed-only features had no supporting code, which is not by itself proof a feature is missing.