19f8700b78
Add a complete DeFi platform with the following features: - Tabbed interface for different DeFi functionalities - Lending & Borrowing system with APY calculations - Liquidity Pools with LP token rewards - Staking options for tokens and digital assets - Token Swap interface with real-time exchange rates - Collateralization system for loans and synthetic assets - Interactive JavaScript functionality for real-time calculations This enhancement provides users with a complete suite of DeFi tools directly integrated into the Digital Assets dashboard.
1703 lines
123 KiB
HTML
1703 lines
123 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Digital Assets Dashboard{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid px-4">
|
|
<h1 class="mt-4">Digital Assets Dashboard</h1>
|
|
<ol class="breadcrumb mb-4">
|
|
<li class="breadcrumb-item"><a href="/">Home</a></li>
|
|
<li class="breadcrumb-item active">Digital Assets</li>
|
|
</ol>
|
|
|
|
<!-- Stats Cards -->
|
|
<div class="row">
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-primary text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">{{ stats.total_assets }}</h2>
|
|
<p class="mb-0">Total Assets</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/assets/list">View All Assets</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-success text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">${{ stats.total_value }}</h2>
|
|
<p class="mb-0">Total Valuation</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/assets/list">View Details</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-warning text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">{{ stats.assets_by_status.Active }}</h2>
|
|
<p class="mb-0">Active Assets</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/assets/list">View Active Assets</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-3 col-md-6">
|
|
<div class="card bg-danger text-white mb-4">
|
|
<div class="card-body">
|
|
<h2 class="display-4">0</h2>
|
|
<p class="mb-0">Pending Transactions</p>
|
|
</div>
|
|
<div class="card-footer d-flex align-items-center justify-content-between">
|
|
<a class="small text-white stretched-link" href="/assets/list">View Transactions</a>
|
|
<div class="small text-white"><i class="bi bi-arrow-right"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- DeFi Platform Tabs -->
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-bank me-1"></i>
|
|
DeFi Platform
|
|
</div>
|
|
<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">
|
|
<!-- Tab content will be added in subsequent edits -->
|
|
<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>
|
|
|
|
<!-- Lending & Borrowing Tab -->
|
|
<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>
|
|
<div class="mb-3">
|
|
<label for="lendAsset" class="form-label">Select Asset</label>
|
|
<select class="form-select" id="lendAsset" 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="lendAmount" class="form-label">Amount</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="lendAmount" min="0.01" step="0.01" required>
|
|
<span class="input-group-text" id="lendAssetSymbol">TFT</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="lendDuration" class="form-label">Duration</label>
|
|
<select class="form-select" id="lendDuration" 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="lendInterestEstimate">0.00 TFT</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Return Amount:</span>
|
|
<strong id="lendReturnAmount">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>
|
|
<div class="mb-3">
|
|
<label for="collateralAsset" class="form-label">Collateral Asset</label>
|
|
<select class="form-select" id="collateralAsset" 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="borrowAsset" class="form-label">Asset to Borrow</label>
|
|
<select class="form-select" id="borrowAsset" 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="borrowAmount" class="form-label">Borrow Amount</label>
|
|
<div class="input-group">
|
|
<input type="number" class="form-control" id="borrowAmount" min="0.01" step="0.01" required>
|
|
<span class="input-group-text" id="borrowAssetSymbol">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="borrowDuration" class="form-label">Duration</label>
|
|
<select class="form-select" id="borrowDuration" 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="collateralRatio">0%</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Interest Due:</span>
|
|
<strong id="borrowInterestDue">0.00 TFT</strong>
|
|
</div>
|
|
<div class="d-flex justify-content-between">
|
|
<span>Total Repayment:</span>
|
|
<strong id="totalRepayment">0.00 TFT</strong>
|
|
</div>
|
|
<div class="progress mt-2">
|
|
<div id="collateralRatioBar" 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>Interest Rate</th>
|
|
<th>Start Date</th>
|
|
<th>End Date</th>
|
|
<th>Earned Interest</th>
|
|
<th>Status</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ThreeFold Token (TFT)</td>
|
|
<td>1,000 TFT</td>
|
|
<td>4.2% APY</td>
|
|
<td>2025-04-01</td>
|
|
<td>2025-05-01</td>
|
|
<td>3.5 TFT</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary" disabled>Withdraw Early</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Zanzibar Token (ZAZ)</td>
|
|
<td>500 ZAZ</td>
|
|
<td>6.8% APY</td>
|
|
<td>2025-03-15</td>
|
|
<td>2025-06-15</td>
|
|
<td>8.5 ZAZ</td>
|
|
<td><span class="badge bg-success">Active</span></td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline-primary" disabled>Withdraw Early</button>
|
|
</td>
|
|
</tr>
|
|
</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>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>ThreeFold Token (TFT)</td>
|
|
<td>500 TFT</td>
|
|
<td>Beach Property NFT</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: 65%"></div>
|
|
</div>
|
|
<span>65%</span>
|
|
</div>
|
|
</td>
|
|
<td>5.2% APR</td>
|
|
<td>2025-04-10</td>
|
|
<td>2025-05-10</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-success">Repay</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Liquidity Pools Tab -->
|
|
<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>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative me-2">
|
|
<img src="/static/img/tokens/btc.png" alt="BTC" 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>
|
|
BTC-USDT
|
|
</div>
|
|
</td>
|
|
<td>$5,250,000</td>
|
|
<td>$450,000</td>
|
|
<td>6.5%</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="BTC-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/eth.png" alt="ETH" 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>
|
|
ETH-USDT
|
|
</div>
|
|
</td>
|
|
<td>$4,100,000</td>
|
|
<td>$320,000</td>
|
|
<td>7.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="ETH-USDT">Add</button>
|
|
<button class="btn btn-sm btn-outline-primary" disabled>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>
|
|
<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" 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" 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" 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" 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" 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" 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>
|
|
|
|
<!-- Swap Tab -->
|
|
<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">
|
|
<!-- 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" 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>
|
|
<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 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" 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>
|
|
<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 class="btn btn-primary" id="swapButton">Swap</button>
|
|
</div>
|
|
</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>
|
|
|
|
<!-- Collateral Tab -->
|
|
<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">
|
|
<!-- Asset Selection -->
|
|
<div class="mb-3">
|
|
<label for="collateralAsset" class="form-label">Select Asset to Collateralize</label>
|
|
<select class="form-select" id="collateralAsset" 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" 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" 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" 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">
|
|
<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" 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">
|
|
<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" 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" 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" 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>
|
|
|
|
<!-- Staking Tab -->
|
|
<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>
|
|
|
|
<div class="mb-3">
|
|
<label for="tftStakingPeriod" class="form-label">Staking Period</label>
|
|
<select class="form-select" id="tftStakingPeriod">
|
|
<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" 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>
|
|
</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>
|
|
|
|
<div class="mb-3">
|
|
<label for="zazStakingPeriod" class="form-label">Staking Period</label>
|
|
<select class="form-select" id="zazStakingPeriod">
|
|
<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" 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>
|
|
</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>
|
|
|
|
<div class="mb-3">
|
|
<label for="assetStaking" class="form-label">Select Asset</label>
|
|
<select class="form-select" id="assetStaking">
|
|
<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">
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Assets Table -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-table me-1"></i>
|
|
Recent Assets
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Type</th>
|
|
<th>Status</th>
|
|
<th>Valuation</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for asset in recent_assets %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{% if asset.asset_type == "Token" %}
|
|
<i class="bi bi-coin me-2 text-warning"></i>
|
|
{% elif asset.asset_type == "NFT" %}
|
|
<i class="bi bi-image me-2 text-primary"></i>
|
|
{% elif asset.asset_type == "Real Estate" %}
|
|
<i class="bi bi-building me-2 text-success"></i>
|
|
{% elif asset.asset_type == "Intellectual Property" %}
|
|
<i class="bi bi-file-earmark-text me-2 text-info"></i>
|
|
{% elif asset.asset_type == "Share" %}
|
|
<i class="bi bi-graph-up me-2 text-danger"></i>
|
|
{% elif asset.asset_type == "Bond" %}
|
|
<i class="bi bi-cash-stack me-2 text-secondary"></i>
|
|
{% elif asset.asset_type == "Commodity" %}
|
|
<i class="bi bi-box me-2 text-dark"></i>
|
|
{% else %}
|
|
<i class="bi bi-question-circle me-2"></i>
|
|
{% endif %}
|
|
{{ asset.name }}
|
|
</div>
|
|
</td>
|
|
<td>{{ asset.asset_type }}</td>
|
|
<td>
|
|
<span class="badge {% if asset.status == 'Active' %}bg-success{% elif asset.status == 'Locked' %}bg-warning{% elif asset.status == 'For Sale' %}bg-info{% elif asset.status == 'Transferred' %}bg-secondary{% else %}bg-dark{% endif %}">
|
|
{{ asset.status }}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
{% if asset.current_valuation %}
|
|
${{ asset.current_valuation }}
|
|
{% else %}
|
|
<span class="text-muted">Not valued</span>
|
|
{% endif %}
|
|
</td>
|
|
<td>
|
|
<a href="/assets/{{ asset.id }}" class="btn btn-sm btn-primary">
|
|
<i class="bi bi-eye"></i> View
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="card-footer">
|
|
<a href="/assets/list" class="btn btn-primary">View All Assets</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Asset Types Distribution -->
|
|
<div class="row mt-4">
|
|
<div class="col-12">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<i class="bi bi-pie-chart me-1"></i>
|
|
Asset Types Distribution
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Asset Type</th>
|
|
<th>Count</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for asset_type in assets_by_type %}
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
{% if asset_type.type == "Token" %}
|
|
<i class="bi bi-coin me-2 text-warning"></i>
|
|
{% elif asset_type.type == "NFT" %}
|
|
<i class="bi bi-image me-2 text-primary"></i>
|
|
{% elif asset_type.type == "Real Estate" %}
|
|
<i class="bi bi-building me-2 text-success"></i>
|
|
{% elif asset_type.type == "Intellectual Property" %}
|
|
<i class="bi bi-file-earmark-text me-2 text-info"></i>
|
|
{% elif asset_type.type == "Share" %}
|
|
<i class="bi bi-graph-up me-2 text-danger"></i>
|
|
{% elif asset_type.type == "Bond" %}
|
|
<i class="bi bi-cash-stack me-2 text-secondary"></i>
|
|
{% elif asset_type.type == "Commodity" %}
|
|
<i class="bi bi-box me-2 text-dark"></i>
|
|
{% else %}
|
|
<i class="bi bi-question-circle me-2"></i>
|
|
{% endif %}
|
|
{{ asset_type.type }}
|
|
</div>
|
|
</td>
|
|
<td>{{ asset_type.count }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="/static/js/defi.js"></script>
|