283 lines
17 KiB
HTML
283 lines
17 KiB
HTML
<div class="tab-pane fade" id="staking" role="tabpanel" aria-labelledby="staking-tab">
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="alert alert-info">
|
|
<h5><i class="bi bi-info-circle"></i> About Staking</h5>
|
|
<p>Staking allows you to lock your digital assets for a period of time to support network operations and earn rewards. The longer you stake, the higher rewards you can earn.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Available Staking Options -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-lock-fill me-1"></i> Available Staking Options
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<!-- TFT Staking -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-primary text-white">
|
|
<div class="d-flex align-items-center">
|
|
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle me-2">
|
|
<h6 class="mb-0">ThreeFold Token (TFT)</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Total Staked:</span>
|
|
<strong>5,250,000 TFT</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Your Stake:</span>
|
|
<strong>1,000 TFT</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span>APY:</span>
|
|
<strong class="text-success">8.5%</strong>
|
|
</div>
|
|
|
|
<form action="/defi/staking" method="post">
|
|
<input type="hidden" name="asset_id" value="TFT">
|
|
<div class="mb-3">
|
|
<label for="tftStakingPeriod" class="form-label">Staking Period</label>
|
|
<select class="form-select" id="tftStakingPeriod" name="staking_period">
|
|
<option value="30">30 days (8.5% APY)</option>
|
|
<option value="90">90 days (10.2% APY)</option>
|
|
<option value="180">180 days (12.5% APY)</option>
|
|
<option value="365">365 days (15.0% APY)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="tftStakeAmount" class="form-label">Amount to Stake</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="tftStakeAmount" name="amount" min="100" step="1" placeholder="Min 100 TFT">
|
|
<span class="input-group-text">TFT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-success mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Estimated Rewards:</span>
|
|
<strong id="tftEstimatedRewards">0 TFT</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-primary" id="tftStakeButton">Stake TFT</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZAZ Staking -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-success text-white">
|
|
<div class="d-flex align-items-center">
|
|
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle me-2">
|
|
<h6 class="mb-0">Zanzibar Token (ZAZ)</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Total Staked:</span>
|
|
<strong>2,750,000 ZAZ</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-2">
|
|
<span>Your Stake:</span>
|
|
<strong>500 ZAZ</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between mb-3">
|
|
<span>APY:</span>
|
|
<strong class="text-success">12.0%</strong>
|
|
</div>
|
|
|
|
<form action="/defi/staking" method="post">
|
|
<input type="hidden" name="asset_id" value="ZAZ">
|
|
<div class="mb-3">
|
|
<label for="zazStakingPeriod" class="form-label">Staking Period</label>
|
|
<select class="form-select" id="zazStakingPeriod" name="staking_period">
|
|
<option value="30">30 days (12.0% APY)</option>
|
|
<option value="90">90 days (14.5% APY)</option>
|
|
<option value="180">180 days (16.8% APY)</option>
|
|
<option value="365">365 days (20.0% APY)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="zazStakeAmount" class="form-label">Amount to Stake</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="zazStakeAmount" name="amount" min="50" step="1" placeholder="Min 50 ZAZ">
|
|
<span class="input-group-text">ZAZ</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="alert alert-success mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Estimated Rewards:</span>
|
|
<strong id="zazEstimatedRewards">0 ZAZ</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-success" id="zazStakeButton">Stake ZAZ</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asset Staking -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-info text-white">
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-collection me-2"></i>
|
|
<h6 class="mb-0">Digital Asset Staking</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
<p class="card-text">Stake your NFTs and other digital assets to earn passive income.</p>
|
|
|
|
<form action="/defi/staking" method="post">
|
|
<div class="mb-3">
|
|
<label for="assetStaking" class="form-label">Select Asset</label>
|
|
<select class="form-select" id="assetStaking" name="asset_id">
|
|
<option value="" selected disabled>Choose an asset to stake</option>
|
|
{% for asset in recent_assets %}
|
|
{% if asset.status == 'Active' and asset.current_valuation > 0 %}
|
|
<option value="{{ asset.id }}" data-type="{{ asset.asset_type }}" data-value="{{ asset.current_valuation }}" data-amount="1" data-unit="{{ asset.asset_type }}">
|
|
{{ asset.name }} ({{ asset.asset_type }}) - ${{ asset.current_valuation }}
|
|
</option>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="assetStakingPeriod" class="form-label">Staking Period</label>
|
|
<select class="form-select" id="assetStakingPeriod" name="staking_period">
|
|
<option value="30">30 days (3.5% APY)</option>
|
|
<option value="90">90 days (5.2% APY)</option>
|
|
<option value="180">180 days (7.5% APY)</option>
|
|
<option value="365">365 days (10.0% APY)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="alert alert-success mb-3">
|
|
<div class="d-flex justify-content-between">
|
|
<span>Estimated Rewards:</span>
|
|
<strong id="assetEstimatedRewards">$0.00</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Reward Token:</span>
|
|
<strong>ZAZ</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-info" id="assetStakeButton">Stake Asset</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Your Active Stakes -->
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<i class="bi bi-list-check me-1"></i> Your Active Stakes
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Asset</th>
|
|
<th>Amount</th>
|
|
<th>Value</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>APY</th>
|
|
<th>Earned Rewards</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle me-2">
|
|
ThreeFold Token (TFT)
|
|
</div>
|
|
</td>
|
|
<td>1,000 TFT</td>
|
|
<td>$500</td>
|
|
<td>2025-03-15</td>
|
|
<td>2025-06-15</td>
|
|
<td>10.2%</td>
|
|
<td>22.5 TFT</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle me-2">
|
|
Zanzibar Token (ZAZ)
|
|
</div>
|
|
</td>
|
|
<td>500 ZAZ</td>
|
|
<td>$250</td>
|
|
<td>2025-04-01</td>
|
|
<td>2025-05-01</td>
|
|
<td>12.0%</td>
|
|
<td>5.0 ZAZ</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<i class="bi bi-image me-2 text-primary"></i>
|
|
Beach Property NFT
|
|
</div>
|
|
</td>
|
|
<td>1 NFT</td>
|
|
<td>$25,000</td>
|
|
<td>2025-02-10</td>
|
|
<td>2026-02-10</td>
|
|
<td>10.0%</td>
|
|
<td>450 ZAZ</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|