Thanks a lot for the reply!!
I have just added that in my js file. But it still has no small window popping up to login. And now it shows a different error. It said “Uncaught SyntaxError: Unexpected token ‘<’”. I can’t find which “<” is redundant. Below is my screenshot:
Below are my codes:
js
// connect to Moralis server
const serverUrl = "https://j9tck2jtuezz.usemoralis.com:2053/server";
const appId = "YqqTSiKo1qxsHpSngDUrJX1l4VtsqgEXrTp7JYRM";
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');
/**Utilities */
//Converting from Wei using custom function
const tokenValue = (value, decimals) =>
(decimals ? value / Math.pow(10, decimals) : value);
/** Login-logout and initialization*/
// add from here down
async function login() {
let user = Moralis.User.current();
if (!user) {
user = await Moralis.authenticate();
}
console.log("logged in user:", user);
getStats();
}
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-quote-container').innerHTML = '';
document.querySelector('.js-amount-error').innerText = '';
}
async function getStats() {
const balances = await Moralis.Web3API.account.getTokenBalances({chain: 'polygon'});
console.log(balances);
$tokenBalanceTBody.innerHTML = balances.map( (token, index) =>
<tr>
<td>${index + 1}</td>
<td>${token.symbol}</td>
<td>${tokenValue(token.balance, token.decimals)}</td>
<td>
<button
class="js-swap btn btn-success"
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('');
for (let $btn of $tokenBalanceTBody.querySelectorAll('.js-swap')) {
$btn.addEventListener('click', initSwapForm);
}
}
async function buyCrypto() {
Moralis.Plugins.fiat.buy();
}
async function logout() {
await Moralis.User.logOut();
console.log("logged out");
}
document.getElementById("btn-login").addEventListener('click', login);
document
.getElementById("btn-buy-crypto")
.addEventListener('click', buyCrypto);
document.getElementById("btn-logout").addEventListener('click', logout);
/** Quote / Swap */
async function formSubmitted(event) {
event.preventDefault();
const fromAmount = Number.parseFloat( $amountInput.value );
const fromMaxValue = Number.parseFloat( $selectedToken.dataset.max );
debugger;
if (Number.isNaN(fromAmount) || fromAmount > fromMaxValue) {
//invalid input
document.querySelector('.js-amount-error').innerText = 'Invalid amount';
return;
} else {
document.querySelector('.js-amount-error').innerText = '';
}
// Submission of the quote request
const fromDecimals = $selectedToken.dataset.decimals;
const fromTokenAddress = $selectedToken.dataset.address;
const [toTokenAddress, toDecimals] = document.querySelector('[name=to-token]').value.split('-');
try {
const quote = await Moralis.Plugins.oneInch.quote({
chain: 'polygon', // The blockchain you want to use (eth/bsc/polygon)
fromTokenAddress: fromTokenAddress, // The token you want to swap
toTokenAddress: toTokenAddress, // The token you want to receive
amount: Moralis.Units.Token(fromAmount, fromDecimals).toString(),
});
const toAmount = tokenValue(quote.toTokenAmount, toDecimals);
document.querySelector('.js-quote-container').innerHTML =
<p>
${fromAmount} ${quote.fromToken.Symbol} =
${toAmount} ${quote.toToken.Symbol}
</p>
<p>
Gas fee: ${quote.estimatedGas}
</p>
<button class="btn btn-success">Perform swap</button>
;
} catch(e) {
document.querySelector('.js-quote-container').innerHTML =
<p class="error">The conversion didn't succeed.</p>
;
}
}
async function formCanceled(event) {
event.preventDefault();
document.querySelector('.js-submit').setAttribute('disabled', '');
document.querySelector('.js-cancel').setAttribute('disabled', '');
$amountInput.value = '';
$amountInput.setAttribute('disabled', '');
delete $selectedToken.dataset.address;
delete $selectedToken.dataset.decimals;
delete $selectedToken.dataset.max;
document.querySelector('.js-quote-container').innerHTML = '';
document.querySelector('.js-amount-error').innerText = '';
}
document.querySelector('.js-submit').addEventListener('click', formSubmitted);
document.querySelector('.js-cancel').addEventListener('click', formCanceled);
/** To token dropdown preparation*/
async function getTop10Tokens() {
const response = await fetch('https://api.coinpaprika.com/v1/coins');
const tokens = await response.json();
return tokens
.filter(token => token.rank >= 1 && token.rank <= 30)
.map(token => token.symbol);
}
async function getTickerData(tickerList) {
const tokens = await Moralis.Plugins.oneInch.getSupportedTokens({
chain: 'polgygon', // The blockchain you want to use (eth/bsc/polygon)
});
const tokenList = Object.values(tokens.tokens);
return tokenList.filter(token => tickerList.includes(token.symbol));
}
function renderTokenDropdown() {
const options = tokens.map(token =>
<option value="${token.address}-${token.decimals}">
${token.name}
</option>
).join('');
document.querySelector('[name-to-token]').innerHTML = options;
}
getTop10Tokens()
.then(getTickerData)
.then(renderTokenDropdown);
HTML
<!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">
<title>Moralis DEX</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<h1>MoralisSwap</h1>
</div>
<div class="col-12 col-md-6 d-flex align-items-center justify-content-md-center">
<button class="btn btn-success btn-sm" id="btn-login">Moralis Login</button>
<button class="btn btn-success btn-sm" id="btn-buy-crypto">Buy Crypto</button>
<button class="btn btn-danger btn-sm" id="btn-logout">Logout</button>
</div>
</div>
<table class="table table-dark table-striped">
<thread>
<tr>
<th>#</th>
<th>Symbol</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thread>
<tbody class="js-token-balances"></tbody>
</table>
<form action="#" method="POST" class="exchange-form">
<div class="row">
<div class="col-12 col-md-6 mb-2">
<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="col-12 col-md-6">
<label>
Swap to:
<select name="to-token"></select>
</label>
</div>
</div>
<div class="row">
<div class="col">
<button type="submit" class="js-submit btn btn-success btn-sm" disabled>Get Quote</button>
<button class="js-cancel btn btn-warning btn-sm" disabled>Cancel</button>
</div>
</div>
<div class="js-quote-container"></div>
</form>
</div>
<!-- Moralis SDK code -->
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="./dex.js"></script>
<script>
// connect to Moralis server
const serverUrl = "https://j9tck2jtuezz.usemoralis.com:2053/server";
const appId = "YqqTSiKo1qxsHpSngDUrJX1l4VtsqgEXrTp7JYRM";
Moralis.start({ serverUrl, appId, });
</script>
</body>
</html>
CSS
.error {
color: darkred
}
body {
background-color: black;
color: whitesmoke;
}
.btn-sm {
margin: 8px;
}
Also, in my JS. I don’t know why it underlines line 119-125, which has the code below:
<p>
${fromAmount} ${quote.fromToken.Symbol} =
${toAmount} ${quote.toToken.Symbol}
</p>
<p>
Gas fee: ${quote.estimatedGas}
</p>
<button class="btn btn-success">Perform swap</button>
May I know why please?
Below is the photo showing the codes being underlined.
I would appreciate your help!!
