621 lines
34 KiB
HTML
621 lines
34 KiB
HTML
{% extends "dashboard/layout.html" %}
|
|
|
|
{% block title %}ThreeFold Dashboard - Credits Pools{% endblock %}
|
|
|
|
{% block dashboard_content %}
|
|
<div class="my-4">
|
|
<h1>Credits Pools</h1>
|
|
<p class="lead">Exchange currencies and tokens through ThreeFold liquidity pools</p>
|
|
|
|
|
|
<!-- Liquidity Pools Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Available Liquidity Pools</h3>
|
|
<p>Exchange between different currencies and tokens through our liquidity pools</p>
|
|
|
|
<div class="row">
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100" data-pool-id="credits-fiat">
|
|
<div class="card-header bg-primary text-white">
|
|
<h5 class="mb-0">Credits - Fiat Pool</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Purchase Credits with fiat currencies (USD, EUR, etc.) at the fixed rate of 1 USD per Credit.</p>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Exchange rate:</span>
|
|
<span class="fw-bold exchange-rate">1 USD = 0.85 EUR</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Pool liquidity:</span>
|
|
<span class="fw-bold liquidity">125,000 USD</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Min transaction:</span>
|
|
<span class="fw-bold">$10</span>
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#buyCreditsModal">Buy Credits</button>
|
|
<button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#sellCreditsModal">Sell Credits</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100" data-pool-id="credits-tft">
|
|
<div class="card-header bg-success text-white">
|
|
<h5 class="mb-0">Credits - TFT Pool</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Exchange between USD Credits and ThreeFold Tokens (TFT).</p>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Current rate:</span>
|
|
<span class="fw-bold exchange-rate">1 USD ≈ 5 TFT</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Pool liquidity:</span>
|
|
<span class="fw-bold liquidity">25,000 USD / 125,000 TFT</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Min transaction:</span>
|
|
<span class="fw-bold">$10 / 50 TFT</span>
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#buyCreditsWithTFTModal">Buy Credits</button>
|
|
<button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#sellCreditsForTFTModal">Sell Credits</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100" data-pool-id="credits-peaq">
|
|
<div class="card-header bg-info text-white">
|
|
<h5 class="mb-0">Credits - PEAQ Pool</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Exchange between USD Credits and PEAQ tokens for the Peaq Network.</p>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Current rate:</span>
|
|
<span class="fw-bold exchange-rate">1 USD ≈ 20 PEAQ</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Pool liquidity:</span>
|
|
<span class="fw-bold liquidity">10,000 USD / 200,000 PEAQ</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-muted">Min transaction:</span>
|
|
<span class="fw-bold">$10 / 200 PEAQ</span>
|
|
</div>
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-info" data-bs-toggle="modal" data-bs-target="#buyCreditsWithPEAQModal">Buy Credits</button>
|
|
<button class="btn btn-outline-info" data-bs-toggle="modal" data-bs-target="#sellCreditsForPEAQModal">Sell Credits</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Staking Section -->
|
|
<div class="row mt-4" id="staking">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Credits Staking</h3>
|
|
<p>Stake your Credits to earn discounts and increase your reputation in the ThreeFold ecosystem</p>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Your Staking Status</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-muted">Currently Staked</h6>
|
|
<h3 class="mb-0">$25</h3>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-muted">Lock Period</h6>
|
|
<h3 class="mb-0">3 months</h3>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-muted">Discount Level</h6>
|
|
<h3 class="mb-0">5%</h3>
|
|
</div>
|
|
<div class="col-md-6 mb-3">
|
|
<h6 class="text-muted">Reputation Bonus</h6>
|
|
<h3 class="mb-0">+25 points</h3>
|
|
</div>
|
|
<div class="col-12 mt-2">
|
|
<div class="d-grid">
|
|
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#stakeCreditsModal">
|
|
<i class="bi bi-plus-circle me-2"></i> Stake Credits
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Staking Benefits</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>Staked Amount</th>
|
|
<th>Discount</th>
|
|
<th>Reputation</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>$10-50</td>
|
|
<td>5%</td>
|
|
<td>+25 points</td>
|
|
</tr>
|
|
<tr>
|
|
<td>$51-100</td>
|
|
<td>10%</td>
|
|
<td>+50 points</td>
|
|
</tr>
|
|
<tr>
|
|
<td>$101-500</td>
|
|
<td>15%</td>
|
|
<td>+100 points</td>
|
|
</tr>
|
|
<tr>
|
|
<td>$501+</td>
|
|
<td>20%</td>
|
|
<td>+200 points</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Analytics Section -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="dashboard-section">
|
|
<h3>Credits Analytics</h3>
|
|
<p>Key metrics and historical data for Credits pools and exchanges</p>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Credits Exchange History</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="creditsPriceHistoryChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Liquidity Pool Distribution</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="liquidityPoolDistributionChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Exchange Volume (Last 30 Days)</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="exchangeVolumeChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Staking Distribution</h5>
|
|
</div>
|
|
<div class="card-body d-flex justify-content-center align-items-center">
|
|
<canvas id="stakingDistributionChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buy TFC Credits Modal -->
|
|
<div class="modal fade" id="buyCreditsModal" tabindex="-1" aria-labelledby="buyCreditsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="buyCreditsModalLabel">Buy USD Credits</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="creditsAmount" class="form-label">Amount of Credits to purchase</label>
|
|
<input type="number" class="form-control" id="creditsAmount" min="10" value="100">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="paymentCurrency" class="form-label">Payment Currency</label>
|
|
<select class="form-select" id="paymentCurrency">
|
|
<option value="USD" selected>USD</option>
|
|
<option value="EUR">EUR</option>
|
|
<option value="GBP">GBP</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="paymentMethod" class="form-label">Payment Method</label>
|
|
<select class="form-select" id="paymentMethod">
|
|
<option value="card" selected>Credit/Debit Card</option>
|
|
<option value="bank">Bank Transfer</option>
|
|
<option value="crypto">Cryptocurrency</option>
|
|
</select>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 Credit = $1.00
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">$100</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Cost:</span>
|
|
<span class="text-end">10.00 USD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" data-action="confirm-buy-credits-fiat">Confirm Purchase</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sell TFC Credits Modal -->
|
|
<div class="modal fade" id="sellCreditsModal" tabindex="-1" aria-labelledby="sellCreditsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-primary text-white">
|
|
<h5 class="modal-title" id="sellCreditsModalLabel">Sell USD Credits</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="sellCreditsAmount" class="form-label">Amount of Credits to sell</label>
|
|
<input type="number" class="form-control" id="sellCreditsAmount" min="10" max="125" value="100">
|
|
<div class="form-text">Maximum available: $125</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="receiveCurrency" class="form-label">Receive Currency</label>
|
|
<select class="form-select" id="receiveCurrency">
|
|
<option value="USD" selected>USD</option>
|
|
<option value="EUR">EUR</option>
|
|
<option value="GBP">GBP</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="payoutMethod" class="form-label">Payout Method</label>
|
|
<select class="form-select" id="payoutMethod">
|
|
<option value="bank" selected>Bank Transfer</option>
|
|
<option value="card">Card Refund</option>
|
|
<option value="crypto">Cryptocurrency</option>
|
|
</select>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 Credit = $1.00
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">$100</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>You receive:</span>
|
|
<span class="text-end">10.00 USD</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" data-action="confirm-sell-credits-fiat">Confirm Sale</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stake TFC Credits Modal -->
|
|
<div class="modal fade" id="stakeCreditsModal" tabindex="-1" aria-labelledby="stakeCreditsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title" id="stakeCreditsModalLabel">Stake USD Credits</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="stakeAmount" class="form-label">Amount to stake</label>
|
|
<input type="number" class="form-control" id="stakeAmount" min="100" max="1000" value="500">
|
|
<div class="form-text">Available balance: $100</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="stakeDuration" class="form-label">Lock period</label>
|
|
<select class="form-select" id="stakeDuration">
|
|
<option value="1">1 Month</option>
|
|
<option value="3" selected>3 Months</option>
|
|
<option value="6">6 Months</option>
|
|
<option value="12">12 Months</option>
|
|
</select>
|
|
</div>
|
|
<div class="alert alert-success">
|
|
<div class="d-flex">
|
|
<i class="bi bi-check-circle me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Staking Benefits:</strong>
|
|
<ul class="mb-0 ps-3">
|
|
<li>10% discount on all marketplace purchases</li>
|
|
<li>+50 reputation points</li>
|
|
<li>Priority access to new resources</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" data-action="confirm-stake-credits">Confirm Staking</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buy TFC Credits with TFT Modal -->
|
|
<div class="modal fade" id="buyTFCWithTFTModal" tabindex="-1" aria-labelledby="buyTFCWithTFTModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title" id="buyTFCWithTFTModalLabel">Buy Mycelium Credits (MC) with TFT</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="tfcAmountTFT" class="form-label">Amount of MC Credits to purchase</label>
|
|
<input type="number" class="form-control" id="tfpAmountTFT" min="10" value="100">
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 MC = 0.5 TFT
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">100 MC</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Cost:</span>
|
|
<span class="text-end">50 TFT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" data-action="confirm-buy-tfc-tft">Confirm Purchase</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sell TFC Credits for TFT Modal -->
|
|
<div class="modal fade" id="sellTFCForTFTModal" tabindex="-1" aria-labelledby="sellTFCForTFTModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-success text-white">
|
|
<h5 class="modal-title" id="sellTFCForTFTModalLabel">Sell Mycelium Credits (MC) for TFT</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="sellTfcAmountTFT" class="form-label">Amount of MC Credits to sell</label>
|
|
<input type="number" class="form-control" id="sellTfpAmountTFT" min="10" max="1250" value="100">
|
|
<div class="form-text">Maximum available: 1,250 MC</div>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 MC = 0.5 TFT
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">100 MC</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>You receive:</span>
|
|
<span class="text-end">50 TFT</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-success" data-action="confirm-sell-tfc-tft">Confirm Sale</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buy TFC Credits with PEAQ Modal -->
|
|
<div class="modal fade" id="buyTFCWithPEAQModal" tabindex="-1" aria-labelledby="buyTFCWithPEAQModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info text-white">
|
|
<h5 class="modal-title" id="buyTFCWithPEAQModalLabel">Buy Mycelium Credits (MC) with PEAQ</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="tfcAmountPEAQ" class="form-label">Amount of MC Credits to purchase</label>
|
|
<input type="number" class="form-control" id="tfpAmountPEAQ" min="10" value="100">
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 MC = 2 PEAQ
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">100 MC</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Cost:</span>
|
|
<span class="text-end">200 PEAQ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-info" data-action="confirm-buy-tfc-peaq">Confirm Purchase</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sell TFC Credits for PEAQ Modal -->
|
|
<div class="modal fade" id="sellTFCForPEAQModal" tabindex="-1" aria-labelledby="sellTFCForPEAQModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header bg-info text-white">
|
|
<h5 class="modal-title" id="sellTFCForPEAQModalLabel">Sell Mycelium Credits (MC) for PEAQ</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="sellTfcAmountPEAQ" class="form-label">Amount of MC Credits to sell</label>
|
|
<input type="number" class="form-control" id="sellTfpAmountPEAQ" min="10" max="1250" value="100">
|
|
<div class="form-text">Maximum available: 1,250 MC</div>
|
|
</div>
|
|
<div class="alert alert-info">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-info-circle-fill me-2 fs-4"></i>
|
|
<div>
|
|
<strong>Exchange Rate:</strong> 1 MC = 2 PEAQ
|
|
<hr class="my-2">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Amount:</span>
|
|
<span class="text-end">100 MC</span>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>You receive:</span>
|
|
<span class="text-end">200 PEAQ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-info" data-action="confirm-sell-tfc-peaq">Confirm Sale</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toast Container for Success Messages -->
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3">
|
|
<div id="successToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header bg-success text-white">
|
|
<i class="bi bi-check-circle-fill me-2"></i>
|
|
<strong class="me-auto">Success</strong>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body" id="successToastBody">
|
|
Operation completed successfully!
|
|
</div>
|
|
</div>
|
|
|
|
<div id="errorToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
|
|
<div class="toast-header bg-danger text-white">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<strong class="me-auto">Error</strong>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>
|
|
<div class="toast-body" id="errorToastBody">
|
|
An error occurred!
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
{{ super() }}
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
|
|
<style>
|
|
/* Ensure charts have consistent sizes */
|
|
.card.h-100 {
|
|
height: 400px !important;
|
|
}
|
|
|
|
.card-body {
|
|
height: 340px;
|
|
}
|
|
</style>
|
|
<script type="application/json" id="pools-hydration">
|
|
{
|
|
"charts": true
|
|
}
|
|
</script>
|
|
<script src="/static/js/dashboard_pools.js"></script>
|
|
{% endblock %} |