Crypto Donations for Streamers

A modern, full-stack application that allows streamers to receive and display cryptocurrency donations in real-time. Built with Go and React, this application enables streamers to accept TON (The Open Network) cryptocurrency donations and show them on their streams with beautiful, customizable notifications.

🚀 Features

• Real-time Donation Notifications: Display eye-catching notifications when you receive crypto donations
• Wallet Monitoring: Automatic tracking of incoming transactions to your TON wallet
• Donation Goals: Set goals and track progress to engage your audience
• WebSocket Communication: Instant updates when donations are received
• Responsive Design: Works great on all devices and screen sizes
• Customizable UI: Flexible styling options for notifications and goals

📋 Table of Contents

• Project Structure
• Prerequisites
• Installation
• Configuration
• Running the Application
• Usage
• API Documentation
• Roadmap
• Contributing
• License

🏗️ Project Structure

The project is organized into two main components:

Backend (Go)

• RESTful API and WebSocket server for real-time notifications
• Monitors TON blockchain for incoming transactions
• Extracts donation information and broadcasts to connected clients

Frontend (React)

• Single-page application with React Router for navigation
• Real-time notification display for donations
• Goal tracking and visualization for donation targets

🔧 Prerequisites

Before you begin, ensure you have the following installed:

• Go 1.16 or higher
• Node.js 14.x or higher and npm
• Git

🔌 Installation

Clone the repository

git clone https://github.com/yourusername/crypto-donations.git
cd crypto-donations

Backend Setup

cd backend
go mod download

Frontend Setup

cd frontend/donations
npm install

⚙️ Configuration

Backend Configuration

1. Create a .env file in the backend directory based on .env.example

cp backend/.env.example backend/.env

2. Update the wallet address and other settings in the .env file

PORT=8080
WALLET_ADDRESS=your_ton_wallet_address
WEBSOCKET_TIMEOUT=60
DEBUG=true

Frontend Configuration

1. Create a .env file in the frontend/donations directory based on .env.example

cp frontend/donations/.env.example frontend/donations/.env

2. Update the API URL and other settings in the .env file

REACT_APP_API_URL=http://localhost:8080
REACT_APP_WEBSOCKET_URL=ws://localhost:8080
REACT_APP_NOTIFICATION_DURATION=10000

🏃‍♂️ Running the Application

Start the Backend Server

cd backend
go run *.go

Start the Frontend Development Server

cd frontend/donations
npm start

The application will be available at:

• Frontend: http://localhost:3000
• Backend API: http://localhost:8080

📝 Usage

Setting Up Your Wallet

1. Create a TON wallet if you don't have one already
2. Add your wallet address to the backend configuration
3. You're ready to receive donations!

Testing Donations

For testing purposes, you can use the included test page:

1. Open test-donation.html in a web browser
2. Fill in the donation details
3. Click "Send Test Donation"
4. Watch the notification appear on the Notifications page

Receiving Real Donations

To receive real donations:

1. Share your TON wallet address with your audience
2. When someone sends TON to your address, a notification will appear automatically
3. The donation will also contribute to your donation goal progress

📚 API Documentation

WebSocket Endpoint

• URL: ws://localhost:8080/
• Description: Provides real-time notification data when donations are received

Test Donation Endpoint

• URL: http://localhost:8080/
• Method: POST
• Body:

  {
    "SenderAddress": "wallet_address",
    "SenderAddressName": "donor_name",
    "AmountInTon": 1.5,
    "Comment": "donation_message"
  }

🛣️ Roadmap

Short-term Goals

1. Finishing Goal Page

   • Implementing complete donation goal tracking
   • Adding historical data for goal progress
   • Supporting multiple simultaneous goals

2. Dashboard Implementation

   • Creating a unified dashboard for wallet configuration
   • Adding customization options for notification appearance
   • Implementing goal management features

Long-term Vision

• Support for multiple cryptocurrency networks
• Advanced analytics for donation tracking
• Customizable overlay themes
• Integration with popular streaming platforms (OBS, Streamlabs, etc.)
• Mobile app for monitoring donations on the go

👥 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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