AstraPort DApp

Stellar Portfolio Visualization & AI-Driven Insights Platform

AstraPort DApp is the frontend interface for users. It connects to Stellar wallets, visualizes portfolios, and displays AI-driven insights powered by advanced analytics.

---

📂 Repository Structure

astraport-dapp/
├── app/                      # Next.js App Router
│   ├── layout.tsx           # Root layout
│   ├── page.tsx             # Home page
│   ├── globals.css          # Global Tailwind styles
│   └── not-found.tsx        # 404 page
├── src/
│   ├── components/          # React components
│   │   ├── wallet/         # Wallet connection (WalletConnect)
│   │   ├── dashboard/      # Portfolio overview & charts
│   │   ├── risk/           # Risk visualization
│   │   └── insights/       # AI insights display
│   ├── hooks/              # Custom React hooks
│   │   ├── useStellarWallet.ts
│   │   ├── usePortfolio.ts
│   │   └── useDashboardData.ts
│   ├── services/           # API services & integrations
│   │   ├── stellar.ts      # Stellar SDK wrapper
│   │   └── portfolio.ts    # Portfolio API client
│   ├── store/              # Zustand state management
│   ├── types/              # TypeScript type definitions
│   └── utils/              # Utility functions
├── tests/                   # Jest tests
├── examples/                # Code examples & mock data
├── docs/                    # Documentation
│   ├── SETUP.md           # Setup & installation guide
│   └── API.md             # API integration guide
├── public/                  # Static assets
├── package.json            # Dependencies
├── tsconfig.json           # TypeScript config
├── next.config.js          # Next.js config
├── tailwind.config.ts      # Tailwind CSS config
└── jest.config.js          # Jest testing config

---

🔑 Core Modules

Wallet 💰

• Stellar wallet connection (Freighter integration)
• Account management
• Network selection (Testnet/Public)

Dashboard 📊

• Portfolio overview with key metrics
• Interactive charts with Chart.js
• Asset breakdown
• Performance tracking

Risk ⚠️

• Overall risk score calculation
• Volatility analysis
• Concentration risk metrics
• Counterparty risk assessment

AI Insights 💡

• Portfolio recommendations
• Risk alerts
• Optimization suggestions
• Market insights

---

🚀 Tech Stack

Category	Technology
Framework	Next.js 14 (App Router)
Language	TypeScript 5
UI Library	React 18
Styling	Tailwind CSS 3
State Management	Zustand
Blockchain	Stellar SDK 11
Charting	Chart.js 4 + D3.js 7
Testing	Jest + React Testing Library
Code Quality	ESLint, Prettier

---

⚡ Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• A Stellar wallet (e.g., Freighter)

Installation

# Clone repository
git clone https://github.com/Astraportt/astraport-dapp.git
cd astraport-dapp

# Install dependencies
npm install

# Set up environment
cp .env.example .env.local

# Start development server
npm run dev

Open http://localhost:3000 in your browser.

Environment Variables

NEXT_PUBLIC_STELLAR_NETWORK=testnet      # testnet or public
NEXT_PUBLIC_ASTRAPORT_API_URL=https://api.astraport.dev
NEXT_PUBLIC_WALLET_TIMEOUT=300000
API_KEY=your_api_key_here

---

📖 Documentation

• Setup Guide - Installation & wallet connection
• API Reference - API endpoints & integration
• Contributing - Development guidelines
• Changelog - Version history

---

🧪 Testing

# Run tests
npm test

# Watch mode
npm run test:watch

# Coverage
npm test -- --coverage

---

🏗️ Building

# Development
npm run dev

# Production build
npm run build
npm start

# Type checking
npm run type-check

# Linting
npm run lint

---

📡 API Integration

The DApp communicates with AstraPort Core services:

GET /portfolio/{publicKey}    # Portfolio data
GET /risk/{publicKey}          # Risk metrics
GET /insights/{publicKey}      # AI recommendations

See API Documentation for full details.

---

🎨 Components

WalletConnect

Handles Stellar wallet connection and account management.

import { WalletConnect } from '@/components/wallet';

export default function App() {
  return <WalletConnect />;
}

PortfolioChart

Interactive portfolio performance visualization.

import { PortfolioChart } from '@/components/dashboard';

export default function Dashboard() {
  return <PortfolioChart />;
}

RiskScoreDisplay

Real-time risk assessment metrics.

import { RiskScoreDisplay } from '@/components/risk';

export default function RiskPanel() {
  return <RiskScoreDisplay />;
}

InsightsList

AI-powered portfolio recommendations.

import { InsightsList } from '@/components/insights';

export default function Insights() {
  return <InsightsList />;
}

---

🪝 Custom Hooks

useStellarWallet

const { connected, account, connectWallet, disconnectWallet } = useStellarWallet();

useDashboardData

const { portfolio, riskScore, insights, loading, errors } = useDashboardData();

usePortfolioData

const { portfolio, loading, error, fetchPortfolio } = usePortfolioData(publicKey);

---

📊 Example Data

See examples/ for mock data and integration examples:

• mockData.ts - Sample portfolio, risk scores, and insights
• usageDashboard.ts - Dashboard usage examples
• walletIntegration.ts - Wallet connection examples

---

🤝 Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit changes: git commit -m 'feat: add amazing feature'
4. Push to branch: git push origin feature/amazing-feature
5. Open a Pull Request

See CONTRIBUTING.md for detailed guidelines.

---

📋 Development Checklist

• ✅ TypeScript strict mode
• ✅ Component testing setup
• ✅ API service layer
• ✅ State management (Zustand)
• ✅ Error handling
• ✅ Loading states
• ✅ Responsive design (Tailwind CSS)
• ✅ Environment configuration
• ✅ Documentation
• ✅ Examples & mock data

---

🗺️ Roadmap

Phase 1 (Current)

• ✅ Project scaffold
• ✅ Component structure
• ✅ API integration layer
• ✅ Testing setup

Phase 2

• Real wallet integration (Freighter)
• Historical data tracking
• Advanced charting (D3.js)
• Transaction history

Phase 3

• Portfolio rebalancing tools
• Custom alerts
• Multi-wallet support
• Export functionality

Phase 4

• Mobile application
• DeFi protocol integration
• Predictive analytics
• Community features

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙋 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@astraport.dev

---

🔗 Useful Links

• Stellar Documentation
• Next.js Documentation
• React Documentation
• Tailwind CSS
• Chart.js

---

Built with ❤️ for the Stellar community