Hugging Face's logo

Spaces:
privateuserh
/
privdmi-vbeta1-01
Running

App Files Community
privateuserh commited on
Commit
915d77e
·
verified ·
1 Parent(s): 38140c0

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +150 -175
index.html CHANGED
@@ -3,7 +3,7 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>DMIM Trading Dashboard | Bitcoin Cash Blockchain</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
@@ -56,6 +56,13 @@
56
  @keyframes blink-animation {
57
  to { opacity: 0.5; }
58
  }
 
 
 
 
 
 
 
59
  </style>
60
  </head>
61
  <body class="bg-gray-900 text-gray-100 min-h-screen">
@@ -67,7 +74,7 @@
67
  <span class="absolute -top-1 -right-1 bg-purple-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center blink"></span>
68
  </div>
69
  <div>
70
- <h1 class="text-2xl font-bold">DMIM Trading Dashboard</h1>
71
  <div class="flex items-center mt-1 space-x-2">
72
  <span class="token-badge px-2 py-1 rounded-md text-xs flex items-center">
73
  <i class="fab fa-bitcoin text-orange-400 mr-1"></i>
@@ -117,6 +124,10 @@
117
  <div class="text-2xl font-bold" id="current-price">0.052 BCH</div>
118
  <div class="text-sm" id="price-change">+1.24% <i class="fas fa-arrow-up ml-1"></i></div>
119
  </div>
 
 
 
 
120
  </div>
121
  </div>
122
 
@@ -191,48 +202,92 @@
191
  </div>
192
 
193
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
194
- <!-- Trading Panel -->
195
- <div class="bg-gray-800 rounded-xl p-6">
196
  <h2 class="text-xl font-bold mb-4 flex items-center">
197
- <i class="fas fa-exchange-alt text-purple-400 mr-2"></i>
198
- Trading Panel
199
  </h2>
200
 
 
 
 
 
 
 
 
 
 
201
  <div class="mb-4">
202
  <div class="flex justify-between mb-2">
203
- <label class="text-gray-400">Amount (DMIM)</label>
204
  <span class="text-gray-400">Available: 1,250.00 DMIM</span>
205
  </div>
206
- <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" id="trade-amount">
207
  </div>
208
 
209
- <div class="grid grid-cols-2 gap-4 mb-4">
210
- <button id="buy-btn" class="bg-green-600 hover:bg-green-700 py-3 rounded-lg font-bold transition flex items-center justify-center">
211
- <i class="fas fa-arrow-up mr-2"></i> Buy DMIM
212
- </button>
213
- <button id="sell-btn" class="bg-red-600 hover:bg-red-700 py-3 rounded-lg font-bold transition flex items-center justify-center">
214
- <i class="fas fa-arrow-down mr-2"></i> Sell DMIM
215
- </button>
216
  </div>
217
 
218
  <div class="mb-4">
219
- <h3 class="font-bold mb-2">Order Type</h3>
220
- <div class="grid grid-cols-2 gap-2">
221
- <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">Market</button>
222
- <button class="bg-gray-700 hover:bg-gray-600 py-2 rounded-lg text-sm">Limit</button>
223
- </div>
224
  </div>
225
 
226
- <div class="space-y-3">
227
- <div>
228
- <label class="text-gray-400 block mb-1">Price (BCH)</label>
229
- <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" value="0.052" step="0.001">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
230
  </div>
231
- <div>
232
- <label class="text-gray-400 block mb-1">Total (BCH)</label>
233
- <input type="number" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" readonly>
234
  </div>
235
  </div>
 
 
 
 
236
  </div>
237
 
238
  <!-- Institutional Trading -->
@@ -280,86 +335,6 @@
280
  Request OTC Quote
281
  </button>
282
  </div>
