Bitlik Telegram WebApp Wallet

Современный крипто-кошелек для Telegram Web Apps с поддержкой мультивалютности, графиков, истории транзакций и стильным интерфейсом в духе TON/Telegram Wallet.

🚀 Возможности

• Мобильный и десктопный UI в стиле Telegram/TON Wallet (светлая и тёмная тема)
• Графики цен (Chart.js, данные с CoinGecko, диапазоны 1D/1W/1M/1Y/All)
• Мультивалютный баланс и история транзакций
• Действия: Отправка, Пополнение, Обмен, P2P
• Интеграция с Telegram Bot (python-telegram-bot)
• Бэкенд на Flask с REST API
• Адаптивная верстка и плавные анимации
• Красивая страница монеты с графиком, ценой, описанием и кнопками Buy/Sell

🗂️ Структура проекта

src/
├── app.py                # Точка входа: Flask + Telegram Bot
├── api/
│   ├── coins_routes.py   # API для получения монет (CoinGecko)
│   ├── wallet_routes.py  # API для баланса и транзакций
│   └── ...
├── models/
│   └── wallet.py         # Модели пользователя, кошелька, транзакций
├── services/
│   └── wallet_service.py # Логика работы с балансом и транзакциями
├── static/
│   ├── css/              # Стили (wallet.css, tabs.css, ...)
│   ├── js/               # Логика фронта (app.js)
│   └── img/              # Иконки, изображения
├── templates/
│   └── index.html        # Главный шаблон (Telegram WebApp)
└── ...
requirements.txt          # Зависимости Python

⚙️ Установка и запуск

1. Клонируй репозиторий и перейди в папку:

   git clone <repo-url>
   cd bitlik-tg

2. Создай и активируй виртуальное окружение:

   python3 -m venv venv
   source venv/bin/activate

3. Установи зависимости:

   pip install -r requirements.txt

4. Создай файл .env и укажи токен Telegram-бота:

   TELEGRAM_BOT_TOKEN=your_bot_token
   FLASK_HOST=0.0.0.0
   FLASK_PORT=8080
   

5. Запусти приложение:

   python src/app.py

6. (Для теста в Telegram WebApp) Прокинь порт через ngrok:

   ngrok http 8080

   Используй выданный адрес в настройках Telegram-бота.

🖥️ Основные технологии

• Backend: Python 3.11+, Flask, python-telegram-bot, requests
• Frontend: HTML5, CSS3 (адаптив, dark mode), Chart.js, JS (vanilla)
• API данных: CoinGecko (монеты, графики)
• Интеграция: Telegram WebApp API

🧑‍💻 Краткое описание кода

• src/app.py — запускает Flask и Telegram-бота в отдельных потоках.
• src/api/coins_routes.py — отдаёт список монет и графики с CoinGecko, с обработкой ошибок.
• src/static/js/app.js — вся логика вкладок, рендера страниц, интеграция Chart.js, обработка кликов, динамика UI.
• src/static/css/wallet.css — стилизация в стиле Telegram/TON Wallet, поддержка тёмной темы.
• src/templates/index.html — основной шаблон, подключает все стили и скрипты.

📝 Особенности UI/UX

• График монеты: плавная линия, фирменный синий цвет, диапазоны, не перекрывается табами.
• Страница монеты: крупная цена, изменение, иконка, график, баланс, описание, кнопки Buy/Sell, кнопка "Back".
• Тёмная тема: все элементы гармонируют, нет резких контрастов, плавные скругления и тени.
• Табы и действия: всегда доступны внизу, не перекрывают контент.

🛠️ Как добавить свою монету или действие?

• Для монет — данные берутся с CoinGecko, можно изменить API-запрос в coins_routes.py.
• Для новых действий — добавь кнопку и обработчик в app.js и соответствующий endpoint во Flask.

🐞 Отладка и поддержка

• Все ошибки внешних API (CoinGecko) обрабатываются и не ломают фронт.
• Для отладки смотри консоль браузера и логи Flask.
• Если что-то не работает — проверь лимиты CoinGecko и корректность токена Telegram.

📄 Лицензия

MIT (или укажи свою)

---

Проект легко расширяется и кастомизируется под любые нужды Telegram WebApp!

---

Если нужно добавить раздел "FAQ", "Как деплоить на сервер", "Как подключить к настоящему блокчейну" — дай знать!