ff5486fe08
chore: refactor logging module, update genesis timestamp, remove model relationships, and reorganize routers - Rename logging.py to logger.py and update import paths in poa.py and main.py - Update devnet genesis timestamp to 1766828620 - Remove SQLModel Relationship declarations from Block, Transaction, and Receipt models - Add SessionDep type alias and get_session dependency in coordinator-api deps - Reorganize coordinator-api routers: replace explorer/registry with exchange, users, marketplace
889 lines
43 KiB
HTML
889 lines
43 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AITBC Trade Exchange - Buy AITBC with Bitcoin</title>
|
|
<base href="/Exchange/">
|
|
<link rel="stylesheet" href="/assets/css/aitbc.css">
|
|
<script src="/assets/js/axios.min.js"></script>
|
|
<script src="/assets/js/lucide.js"></script>
|
|
<style>
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
|
}
|
|
.pulse-animation {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
100% { opacity: 1; }
|
|
}
|
|
/* Fix navigation button styling */
|
|
.nav-button {
|
|
background: transparent !important;
|
|
color: white !important;
|
|
padding: 0.5rem 0.75rem;
|
|
border-radius: 0.5rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.nav-button:hover {
|
|
background: rgba(255, 255, 255, 0.1) !important;
|
|
color: white !important;
|
|
}
|
|
.nav-button:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
|
|
<!-- Header -->
|
|
<header class="gradient-bg text-white shadow-lg">
|
|
<div class="container mx-auto px-4 py-6">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<i data-lucide="trending-up" class="w-8 h-8"></i>
|
|
<h1 class="text-2xl font-bold">AITBC Trade Exchange</h1>
|
|
</div>
|
|
<nav class="flex items-center space-x-6">
|
|
<button onclick="showSection('trade')" class="nav-button">Trade</button>
|
|
<button onclick="showSection('marketplace')" class="nav-button">Marketplace</button>
|
|
<button onclick="showSection('wallet')" class="nav-button">Wallet</button>
|
|
<button onclick="toggleDarkMode()" class="nav-button" title="Toggle dark mode">
|
|
<i data-lucide="moon" class="w-5 h-5" id="darkModeIcon"></i>
|
|
</button>
|
|
<button id="navConnectBtn" onclick="connectWallet()" class="bg-white text-orange-600 px-4 py-2 rounded-lg hover:bg-orange-100 transition">
|
|
<i data-lucide="wallet" class="w-4 h-4 inline mr-2"></i>Connect Wallet
|
|
</button>
|
|
<div id="navUserInfo" class="hidden flex items-center space-x-3">
|
|
<span class="text-sm text-white" id="navUsername">-</span>
|
|
<button onclick="showSection('wallet')" class="nav-button">
|
|
<i data-lucide="user" class="w-5 h-5"></i>
|
|
</button>
|
|
<button onclick="logout()" class="nav-button">
|
|
<i data-lucide="log-out" class="w-5 h-5"></i>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Price Ticker -->
|
|
<section class="bg-white dark:bg-gray-800 border-b dark:border-gray-700">
|
|
<div class="container mx-auto px-4 py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-6">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-gray-600 dark:text-gray-400">AITBC/BTC:</span>
|
|
<span class="text-2xl font-bold text-green-600 dark:text-green-400" id="aitbcBtcPrice">0.00001</span>
|
|
<span class="text-sm text-green-500 dark:text-green-400">+5.2%</span>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-gray-600 dark:text-gray-400">24h Volume:</span>
|
|
<span class="font-semibold text-gray-900 dark:text-white">1,234 AITBC</span>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">
|
|
Last updated: <span id="lastUpdated">Just now</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content -->
|
|
<main class="container mx-auto px-4 py-8">
|
|
<!-- Trade Section -->
|
|
<section id="tradeSection" class="section">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<!-- Buy AITBC -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-6 flex items-center text-gray-900 dark:text-white">
|
|
<i data-lucide="arrow-down-left" class="w-5 h-5 mr-2 text-green-600 dark:text-green-400"></i>
|
|
Buy AITBC with Bitcoin
|
|
</h2>
|
|
|
|
<div id="tradeConnectPrompt" class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-4">
|
|
<p class="text-sm text-orange-800 dark:text-orange-200 mb-3">
|
|
<i data-lucide="wallet" class="w-4 h-4 inline mr-1"></i>
|
|
Connect your wallet to start trading
|
|
</p>
|
|
<button onclick="connectWallet()" class="bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition">
|
|
<i data-lucide="wallet" class="w-4 h-4 inline mr-2"></i>Connect Wallet
|
|
</button>
|
|
</div>
|
|
|
|
<div id="tradeForm" class="hidden">
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4">
|
|
<p class="text-sm text-blue-800 dark:text-blue-200">
|
|
<i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
|
|
Send Bitcoin to the generated address. Your AITBC will be credited after 1 confirmation.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Pay with Bitcoin</label>
|
|
<div class="relative">
|
|
<input type="number" id="btcAmount" class="w-full border dark:border-gray-600 rounded-lg px-4 py-3 pr-12 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="0.001" step="0.00001">
|
|
<span class="absolute right-3 top-3 text-gray-500 dark:text-gray-400">BTC</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Available: 0.12345 BTC</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<button onclick="swapCurrencies()" class="p-2 bg-gray-100 dark:bg-gray-700 rounded-full hover:bg-gray-200 dark:hover:bg-gray-600 transition">
|
|
<i data-lucide="arrow-up-down" class="w-5 h-5 text-gray-700 dark:text-gray-300"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">You will receive</label>
|
|
<div class="relative">
|
|
<input type="number" id="aitbcAmount" class="w-full border dark:border-gray-600 rounded-lg px-4 py-3 pr-16 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" placeholder="100" step="0.01">
|
|
<span class="absolute right-3 top-3 text-gray-500 dark:text-gray-400">AITBC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
|
<div class="flex justify-between text-sm mb-2 text-gray-700 dark:text-gray-300">
|
|
<span>Price</span>
|
|
<span>0.00001 BTC/AITBC</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm mb-2 text-gray-700 dark:text-gray-300">
|
|
<span>Fee (0.5%)</span>
|
|
<span>0.000005 BTC</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm font-semibold text-gray-900 dark:text-white">
|
|
<span>Total</span>
|
|
<span>0.001005 BTC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="createPaymentRequest()" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 transition font-semibold">
|
|
Create Payment Request
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Order Book -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
|
|
<h2 class="text-xl font-bold mb-6 flex items-center justify-between text-gray-900 dark:text-white">
|
|
<span class="flex items-center">
|
|
<i data-lucide="book-open" class="w-5 h-5 mr-2 text-blue-600 dark:text-blue-400"></i>
|
|
Order Book
|
|
</span>
|
|
<div class="flex space-x-2">
|
|
<button onclick="refreshOrderBook()" class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded">
|
|
<i data-lucide="refresh-cw" class="w-4 h-4 text-gray-700 dark:text-gray-300"></i>
|
|
</button>
|
|
</div>
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Sell Orders -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-red-600 dark:text-red-400 mb-3">Sell Orders</h3>
|
|
<div class="space-y-1" id="sellOrders">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-red-600 dark:text-red-400">0.00001</span>
|
|
<span class="text-gray-900 dark:text-white">500</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-red-600 dark:text-red-400">0.000011</span>
|
|
<span class="text-gray-900 dark:text-white">300</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-red-600 dark:text-red-400">0.000012</span>
|
|
<span class="text-gray-900 dark:text-white">200</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buy Orders -->
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-green-600 dark:text-green-400 mb-3">Buy Orders</h3>
|
|
<div class="space-y-1" id="buyOrders">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-green-600 dark:text-green-400">0.000009</span>
|
|
<span class="text-gray-900 dark:text-white">150</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-green-600 dark:text-green-400">0.000008</span>
|
|
<span class="text-gray-900 dark:text-white">200</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-green-600 dark:text-green-400">0.000007</span>
|
|
<span class="text-gray-900 dark:text-white">300</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Trades -->
|
|
<div class="mt-6 pt-6 border-t dark:border-gray-700">
|
|
<h3 class="text-sm font-semibold text-gray-600 dark:text-gray-400 mb-3">Recent Trades</h3>
|
|
<div class="space-y-1" id="recentTrades">
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-900 dark:text-white">0.000010</span>
|
|
<span class="text-gray-600 dark:text-gray-400">100</span>
|
|
<span class="text-green-600 dark:text-green-400">Buy</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-900 dark:text-white">0.000011</span>
|
|
<span class="text-red-600 dark:text-red-400">50</span>
|
|
<span class="text-gray-500 dark:text-gray-400">5 min ago</span>
|
|
</div>
|
|
<div class="flex justify-between text-sm">
|
|
<span class="text-gray-900 dark:text-white">0.00001</span>
|
|
<span class="text-green-600 dark:text-green-400">200</span>
|
|
<span class="text-gray-500 dark:text-gray-400">8 min ago</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- GPU Marketplace Link -->
|
|
<div class="mt-8 bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg p-8 text-white">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-bold mb-2">Ready to Use Your AITBC?</h2>
|
|
<p class="mb-4">Purchase GPU compute time for AI workloads on our decentralized marketplace</p>
|
|
<button onclick="showSection('marketplace')" class="bg-white text-purple-600 px-6 py-3 rounded-lg hover:bg-purple-100 transition font-semibold">
|
|
Browse GPU Marketplace
|
|
</button>
|
|
</div>
|
|
<i data-lucide="cpu" class="w-24 h-24 opacity-50"></i>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Marketplace Section -->
|
|
<section id="marketplaceSection" class="section hidden">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-2xl font-bold">Available GPU Compute</h2>
|
|
<button onclick="showSection('trade')" class="bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition">
|
|
<i data-lucide="arrow-left" class="w-4 h-4 inline mr-2"></i>Back to Trading
|
|
</button>
|
|
</div>
|
|
|
|
<div id="gpuList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<!-- GPU cards will be inserted here -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Wallet Section -->
|
|
<section id="walletSection" class="section hidden">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2 class="text-2xl font-bold mb-6">Your Profile</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
<!-- User Profile Card -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i data-lucide="user" class="w-5 h-5 mr-2 text-blue-500"></i>
|
|
User Profile
|
|
</h3>
|
|
|
|
<div id="notLoggedIn" class="space-y-4">
|
|
<p class="text-gray-600 dark:text-gray-400">Please connect your wallet to access your profile</p>
|
|
<button onclick="connectWallet()" id="connectWalletBtn" class="w-full bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition">
|
|
<i data-lucide="wallet" class="w-4 h-4 inline mr-2"></i>Connect Wallet
|
|
</button>
|
|
</div>
|
|
|
|
<div id="userProfile" class="hidden space-y-4">
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Username</p>
|
|
<p class="font-semibold text-gray-900 dark:text-white" id="userUsername">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">User ID</p>
|
|
<p class="font-mono text-xs text-gray-700 dark:text-gray-300" id="userId">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Member Since</p>
|
|
<p class="text-sm text-gray-700 dark:text-gray-300" id="userCreated">-</p>
|
|
</div>
|
|
<button onclick="logout()" class="w-full bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
|
|
<i data-lucide="log-out" class="w-4 h-4 inline mr-2"></i>Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AITBC Wallet -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
|
|
<h3 class="text-lg font-semibold mb-4 flex items-center">
|
|
<i data-lucide="coins" class="w-5 h-5 mr-2 text-purple-500"></i>
|
|
AITBC Wallet
|
|
</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Address</p>
|
|
<p class="font-mono text-sm text-gray-700 dark:text-gray-300" id="aitbcAddress">Not connected</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Balance</p>
|
|
<p class="text-2xl font-bold text-gray-900 dark:text-white" id="aitbcBalance">0 AITBC</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Transaction History -->
|
|
<div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8">
|
|
<h3 class="text-lg font-semibold mb-6 text-gray-900 dark:text-white">Transaction History</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm">
|
|
<thead>
|
|
<tr class="border-b dark:border-gray-700">
|
|
<th class="text-left py-3 text-gray-700 dark:text-gray-300">Time</th>
|
|
<th class="text-left py-3 text-gray-700 dark:text-gray-300">Type</th>
|
|
<th class="text-left py-3 text-gray-700 dark:text-gray-300">Amount</th>
|
|
<th class="text-left py-3 text-gray-700 dark:text-gray-300">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="transactionHistory">
|
|
<tr class="border-b dark:border-gray-700">
|
|
<td class="py-3 text-gray-700 dark:text-gray-300">2025-12-28 10:30</td>
|
|
<td class="py-2">
|
|
<span class="text-green-600 dark:text-green-400">Buy AITBC</span>
|
|
</td>
|
|
<td class="py-3 text-gray-700 dark:text-gray-300">+100 AITBC</td>
|
|
<td class="py-2">
|
|
<span class="bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-2 py-1 rounded text-xs">Completed</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- QR Code Modal -->
|
|
<div id="qrModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center z-50">
|
|
<div class="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md w-full">
|
|
<h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">Send Bitcoin to Complete Purchase</h3>
|
|
|
|
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-4">
|
|
<img id="paymentQR" src="" alt="Payment QR Code" class="mx-auto">
|
|
</div>
|
|
|
|
<div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-4">
|
|
<p class="text-sm text-yellow-800 dark:text-yellow-200">
|
|
<strong>Payment Address:</strong>
|
|
</p>
|
|
<p class="font-mono text-xs break-all text-gray-700 dark:text-gray-300" id="paymentAddress"></p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-4 text-sm">
|
|
<div>
|
|
<p class="text-gray-600 dark:text-gray-400">Amount to Send:</p>
|
|
<p class="font-semibold text-gray-900 dark:text-white" id="paymentAmount">0 BTC</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-gray-600 dark:text-gray-400">You'll Receive:</p>
|
|
<p class="font-semibold text-green-600 dark:text-green-400" id="receiveAmount">0 AITBC</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-center mb-4">
|
|
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-green-600" id="paymentSpinner"></div>
|
|
<span class="ml-2 text-sm text-gray-600 dark:text-gray-400">Waiting for payment...</span>
|
|
</div>
|
|
|
|
<div class="flex space-x-3">
|
|
<button onclick="closeQRModal()" class="flex-1 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 py-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition">
|
|
Cancel
|
|
</button>
|
|
<button onclick="checkPaymentStatus()" class="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
|
|
Check Payment
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// API Configuration
|
|
const API_BASE = window.location.origin + '/api';
|
|
const BLOCKCHAIN_API = window.location.origin + '/rpc';
|
|
const EXCHANGE_RATE = 0.00001; // 1 AITBC = 0.00001 BTC
|
|
|
|
let walletAddress = null;
|
|
let currentUser = null;
|
|
let sessionToken = null;
|
|
let aitbcBalance = 0;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
lucide.createIcons();
|
|
updatePrices();
|
|
loadGPUOffers();
|
|
|
|
// Auto-refresh prices every 30 seconds
|
|
setInterval(updatePrices, 30000);
|
|
|
|
// Input handlers
|
|
document.getElementById('btcAmount').addEventListener('input', updateAITBCAmount);
|
|
document.getElementById('aitbcAmount').addEventListener('input', updateBTCAmount);
|
|
|
|
// Check for saved dark mode preference
|
|
if (localStorage.getItem('darkMode') === 'true' ||
|
|
(!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
|
document.documentElement.classList.add('dark');
|
|
updateDarkModeIcon(true);
|
|
}
|
|
});
|
|
|
|
// Dark mode toggle
|
|
function toggleDarkMode() {
|
|
const isDark = document.documentElement.classList.toggle('dark');
|
|
localStorage.setItem('darkMode', isDark);
|
|
updateDarkModeIcon(isDark);
|
|
}
|
|
|
|
function updateDarkModeIcon(isDark) {
|
|
const icon = document.getElementById('darkModeIcon');
|
|
if (isDark) {
|
|
icon.setAttribute('data-lucide', 'sun');
|
|
} else {
|
|
icon.setAttribute('data-lucide', 'moon');
|
|
}
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Section Navigation
|
|
function showSection(section) {
|
|
document.querySelectorAll('.section').forEach(s => s.classList.add('hidden'));
|
|
document.getElementById(section + 'Section').classList.remove('hidden');
|
|
|
|
if (section === 'marketplace') {
|
|
loadGPUOffers();
|
|
}
|
|
}
|
|
|
|
// Connect Wallet
|
|
async function connectWallet() {
|
|
try {
|
|
// For demo, create a new wallet
|
|
const walletId = 'wallet-' + Math.random().toString(36).substr(2, 9);
|
|
const address = 'aitbc1' + walletId + 'x'.repeat(40 - walletId.length);
|
|
|
|
// Login or register user
|
|
const response = await axios.post(`${API_BASE}/users/login`, {
|
|
wallet_address: address
|
|
});
|
|
|
|
const user = response.data;
|
|
currentUser = user;
|
|
sessionToken = user.session_token;
|
|
walletAddress = address;
|
|
|
|
// Update UI
|
|
document.getElementById('aitbcAddress').textContent = address;
|
|
document.getElementById('userUsername').textContent = user.username;
|
|
document.getElementById('userId').textContent = user.user_id;
|
|
document.getElementById('userCreated').textContent = new Date(user.created_at).toLocaleDateString();
|
|
|
|
// Update navigation
|
|
document.getElementById('navConnectBtn').classList.add('hidden');
|
|
document.getElementById('navUserInfo').classList.remove('hidden');
|
|
document.getElementById('navUsername').textContent = user.username;
|
|
|
|
// Show trade form, hide connect prompt
|
|
document.getElementById('tradeConnectPrompt').classList.add('hidden');
|
|
document.getElementById('tradeForm').classList.remove('hidden');
|
|
|
|
// Show profile, hide login prompt
|
|
document.getElementById('notLoggedIn').classList.add('hidden');
|
|
document.getElementById('userProfile').classList.remove('hidden');
|
|
|
|
showToast('Wallet connected: ' + address.substring(0, 20) + '...');
|
|
|
|
// Load user balance
|
|
await loadUserBalance();
|
|
} catch (error) {
|
|
console.error('Failed to connect wallet:', error);
|
|
showToast('Failed to connect wallet', 'error');
|
|
}
|
|
}
|
|
|
|
// Update Prices
|
|
function updatePrices() {
|
|
// Simulate price updates
|
|
const variation = (Math.random() - 0.5) * 0.000001;
|
|
const newPrice = EXCHANGE_RATE + variation;
|
|
document.getElementById('aitbcBtcPrice').textContent = newPrice.toFixed(5);
|
|
document.getElementById('lastUpdated').textContent = 'Just now';
|
|
}
|
|
|
|
// Currency Conversion
|
|
function updateAITBCAmount() {
|
|
const btcAmount = parseFloat(document.getElementById('btcAmount').value) || 0;
|
|
const aitbcAmount = btcAmount / EXCHANGE_RATE;
|
|
document.getElementById('aitbcAmount').value = aitbcAmount.toFixed(2);
|
|
}
|
|
|
|
function updateBTCAmount() {
|
|
const aitbcAmount = parseFloat(document.getElementById('aitbcAmount').value) || 0;
|
|
const btcAmount = aitbcAmount * EXCHANGE_RATE;
|
|
document.getElementById('btcAmount').value = btcAmount.toFixed(5);
|
|
}
|
|
|
|
function swapCurrencies() {
|
|
const btcInput = document.getElementById('btcAmount');
|
|
const aitbcInput = document.getElementById('aitbcAmount');
|
|
|
|
const temp = btcInput.value;
|
|
btcInput.value = aitbcInput.value;
|
|
aitbcInput.value = temp;
|
|
|
|
updateAITBCFromBTC();
|
|
}
|
|
|
|
// Create Payment Request
|
|
async function createPaymentRequest() {
|
|
const btcAmount = parseFloat(document.getElementById('btcAmount').value) || 0;
|
|
const aitbcAmount = parseFloat(document.getElementById('aitbcAmount').value) || 0;
|
|
|
|
if (btcAmount <= 0 || aitbcAmount <= 0) {
|
|
showToast('Please enter a valid amount', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!currentUser || !sessionToken) {
|
|
showToast('Please connect your wallet first', 'error');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// Create payment request
|
|
const response = await axios.post(`${API_BASE}/exchange/create-payment`, {
|
|
user_id: currentUser.user_id,
|
|
aitbc_amount: aitbcAmount,
|
|
btc_amount: btcAmount
|
|
}, {
|
|
headers: { 'X-Session-Token': sessionToken }
|
|
});
|
|
|
|
const payment = response.data;
|
|
showPaymentModal(payment);
|
|
|
|
// Start checking payment status
|
|
startPaymentMonitoring(payment.payment_id);
|
|
|
|
} catch (error) {
|
|
console.error('Failed to create payment:', error);
|
|
showToast('Failed to create payment request', 'error');
|
|
}
|
|
}
|
|
|
|
// Show Payment Modal
|
|
function showPaymentModal(payment) {
|
|
// Update modal with payment details
|
|
document.getElementById('paymentAddress').textContent = payment.payment_address;
|
|
document.getElementById('paymentAmount').textContent = payment.btc_amount + ' BTC';
|
|
document.getElementById('receiveAmount').textContent = payment.aitbc_amount + ' AITBC';
|
|
|
|
// Generate QR code
|
|
const qrData = `bitcoin:${payment.payment_address}?amount=${payment.btc_amount}`;
|
|
document.getElementById('paymentQR').src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${encodeURIComponent(qrData)}`;
|
|
|
|
// Store payment ID for checking
|
|
window.currentPaymentId = payment.payment_id;
|
|
|
|
// Show modal
|
|
document.getElementById('qrModal').classList.remove('hidden');
|
|
}
|
|
|
|
// Start Payment Monitoring
|
|
function startPaymentMonitoring(paymentId) {
|
|
const checkInterval = setInterval(async () => {
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/exchange/payment-status/${paymentId}`);
|
|
const payment = response.data;
|
|
|
|
if (payment.status === 'confirmed') {
|
|
clearInterval(checkInterval);
|
|
handlePaymentConfirmed(payment);
|
|
} else if (payment.status === 'expired') {
|
|
clearInterval(checkInterval);
|
|
showToast('Payment expired. Please try again.', 'error');
|
|
closeQRModal();
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking payment:', error);
|
|
}
|
|
}, 10000); // Check every 10 seconds
|
|
}
|
|
|
|
// Check Payment Status
|
|
async function checkPaymentStatus() {
|
|
if (!window.currentPaymentId) return;
|
|
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/exchange/payment-status/${window.currentPaymentId}`);
|
|
const payment = response.data;
|
|
|
|
if (payment.status === 'confirmed') {
|
|
handlePaymentConfirmed(payment);
|
|
} else {
|
|
showToast('Payment not yet detected. Please wait.', 'info');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error checking payment:', error);
|
|
showToast('Error checking payment status', 'error');
|
|
}
|
|
}
|
|
|
|
// Handle Payment Confirmed
|
|
function handlePaymentConfirmed(payment) {
|
|
closeQRModal();
|
|
showToast(`Payment confirmed! ${payment.aitbc_amount} AITBC credited to your wallet.`, 'success');
|
|
|
|
// Update wallet balance
|
|
updateWalletBalance();
|
|
|
|
// Add to transaction history
|
|
addTransaction('Buy AITBC', `+${payment.aitbc_amount} AITBC`, 'Completed');
|
|
|
|
// Clear form
|
|
document.getElementById('btcAmount').value = '';
|
|
document.getElementById('aitbcAmount').value = '';
|
|
}
|
|
|
|
// Close QR Modal
|
|
function closeQRModal() {
|
|
document.getElementById('qrModal').classList.add('hidden');
|
|
window.currentPaymentId = null;
|
|
}
|
|
|
|
// Mint AITBC (simulated)
|
|
async function mintAITBC(address, amount) {
|
|
try {
|
|
const response = await axios.post(`${BLOCKCHAIN_API}/admin/mintFaucet`, {
|
|
address: address,
|
|
amount: amount
|
|
});
|
|
console.log('Minted AITBC:', response.data);
|
|
} catch (error) {
|
|
console.error('Failed to mint AITBC:', error);
|
|
}
|
|
}
|
|
|
|
// Logout
|
|
async function logout() {
|
|
if (!sessionToken) return;
|
|
|
|
try {
|
|
await axios.post(`${API_BASE}/users/logout`, {}, {
|
|
headers: { 'X-Session-Token': sessionToken }
|
|
});
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
}
|
|
|
|
// Clear local data
|
|
currentUser = null;
|
|
sessionToken = null;
|
|
walletAddress = null;
|
|
aitbcBalance = 0;
|
|
|
|
// Update UI
|
|
document.getElementById('notLoggedIn').classList.remove('hidden');
|
|
document.getElementById('userProfile').classList.add('hidden');
|
|
document.getElementById('aitbcAddress').textContent = 'Not connected';
|
|
document.getElementById('aitbcBalance').textContent = '0 AITBC';
|
|
|
|
// Update navigation
|
|
document.getElementById('navConnectBtn').classList.remove('hidden');
|
|
document.getElementById('navUserInfo').classList.add('hidden');
|
|
|
|
// Hide trade form, show connect prompt
|
|
document.getElementById('tradeConnectPrompt').classList.remove('hidden');
|
|
document.getElementById('tradeForm').classList.add('hidden');
|
|
|
|
showToast('Logged out successfully');
|
|
}
|
|
|
|
// Load User Balance
|
|
async function loadUserBalance() {
|
|
if (!currentUser || !sessionToken) return;
|
|
|
|
try {
|
|
const response = await axios.get(
|
|
`${API_BASE}/users/${currentUser.user_id}/balance`,
|
|
{ headers: { 'X-Session-Token': sessionToken } }
|
|
);
|
|
|
|
const balance = response.data;
|
|
aitbcBalance = balance.balance;
|
|
document.getElementById('aitbcBalance').textContent = aitbcBalance.toFixed(2);
|
|
} catch (error) {
|
|
console.error('Failed to load balance:', error);
|
|
}
|
|
}
|
|
|
|
// Update Wallet Balance (legacy)
|
|
async function updateWalletBalance() {
|
|
if (!walletAddress) return;
|
|
|
|
try {
|
|
const response = await axios.get(`${BLOCKCHAIN_API}/getBalance/${walletAddress}`);
|
|
aitbcBalance = response.data.balance;
|
|
document.getElementById('aitbcBalance').textContent = aitbcBalance + ' AITBC';
|
|
} catch (error) {
|
|
// Demo balance
|
|
aitbcBalance = 1000;
|
|
document.getElementById('aitbcBalance').textContent = aitbcBalance + ' AITBC';
|
|
}
|
|
}
|
|
|
|
// Load GPU Offers
|
|
async function loadGPUOffers() {
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/marketplace/offers`);
|
|
displayGPUOffers(response.data);
|
|
} catch (error) {
|
|
// Display demo offers
|
|
displayGPUOffers([{
|
|
id: '1',
|
|
provider: 'miner_dev_key_1',
|
|
capacity: 1,
|
|
price: 50,
|
|
attributes: {
|
|
gpu_model: 'NVIDIA RTX 4060 Ti',
|
|
gpu_memory_gb: 16,
|
|
cuda_version: '12.4',
|
|
supported_models: ['stable-diffusion', 'llama2-7b']
|
|
}
|
|
}]);
|
|
}
|
|
}
|
|
|
|
// Display GPU Offers
|
|
function displayGPUOffers(offers) {
|
|
const container = document.getElementById('gpuList');
|
|
|
|
if (offers.length === 0) {
|
|
container.innerHTML = '<div class="col-span-full text-center py-12 text-gray-500">No GPU offers available at the moment.</div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = offers.map(offer => {
|
|
const attrs = offer.attributes || {};
|
|
return `
|
|
<div class="bg-white rounded-lg shadow-lg p-6 card-hover">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<h3 class="text-lg font-semibold">${attrs.gpu_model || 'GPU'}</h3>
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Available</span>
|
|
</div>
|
|
<div class="space-y-2 text-sm text-gray-600 mb-4">
|
|
<p><i data-lucide="monitor" class="w-4 h-4 inline mr-1"></i>Memory: ${attrs.gpu_memory_gb || 'N/A'} GB</p>
|
|
<p><i data-lucide="zap" class="w-4 h-4 inline mr-1"></i>CUDA: ${attrs.cuda_version || 'N/A'}</p>
|
|
<p><i data-lucide="cpu" class="w-4 h-4 inline mr-1"></i>Capacity: ${offer.capacity || 1} GPU(s)</p>
|
|
</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="text-2xl font-bold text-purple-600">${offer.price || '50'} AITBC/hr</span>
|
|
<button onclick="purchaseGPU('${offer.id}')" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">
|
|
Purchase
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// Purchase GPU
|
|
async function purchaseGPU(offerId) {
|
|
if (!walletAddress) {
|
|
showToast('Please connect your wallet first', 'error');
|
|
return;
|
|
}
|
|
|
|
if (aitbcBalance < 100) {
|
|
showToast('Insufficient AITBC balance. Please purchase more tokens.', 'error');
|
|
showSection('trade');
|
|
return;
|
|
}
|
|
|
|
showToast('GPU time purchased successfully!');
|
|
addTransaction('GPU Purchase', '-100 AITBC', 'Completed');
|
|
updateWalletBalance();
|
|
}
|
|
|
|
// Refresh Order Book
|
|
function refreshOrderBook() {
|
|
// Simulate order book refresh
|
|
showToast('Order book refreshed');
|
|
}
|
|
|
|
// Transaction Management
|
|
function addTransaction(type, amount, status) {
|
|
const tbody = document.getElementById('transactionHistory');
|
|
const time = new Date().toLocaleString();
|
|
|
|
const row = document.createElement('tr');
|
|
row.className = 'border-b';
|
|
row.innerHTML = `
|
|
<td class="py-2">${time}</td>
|
|
<td class="py-2">
|
|
<span class="${amount.startsWith('+') ? 'text-green-600' : 'text-red-600'}">${type}</span>
|
|
</td>
|
|
<td class="py-2">${amount}</td>
|
|
<td class="py-2">
|
|
<span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">${status}</span>
|
|
</td>
|
|
`;
|
|
|
|
tbody.insertBefore(row, tbody.firstChild);
|
|
}
|
|
|
|
// QR Modal
|
|
function showQRModal() {
|
|
document.getElementById('qrModal').classList.remove('hidden');
|
|
}
|
|
|
|
function closeQRModal() {
|
|
document.getElementById('qrModal').classList.add('hidden');
|
|
}
|
|
|
|
// Toast Notification
|
|
function showToast(message, type = 'success') {
|
|
const toast = document.createElement('div');
|
|
toast.className = `fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-lg transform transition-transform duration-300 ${
|
|
type === 'error' ? 'bg-red-500' : 'bg-green-500'
|
|
} text-white`;
|
|
toast.textContent = message;
|
|
|
|
document.body.appendChild(toast);
|
|
|
|
setTimeout(() => {
|
|
toast.style.transform = 'translateY(0)';
|
|
}, 100);
|
|
|
|
setTimeout(() => {
|
|
toast.style.transform = 'translateY(100%)';
|
|
setTimeout(() => toast.remove(), 300);
|
|
}, 3000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|