283
-
284
- <!-- Order Book -->
285
- <div class="bg-gray-800 rounded-xl p-6">
286
- <h2 class="text-xl font-bold mb-4 flex items-center">
287
- <i class="fas fa-book text-purple-400 mr-2"></i>
288
- Order Book (DMIM/BCH)
289
- </h2>
290
-
291
- <div class="mb-2">
292
- <div class="flex justify-between text-sm text-gray-400 mb-1">
293
- <span>Price (BCH)</span>
294
- <span>Amount (DMIM)</span>
295
- <span>Total</span>
296
- </div>
297
- <div class="space-y-1">
298
- <!-- Sell orders (red) -->
299
- <div class="flex justify-between text-red-400 text-sm py-1">
300
- <span>0.0525</span>
301
- <span>1,250</span>
302
- <span>65.62</span>
303
- </div>
304
- <div class="flex justify-between text-red-400 text-sm py-1">
305
- <span>0.0523</span>
306
- <span>850</span>
307
- <span>44.45</span>
308
- </div>
309
- <div class="flex justify-between text-red-400 text-sm py-1">
310
- <span>0.0521</span>
311
- <span>420</span>
312
- <span>21.88</span>
313
- </div>
314
-
315
- <!-- Market price indicator -->
316
- <div class="text-center my-2">
317
- <span class="bg-gray-700 px-2 py-1 rounded text-xs">Market: 0.0520 BCH</span>
318
- </div>
319
-
320
- <!-- Buy orders (green) -->
321
- <div class="flex justify-between text-green-400 text-sm py-1">
322
- <span>0.0518</span>
323
- <span>1,800</span>
324
- <span>93.24</span>
325
- </div>
326
- <div class="flex justify-between text-green-400 text-sm py-1">
327
- <span>0.0515</span>
328
- <span>1,200</span>
329
- <span>61.80</span>
330
- </div>
331
- <div class="flex justify-between text-green-400 text-sm py-1">
332
- <span>0.0512</span>
333
- <span>950</span>
334
- <span>48.64</span>
335
- </div>
336
- </div>
337
- </div>
338
-
339
- <div class="mt-4">
340
- <h3 class="font-bold mb-2">Recent Trades</h3>
341
- <div class="space-y-2">
342
- <div class="flex justify-between text-sm">
343
- <span>0.0520</span>
344
- <span>250 DMIM</span>
345
- <span class="text-green-400">Buy</span>
346
- <span class="text-gray-400">2 min ago</span>
347
- </div>
348
- <div class="flex justify-between text-sm">
349
- <span>0.0521</span>
350
- <span>180 DMIM</span>
351
- <span class="text-red-400">Sell</span>
352
- <span class="text-gray-400">5 min ago</span>
353
- </div>
354
- <div class="flex justify-between text-sm">
355
- <span>0.0519</span>
356
- <span>420 DMIM</span>
357
- <span class="text-green-400">Buy</span>
358
- <span class="text-gray-400">12 min ago</span>
359
- </div>
360
- </div>
361
- </div>
362
- </div>
363
  </div>
364
 
365
  <!-- Trade History -->
@@ -367,12 +342,13 @@
367
  <div class="flex justify-between items-center mb-6">
368
  <h2 class="text-xl font-bold flex items-center">
369
  <i class="fas fa-history text-purple-400 mr-2"></i>
370
- Trade History
371
  </h2>
372
  <div class="flex space-x-2">
373
  <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">All</button>
374
- <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Buys</button>
375
- <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Sells</button>
 
376
  </div>
377
  </div>
378
  <div class="overflow-x-auto">
@@ -381,9 +357,8 @@
381
  <tr class="text-gray-400 border-b border-gray-700">
382
  <th class="pb-3 text-left">Date</th>
383
  <th class="pb-3 text-left">Type</th>
384
- <th class="pb-3 text-left">Price (BCH)</th>
385
  <th class="pb-3 text-left">Amount (DMIM)</th>
386
- <th class="pb-3 text-left">Total (BCH)</th>
387
  <th class="pb-3 text-left">Status</th>
388
  <th class="pb-3 text-left">TX ID</th>
389
  </tr>
@@ -391,17 +366,15 @@
391
  <tbody id="trades-table">
392
  <tr class="border-b border-gray-700 hover:bg-gray-700">
393
  <td class="py-3">2023-11-15 14:32</td>
394
- <td class="text-green-400">Buy</td>
395
- <td>0.0518</td>
396
  <td>250.00</td>
397
- <td>12.95</td>
398
  <td class="text-green-400">Confirmed</td>
399
  <td class="text-xs font-mono">a1b2c3...e4f5</td>
400
  </tr>
