| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Web3 Wallet Connect</title> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <style> |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| .modal { |
| animation: fadeIn 0.3s ease-out forwards; |
| } |
| .wallet-option:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
| } |
| .wallet-option { |
| transition: all 0.2s ease; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <button id="connectWalletBtn" class="fixed bottom-8 right-8 bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-full shadow-lg flex items-center gap-2"> |
| <i class="fas fa-wallet"></i> Connect Wallet |
| </button> |
|
|
| |
| <div id="web3Modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> |
| <div class="modal bg-white rounded-xl max-w-md w-full p-6"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-bold text-gray-900">Connect Wallet</h3> |
| <button id="closeModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| |
| <div class="space-y-3 mb-6"> |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="metamask"> |
| <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" alt="MetaMask" class="w-8 h-8 mr-3"> |
| <span class="font-medium">MetaMask</span> |
| </div> |
| |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="walletconnect"> |
| <img src="https://walletconnect.com/_next/static/media/logo_mark.84dd8525.svg" alt="WalletConnect" class="w-8 h-8 mr-3"> |
| <span class="font-medium">WalletConnect</span> |
| </div> |
| |
| <div class="wallet-option flex items-center p-4 border border-gray-200 rounded-lg cursor-pointer" data-wallet="coinbase"> |
| <img src="https://assets.coinbase.com/assets/6c17ad7b338573e00b2cae0f06a9b9d1b3b1f6c9f16eda59cc1e0cb8f1439e1.svg" alt="Coinbase Wallet" class="w-8 h-8 mr-3"> |
| <span class="font-medium">Coinbase Wallet</span> |
| </div> |
| </div> |
| |
| <p class="text-xs text-gray-500 text-center"> |
| By connecting your wallet, you agree to our <a href="#" class="text-indigo-600">Terms</a> and <a href="#" class="text-indigo-600">Privacy Policy</a>. |
| </p> |
| </div> |
| </div> |
|
|
| |
| <div id="connectionStatus" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4"> |
| <div class="modal bg-white rounded-xl max-w-md w-full p-6 text-center"> |
| <div id="statusIcon" class="w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-indigo-100"> |
| <i id="statusIconSymbol" class="fas fa-spinner fa-spin text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 id="statusTitle" class="text-xl font-bold text-gray-900 mb-2">Connecting...</h3> |
| <p id="statusMessage" class="text-gray-600 mb-6">Please confirm the connection in your wallet</p> |
| <button id="statusCloseBtn" class="hidden w-full py-2 px-4 border border-gray-300 rounded-lg text-gray-700 font-medium">Close</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const connectBtn = document.getElementById('connectWalletBtn'); |
| const web3Modal = document.getElementById('web3Modal'); |
| const closeModal = document.getElementById('closeModal'); |
| const walletOptions = document.querySelectorAll('.wallet-option'); |
| const connectionStatus = document.getElementById('connectionStatus'); |
| const statusCloseBtn = document.getElementById('statusCloseBtn'); |
| |
| |
| connectBtn.addEventListener('click', () => { |
| web3Modal.classList.remove('hidden'); |
| web3Modal.classList.add('flex'); |
| }); |
| |
| |
| closeModal.addEventListener('click', () => { |
| web3Modal.classList.add('hidden'); |
| web3Modal.classList.remove('flex'); |
| }); |
| |
| |
| walletOptions.forEach(option => { |
| option.addEventListener('click', () => { |
| const wallet = option.getAttribute('data-wallet'); |
| web3Modal.classList.add('hidden'); |
| showConnectionStatus(wallet); |
| |
| |
| setTimeout(() => { |
| updateConnectionStatus('success', `${wallet.charAt(0).toUpperCase() + wallet.slice(1)} Connected`, 'Your wallet has been successfully connected.'); |
| statusCloseBtn.classList.remove('hidden'); |
| connectWalletBtn.innerHTML = `<i class="fas fa-check-circle"></i> ${wallet.charAt(0).toUpperCase() + wallet.slice(1)}`; |
| connectWalletBtn.classList.remove('bg-indigo-600'); |
| connectWalletBtn.classList.add('bg-green-600'); |
| }, 1500); |
| }); |
| }); |
| |
| |
| statusCloseBtn.addEventListener('click', () => { |
| connectionStatus.classList.add('hidden'); |
| }); |
| |
| |
| function showConnectionStatus(wallet) { |
| connectionStatus.classList.remove('hidden'); |
| connectionStatus.classList.add('flex'); |
| |
| const statusIcon = document.getElementById('statusIcon'); |
| const statusIconSymbol = document.getElementById('statusIconSymbol'); |
| const statusTitle = document.getElementById('statusTitle'); |
| const statusMessage = document.getElementById('statusMessage'); |
| |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-indigo-100'; |
| statusIconSymbol.className = 'fas fa-spinner fa-spin text-indigo-600 text-2xl'; |
| statusTitle.textContent = `Connecting to ${wallet.charAt(0).toUpperCase() + wallet.slice(1)}...`; |
| statusMessage.textContent = 'Please confirm the connection in your wallet'; |
| statusCloseBtn.classList.add('hidden'); |
| } |
| |
| |
| function updateConnectionStatus(type, title, message) { |
| const statusIcon = document.getElementById('statusIcon'); |
| const statusIconSymbol = document.getElementById('statusIconSymbol'); |
| const statusTitle = document.getElementById('statusTitle'); |
| const statusMessage = document.getElementById('statusMessage'); |
| |
| if (type === 'success') { |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-green-100'; |
| statusIconSymbol.className = 'fas fa-check-circle text-green-600 text-2xl'; |
| } else { |
| statusIcon.className = 'w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center bg-red-100'; |
| statusIconSymbol.className = 'fas fa-times-circle text-red-600 text-2xl'; |
| } |
| |
| statusTitle.textContent = title; |
| statusMessage.textContent = message; |
| } |
| |
| |
| window.addEventListener('click', (e) => { |
| if (e.target === web3Modal) { |
| web3Modal.classList.add('hidden'); |
| web3Modal.classList.remove('flex'); |
| } |
| if (e.target === connectionStatus) { |
| connectionStatus.classList.add('hidden'); |
| connectionStatus.classList.remove('flex'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
