the tokens are also undefined. so i guess i have more problems as well
<!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-frorm-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</td>
</tr>`
)
.join("");
}
async function swap (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-swap')) {
$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;
}
this is everything ive done up too this point