401
  <tr class="border-b border-gray-700 hover:bg-gray-700">
402
  <td class="py-3">2023-11-15 11:18</td>
403
- <td class="text-red-400">Sell</td>
404
- <td>0.0522</td>
405
  <td>180.50</td>
406
  <td>9.42</td>
407
  <td class="text-green-400">Confirmed</td>
@@ -409,8 +382,7 @@
409
  </tr>
410
  <tr class="border-b border-gray-700 hover:bg-gray-700">
411
  <td class="py-3">2023-11-14 16:45</td>
412
- <td class="text-green-400">Buy</td>
413
- <td>0.0515</td>
414
  <td>420.00</td>
415
  <td>21.63</td>
416
  <td class="text-green-400">Confirmed</td>
@@ -418,8 +390,7 @@
418
  </tr>
419
  <tr class="border-b border-gray-700 hover:bg-gray-700">
420
  <td class="py-3">2023-11-14 09:12</td>
421
- <td class="text-red-400">Sell</td>
422
- <td>0.0525</td>
423
  <td>75.25</td>
424
  <td>3.95</td>
425
  <td class="text-green-400">Confirmed</td>
@@ -427,8 +398,7 @@
427
  </tr>
428
  <tr class="hover:bg-gray-700">
429
  <td class="py-3">2023-11-13 22:08</td>
430
- <td class="text-green-400">Buy</td>
431
- <td>0.0512</td>
432
  <td>324.75</td>
433
  <td>16.63</td>
434
  <td class="text-green-400">Confirmed</td>
@@ -445,15 +415,19 @@
445
  let currentPrice = 0.0520;
446
  let priceDirection = 1; // 1 for up, -1 for down
447
  let balance = 1250.00;
448
- let trades = [];
449
 
450
  // DOM elements
451
  const currentPriceEl = document.getElementById('current-price');
452
  const priceChangeEl = document.getElementById('price-change');
453
  const balanceEl = document.getElementById('balance');
454
- const buyBtn = document.getElementById('buy-btn');
455
- const sellBtn = document.getElementById('sell-btn');
456
- const tradeAmountEl = document.getElementById('trade-amount');
 
 
 
 
457
  const tradesTableEl = document.getElementById('trades-table');
458
  const priceChartEl = document.getElementById('price-chart');
459
 
@@ -514,66 +488,67 @@
514
  updateChart();
515
  };
516
 
517
- // Add trade to history
518
- const addTrade = (type, amount) => {
519
- const price = currentPrice;
520
- const total = amount * price;
521
- const date = new Date().toLocaleString();
522
- const status = 'Confirmed';
523
- const txId = Math.random().toString(36).substring(2, 10) + '...' + Math.random().toString(36).substring(2, 6);
524
 
525
- trades.unshift({
526
- date,
527
- type,
528
- price,
529
- amount,
530
- total,
531
- status,
532
- txId
533
- });
534
 
535
- // Update balance
536
- if (type === 'Buy') {
537
- balance += parseFloat(amount);
538
- } else {
539
- balance -= parseFloat(amount);
 
 
 
 
 
 
 
 
 
 
 
540
  }
541
- balanceEl.textContent = formatDMIM(balance);
542
 
543
- // Update trades table
544
- renderTrades();
 
 
 
 
545
  };
546
 
547
- // Render trades table
548
- const renderTrades = () => {
549
- // In a real app, this would update the table with new trades
550
- // For demo, we're using static data in the HTML
551
- };
 
552
 
553
- // Event listeners
554
- buyBtn.addEventListener('click', () => {
555
- const amount = parseFloat(tradeAmountEl.value);
556
- if (amount && amount > 0) {
557
- addTrade('Buy', amount);
558
- tradeAmountEl.value = '';
559
- } else {
560
- alert('Please enter a valid amount');
561
- }
562
  });
563
-
564
- sellBtn.addEventListener('click', () => {
565
- const amount = parseFloat(tradeAmountEl.value);
566
- if (amount && amount > 0 && amount <= balance) {
567
- addTrade('Sell', amount);
568
- tradeAmountEl.value = '';
569
- } else {
570
- alert('Invalid amount or insufficient balance');
571
- }
572
  });
573
 
574
  // Initialize
575
  updatePrice();
