275 lines
16 KiB
HTML
275 lines
16 KiB
HTML
<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">
|
|
|
|
|
|
</div>
|
|
TFT-ZDFZ
|
|
</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-ZDFZ">Add</button>
|
|
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="TFT-ZDFZ">Remove</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
<div class="position-relative me-2">
|
|
|
|
|
|
</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>
|
|
ZDFZ-USDT
|
|
</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="ZDFZ-USDT">Add</button>
|
|
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="ZDFZ-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-ZDFZ Position -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-light">
|
|
TFT-ZDFZ
|
|
</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>ZDFZ:</span>
|
|
<strong>1,250 ZDFZ</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-ZDFZ">Add Liquidity</button>
|
|
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="TFT-ZDFZ">Remove Liquidity</button>
|
|
<button class="btn btn-sm btn-outline-success">Claim Rewards</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ZDFZ-USDT Position -->
|
|
<div class="col-md-6 col-lg-4 mb-4">
|
|
<div class="card h-100">
|
|
<div class="card-header bg-light">
|
|
ZDFZ-USDT
|
|
</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>ZDFZ:</span>
|
|
<strong>2,500 ZDFZ</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="ZDFZ-USDT">Add Liquidity</button>
|
|
<button class="btn btn-sm btn-outline-primary" data-bs-toggle="modal" data-bs-target="#removeLiquidityModal" data-pool="ZDFZ-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="ZDFZ">Zanzibar Token (ZDFZ)</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="ZDFZ">Zanzibar Token (ZDFZ)</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">ZDFZ</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">ZDFZ</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>
|