Cryptocurrency & DeFi
Cryptocurrency & DeFi
UltraViolet Pro includes comprehensive cryptocurrency and decentralized finance (DeFi) interfaces for building crypto wallet applications, exchanges, lending platforms, and ICO dashboards.
Overview
The crypto system provides pre-built interfaces for common cryptocurrency and DeFi use cases, with real-time data visualization and transaction management.
Crypto Wallet
A complete cryptocurrency wallet interface for managing digital assets.
Route: /admin/crypto/wallet
Wallet Dashboard
<div class="row g-3">
<!-- Total Balance Card -->
<div class="col-12">
<div class="card bg-gradient-primary text-white">
<div class="card-body">
<h6 class="text-white-50 mb-1">Total Balance</h6>
<h2 class="mb-0">$45,678.90</h2>
<div class="d-flex align-items-center mt-2">
<span class="badge bg-success bg-opacity-25 text-white">
<i class="material-symbols-rounded">trending_up</i>
+12.5%
</span>
<small class="ms-2">24h change</small>
</div>
</div>
</div>
</div>
<!-- Asset Cards -->
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="crypto-icon me-3">
<img src="./images/crypto/bitcoin.svg" width="40" alt="Bitcoin">
</div>
<div>
<h6 class="mb-0">Bitcoin</h6>
<small class="text-muted">BTC</small>
</div>
</div>
<h4 class="mb-1">2.45 BTC</h4>
<p class="text-muted mb-0">≈ $32,450.00</p>
<div class="mt-2">
<span class="badge bg-success">+5.2%</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="crypto-icon me-3">
<img src="./images/crypto/ethereum.svg" width="40" alt="Ethereum">
</div>
<div>
<h6 class="mb-0">Ethereum</h6>
<small class="text-muted">ETH</small>
</div>
</div>
<h4 class="mb-1">12.8 ETH</h4>
<p class="text-muted mb-0">≈ $8,960.00</p>
<div class="mt-2">
<span class="badge bg-success">+3.8%</span>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center mb-3">
<div class="crypto-icon me-3">
<img src="./images/crypto/usdt.svg" width="40" alt="USDT">
</div>
<div>
<h6 class="mb-0">Tether</h6>
<small class="text-muted">USDT</small>
</div>
</div>
<h4 class="mb-1">4,268.90 USDT</h4>
<p class="text-muted mb-0">≈ $4,268.90</p>
<div class="mt-2">
<span class="badge bg-secondary">0.0%</span>
</div>
</div>
</div>
</div>
</div>Transaction History
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Transaction History</h5>
</div>
<div class="list-group list-group-flush">
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="me-3">
<i class="material-symbols-rounded text-success">arrow_downward</i>
</div>
<div>
<h6 class="mb-0">Received Bitcoin</h6>
<small class="text-muted">From: 1A1zP1...9QoS</small>
</div>
</div>
<div class="text-end">
<div class="fw-bold text-success">+0.025 BTC</div>
<small class="text-muted">2 hours ago</small>
</div>
</div>
</div>
<div class="list-group-item">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<div class="me-3">
<i class="material-symbols-rounded text-danger">arrow_upward</i>
</div>
<div>
<h6 class="mb-0">Sent Ethereum</h6>
<small class="text-muted">To: 0x742d...35a6</small>
</div>
</div>
<div class="text-end">
<div class="fw-bold text-danger">-1.5 ETH</div>
<small class="text-muted">5 hours ago</small>
</div>
</div>
</div>
<!-- More transactions -->
</div>
</div>Send/Receive Modals
<!-- Send Modal -->
<div class="modal fade" id="sendModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Send Cryptocurrency</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label class="form-label">Asset</label>
<select class="form-select">
<option>Bitcoin (BTC)</option>
<option>Ethereum (ETH)</option>
<option>Tether (USDT)</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Recipient Address</label>
<input type="text" class="form-control" placeholder="Enter wallet address">
</div>
<div class="mb-3">
<label class="form-label">Amount</label>
<input type="number" class="form-control" placeholder="0.00">
</div>
<div class="mb-3">
<label class="form-label">Network Fee</label>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary flex-fill">Slow</button>
<button type="button" class="btn btn-outline-primary flex-fill active">Normal</button>
<button type="button" class="btn btn-outline-success flex-fill">Fast</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send</button>
</div>
</div>
</div>
</div>Crypto Exchange
A trading interface for cryptocurrency exchanges.
Route: /admin/crypto/exchange
Trading Interface
<div class="row g-3">
<!-- Trading Chart -->
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<div class="d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center">
<h5 class="mb-0 me-3">BTC/USDT</h5>
<span class="text-success fs-4">$42,567.89</span>
<span class="badge bg-success ms-2">+2.45%</span>
</div>
<div class="btn-group btn-group-sm">
<button class="btn btn-outline-secondary">1H</button>
<button class="btn btn-outline-secondary active">24H</button>
<button class="btn btn-outline-secondary">1W</button>
<button class="btn btn-outline-secondary">1M</button>
</div>
</div>
</div>
<div class="card-body">
<div id="tradingChart" style="height: 400px;"></div>
</div>
</div>
</div>
<!-- Order Book -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Order Book</h5>
</div>
<div class="card-body p-0">
<!-- Sell Orders -->
<div class="order-book-section">
<div class="order-book-header px-3 py-2 bg-danger bg-opacity-10">
<div class="row text-muted small">
<div class="col">Price (USDT)</div>
<div class="col text-end">Amount (BTC)</div>
</div>
</div>
<div class="order-book-list">
<div class="order-book-item px-3 py-1">
<div class="row small">
<div class="col text-danger">42,570.00</div>
<div class="col text-end">0.125</div>
</div>
</div>
<!-- More orders -->
</div>
</div>
<!-- Current Price -->
<div class="text-center py-2 bg-primary bg-opacity-10">
<span class="fw-bold">42,567.89</span>
</div>
<!-- Buy Orders -->
<div class="order-book-section">
<div class="order-book-list">
<div class="order-book-item px-3 py-1">
<div class="row small">
<div class="col text-success">42,565.00</div>
<div class="col text-end">0.238</div>
</div>
</div>
<!-- More orders -->
</div>
</div>
</div>
</div>
</div>
<!-- Buy/Sell Form -->
<div class="col-12">
<div class="card">
<div class="card-body">
<ul class="nav nav-tabs mb-3" role="tablist">
<li class="nav-item">
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#buy-tab">Buy</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#sell-tab">Sell</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="buy-tab">
<form>
<div class="row g-3">
<div class="col-md-3">
<label class="form-label">Price (USDT)</label>
<input type="number" class="form-control" value="42567.89">
</div>
<div class="col-md-3">
<label class="form-label">Amount (BTC)</label>
<input type="number" class="form-control" placeholder="0.00">
</div>
<div class="col-md-3">
<label class="form-label">Total (USDT)</label>
<input type="number" class="form-control" placeholder="0.00" readonly>
</div>
<div class="col-md-3">
<label class="form-label"> </label>
<button type="submit" class="btn btn-success w-100">Buy BTC</button>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="sell-tab">
<!-- Sell form similar to buy form -->
</div>
</div>
</div>
</div>
</div>
</div>Crypto Lending
DeFi lending and borrowing interface.
Route: /admin/crypto/lending
Lending Dashboard
<div class="row g-3">
<!-- Lending Stats -->
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Total Supplied</h6>
<h3>$125,430</h3>
<small class="text-success">+8.5% APY</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Total Borrowed</h6>
<h3>$45,200</h3>
<small class="text-danger">-12.3% APY</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Net APY</h6>
<h3>5.8%</h3>
<small class="text-success">Earning interest</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Health Factor</h6>
<h3>2.45</h3>
<small class="text-success">Safe</small>
</div>
</div>
</div>
<!-- Assets to Supply -->
<div class="col-12">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Assets to Supply</h5>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Asset</th>
<th>Wallet Balance</th>
<th>APY</th>
<th>Can be Collateral</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex align-items-center">
<img src="./images/crypto/usdc.svg" width="32" class="me-2">
<div>
<div class="fw-bold">USDC</div>
<small class="text-muted">USD Coin</small>
</div>
</div>
</td>
<td>5,000.00 USDC</td>
<td class="text-success">8.5%</td>
<td><span class="badge bg-success">Yes</span></td>
<td><button class="btn btn-sm btn-primary">Supply</button></td>
</tr>
<!-- More assets -->
</tbody>
</table>
</div>
</div>
</div>
</div>ICO Dashboard
Initial Coin Offering management dashboard.
Route: /admin/crypto/ico
ICO Overview
<div class="row g-3">
<!-- ICO Progress -->
<div class="col-12">
<div class="card bg-gradient-primary text-white">
<div class="card-body">
<h3 class="mb-3">Token Sale Progress</h3>
<div class="row align-items-center">
<div class="col-md-8">
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success" style="width: 65%">
65% Complete
</div>
</div>
<div class="d-flex justify-content-between mt-2">
<span>0 tokens</span>
<span>100M tokens</span>
</div>
</div>
<div class="col-md-4 text-end">
<h2 class="mb-0">65M / 100M</h2>
<p class="mb-0">Tokens Sold</p>
</div>
</div>
</div>
</div>
</div>
<!-- ICO Stats -->
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Funds Raised</h6>
<h3>$32.5M</h3>
<small class="text-muted">of $50M goal</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Contributors</h6>
<h3>12,456</h3>
<small class="text-success">+234 today</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Token Price</h6>
<h3>$0.50</h3>
<small class="text-muted">per token</small>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h6 class="text-muted">Time Remaining</h6>
<h3>15d 8h</h3>
<small class="text-warning">Sale ends soon</small>
</div>
</div>
</div>
<!-- Purchase Form -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Purchase Tokens</h5>
</div>
<div class="card-body">
<form>
<div class="mb-3">
<label class="form-label">Payment Method</label>
<select class="form-select">
<option>ETH</option>
<option>BTC</option>
<option>USDT</option>
<option>Credit Card</option>
</select>
</div>
<div class="mb-3">
<label class="form-label">Amount to Invest</label>
<input type="number" class="form-control" placeholder="0.00">
</div>
<div class="mb-3">
<label class="form-label">Tokens Received</label>
<input type="text" class="form-control" value="0 tokens" readonly>
</div>
<button type="submit" class="btn btn-primary w-100">Purchase Tokens</button>
</form>
</div>
</div>
</div>
<!-- Token Distribution -->
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Token Distribution</h5>
</div>
<div class="card-body">
<div id="distributionChart"></div>
<div class="mt-3">
<div class="d-flex justify-content-between mb-2">
<span><i class="material-symbols-rounded text-primary">circle</i> Public Sale</span>
<span class="fw-bold">50%</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span><i class="material-symbols-rounded text-success">circle</i> Team</span>
<span class="fw-bold">20%</span>
</div>
<div class="d-flex justify-content-between mb-2">
<span><i class="material-symbols-rounded text-info">circle</i> Advisors</span>
<span class="fw-bold">10%</span>
</div>
<div class="d-flex justify-content-between">
<span><i class="material-symbols-rounded text-warning">circle</i> Reserve</span>
<span class="fw-bold">20%</span>
</div>
</div>
</div>
</div>
</div>
</div>Crypto Orders
Manage cryptocurrency buy/sell orders and trade history.
Route: /admin/crypto/orders
Orders Table
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<button class="nav-link active">Open Orders</button>
</li>
<li class="nav-item">
<button class="nav-link">Order History</button>
</li>
<li class="nav-item">
<button class="nav-link">Trade History</button>
</li>
</ul>
</div>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>Date</th>
<th>Pair</th>
<th>Type</th>
<th>Side</th>
<th>Price</th>
<th>Amount</th>
<th>Filled</th>
<th>Total</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Oct 16, 2025 14:23</td>
<td>BTC/USDT</td>
<td>Limit</td>
<td><span class="badge bg-success">Buy</span></td>
<td>$42,500.00</td>
<td>0.5 BTC</td>
<td>0.25 BTC (50%)</td>
<td>$21,250.00</td>
<td><span class="badge bg-warning">Partial</span></td>
<td><button class="btn btn-sm btn-danger">Cancel</button></td>
</tr>
<!-- More orders -->
</tbody>
</table>
</div>
</div>Real-time Price Updates
Integrate WebSocket for real-time crypto prices:
// Example with Livewire
class CryptoPrices extends Component
{
public $prices = [];
public function mount()
{
$this->refreshPrices();
}
public function refreshPrices()
{
// Fetch from API
$this->prices = [
'BTC' => ['price' => 42567.89, 'change' => 2.45],
'ETH' => ['price' => 2234.56, 'change' => -1.23],
'USDT' => ['price' => 1.00, 'change' => 0.00],
];
}
public function render()
{
return view('livewire.crypto-prices');
}
}Best Practices
- Security: Never store private keys client-side
- Validation: Validate all addresses and amounts
- Confirmations: Show clear transaction confirmations
- Fees: Display network fees before transactions
- Compliance: Ensure KYC/AML compliance where required
- Real-time Data: Use WebSocket for live price updates
- Error Handling: Handle blockchain errors gracefully
Export
Crypto interfaces can be exported as static HTML with mock data for demonstration purposes. For production, integrate with actual blockchain APIs and wallet providers.