PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
<x-user-layout>
<main class="md:pb-4 bg-gray-100 text-black dark:bg-gray-900 dark:text-white transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<a href="{{ route('dashboard') }}" class="text-gray-400 dark:text-white">
<i class="fas fa-arrow-left text-xl"></i>
</a>
<div class="text-center">
<h1 class="text-2xl font-bold">{{ $asset['symbol'] }}</h1>
@if($asset['network'])
<p class="text-gray-400 dark:text-gray-400">{{ $asset['symbol'] }} | {{ $asset['network'] }}</p>
@else
<p class="text-gray-400 dark:text-gray-400">{{ $asset['symbol'] }} | {{ ucfirst($coinId) }}</p>
@endif
</div>
<button class="text-gray-400 dark:text-white">
<i class="fas fa-chart-line text-xl"></i>
</button>
</div>
<div class="flex justify-center my-8">
<div class="relative">
@if($asset['icon_url'])
<img src="{{ $asset['icon_url'] }}" alt="{{ $asset['symbol'] }}" class="w-24 h-24 rounded-full">
@if(!empty($asset['network_url']))
<img src="{{ $asset['network_url'] }}"
alt="{{ $asset['network'] }}"
class="absolute border border-light"
style="width: 24px; height: auto; bottom: 0; right: 0; background: white; border-radius: 50%;">
@endif
@else
<div class="w-24 h-24 bg-gray-300 dark:bg-gray-700 rounded-full flex items-center justify-center">
<span class="text-2xl">{{ $asset['symbol'] }}</span>
</div>
@endif
</div>
</div>
<div class="text-center mb-12">
<h2 class="text-3xl md:text-4xl font-bold mb-2">{{ number_format($asset['balance'], 8) }} {{ $asset['symbol'] }}</h2>
<p class="text-gray-500 dark:text-gray-300">${{ number_format($asset['value'], 2) }}</p>
</div>
<div class="mt-8 grid mb-8 grid-cols-4 gap-4">
<div class="flex flex-col items-center">
<button onclick="openAssetSendModal()"
class="h-16 w-16 rounded-full bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
<i class="fas fa-arrow-up text-xl dark:text-white"></i>
</button>
<span class="mt-2 text-sm dark:text-gray-400">Send</span>
</div>
<div class="flex flex-col items-center">
<button onclick="openAssetReceiveModal()"
class="h-16 w-16 rounded-full bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
<i class="fas fa-arrow-down text-xl dark:text-white"></i>
</button>
<span class="mt-2 text-sm dark:text-gray-400">Receive</span>
</div>
<div class="flex flex-col items-center">
<a href="{{ route('buy.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="h-16 w-16 rounded-full bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
<i class="fas fa-credit-card text-xl dark:text-white"></i>
</a>
<span class="mt-2 text-sm dark:text-gray-400">Buy</span>
</div>
<div class="flex flex-col items-center">
<a href="{{ route('swap') }}"
class="h-16 w-16 rounded-full bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center justify-center">
<i class="fas fa-exchange-alt text-xl dark:text-white"></i>
</a>
<span class="mt-2 text-sm dark:text-gray-400">Swap</span>
</div>
</div>
<div class="text-center mb-8">
<h3 class="text-xl border-b-2 md:mr-[465px] md:ml-[465px] mr-[130px] ml-[130px] mb-[-1px] border-gray-900 dark:border-white font-semibold mb-4">Transactions</h3>
</div>
<!-- Transaction List -->
<div class="space-y-4">
@forelse($transactions as $transaction)
<div class="flex items-center justify-between p-4 bg-white dark:bg-gray-800 rounded-lg mb-4">
<div class="flex items-center">
@php
$currentCrypto = strtolower($asset['symbol']);
if ($asset['network']) {
$currentCrypto = strtolower($asset['symbol']) . '_' . strtolower($asset['network']);
}
// Check if this is a funding transaction
if ($transaction->type === 'funding') {
$isIncoming = true; // Funding is incoming money
$amount = $transaction->amount_in ?? $transaction->amount_out ?? 0;
}
// Check for swap transactions
elseif ($transaction->type === 'swap') {
// Use coin relationships if available, fallback to legacy fields
if ($transaction->fromCoin && $transaction->toCoin) {
$isIncoming = $transaction->toCoin->symbol === $asset['symbol'] &&
($transaction->toCoin->network ?? null) === ($asset['network'] ?? null);
$amount = $isIncoming ? $transaction->amount_out : $transaction->amount_in;
} else {
// Legacy fallback
$isIncoming = $transaction->to_crypto === $currentCrypto;
$amount = $isIncoming ? $transaction->amount_out : $transaction->amount_in;
}
}
// For other transaction types (deposit, withdrawal, refund)
else {
$isIncoming = in_array($transaction->type, ['deposit', 'refund']);
// Use amount_in for modern transactions, fallback to amount_out for legacy
$amount = $transaction->amount_in ?? $transaction->amount_out ?? 0;
}
// Set icon and color based on status
if ($transaction->status === 'pending') {
$iconClass = 'bg-yellow-500';
$iconDirection = 'fa-spinner';
$amountPrefix = '';
$amountClass = 'text-yellow-500';
} else {
$iconClass = $isIncoming ? 'bg-green-500' : 'bg-red-500';
$iconDirection = $isIncoming ? 'fa-arrow-down' : 'fa-arrow-up';
$amountPrefix = $isIncoming ? '+' : '-';
$amountClass = $isIncoming ? 'text-green-500' : 'text-red-500';
}
// Format display names for swaps using modern coin relationships
if ($transaction->fromCoin && $transaction->toCoin) {
$fromCryptoDisplay = $transaction->fromCoin->display_symbol;
$toCryptoDisplay = $transaction->toCoin->display_symbol;
} else {
// Legacy fallback
$fromCryptoDisplay = $transaction->from_crypto ? strtoupper(explode('_', $transaction->from_crypto)[0]) : 'Unknown';
$toCryptoDisplay = $transaction->to_crypto ? strtoupper(explode('_', $transaction->to_crypto)[0]) : 'Unknown';
if ($transaction->from_crypto && strpos($transaction->from_crypto, '_') !== false) {
$networkFrom = explode('_', $transaction->from_crypto)[1];
$fromCryptoDisplay .= ' ' . strtoupper($networkFrom);
}
if ($transaction->to_crypto && strpos($transaction->to_crypto, '_') !== false) {
$networkTo = explode('_', $transaction->to_crypto)[1];
$toCryptoDisplay .= ' ' . strtoupper($networkTo);
}
}
@endphp
<div class="w-10 h-10 {{ $iconClass }} rounded-full flex items-center justify-center mr-4">
<i class="fas {{ $iconDirection }} text-white"></i>
</div>
<div>
<h3 class="font-semibold">
@if($transaction->type === 'funding')
Funded Card
@elseif($transaction->type === 'swap')
@if($isIncoming)
Swapped from {{ $fromCryptoDisplay }}
@else
Swapped to {{ $toCryptoDisplay }}
@endif
@else
{{ ucfirst($transaction->type) }}
@endif
</h3>
<p class="text-sm text-gray-800 dark:text-gray-400">
{{ $transaction->created_at->format('M d, Y') }}
</p>
</div>
</div>
<div class="text-right">
<p class="{{ $amountClass }}">
{{ $amountPrefix }}{{ number_format($amount, 6) }} {{ $asset['symbol'] }}
</p>
@if(isset($transaction->metadata['usd_value']))
<p class="text-sm text-gray-800 dark:text-gray-400">
${{ number_format($transaction->metadata['usd_value'], 2) }}
</p>
@endif
</div>
</div>
@empty
<div class="text-center py-8">
<p class="text-gray-500 dark:text-gray-400 mb-4">No transactions yet</p>
<button wire:navigate href="{{ route('buy.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="bg-yellow-500 text-black font-bold py-3 px-8 rounded-lg hover:bg-yellow-600 dark:bg-yellow-400 dark:text-black">
Buy {{ $asset['symbol'] }}
</button>
</div>
@endforelse
</div>
<!-- Send Modal -->
<div id="assetSendModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-gray-100 dark:bg-gray-800 w-full md:w-96 md:rounded-lg mt-auto sm:mt-24 relative">
<div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Send {{ $asset['symbol'] }}</h2>
<button onclick="closeAssetSendModal()" class="text-gray-400 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4 space-y-4">
<a href="{{ route('send.payid.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="w-full bg-white hover:bg-white dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-4 text-left block">
<div class="flex items-start">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-shield-alt text-black"></i>
</div>
<div>
<h3 class="font-semibold text-yellow-500">Send via Ledger Chain PayId</h3>
<p class="text-sm text-gray-800 dark:text-gray-300 mt-1">Send coins from Ledger Chain to Ledger Chain fast and free. No network fee</p>
</div>
</div>
</a>
<a href="{{ route('send.external.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="w-full bg-white hover:bg-white dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-4 text-left block">
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-coins text-white"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800 dark:text-white">Send via {{ $asset['symbol'] }}</h3>
<p class="text-sm text-gray-800 dark:text-gray-300 mt-1">Send coins from your Ledger Chain crypto wallet. Network fees included</p>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Receive Modal -->
<div id="assetReceiveModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
<div class="bg-gray-100 dark:bg-gray-800 w-full md:w-96 md:rounded-lg mt-auto sm:mt-24 relative">
<div class="flex items-center justify-between p-4 border-b border-gray-100 dark:border-gray-800">
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Receive {{ $asset['symbol'] }}</h2>
<button onclick="closeAssetReceiveModal()" class="text-gray-400 hover:text-gray-300 dark:text-gray-400 dark:hover:text-gray-200">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4 space-y-4">
<a href="{{ route('receive.payid.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="w-full bg-white hover:bg-white dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-4 text-left block">
<div class="flex items-start">
<div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-shield-alt text-black"></i>
</div>
<div>
<h3 class="font-semibold text-yellow-500">Receive via Ledger Chain PayId</h3>
<p class="text-sm text-gray-800 dark:text-gray-300 mt-1">Receive coins from Ledger Chain to Ledger Chain fast and free. No network fee</p>
</div>
</div>
</a>
<a href="{{ route('receive.external.details', ['symbol' => strtolower($asset['symbol']), 'network' => $asset['network'] ?? 'native']) }}"
class="w-full bg-white hover:bg-white dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-4 text-left block">
<div class="flex items-start">
<div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-4">
<i class="fas fa-coins text-white"></i>
</div>
<div>
<h3 class="font-semibold text-gray-800 dark:text-white">Receive via {{ $asset['symbol'] }}</h3>
<p class="text-sm text-gray-800 dark:text-gray-300 mt-1">Receive coins from your Ledger Chain crypto wallet. Network fees included</p>
</div>
</div>
</a>
</div>
</div>
</div>
@push('scripts')
<script>
function openAssetSendModal() {
document.getElementById('assetSendModal').classList.remove('hidden');
}
function closeAssetSendModal() {
document.getElementById('assetSendModal').classList.add('hidden');
}
function openAssetReceiveModal() {
document.getElementById('assetReceiveModal').classList.remove('hidden');
}
function closeAssetReceiveModal() {
document.getElementById('assetReceiveModal').classList.add('hidden');
}
// Close modals when clicking outside
window.addEventListener('click', function(event) {
const sendModal = document.getElementById('assetSendModal');
const receiveModal = document.getElementById('assetReceiveModal');
if (event.target === sendModal) {
sendModal.classList.add('hidden');
}
if (event.target === receiveModal) {
receiveModal.classList.add('hidden');
}
});
</script>
@endpush
</main>
</x-user-layout>
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E