My code is running on local in py eni , I am trying to get solflare wallet address after connecting to it but it getting error here is the full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<title>Connect Solana Wallet</title>
</head>
<body>
<div class="container">
<h1>Connect Your Solana Wallet</h1>
<button id="connect-phantom">Connect Phantom</button>
<button id="connect-solflare">Connect Solflare</button>
<button id="connect-backpack">Connect Backpack</button>
<p id="wallet-address"></p>
<div id="result"></div>
</div>
<script>
async function connectWallet(wallet) {
let response;
try {
if (wallet === 'Phantom') {
const { solana } = window;
if (solana && solana.isPhantom) {
response = await solana.connect();
} else {
alert('Please install Phantom Wallet!');
return;
}
} else if (wallet === 'Solflare') {
if (window.solflare) {
response = await window.solflare.connect();
// Solflare might require fetching the publicKey separately
if (!response.publicKey && window.solflare.publicKey) {
response.publicKey = window.solflare.publicKey;
}
} else {
alert('Please install Solflare Wallet!');
return;
}
} else if (wallet === 'Backpack') {
if (window.backpack) {
response = await window.backpack.connect();
} else {
alert('Please install Backpack Wallet!');
return;
}
}
if (response && response.publicKey) {
document.getElementById('wallet-address').innerText = `Wallet Address: ${response.publicKey.toString()}`;
getURLParams(response.publicKey.toString());
} else {
alert('Unable to retrieve wallet address.');
}
} catch (error) {
console.error('Error connecting wallet:', error);
alert('Failed to connect to the wallet.');
}
}
document.getElementById('connect-phantom').onclick = () => connectWallet('Phantom');
document.getElementById('connect-solflare').onclick = () => connectWallet('Solflare');
document.getElementById('connect-backpack').onclick = () => connectWallet('Backpack');
async function getURLParams(walletAddress) {
const params = new URLSearchParams(window.location.search);
const merkleTreeRoot = params.get('Merkle_Tree_Root');
try {
const response = await fetch(`/check_merkle_tree/${walletAddress}/${merkleTreeRoot}`);
const result = await response.json();
document.getElementById('result').innerText = result.message;
} catch (error) {
console.error('Error fetching merkle tree:', error);
document.getElementById('result').innerText = 'Error fetching merkle tree details.';
}
}
</script>
</body>
</html>