576
- renderTrades();
577
 
578
  // Simulate price changes every 3 seconds
579
  setInterval(updatePrice, 3000);
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DMIM Yield Farming | Bitcoin Cash Blockchain</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
  <style>
 
56
  @keyframes blink-animation {
57
  to { opacity: 0.5; }
58
  }
59
+ .yield-card {
60
+ background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
61
+ border: 1px solid #334155;
62
+ }
63
+ .yield-highlight {
64
+ background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%);
65
+ }
66
  </style>
67
  </head>
68
  <body class="bg-gray-900 text-gray-100 min-h-screen">
 
74
  <span class="absolute -top-1 -right-1 bg-purple-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center blink"></span>
75
  </div>
76
  <div>
77
+ <h1 class="text-2xl font-bold">DMIM Yield Farming</h1>
78
  <div class="flex items-center mt-1 space-x-2">
79
  <span class="token-badge px-2 py-1 rounded-md text-xs flex items-center">
80
  <i class="fab fa-bitcoin text-orange-400 mr-1"></i>
 
124
  <div class="text-2xl font-bold" id="current-price">0.052 BCH</div>
125
  <div class="text-sm" id="price-change">+1.24% <i class="fas fa-arrow-up ml-1"></i></div>
126
  </div>
127
+ <div>
128
+ <div class="text-gray-400 text-sm">Creation TX</div>
129
+ <a href="https://blockchair.com/bitcoin-cash/transaction/81fd176d7e3769aad00bc21539082cc3345f9cd613623fa281e6726f451f32f9" target="_blank" class="text-purple-400 hover:underline text-sm font-mono break-all">81fd176d7e3769...f451f32f9</a>
130
+ </div>
131
  </div>
132
  </div>
133
 
 
202
  </div>
203
 
204
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
205
+ <!-- Yield Farming Panel -->
206
+ <div class="yield-card rounded-xl p-6">
207
  <h2 class="text-xl font-bold mb-4 flex items-center">
208
+ <i class="fas fa-seedling text-purple-400 mr-2"></i>
209
+ Yield Farming
210
  </h2>
211
 
212
+ <div class="mb-4">
213
+ <label class="text-gray-400 block mb-2">Select Pool</label>
214
+ <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" id="pool-select">
215
+ <option value="0.03">DMIM/BCH Pool (0.03% APY)</option>
216
+ <option value="0.05">DMIM/USDC Pool (0.05% APY)</option>
217
+ <option value="0.07">DMIM/ETH Pool (0.07% APY)</option>
218
+ </select>
219
+ </div>
220
+
221
  <div class="mb-4">
222
  <div class="flex justify-between mb-2">
223
+ <label class="text-gray-400">DMIM Amount</label>
224
  <span class="text-gray-400">Available: 1,250.00 DMIM</span>
225
  </div>
226
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" id="farm-amount">
227
  </div>
228
 
229
+ <div class="mb-4">
230
+ <div class="flex justify-between mb-2">
231
+ <label class="text-gray-400">BCH Amount</label>
232
+ <span class="text-gray-400">Available: 5.42 BCH</span>
233
+ </div>
234
+ <input type="number" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="0.00" id="bch-amount">
 
235
  </div>
236
 
237
  <div class="mb-4">
238
+ <label class="flex items-center">
239
+ <input type="checkbox" class="form-checkbox h-5 w-5 text-purple-600 rounded" checked>
240
+ <span class="ml-2">Auto-compound rewards</span>
241
+ </label>
 
242
  </div>
243
 
