I am trying to build a simple web application that uses Solana Web3.js to facilitate token purchase on devnet through my phantom wallet. However, when I attempt to execute the buyTokens function, I encounter the following error in the browser console:
Uncaught ReferenceError: Buffer is not defined at buy-solana:9:29 (anonymous) @ buy-solana:9Understand this errorAI browser.js:48 Uncaught (in promise) ReferenceError: Buffer is not defined
I have included the Solana Web3.js library using the following script tag:-
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.js"></script>
<script src="https://bundle.run/[email protected]"></script>
My relevent part of code-
async function buyTokens() {
const connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl('devnet'));
const transaction = new solanaWeb3.Transaction().add(
solanaWeb3.SystemProgram.transfer({
fromPubkey: new solanaWeb3.PublicKey(walletAddress),
toPubkey: new solanaWeb3.PublicKey(solanaPublicKey),
lamports: solanaWeb3.LAMPORTS_PER_SOL * solAmount,
})
);
try {
const signedTransaction = await window.solana.signTransaction(transaction);
const signature = await connection.sendRawTransaction(signedTransaction.serialize());
await connection.confirmTransaction(signature);
alert(`Transaction sent: ${signature}`);
} catch (error) {
alert('Transaction failed: ' + error.message);
}
}
Full code for your reference-
<!DOCTYPE html>
<html>
<head>
<title>Buy AstroMatch Tokens - Solana</title>
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.js"></script>
<script src="https://bundle.run/[email protected]"></script>
<script>
if (!window.Buffer) {
window.Buffer = Buffer; // Define Buffer globally if not already defined
}
</script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
background: linear-gradient(to bottom, #f093fb, #f5576c);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.card {
background-color: #ffffff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
width: 350px;
}
h2 {
margin-bottom: 20px;
}
button {
font-size: 16px;
padding: 10px 20px;
border: none;
cursor: pointer;
border-radius: 5px;
background-color: #4caf50;
color: white;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#disconnect {
background-color: #f44336;
margin-top: 10px;
}
input {
width: 100%;
padding: 10px;
margin-top: 15px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
}
#status {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="card">
<h2>Buy AstroMatch Tokens</h2>
<button id="connect">Connect Wallet</button>
<button id="disconnect" style="display:none;">Disconnect Wallet</button>
<p id="status">Status: Not Connected</p>
<form id="buyForm" style="display:none;">
<label for="tokenAmount">Amount of Tokens:</label>
<input type="number" id="tokenAmount" min="1" placeholder="Enter token amount">
<p id="solanaInfo">1 SOL = 100,000 AMT</p>
<button type="button" id="buyButton">Buy Tokens</button>
</form>
<p id="balance" style="margin-top: 20px;">Your Token Balance: 0 asas</p>
</div>
<script>
const solanaPublicKey = 'KEYHERE'; // Your Solana wallet public key
const tokenRate = 100000; // 1 SOL = 100,000 AMT
let walletAddress = null;
let userBalance = 0;
async function connectWallet() {
if (window.solana && window.solana.isPhantom) {
try {
const response = await window.solana.connect();
walletAddress = response.publicKey.toString();
document.getElementById('status').textContent = `Status: Connected (${walletAddress})`;
document.getElementById('connect').style.display = 'none';
document.getElementById('disconnect').style.display = 'block';
document.getElementById('buyForm').style.display = 'block';
updateBalance();
} catch (error) {
alert('Connection failed: ' + error.message);
}
} else {
alert('Phantom wallet not detected. Please install it from https://phantom.app');
}
}
function disconnectWallet() {
walletAddress = null;
document.getElementById('status').textContent = 'Status: Not Connected';
document.getElementById('connect').style.display = 'block';
document.getElementById('disconnect').style.display = 'none';
document.getElementById('buyForm').style.display = 'none';
}
function updateBalance() {
document.getElementById('balance').textContent = `Your Token Balance: ${userBalance} AMT`;
}
async function buyTokens() {
const tokenAmount = parseInt(document.getElementById('tokenAmount').value);
if (isNaN(tokenAmount) || tokenAmount <= 0) {
alert('Please enter a valid number of tokens.');
return;
}
const solAmount = tokenAmount / tokenRate;
const connection = new solanaWeb3.Connection(solanaWeb3.clusterApiUrl('devnet'));
const transaction = new solanaWeb3.Transaction().add(
solanaWeb3.SystemProgram.transfer({
fromPubkey: new solanaWeb3.PublicKey(walletAddress),
toPubkey: new solanaWeb3.PublicKey(solanaPublicKey),
lamports: solanaWeb3.LAMPORTS_PER_SOL * solAmount,
})
);
try {
const signedTransaction = await window.solana.signTransaction(transaction);
const signature = await connection.sendRawTransaction(signedTransaction.serialize());
await connection.confirmTransaction(signature);
alert(`Transaction sent: ${signature}`);
userBalance += tokenAmount;
updateBalance();
} catch (error) {
alert('Transaction failed: ' + error.message);
}
}
document.getElementById('connect').addEventListener('click', connectWallet);
document.getElementById('disconnect').addEventListener('click', disconnectWallet);
document.getElementById('buyButton').addEventListener('click', buyTokens);
</script>
</body>
</html>
Can you please help on this?
