<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web3 Wallet Connection</title>
<script src="https://cdn.jsdelivr.net/npm/web3@1.5.3/dist/web3.min.js"></script>
</head>
<body>
<h1>Web3 Wallet Connection Demo</h1>
<button onclick="connectWallet()">Connect Wallet</button>
<script >
if (typeof window.ethereum !== 'undefined') {
const web3 = new Web3(window.ethereum);
window.ethereum.on('accountsChanged', (accounts) => {
const selectedAccount = accounts[0];
console.log('Account changed:', selectedAccount);
});
window.ethereum.on('networkChanged', (networkId) => {
console.log('Network changed:', networkId);
});
async function connectWallet() {
try {
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
const selectedAccount = accounts[0];
console.log('Connected to account:', selectedAccount);
} catch (error) {
console.error('Error connecting to account:', error);
}
}
} else {
console.error('Web3 is not available. Please install MetaMask.');
}
</script>
</body>
</html>