move all defi functionality to page and separate controller
This commit is contained in:
Timur Gordon
File diff suppressed because it is too large
Load Diff
@@ -150,6 +150,11 @@
|
||||
<i class="bi bi-coin me-2"></i> Digital Assets
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center ps-3 py-2 {% if active_page == 'defi' %}active fw-bold border-start border-4 border-primary bg-light{% endif %}" href="/defi">
|
||||
<i class="bi bi-bank me-2"></i> DeFi Platform
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link d-flex align-items-center ps-3 py-2 {% if active_page == 'marketplace' %}active fw-bold border-start border-4 border-primary bg-light{% endif %}" href="/marketplace">
|
||||
<i class="bi bi-shop me-2"></i> Marketplace
|
||||
|
||||
138
actix_mvc_app/src/views/defi/index.html
Normal file
138
actix_mvc_app/src/views/defi/index.html
Normal file
@@ -0,0 +1,138 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
.toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
}
|
||||
.token-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background-color: #6c757d;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}DeFi Platform{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Toast notification for success messages -->
|
||||
{% if success_message %}
|
||||
<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
|
||||
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="true" data-bs-delay="5000">
|
||||
<div class="toast-header bg-success text-white">
|
||||
<i class="bi bi-check-circle 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">
|
||||
{{ success_message }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- DeFi Platform Tabs -->
|
||||
<div class="mb-4">
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" id="defiTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">
|
||||
<i class="bi bi-grid me-1"></i> Overview
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="lending-tab" data-bs-toggle="tab" data-bs-target="#lending" type="button" role="tab" aria-controls="lending" aria-selected="false">
|
||||
<i class="bi bi-cash-coin me-1"></i> Lending & Borrowing
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="liquidity-tab" data-bs-toggle="tab" data-bs-target="#liquidity" type="button" role="tab" aria-controls="liquidity" aria-selected="false">
|
||||
<i class="bi bi-droplet me-1"></i> Liquidity Pools
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="staking-tab" data-bs-toggle="tab" data-bs-target="#staking" type="button" role="tab" aria-controls="staking" aria-selected="false">
|
||||
<i class="bi bi-lock me-1"></i> Staking
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="swap-tab" data-bs-toggle="tab" data-bs-target="#swap" type="button" role="tab" aria-controls="swap" aria-selected="false">
|
||||
<i class="bi bi-arrow-left-right me-1"></i> Swap
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="collateral-tab" data-bs-toggle="tab" data-bs-target="#collateral" type="button" role="tab" aria-controls="collateral" aria-selected="false">
|
||||
<i class="bi bi-shield-lock me-1"></i> Collateral
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content mt-3" id="defiTabsContent">
|
||||
{% include "defi/tabs/overview.html" %}
|
||||
{% include "defi/tabs/lending_borrowing.html" %}
|
||||
{% include "defi/tabs/liquidity.html" %}
|
||||
{% include "defi/tabs/staking.html" %}
|
||||
{% include "defi/tabs/swap.html" %}
|
||||
{% include "defi/tabs/collateral.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{{ super() }}
|
||||
<script src="/static/js/defi.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Show toast if success message exists
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const successMessage = urlParams.get('success');
|
||||
if (successMessage) {
|
||||
const toastEl = document.getElementById('successToast');
|
||||
const toastBody = document.querySelector('.toast-body');
|
||||
toastBody.textContent = decodeURIComponent(successMessage);
|
||||
const toast = new bootstrap.Toast(toastEl);
|
||||
toast.show();
|
||||
|
||||
// Auto-hide after 5 seconds
|
||||
setTimeout(function() {
|
||||
toast.hide();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Handle tab tracking in URL
|
||||
const tabParam = urlParams.get('tab');
|
||||
if (tabParam) {
|
||||
// Find the tab button that targets this tab
|
||||
const tabButton = document.querySelector(`button[data-bs-target="#${tabParam}"]`);
|
||||
if (tabButton) {
|
||||
const tab = new bootstrap.Tab(tabButton);
|
||||
tab.show();
|
||||
}
|
||||
}
|
||||
|
||||
// Update URL when tab changes
|
||||
const tabButtons = document.querySelectorAll('button[data-bs-toggle="tab"]');
|
||||
tabButtons.forEach(function(button) {
|
||||
button.addEventListener('shown.bs.tab', function(event) {
|
||||
const targetId = event.target.getAttribute('data-bs-target').substring(1);
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('tab', targetId);
|
||||
window.history.replaceState({}, '', url);
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
306
actix_mvc_app/src/views/defi/tabs/collateral.html
Normal file
306
actix_mvc_app/src/views/defi/tabs/collateral.html
Normal file
@@ -0,0 +1,306 @@
|
||||
<div class="tab-pane fade" id="collateral" role="tabpanel" aria-labelledby="collateral-tab">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-info-circle"></i> About Collateralization</h5>
|
||||
<p>Use your digital assets as collateral to secure loans or generate synthetic assets. Maintain a healthy collateral ratio to avoid liquidation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<!-- Collateralize Assets -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-shield-lock me-1"></i> Collateralize Assets
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="collateralForm" action="/defi/collateral" method="post">
|
||||
<!-- Asset Selection -->
|
||||
<div class="mb-3">
|
||||
<label for="collateralAsset" class="form-label">Select Asset to Collateralize</label>
|
||||
<select class="form-select" id="collateralAsset" name="asset_id" required>
|
||||
<option value="" selected disabled>Choose an asset</option>
|
||||
<!-- Tokens -->
|
||||
<optgroup label="Tokens">
|
||||
<option value="TFT" data-type="token" data-value="5000" data-amount="10000" data-unit="TFT" data-img="/static/img/tokens/tft.png">
|
||||
ThreeFold Token (TFT) - 10,000 TFT ($5,000)
|
||||
</option>
|
||||
<option value="ZAZ" data-type="token" data-value="2500" data-amount="5000" data-unit="ZAZ" data-img="/static/img/tokens/zaz.png">
|
||||
Zanzibar Token (ZAZ) - 5,000 ZAZ ($2,500)
|
||||
</option>
|
||||
</optgroup>
|
||||
<!-- Digital Assets -->
|
||||
<optgroup label="Digital Assets">
|
||||
{% 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 %}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Collateral Amount -->
|
||||
<div class="mb-3">
|
||||
<label for="collateralAmount" class="form-label">Amount to Collateralize</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="collateralAmount" name="amount" min="1" step="1" placeholder="Enter amount" required>
|
||||
<span class="input-group-text" id="collateralUnit">TFT</span>
|
||||
</div>
|
||||
<div class="form-text">
|
||||
Available: <span id="collateralAvailable">10,000 TFT</span> (<span id="collateralAvailableUSD">$5,000</span>)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collateral Value -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Collateral Value</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="text" class="form-control" id="collateralValue" name="collateral_value" readonly value="0.00">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loan Purpose -->
|
||||
<div class="mb-3">
|
||||
<label for="collateralPurpose" class="form-label">Purpose</label>
|
||||
<select class="form-select" id="collateralPurpose" name="purpose" required>
|
||||
<option value="loan">Secure a Loan</option>
|
||||
<option value="synthetic">Generate Synthetic Assets</option>
|
||||
<option value="leverage">Leverage Trading</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Loan Term (only shown for loans) -->
|
||||
<div class="mb-3" id="loanTermGroup">
|
||||
<label for="loanTerm" class="form-label">Loan Term</label>
|
||||
<select class="form-select" id="loanTerm" name="loan_term">
|
||||
<option value="30">30 days (3.5% APR)</option>
|
||||
<option value="90">90 days (5.0% APR)</option>
|
||||
<option value="180">180 days (6.5% APR)</option>
|
||||
<option value="365">365 days (8.0% APR)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Loan Amount (only shown for loans) -->
|
||||
<div class="mb-3" id="loanAmountGroup">
|
||||
<label for="loanAmount" class="form-label">Loan Amount (Max 75% of Collateral Value)</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="number" class="form-control" id="loanAmount" name="loan_amount" min="100" step="100" placeholder="Enter loan amount">
|
||||
<button class="btn btn-outline-secondary" type="button" id="maxLoanButton">MAX</button>
|
||||
</div>
|
||||
<div class="form-text">
|
||||
Maximum Loan: $<span id="maxLoanAmount">0.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Synthetic Asset (only shown for synthetic assets) -->
|
||||
<div class="mb-3" id="syntheticAssetGroup" style="display: none;">
|
||||
<label for="syntheticAsset" class="form-label">Synthetic Asset to Generate</label>
|
||||
<select class="form-select" id="syntheticAsset" name="synthetic_asset">
|
||||
<option value="sUSD">Synthetic USD (sUSD)</option>
|
||||
<option value="sBTC">Synthetic Bitcoin (sBTC)</option>
|
||||
<option value="sETH">Synthetic Ethereum (sETH)</option>
|
||||
<option value="sGOLD">Synthetic Gold (sGOLD)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Synthetic Amount (only shown for synthetic assets) -->
|
||||
<div class="mb-3" id="syntheticAmountGroup" style="display: none;">
|
||||
<label for="syntheticAmount" class="form-label">Amount to Generate (Max 50% of Collateral Value)</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="syntheticAmount" name="synthetic_amount" min="10" step="10" placeholder="Enter amount">
|
||||
<span class="input-group-text" id="syntheticUnit">sUSD</span>
|
||||
<button class="btn btn-outline-secondary" type="button" id="maxSyntheticButton">MAX</button>
|
||||
</div>
|
||||
<div class="form-text">
|
||||
Maximum Amount: <span id="maxSyntheticAmount">0.00</span> <span id="maxSyntheticUnit">sUSD</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collateral Ratio -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Collateral Ratio</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="collateralRatio" name="collateral_ratio" readonly value="0%">
|
||||
<span class="input-group-text">
|
||||
<i class="bi bi-info-circle" data-bs-toggle="tooltip" title="Minimum required ratio: 150% for loans, 200% for synthetic assets"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Liquidation Price -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Liquidation Price</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">$</span>
|
||||
<input type="text" class="form-control" id="liquidationPrice" name="liquidation_price" readonly value="0.00">
|
||||
<span class="input-group-text">per <span id="liquidationUnit">TFT</span></span>
|
||||
</div>
|
||||
<div class="form-text text-danger">
|
||||
Your collateral will be liquidated if the price falls below this level.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary" id="collateralizeButton">Collateralize Asset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- Active Collateral Positions -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-list-check me-1"></i> Your Active Collateral Positions
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Asset</th>
|
||||
<th>Collateral Value</th>
|
||||
<th>Borrowed/Generated</th>
|
||||
<th>Collateral Ratio</th>
|
||||
<th>Liquidation Price</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="20" height="20" class="rounded-circle me-1">
|
||||
2,000 TFT
|
||||
</div>
|
||||
</td>
|
||||
<td>$1,000</td>
|
||||
<td>$700 (Loan)</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress flex-grow-1 me-2" style="height: 8px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 70%"></div>
|
||||
</div>
|
||||
<span>143%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$0.35</td>
|
||||
<td><span class="badge bg-success">Healthy</span></td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary">Add</button>
|
||||
<button class="btn btn-sm btn-outline-warning">Repay</button>
|
||||
</div>
|
||||
</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>$25,000</td>
|
||||
<td>10,000 sUSD</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress flex-grow-1 me-2" style="height: 8px;">
|
||||
<div class="progress-bar bg-warning" role="progressbar" style="width: 40%"></div>
|
||||
</div>
|
||||
<span>250%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$10,000</td>
|
||||
<td><span class="badge bg-warning">Warning</span></td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary">Add</button>
|
||||
<button class="btn btn-sm btn-outline-warning">Repay</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="20" height="20" class="rounded-circle me-1">
|
||||
1,000 ZAZ
|
||||
</div>
|
||||
</td>
|
||||
<td>$500</td>
|
||||
<td>0.1 sBTC</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress flex-grow-1 me-2" style="height: 8px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 80%"></div>
|
||||
</div>
|
||||
<span>333%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>$0.15</td>
|
||||
<td><span class="badge bg-success">Healthy</span></td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary">Add</button>
|
||||
<button class="btn btn-sm btn-outline-warning">Repay</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Collateral Health -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-heart-pulse me-1"></i> Collateral Health
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="mb-4">
|
||||
<h6>Overall Collateral Health</h6>
|
||||
<div class="progress mb-2" style="height: 20px;">
|
||||
<div class="progress-bar bg-success" role="progressbar" style="width: 60%;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
|
||||
</div>
|
||||
<div class="small text-muted">
|
||||
<i class="bi bi-info-circle"></i> Health score represents the overall safety of your collateral positions. Higher is better.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card bg-light">
|
||||
<div class="card-body p-3">
|
||||
<h6 class="card-title">Total Collateral Value</h6>
|
||||
<h3 class="mb-0">$26,500</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-3">
|
||||
<div class="card bg-light">
|
||||
<div class="card-body p-3">
|
||||
<h6 class="card-title">Total Borrowed/Generated</h6>
|
||||
<h3 class="mb-0">$11,150</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning mb-0">
|
||||
<i class="bi bi-exclamation-triangle"></i> Your Beach Property NFT collateral is close to the liquidation threshold. Consider adding more collateral or repaying part of your synthetic assets.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
281
actix_mvc_app/src/views/defi/tabs/lending_borrowing.html
Normal file
281
actix_mvc_app/src/views/defi/tabs/lending_borrowing.html
Normal file
@@ -0,0 +1,281 @@
|
||||
<div class="tab-pane fade" id="lending" role="tabpanel" aria-labelledby="lending-tab">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<i class="bi bi-box-arrow-right me-1"></i> Lend Your Assets
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Earn interest by lending your digital assets to the ZAZ DeFi platform.</p>
|
||||
|
||||
<form action="/defi/lending" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="asset" class="form-label">Select Asset</label>
|
||||
<select class="form-select" id="asset" name="asset_id" required>
|
||||
<option value="" selected disabled>Choose an asset to lend</option>
|
||||
{% for asset in recent_assets %}
|
||||
{% if asset.status == 'Active' %}
|
||||
<option value="{{ asset.id }}" data-type="{{ asset.asset_type }}" data-value="{{ asset.current_valuation }}">
|
||||
{{ asset.name }} ({{ asset.asset_type }}) - ${{ asset.current_valuation }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="amount" class="form-label">Amount</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="amount" name="amount" min="0.01" step="0.01" required>
|
||||
<span class="input-group-text" id="assetSymbol">TFT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="duration" class="form-label">Duration</label>
|
||||
<select class="form-select" id="duration" name="duration" required>
|
||||
<option value="7">7 days (2.5% APY)</option>
|
||||
<option value="30" selected>30 days (4.2% APY)</option>
|
||||
<option value="90">90 days (6.8% APY)</option>
|
||||
<option value="180">180 days (8.5% APY)</option>
|
||||
<option value="365">365 days (12.0% APY)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Estimated Interest:</span>
|
||||
<strong id="interestEstimate">0.00 TFT</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Return Amount:</span>
|
||||
<strong id="returnAmount">0.00 TFT</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">Lend Asset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-success text-white">
|
||||
<i class="bi bi-box-arrow-in-left me-1"></i> Borrow Against Assets
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p class="card-text">Borrow digital assets using your existing assets as collateral.</p>
|
||||
|
||||
<form action="/defi/borrowing" method="post">
|
||||
<div class="mb-3">
|
||||
<label for="collateralAsset" class="form-label">Collateral Asset</label>
|
||||
<select class="form-select" id="collateralAsset" name="collateral_asset_id" required>
|
||||
<option value="" selected disabled>Choose an asset as collateral</option>
|
||||
{% for asset in recent_assets %}
|
||||
{% if asset.status == 'Active' %}
|
||||
<option value="{{ asset.id }}" data-type="{{ asset.asset_type }}" data-value="{{ asset.current_valuation }}">
|
||||
{{ asset.name }} ({{ asset.asset_type }}) - ${{ asset.current_valuation }}
|
||||
</option>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="borrowingAsset" class="form-label">Asset to Borrow</label>
|
||||
<select class="form-select" id="borrowingAsset" name="asset_id" required>
|
||||
<option value="TFT" selected>ThreeFold Token (TFT)</option>
|
||||
<option value="BTC">Bitcoin (BTC)</option>
|
||||
<option value="ETH">Ethereum (ETH)</option>
|
||||
<option value="USDT">Tether (USDT)</option>
|
||||
<option value="ZAZ">Zanzibar Token (ZAZ)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="borrowingAmount" class="form-label">Borrow Amount</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="borrowingAmount" name="amount" min="0.01" step="0.01" required>
|
||||
<span class="input-group-text" id="borrowingAssetSymbol">TFT</span>
|
||||
</div>
|
||||
<div class="form-text">You can borrow up to 70% of your collateral value.</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="borrowingTerm" class="form-label">Duration</label>
|
||||
<select class="form-select" id="borrowingTerm" name="duration" required>
|
||||
<option value="7">7 days (3.5% APR)</option>
|
||||
<option value="30" selected>30 days (5.2% APR)</option>
|
||||
<option value="90">90 days (7.8% APR)</option>
|
||||
<option value="180">180 days (9.5% APR)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Collateral Ratio:</span>
|
||||
<strong id="borrowCollateralRatio">0%</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Interest Due:</span>
|
||||
<strong id="interestDue">0.00 TFT</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<span>Total Repayment:</span>
|
||||
<strong id="borrowTotalRepayment">0.00 TFT</strong>
|
||||
</div>
|
||||
<div class="progress mt-2">
|
||||
<div id="borrowCollateralRatioBar" class="progress-bar bg-success" role="progressbar" style="width: 0%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-success">Borrow Asset</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Active Lending & Borrowing Positions -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-list-check me-1"></i> Your Active Positions
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-pills mb-3" id="lendingPositionsTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="lending-positions-tab" data-bs-toggle="pill" data-bs-target="#lending-positions" type="button" role="tab" aria-controls="lending-positions" aria-selected="true">Lending</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="borrowing-positions-tab" data-bs-toggle="pill" data-bs-target="#borrowing-positions" type="button" role="tab" aria-controls="borrowing-positions" aria-selected="false">Borrowing</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content" id="lendingPositionsTabsContent">
|
||||
<div class="tab-pane fade show active" id="lending-positions" role="tabpanel" aria-labelledby="lending-positions-tab">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Asset</th>
|
||||
<th>Amount</th>
|
||||
<th>Value</th>
|
||||
<th>APY</th>
|
||||
<th>Start Date</th>
|
||||
<th>End Date</th>
|
||||
<th>Interest Earned</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if lending_positions and lending_positions|length > 0 %}
|
||||
{% for position in lending_positions %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="token-icon me-2"></div>
|
||||
{{ position.base.asset_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ position.base.amount }} {{ position.base.asset_symbol }}</td>
|
||||
<td>${{ position.base.value_usd | round(precision = 2) }}</td>
|
||||
<td>{{ position.base.apy }}%</td>
|
||||
<td>{{ position.base.created_at | date }}</td>
|
||||
<td>{{ position.base.expires_at | date }}</td>
|
||||
<td>{{ position.interest_earned | round(precision = 2) }} {{ position.base.asset_symbol }}</td>
|
||||
<td>
|
||||
<span class="badge bg-{% if position.base.status == 'Active' %}success{% elif position.base.status == 'Completed' %}info{% elif position.base.status == 'Liquidated' %}danger{% else %}warning{% endif %}">
|
||||
{{ position.base.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary">Withdraw</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="9" class="text-center">No active lending positions found</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="borrowing-positions" role="tabpanel" aria-labelledby="borrowing-positions-tab">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Borrowed Asset</th>
|
||||
<th>Amount</th>
|
||||
<th>Collateral</th>
|
||||
<th>Collateral Ratio</th>
|
||||
<th>Interest Rate</th>
|
||||
<th>Start Date</th>
|
||||
<th>Due Date</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if borrowing_positions and borrowing_positions|length > 0 %}
|
||||
{% for position in borrowing_positions %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="token-icon me-2"></div>
|
||||
{{ position.base.asset_name }}
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ position.base.amount }} {{ position.base.asset_symbol }}</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="token-icon me-2"></div>
|
||||
{{ position.collateral_amount }} {{ position.collateral_asset_symbol }}
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="progress flex-grow-1 me-2" style="height: 8px;">
|
||||
<div class="progress-bar {% if position.collateral_ratio >= 200 %}bg-success{% elif position.collateral_ratio >= 150 %}bg-warning{% else %}bg-danger{% endif %}" role="progressbar" style="width: {% if (position.collateral_ratio / 3) > 100 %}100{% else %}{{ position.collateral_ratio / 3 }}{% endif %}%"></div>
|
||||
</div>
|
||||
<span>{{ position.collateral_ratio | round(precision=0) }}%</span>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ position.base.apy }}%</td>
|
||||
<td>{{ position.base.created_at|date }}</td>
|
||||
<td>{{ position.base.expires_at|date }}</td>
|
||||
<td>
|
||||
<span class="badge bg-{% if position.base.status == 'Active' %}success{% elif position.base.status == 'Completed' %}info{% elif position.base.status == 'Liquidated' %}danger{% else %}warning{% endif %}">
|
||||
{{ position.base.status }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary">Repay</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr>
|
||||
<td colspan="9" class="text-center">No active borrowing positions found</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
292
actix_mvc_app/src/views/defi/tabs/liquidity.html
Normal file
292
actix_mvc_app/src/views/defi/tabs/liquidity.html
Normal file
@@ -0,0 +1,292 @@
|
||||
<div class="tab-pane fade" id="liquidity" role="tabpanel" aria-labelledby="liquidity-tab">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-info-circle"></i> About Liquidity Pools</h5>
|
||||
<p>Liquidity pools are collections of tokens locked in smart contracts that provide liquidity for decentralized trading. By adding your assets to a liquidity pool, you earn a share of the trading fees generated by the pool.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Available Liquidity Pools -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-droplet-fill me-1"></i> Available Liquidity Pools
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pool</th>
|
||||
<th>Total Liquidity</th>
|
||||
<th>24h Volume</th>
|
||||
<th>APY</th>
|
||||
<th>Your Liquidity</th>
|
||||
<th>Your Share</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle position-absolute" style="left: 15px; top: 0;">
|
||||
</div>
|
||||
TFT-ZAZ
|
||||
</div>
|
||||
</td>
|
||||
<td>$1,250,000</td>
|
||||
<td>$45,000</td>
|
||||
<td>12.5%</td>
|
||||
<td>$2,500</td>
|
||||
<td>0.2%</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLiquidityModal" data-pool="TFT-ZAZ">Add</button>
|
||||
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="TFT-ZAZ">Remove</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="24" height="24" class="rounded-circle position-absolute" style="left: 15px; top: 0;">
|
||||
</div>
|
||||
TFT-USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>$3,750,000</td>
|
||||
<td>$125,000</td>
|
||||
<td>8.2%</td>
|
||||
<td>$0</td>
|
||||
<td>0%</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLiquidityModal" data-pool="TFT-USDT">Add</button>
|
||||
<button class="btn btn-sm btn-outline-primary" disabled>Remove</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="24" height="24" class="rounded-circle position-absolute" style="left: 15px; top: 0;">
|
||||
</div>
|
||||
ZAZ-USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>$850,000</td>
|
||||
<td>$32,000</td>
|
||||
<td>15.8%</td>
|
||||
<td>$5,000</td>
|
||||
<td>0.59%</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLiquidityModal" data-pool="ZAZ-USDT">Add</button>
|
||||
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="ZAZ-USDT">Remove</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Your Liquidity Positions -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-wallet2 me-1"></i> Your Liquidity Positions
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<!-- TFT-ZAZ Position -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-light">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle position-absolute" style="left: 15px; top: 0;">
|
||||
</div>
|
||||
TFT-ZAZ
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Your Liquidity:</span>
|
||||
<strong>$2,500</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Pool Share:</span>
|
||||
<strong>0.2%</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>TFT:</span>
|
||||
<strong>500 TFT</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>ZAZ:</span>
|
||||
<strong>1,250 ZAZ</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Earned Fees:</span>
|
||||
<strong>$45.20</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span>APY:</span>
|
||||
<strong class="text-success">12.5%</strong>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLiquidityModal" data-pool="TFT-ZAZ">Add Liquidity</button>
|
||||
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="TFT-ZAZ">Remove Liquidity</button>
|
||||
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ZAZ-USDT Position -->
|
||||
<div class="col-md-6 col-lg-4 mb-4">
|
||||
<div class="card h-100">
|
||||
<div class="card-header bg-light">
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="24" height="24" class="rounded-circle position-absolute" style="left: 15px; top: 0;">
|
||||
</div>
|
||||
ZAZ-USDT
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Your Liquidity:</span>
|
||||
<strong>$5,000</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Pool Share:</span>
|
||||
<strong>0.59%</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>ZAZ:</span>
|
||||
<strong>2,500 ZAZ</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>USDT:</span>
|
||||
<strong>2,500 USDT</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-2">
|
||||
<span>Earned Fees:</span>
|
||||
<strong>$128.75</strong>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between mb-3">
|
||||
<span>APY:</span>
|
||||
<strong class="text-success">15.8%</strong>
|
||||
</div>
|
||||
<div class="d-grid gap-2">
|
||||
<button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addLiquidityModal" data-pool="ZAZ-USDT">Add Liquidity</button>
|
||||
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="ZAZ-USDT">Remove Liquidity</button>
|
||||
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create New Liquidity Pool -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-plus-circle me-1"></i> Create New Liquidity Pool
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/defi/liquidity" method="post">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="firstToken" class="form-label">First Token</label>
|
||||
<select class="form-select" id="firstToken" name="first_token" required>
|
||||
<option value="" selected disabled>Select first token</option>
|
||||
<option value="TFT">ThreeFold Token (TFT)</option>
|
||||
<option value="ZAZ">Zanzibar Token (ZAZ)</option>
|
||||
<option value="BTC">Bitcoin (BTC)</option>
|
||||
<option value="ETH">Ethereum (ETH)</option>
|
||||
<option value="USDT">Tether (USDT)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="firstTokenAmount" class="form-label">Amount</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="firstTokenAmount" name="first_token_amount" min="0.000001" step="0.000001" required>
|
||||
<span class="input-group-text" id="firstTokenSymbol">TFT</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="secondToken" class="form-label">Second Token</label>
|
||||
<select class="form-select" id="secondToken" name="second_token" required>
|
||||
<option value="" selected disabled>Select second token</option>
|
||||
<option value="TFT">ThreeFold Token (TFT)</option>
|
||||
<option value="ZAZ">Zanzibar Token (ZAZ)</option>
|
||||
<option value="BTC">Bitcoin (BTC)</option>
|
||||
<option value="ETH">Ethereum (ETH)</option>
|
||||
<option value="USDT">Tether (USDT)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="secondTokenAmount" class="form-label">Amount</label>
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control" id="secondTokenAmount" name="second_token_amount" min="0.000001" step="0.000001" required>
|
||||
<span class="input-group-text" id="secondTokenSymbol">ZAZ</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="initialPrice" class="form-label">Initial Price Ratio</label>
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">1</span>
|
||||
<span class="input-group-text" id="firstTokenSymbolRatio">TFT</span>
|
||||
<span class="input-group-text">=</span>
|
||||
<input type="number" class="form-control" id="initialPrice" name="initial_price" min="0.000001" step="0.000001" required>
|
||||
<span class="input-group-text" id="secondTokenSymbolRatio">ZAZ</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="poolFee" class="form-label">Pool Fee</label>
|
||||
<select class="form-select" id="poolFee" name="pool_fee" required>
|
||||
<option value="0.1">0.1%</option>
|
||||
<option value="0.3" selected>0.3%</option>
|
||||
<option value="0.5">0.5%</option>
|
||||
<option value="1.0">1.0%</option>
|
||||
</select>
|
||||
<div class="form-text">This fee is charged on each trade and distributed to liquidity providers.</div>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<button type="submit" class="btn btn-primary">Create Liquidity Pool</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
actix_mvc_app/src/views/defi/tabs/overview.html
Normal file
8
actix_mvc_app/src/views/defi/tabs/overview.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
|
||||
<div class="alert alert-info">
|
||||
<h4 class="alert-heading"><i class="bi bi-info-circle"></i> Welcome to the ZAZ DeFi Platform!</h4>
|
||||
<p>Our decentralized finance platform allows you to maximize the value of your digital assets through various financial services.</p>
|
||||
<hr>
|
||||
<p class="mb-0">Use the tabs above to explore lending, borrowing, liquidity pools, staking, swapping, and collateralization features.</p>
|
||||
</div>
|
||||
</div>
|
||||
282
actix_mvc_app/src/views/defi/tabs/staking.html
Normal file
282
actix_mvc_app/src/views/defi/tabs/staking.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<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>
|
||||
282
actix_mvc_app/src/views/defi/tabs/swap.html
Normal file
282
actix_mvc_app/src/views/defi/tabs/swap.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<div class="tab-pane fade" id="swap" role="tabpanel" aria-labelledby="swap-tab">
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="alert alert-info">
|
||||
<h5><i class="bi bi-info-circle"></i> About Swapping</h5>
|
||||
<p>Swap allows you to exchange one token for another at the current market rate. Swaps are executed through liquidity pools with a small fee that goes to liquidity providers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-4">
|
||||
<!-- Swap Card -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-arrow-left-right me-1"></i> Swap Tokens
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/defi/swap" method="post">
|
||||
<!-- From Token -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label">From</label>
|
||||
<div class="card">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<div class="input-group">
|
||||
<input type="number" class="form-control form-control-lg border-0" id="swapFromAmount" name="from_amount" placeholder="0.0" min="0" step="0.01">
|
||||
<button class="btn btn-outline-secondary" type="button" id="maxFromButton">MAX</button>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-primary dropdown-toggle d-flex align-items-center" type="button" id="fromTokenDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle me-2" id="fromTokenImg">
|
||||
<span id="fromTokenSymbol">TFT</span>
|
||||
</button>
|
||||
<input type="hidden" name="from_token" id="fromTokenInput" value="TFT">
|
||||
<ul class="dropdown-menu" aria-labelledby="fromTokenDropdown">
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="TFT" data-img="/static/img/tokens/tft.png" data-balance="10000">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>
|
||||
<div>ThreeFold Token</div>
|
||||
<small class="text-muted">Balance: 10,000 TFT</small>
|
||||
</div>
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="ZAZ" data-img="/static/img/tokens/zaz.png" data-balance="5000">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>
|
||||
<div>Zanzibar Token</div>
|
||||
<small class="text-muted">Balance: 5,000 ZAZ</small>
|
||||
</div>
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="USDT" data-img="/static/img/tokens/usdt.png" data-balance="2500">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>
|
||||
<div>Tether USD</div>
|
||||
<small class="text-muted">Balance: 2,500 USDT</small>
|
||||
</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center text-muted small">
|
||||
<span>Balance: <span id="fromTokenBalance">10,000 TFT</span></span>
|
||||
<span>≈ $<span id="fromTokenUsdValue">5,000.00</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swap Direction Button -->
|
||||
<div class="d-flex justify-content-center mb-4">
|
||||
<button type="button" class="btn btn-light rounded-circle p-2" id="swapDirectionButton">
|
||||
<i class="bi bi-arrow-down-up fs-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- To Token -->
|
||||
<div class="mb-4">
|
||||
<label class="form-label">To (Estimated)</label>
|
||||
<div class="card">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-center mb-2">
|
||||
<input type="number" class="form-control form-control-lg border-0" id="swapToAmount" name="to_amount" placeholder="0.0" readonly>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-primary dropdown-toggle d-flex align-items-center" type="button" id="toTokenDropdown" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle me-2" id="toTokenImg">
|
||||
<span id="toTokenSymbol">ZAZ</span>
|
||||
</button>
|
||||
<input type="hidden" name="to_token" id="toTokenInput" value="ZAZ">
|
||||
<ul class="dropdown-menu" aria-labelledby="toTokenDropdown">
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="TFT" data-img="/static/img/tokens/tft.png">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>ThreeFold Token</div>
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="ZAZ" data-img="/static/img/tokens/zaz.png">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>Zanzibar Token</div>
|
||||
</a></li>
|
||||
<li><a class="dropdown-item d-flex align-items-center" href="#" data-token="USDT" data-img="/static/img/tokens/usdt.png">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="24" height="24" class="rounded-circle me-2">
|
||||
<div>Tether USD</div>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center text-muted small">
|
||||
<span>Balance: <span id="toTokenBalance">5,000 ZAZ</span></span>
|
||||
<span>≈ $<span id="toTokenUsdValue">2,500.00</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Exchange Rate Info -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body p-3">
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span>Exchange Rate:</span>
|
||||
<span id="exchangeRate">1 TFT = 0.5 ZAZ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span>Minimum Received:</span>
|
||||
<span id="minimumReceived">0 ZAZ</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span>Price Impact:</span>
|
||||
<span id="priceImpact" class="text-success">< 0.1%</span>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between align-items-center small">
|
||||
<span>Liquidity Provider Fee:</span>
|
||||
<span id="lpFee">0.3%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Swap Button -->
|
||||
<div class="d-grid gap-2">
|
||||
<button type="submit" class="btn btn-primary" id="swapButton">Swap</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6">
|
||||
<!-- Recent Swaps -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-clock-history me-1"></i> Recent Swaps
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>From</th>
|
||||
<th>To</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>2025-04-15 14:32</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="20" height="20" class="rounded-circle me-1">
|
||||
500 TFT
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="20" height="20" class="rounded-circle me-1">
|
||||
250 ZAZ
|
||||
</div>
|
||||
</td>
|
||||
<td>$250.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-14 09:17</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="20" height="20" class="rounded-circle me-1">
|
||||
1,000 USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="20" height="20" class="rounded-circle me-1">
|
||||
2,000 TFT
|
||||
</div>
|
||||
</td>
|
||||
<td>$1,000.00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-04-12 16:45</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="20" height="20" class="rounded-circle me-1">
|
||||
100 ZAZ
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="20" height="20" class="rounded-circle me-1">
|
||||
50 USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>$50.00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Market Rates -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<i class="bi bi-graph-up me-1"></i> Market Rates
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Pair</th>
|
||||
<th>Rate</th>
|
||||
<th>24h Change</th>
|
||||
<th>Volume (24h)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="20" height="20" class="rounded-circle">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="20" height="20" class="rounded-circle position-absolute" style="left: 10px; top: 0;">
|
||||
</div>
|
||||
TFT/ZAZ
|
||||
</div>
|
||||
</td>
|
||||
<td>0.5</td>
|
||||
<td class="text-success">+2.3%</td>
|
||||
<td>$125,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/tft.png" alt="TFT" width="20" height="20" class="rounded-circle">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="20" height="20" class="rounded-circle position-absolute" style="left: 10px; top: 0;">
|
||||
</div>
|
||||
TFT/USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>0.5</td>
|
||||
<td class="text-danger">-1.2%</td>
|
||||
<td>$250,000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="position-relative me-2">
|
||||
<img src="/static/img/tokens/zaz.png" alt="ZAZ" width="20" height="20" class="rounded-circle">
|
||||
<img src="/static/img/tokens/usdt.png" alt="USDT" width="20" height="20" class="rounded-circle position-absolute" style="left: 10px; top: 0;">
|
||||
</div>
|
||||
ZAZ/USDT
|
||||
</div>
|
||||
</td>
|
||||
<td>0.5</td>
|
||||
<td class="text-success">+3.7%</td>
|
||||
<td>$175,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user