244
+ <button class="w-full bg-purple-600 hover:bg-purple-700 py-3 rounded-lg font-bold transition mb-4">
245
+ Add Liquidity
246
+ </button>
247
+
248
+ <div class="text-center text-sm text-gray-400">
249
+ Current TVL: <span class="text-purple-400">$1,240,000</span>
250
+ </div>
251
+ </div>
252
+
253
+ <!-- Profit Calculator -->
254
+ <div class="yield-highlight rounded-xl p-6">
255
+ <h2 class="text-xl font-bold mb-4 flex items-center">
256
+ <i class="fas fa-calculator mr-2"></i>
257
+ Profit Calculator
258
+ </h2>
259
+
260
+ <div class="mb-4">
261
+ <label class="text-gray-200 block mb-2">Investment Amount (DMIM)</label>
262
+ <input type="number" class="w-full bg-purple-800 border border-purple-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-400" placeholder="1000" id="investment-amount">
263
+ </div>
264
+
265
+ <div class="mb-4">
266
+ <label class="text-gray-200 block mb-2">APY (%)</label>
267
+ <input type="number" class="w-full bg-purple-800 border border-purple-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-400" value="0.03" step="0.01" id="apy-input">
268
+ </div>
269
+
270
+ <div class="grid grid-cols-4 gap-2 mb-4">
271
+ <button class="bg-purple-700 hover:bg-purple-800 py-2 rounded-lg text-sm" onclick="calculateProfit('week')">Week</button>
272
+ <button class="bg-purple-700 hover:bg-purple-800 py-2 rounded-lg text-sm" onclick="calculateProfit('month')">Month</button>
273
+ <button class="bg-purple-700 hover:bg-purple-800 py-2 rounded-lg text-sm" onclick="calculateProfit('quarter')">Quarter</button>
274
+ <button class="bg-purple-700 hover:bg-purple-800 py-2 rounded-lg text-sm" onclick="calculateProfit('year')">Year</button>
275
+ </div>
276
+
277
+ <div class="bg-purple-800 rounded-lg p-4 mb-4">
278
+ <div class="flex justify-between mb-2">
279
+ <span class="text-gray-300">Estimated Rewards:</span>
280
+ <span class="font-bold" id="estimated-rewards">0 DMIM</span>
281
  </div>
282
+ <div class="flex justify-between">
283
+ <span class="text-gray-300">Value in BCH:</span>
284
+ <span class="font-bold" id="estimated-value">0 BCH</span>
285
  </div>
286
  </div>
287
+
288
+ <div class="text-center text-sm text-gray-200">
289
+ Calculations based on current price: <span class="font-bold">0.052 BCH/DMIM</span>
290
+ </div>
291
  </div>
292
 
293
  <!-- Institutional Trading -->
 
335
  Request OTC Quote
336
  </button>
337
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
338
  </div>
339
 
340
  <!-- Trade History -->
 
342
  <div class="flex justify-between items-center mb-6">
343
  <h2 class="text-xl font-bold flex items-center">
344
  <i class="fas fa-history text-purple-400 mr-2"></i>
345
+ Recent Transactions
346
  </h2>
347
  <div class="flex space-x-2">
348
  <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">All</button>
349
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Swaps</button>
350
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Adds</button>
351
+ <button class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">Removes</button>
352
  </div>
353
  </div>
354
  <div class="overflow-x-auto">
 
357
  <tr class="text-gray-400 border-b border-gray-700">
358
  <th class="pb-3 text-left">Date</th>
359
  <th class="pb-3 text-left">Type</th>
 
360
  <th class="pb-3 text-left">Amount (DMIM)</th>
361
+ <th class="pb-3 text-left">Amount (BCH)</th>
362
  <th class="pb-3 text-left">Status</th>
363
  <th class="pb-3 text-left">TX ID</th>
364
  </tr>
 
366
  <tbody id="trades-table">
367
  <tr class="border-b border-gray-700 hover:bg-gray-700">
368
  <td class="py-3">2023-11-15 14:32</td>
369
+ <td class="text-green-400">Add Liquidity</td>
 
370
  <td>250.00</td>
371
+ <td>13.00</td>
372
  <td class="text-green-400">Confirmed</td>
373
  <td class="text-xs font-mono">a1b2c3...e4f5</td>
374
  </tr>
375
  <tr class="border-b border-gray-700 hover:bg-gray-700">
376
  <td class="py-3">2023-11-15 11:18</td>
377
+ <td class="text-blue-400">Swap</td>
 
378
  <td>180.50</td>
379
  <td>9.42</td>
380
  <td class="text-green-400">Confirmed</td>
 
382
  </tr>
383
  <tr class="border-b border-gray-700 hover:bg-gray-700">
384
  <td class="py-3">2023-11-14 16:45</td>
385
+ <td class="text-green-400">Add Liquidity</td>
 
386
  <td>420.00</td>
387
  <td>21.63</td>
