transaction not happenning and chart is not showinng

index.html

@@ -8,9 +8,12 @@
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://unpkg.com/feather-icons"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
-    <style>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+        <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+<style>
         .gradient-bg {
             background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
         }
@@ -126,11 +129,11 @@
                 <div class="card-glass p-4">
                     <div id="transactionsList">
                         <!-- Transactions will be populated here -->
-                        <div class="text-center py-8 text-gray-400">
-                            <i data-feather="package" class="mx-auto mb-2" width="48" height="48"></i>
-                            <p>No transactions yet</p>
-                        </div>
+                    <div id="transactionsChart" class="h-64 mb-6"></div>
+                    <div id="transactionHistory" class="space-y-3">
+                        <!-- Transactions will be populated here -->
                     </div>
+</div>
                 </div>
             </section>
         </main>
@@ -217,10 +220,10 @@
                         <i data-feather="user"></i>
                         <span class="text-xs mt-1">Profile</span>
                     </a>
-</div>
+                </div>
             </div>
         </nav>
-    </div>
+</div>
 
     <script>
         // Initialize Vanta.js background
@@ -239,12 +242,103 @@
             waveSpeed: 0.50,
             zoom: 0.75
         });
+            // Initialize Feather Icons
+            document.addEventListener('DOMContentLoaded', function() {
+                feather.replace();
 
-        // Initialize Feather Icons
-        document.addEventListener('DOMContentLoaded', function() {
-            feather.replace();
-            
-            // Sample data for assets
+                // Initialize Chart
+                const ctx = document.getElementById('transactionsChart').getContext('2d');
+                const chart = new Chart(ctx, {
+                    type: 'line',
+                    data: {
+                        datasets: [{
+                            label: 'Portfolio Value',
+                            data: [
+                                {x: '2023-01-01', y: 1000},
+                                {x: '2023-02-01', y: 1200},
+                                {x: '2023-03-01', y: 950},
+                                {x: '2023-04-01', y: 1500},
+                                {x: '2023-05-01', y: 1800},
+                                {x: '2023-06-01', y: 2000},
+                                {x: '2023-07-01', y: 2200}
+                            ],
+                            borderColor: '#3b82f6',
+                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
+                            tension: 0.3,
+                            fill: true
+                        }]
+                    },
+                    options: {
+                        responsive: true,
+                        scales: {
+                            x: {
+                                type: 'time',
+                                time: {
+                                    unit: 'month'
+                                }
+                            },
+                            y: {
+                                beginAtZero: false
+                            }
+                        }
+                    }
+                });
+
+                // Sample transactions data
+                const transactions = [
+                    { 
+                        type: 'send',
+                        asset: 'ETH',
+                        amount: 0.5,
+                        address: '0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7',
+                        date: '2023-06-15',
+                        status: 'completed'
+                    },
+                    { 
+                        type: 'receive',
+                        asset: 'BTC',
+                        amount: 0.02,
+                        address: '0x89205A3A3b2A69De6Dbf7f01ED13B2108B2c43e7',
+                        date: '2023-06-10',
+                        status: 'completed'
+                    },
+                    { 
+                        type: 'swap',
+                        asset: 'ETH to USDC',
+                        amount: 1.2,
+                        address: 'Exchange',
+                        date: '2023-05-28',
+                        status: 'completed'
+                    }
+                ];
+
+                // Populate transactions
+                const transactionsList = document.getElementById('transactionHistory');
+                transactions.forEach(tx => {
+                    const txType = tx.type === 'send' ? 'Sent' : tx.type === 'receive' ? 'Received' : 'Swapped';
+                    const txIcon = tx.type === 'send' ? 'arrow-up-right' : tx.type === 'receive' ? 'arrow-down-left' : 'repeat';
+                    const txColor = tx.type === 'send' ? 'text-red-400' : tx.type === 'receive' ? 'text-green-400' : 'text-purple-400';
+
+                    const txElement = document.createElement('div');
+                    txElement.className = 'transaction-item p-4 rounded-lg bg-gray-800 flex justify-between items-center';
+                    txElement.innerHTML = `
+                        <div class="flex items-center">
+                            <div class="mr-3 p-2 rounded-full ${tx.type === 'send' ? 'bg-red-900' : tx.type === 'receive' ? 'bg-green-900' : 'bg-purple-900'}">
+                                <i data-feather="${txIcon}" class="${txColor}"></i>
+                            </div>
+                            <div>
+                                <p class="font-medium">${txType} ${tx.asset}</p>
+                                <p class="text-sm text-gray-400">${tx.address.substring(0, 6)}...${tx.address.substring(tx.address.length - 4)}</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-medium">${tx.type === 'send' ? '-' : '+'}${tx.amount} ${tx.asset.split(' ')[0]}</p>
+                            <p class="text-sm text-gray-400">${new Date(tx.date).toLocaleDateString()}</p>
+                        </div>
+                    `;
+                    transactionsList.appendChild(txElement);
+                });
+// Sample data for assets
             const assets = [
                 { name: 'Ethereum', symbol: 'ETH', balance: 1.42, price: 1850.32, change24h: 2.4, icon: 'activity' },
                 { name: 'Bitcoin', symbol: 'BTC', balance: 0.042, price: 29500.75, change24h: -1.2, icon: 'bitcoin' },
@@ -337,10 +431,52 @@
                     alert('Please install MetaMask or another Ethereum wallet');
                 }
             });
-
             // Refresh icons after dynamic content
             feather.replace();
-        });
+
+            // Connect wallet handler with transaction simulation
+            document.getElementById('connectWallet').addEventListener('click', async () => {
+                if (window.ethereum) {
+                    try {
+                        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
+                        console.log('Connected:', accounts[0]);
+                        document.getElementById('connectWallet').innerHTML = `
+                            <i data-feather="check-circle" class="mr-2"></i> ${accounts[0].substring(0, 6)}...${accounts[0].substring(38)}
+                        `;
+                        
+                        // Simulate receiving ETH after connection
+                        setTimeout(() => {
+                            const transactionsList = document.getElementById('transactionHistory');
+                            const newTx = document.createElement('div');
+                            newTx.className = 'transaction-item p-4 rounded-lg bg-gray-800 flex justify-between items-center';
+                            newTx.innerHTML = `
+                                <div class="flex items-center">
+                                    <div class="mr-3 p-2 rounded-full bg-green-900">
+                                        <i data-feather="arrow-down-left" class="text-green-400"></i>
+                                    </div>
+                                    <div>
+                                        <p class="font-medium">Received ETH</p>
+                                        <p class="text-sm text-gray-400">${accounts[0].substring(0, 6)}...${accounts[0].substring(accounts[0].length - 4)}</p>
+                                    </div>
+                                </div>
+                                <div class="text-right">
+                                    <p class="font-medium">+0.1 ETH</p>
+                                    <p class="text-sm text-gray-400">Just now</p>
+                                </div>
+                            `;
+                            transactionsList.prepend(newTx);
+                            feather.replace();
+                        }, 1500);
+                        
+                        feather.replace();
+                    } catch (error) {
+                        console.error('User rejected request:', error);
+                    }
+                } else {
+                    alert('Please install MetaMask or another Ethereum wallet');
+                }
+            });
+});
     </script>
 </body>
 </html>