AptoTagger - Transaction Tagging & Analytics Dashboard

A comprehensive financial dashboard built on the Aptos blockchain that allows users to tag, track, and analyze their transactions with beautiful visualizations and professional glassmorphism design.

🚀 Features

Core Functionality

• Transaction Tagging: Tag your Aptos transactions with custom labels
• Real-time Analytics: Visualize spending patterns with interactive charts
• Wallet Integration: Seamless integration with Petra wallet and other Aptos wallets
• Event Tracking: Monitor blockchain events in real-time
• Responsive Design: Works perfectly on desktop and mobile devices

Technical Features

• Aptos Smart Contracts: Built with Move language for secure transaction handling
• React Frontend: Modern React 19 + Vite for blazing fast performance
• Glassmorphism UI: Professional Fold.money-inspired design
• Dark/Light Mode: Full support for both themes
• Real-time Updates: Live transaction monitoring with polling

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher)
• npm or yarn
• Aptos CLI (for contract deployment)
• Petra Wallet browser extension

🛠️ Installation

Backend (Move Contract)

cd aptotagger_v2
npm install

Frontend (React App)

cd aptotagger-ui
npm install

📜 Smart Contract Details

Contract Address

Testnet: 0xf7737e031cd8fa328531efbf4409b6bc3b8edde04c4d63cd29067ce2587fd3c1

Contract Functions

• init(): Initialize the TagStore resource
• log_txn(): Log a tagged transaction
• get_all(): Retrieve all transactions for an account

Move Module Structure

module aptotagger_v2::aptotagger_v2 {
    struct TaggedTxn { ... }
    struct TaggedTxnEvent { ... }
    struct TagStore { ... }
}

🚀 Deployment

Deploying the Contract

cd aptotagger_v2
# Using CLI script
./deploy_with_cli.sh

# Or manually
aptos move publish --named-addresses aptotagger_v2=default
aptos move run --function-id "default::aptotagger_v2::init"

Running the Frontend

cd aptotagger-ui
npm run dev

The application will be available at http://localhost:5173

🎨 UI Components

Dashboard Overview

• Wallet Info: Display connected wallet address and balance
• Transaction List: View all tagged transactions with details
• Tag Analytics: Pie chart visualization of spending by category
• Transaction Button: Interface to create new tagged transactions

Design System

• Glassmorphism: Frosted glass effect with backdrop blur
• Gradient Text: Professional gradient text effects
• Responsive Grid: Adaptive layout for all screen sizes
• Smooth Animations: CSS animations for better UX

🔧 Configuration

Network Settings

The application is configured for Aptos Testnet by default. To switch networks, update the following:

Frontend Configuration (src/hooks/useTaggedEvents.js):

const NODE_URL = "https://fullnode.testnet.aptoslabs.com";

Wallet Configuration (src/components/WalletInfo.jsx):

const NODE_URL = "https://fullnode.testnet.aptoslabs.com";

Contract Address

Update the contract address in src/hooks/useTaggedEvents.js after deployment:

const MODULE_ADDRESS = "YOUR_DEPLOYED_CONTRACT_ADDRESS";

📊 Usage Guide

1. Connect Wallet: Click "Connect Wallet" and approve connection with Petra
2. View Transactions: See your tagged transactions in the dashboard
3. Analyze Spending: Use the pie chart to visualize spending patterns
4. Create Transactions: Use the transaction button to log new transactions

🐛 Troubleshooting

Common Issues

Resource Not Found Error

Error: Resource not found by Address...

Solution: Ensure the contract is deployed and init() function is called

Network Errors

• Check that you're using the correct network (testnet/mainnet)
• Verify your wallet is connected to the same network

Balance Display Issues

• Ensure your wallet has sufficient testnet APT tokens
• Check network connectivity

Debug Mode

Enable debug mode by using the useTaggedEvents-debug.js hook for detailed error information.

📁 Project Structure

aptotagger-project/
├── aptotagger_v2/          # Move smart contracts
│   ├── sources/
│   │   └── aptotagger_v2.move
│   ├── Move.toml
│   ├── deploy.js
│   └── deployment scripts
├── aptotagger-ui/          # React frontend
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── hooks/         # Custom React hooks
│   │   ├── context/       # React context providers
│   │   └── utils/         # Utility functions
│   ├── public/            # Static assets
│   └── package.json
└── README.md

🛡️ Security

• Smart contracts are written in Move language with built-in security features
• All transactions require wallet approval
• No private keys are stored in the application
• Event-driven architecture for secure data handling

🤝 Contributing

We welcome contributions! Please feel free to submit pull requests or open issues for bugs and feature requests.

Development Setup

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

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

🙏 Acknowledgments

• Aptos Labs for the excellent blockchain infrastructure
• React and Vite teams for the amazing development experience
• Tailwind CSS for the utility-first CSS framework
• Recharts for beautiful data visualizations

📞 Support

If you encounter any issues or have questions:

1. Check the Deployment Guide
2. Review the User Guide
3. Open an issue on GitHub
4. Contact the development team

🌟 Show Your Support

If you find this project useful, please give it a star ⭐ on GitHub!

---

Built with ❤️ by CYBER TECH

aptotagger-project

“Aptos dApp for tagged transactions and analytics”

28cd23ba6d2ca8d221dee549574ab73da8d33042