388
  <td class="text-green-400">Confirmed</td>
 
390
  </tr>
391
  <tr class="border-b border-gray-700 hover:bg-gray-700">
392
  <td class="py-3">2023-11-14 09:12</td>
393
+ <td class="text-yellow-400">Remove Liquidity</td>
 
394
  <td>75.25</td>
395
  <td>3.95</td>
396
  <td class="text-green-400">Confirmed</td>
 
398
  </tr>
399
  <tr class="hover:bg-gray-700">
400
  <td class="py-3">2023-11-13 22:08</td>
401
+ <td class="text-blue-400">Swap</td>
 
402
  <td>324.75</td>
403
  <td>16.63</td>
404
  <td class="text-green-400">Confirmed</td>
 
415
  let currentPrice = 0.0520;
416
  let priceDirection = 1; // 1 for up, -1 for down
417
  let balance = 1250.00;
418
+ let transactions = [];
419
 
420
  // DOM elements
421
  const currentPriceEl = document.getElementById('current-price');
422
  const priceChangeEl = document.getElementById('price-change');
423
  const balanceEl = document.getElementById('balance');
424
+ const farmAmountEl = document.getElementById('farm-amount');
425
+ const bchAmountEl = document.getElementById('bch-amount');
426
+ const poolSelectEl = document.getElementById('pool-select');
427
+ const investmentAmountEl = document.getElementById('investment-amount');
428
+ const apyInputEl = document.getElementById('apy-input');
429
+ const estimatedRewardsEl = document.getElementById('estimated-rewards');
430
+ const estimatedValueEl = document.getElementById('estimated-value');
431
  const tradesTableEl = document.getElementById('trades-table');
432
  const priceChartEl = document.getElementById('price-chart');
433
 
 
488
  updateChart();
489
  };
490
 
491
+ // Calculate farming profits
492
+ const calculateProfit = (period) => {
493
+ const amount = parseFloat(investmentAmountEl.value) || 0;
494
+ const apy = parseFloat(apyInputEl.value) || 0;
 
 
 
495
 
496
+ if (amount <= 0 || apy <= 0) {
497
+ estimatedRewardsEl.textContent = "0 DMIM";
498
+ estimatedValueEl.textContent = "0 BCH";
499
+ return;
500
+ }
 
 
 
 
501
 
502
+ let days;
503
+ switch (period) {
504
+ case 'week':
505
+ days = 7;
506
+ break;
507
+ case 'month':
508
+ days = 30;
509
+ break;
510
+ case 'quarter':
511
+ days = 90;
512
+ break;
513
+ case 'year':
514
+ days = 365;
515
+ break;
516
+ default:
517
+ days = 365;
518
  }
 
519
 
520
+ // Simple interest calculation
521
+ const rewards = amount * (apy / 100) * (days / 365);
522
+ const value = rewards * currentPrice;
523
+
524
+ estimatedRewardsEl.textContent = formatDMIM(rewards);
525
+ estimatedValueEl.textContent = formatCurrency(value);
526
  };
527
 
528
+ // Sync BCH amount when DMIM amount changes
529
+ farmAmountEl.addEventListener('input', () => {
530
+ const dmimAmount = parseFloat(farmAmountEl.value) || 0;
531
+ const bchAmount = dmimAmount * currentPrice;
532
+ bchAmountEl.value = bchAmount.toFixed(4);
533
+ });
534
 
535
+ // Sync DMIM amount when BCH amount changes
536
+ bchAmountEl.addEventListener('input', () => {
537
+ const bchAmount = parseFloat(bchAmountEl.value) || 0;
538
+ const dmimAmount = bchAmount / currentPrice;
539
+ farmAmountEl.value = dmimAmount.toFixed(2);
 
 
 
 
540
  });
541
+
542
+ // Update APY when pool changes
543
+ poolSelectEl.addEventListener('change', () => {
544
+ const selectedPool = poolSelectEl.options[poolSelectEl.selectedIndex];
545
+ const apy = selectedPool.value;
546
+ apyInputEl.value = apy;
 
 
 
547
  });
548
 
549
  // Initialize
550
  updatePrice();
551
+ updateChart();
552
 
553
  // Simulate price changes every 3 seconds
554
  setInterval(updatePrice, 3000);