hello everyone.
i decided too make new post with this issue. as my other issue is solved. im in the javascript dex tutoriol and my swap button is not working like in the video this is my code up too this point
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Moralis SDK code -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis@latest/dist/moralis.js"></script>
<title>Moralis Dex </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>MoralisSwap</h1>
<button id="btn-login">Moralis Login</button>
<button id="btn-buycrypto">Buy Crypto</button>
<button id="btn-logout">Logout</button>
<table>
<thead>
<tr>
<th>#</th>
<th>Symbol</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody class ="js-token-balances"></tbody>
</table>
<form action="#" method="POST" class="exchange-form">
<div class="form-row">
<label>
<span class ="js-from-token"></span>
Amount:
<input type ="text" name="from-amount" class="js-from-amount" disabled />
</label>
<div class="js-amount-error error"></div>
</div>
<div class="form-row">
<button type="submit" class="js-submit" disabled > Get Qoute</button>
<button class="js-cancel" disabled > Cancel</button>
</div>
<div class="js-qoute-container"></div>
</form>
<script src="./dex.js"></script>
</body>
</html>
// connect to Moralis server
const serverUrl = "https://hzgprsd3s1da.usemoralis.com:2053/server";
const appId = "YwMvfUyGm50mRIrKsXsWCwlkPjQxji5zCuVNP3xe";
Moralis.start({ serverUrl, appId });
Moralis
.initPlugins()
.then ( () => console.log ('plugins have been initialized ') );
const $tokenBalanceTBody = document.querySelector('.js-token-balances');
const $selectedToken =document.querySelector('js-from-token');
const $amountInput= document.querySelector('.js-from-amount');
//Converting from wei using custom function
const tokenValue = (value, decimals) => (decimals ? value / Math.pow(10, decimals): value);
// add from here down
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate();
}
console.log("logged in user:", user);
}
async function getStats() {
const balances = await Moralis.Web3API.account.getTokenBalances({
chain: "polygon",
address:"0x0D0707963952f2fBA59dD06f2b425ace40b492Fe"
});
console.log(balances);
document.querySelector(".js-token-balances").innerHTML += balances
.map(
(token, index) => `
<tr>
<td> ${index + 1}</td>
<td> ${token.symbol}</td>
<td> ${token.amount}</td>
<td> ${Moralis.Units.FromWei(token.balance, token.decimals)}</td>
<td>
<button
class="js-initSwapForm"
data-address="${token.token_address}"
data-symbol="${token.symbol}"
data-decimals="${token.decimals}"
data-max="${tokenValue(token.balance, token.decimals)}"
>
Swap
</button>
</td>
</tr>`
)
.join("");
}
async function initSwapForm (event) {
event.preventDefault();
$selectedToken.innerText = event.target.dataset.symbol;
$selectedToken.dataset.address = event.target.dataset.address;
$selectedToken.dataset.decimals = event.target.dataset.decimals;
$selectedToken.dataset.max = event.target.dataset.max;
$amountInput.removeAttribute('disabled');
$amountInput.value = '';
document.querySelector('.js-submit').removeAttribute('disabled');
document.querySelector('.js-cancel').removeAttribute('disabled');
document.querySelector('.js-qoute.container').innerHTML = '';
}
for ( let $btn of $tokenBalanceTBody.querySelectorAll('js-initSwapForm')) {
$btn.addEventListener('click',swap);
}
async function buycrypto () {
Moralis.Plugins.fiat.buy ();
}
async function logOut() {
await Moralis.User.logOut();
console.log("logged out");
}
document.getElementById("btn-login").onclick = login;
document.getElementById("btn-buycrypto").onclick =buycrypto;
document.getElementById("btn-logout").onclick = logOut;
async function getTop10tokens() {
const response = await fetch(" https://api.coinpaprika.com/v1/coins ");
const tokens = await response.json();
let result = tokens
.filter((token) => token.rank <= 10)
.map((token) => token.symbol);
return result;
}
async function gettickerdata(top10Tokens) {
const response = await fetch("https://api.1inch.exchange/v3.0/137/tokens");
const tokens = await response.json();
const tokenlist = Object.values(tokens.tokens);
return tokenlist.filter((token) => top10Tokens.includes(token.symbol));
}
getTop10tokens()
.then((top10Tokens) => gettickerdata(top10Tokens))
.then(console.log);
getStats();
.error {
color: darkred;
}
does anyone have any suggestions too how too fix this?
