Hi,
Can you post your entire code?
Moralis.initialize(âchsq9Snf5cP87ThamdobAZBUhoyWIdFuX5RVsRIPâ);
Moralis.serverURL = "https://bspz2lfp1lyx.bigmoralis.com:2053/server";
let homepage = "http://127.0.0.1:5500/index.html";
if (Moralis.User.current() == null && window.location.href != homepage) {
document.querySelector('body').style.display = 'none';
window.location.href = "index.html";
console.log("Not so fast!");
}
login = async () => {
await Moralis.authenticate().then(async function (user) {
console.log("logged in");
user.set("name", document.getElementById('user-username').value);
user.set("email", document.getElementById('user-email').value);
await user.save();
window.location.href = "Dashboard.html"})}
logout = async () => {
await Moralis.User.logOut();
window.location.href = "index.html"};
if(document.querySelector('#btn-login') != null){
document.querySelector('#btn-login').onclick = login;}
if (document.querySelector('#btn-logout') != null){
document.querySelector('#btn-logout').onclick = logout;}`Preformatted text`
I mean entire HTML + javascript code that you would expect to work.
"<!doctype html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.88.1">
<title>Login Component</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="signin.css">
<link rel="stylesheet" href="style.css">
<img class="mb-4" src="CryptoSimplified Pic.png" alt="" width="92" height="67">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="user-username" placeholder="BigMan450?">
<label for="user-username">Username</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="user-email" placeholder="[email protected]">
<label for="user-email">Email address</label> </div>
<button id="btn-login" class="w-100 btn btn-lg btn-primary" type="submit">Sign In</button>
<p class="mt-5 mb-3 text-muted">© 2017â2021</p>
"Preformatted text
I donât see in this HTML something like:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>
I have a similar issue. Followed a Moralis tutorial for a dApp that signs a user in, signs with MetaMask then showcases userâs blockchain activity. The blockchain info (transactions, balances, etc) wonât populate, and Moralis admin doesnât show the username and email. Triple checked my code, have snippets, cdn, etc but I keep getting these errors
wasnât sure if this issue is related to the fact that I, too, have the warning âproperty web3api does not exist on typeof moralis ts(2339)â showing up in VSC
You have to add complete HTML and JS code to figure it out faster what would be the problem. You could be using an older version of Moralis SDK for example, latest one now is 0.0.45.
console.log('hello world');
// connection to Moralis Mainnet server
Moralis.initialize("UJurYwXbXkh4XU56MAPtPzKebxpzhiOc1YKtKrT6");
Moralis.serverURL = "https://ixnw6hipouw2.bigmoralis.com:2053/server";
// connect to Moralis Testnet server
// Moralis.initialize("bAS3EF7dwd0SosA18W6asFkHJoeg0LBMFZmcPK2p");
// Moralis.serverURL = "https://yhsppf8qokbr.grandmoralis.com:2053/server";
// TO DO : CHANGE WHEN LIVE
let homepage = "http://127.0.0.1:5500/index.html";
// logged in check
if (Moralis.User.current() == null && window.location.href != homepage) {
document.querySelector('body').style.display = 'none';
window.location.href = "index.html";
}
// login function
login = async () => {
await Moralis.Web3.authenticate().then(async function (user) {
console.log('logged in');
console.log(Moralis.User.current());
user.set("name", document.getElementById('user-username').value);
user.set("email", document.getElementById('user-email').value);
await user.save();
// TO DO : CHANGE ROUTING SOLUTION WHEN LIVE
window.location.href = "dashboard.html";
})
}
// logout function
logout = async () => {
await Moralis.User.logOut();
window.location.href = "index.html";
}
// transactions function
// TO DO : CHANGE TO MAINNET TRANSACTIONS WHEN LIVE
// const transactions = await Moralis.Web3API.account.getTransactions();
getTransactions = async () => {
console.log('get transactions clicked');
const options = { chain: "rinkeby", address: "0xefFA817fd5b838C06758D42CdC3132B9F1EdF917" };
// const options = { chain: "ropsten", address: "0x07F307118f7CAC1934B442a6dc933072B0bFFe38" };
const transactions = await Moralis.Web3API.account.getTransactions(options);
console.log(transactions);
// table variable
if (transactions.total > 0) {
let table = `
<table class="table">
<thead>
<tr>
<th scope="col">Transaction</th>
<th scope="col">Block Number</th>
<th scope="col">Age</th>
<th scope="col">Type</th>
<th scope="col">Fee</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody id="theTransactions">
</tbody>
</table>
`
document.querySelector('#tableOfTransactions').innerHTML = table;
// transactions array
transactions.result.forEach(t => {
let content = `
<tr>
<td><a href='https://rinkeby.etherscan.io/tx/${t.hash}' target="_blank" rel="noopener noreferrer">${t.hash}</a></td>
<td><a href='https://rinkeby.etherscan.io/block/${t.block_number}' target="_blank rel="noopener noreferrer">${t.block_number}</a></td>
// <td><a href='https://ropsten.etherscan.io/tx/${t.hash}' target="_blank" rel="noopener noreferrer">${t.hash}</a></td>
// <td><a href='https://ropsten.etherscan.io/block/${t.block_number}' target="_blank rel="noopener noreferrer">${t.block_number}</a></td>
<td">${millisecondstoTime(Date.parse(new Date()) - Date.parse(t.block_timestamp))}</td>
<td>${t.from_address == Moralis.user.current().get('ethAddress') ? 'Outgoing' : 'Incoming'}</td>
<td>${((t.gas * t.gas_price) / 1e18).toFixed(5)} ETH</td>
<td>${(t.value / 1e18).toFixed(5)} ETH</td>
</tr>
`
theTransactions.innerHTML += content;
})
}
}
// balances function
getBalances = async () => {
console.log('Get balances clicked');
// get BSC native balance for a given address
const ethBalance = await Moralis.Web3API.account.getNativeBalance();
const ropstenBalance = await Moralis.Web3API.account.getNativeBalance({ chain: "ropsten" });
const rinkebyBalance = await Moralis.Web3API.account.getNativeBalance({ chain: "rinkeby" });
console.log((ethBalance.balance / 1e18).toFixed(5) + " ETH");
console.log((ropstenBalance.balance / 1e18).toFixed(5) + " ETH");
console.log((rinkebyBalance.balance / 1e18).toFixed(5) + " ETH");
// multi-line string template literal
let content = document.querySelector('#userBalances').innerHTML = `
<table class="table">
<thead>
<tr>
<th scope="col">Chain</th>
<th scope="col">Balance</th>
</tr>
</thead>
<tbody>
<tr>
<th>Ether</th>
<td>${(ethBalance.balance / 1e18).toFixed(5)} ETH</td>
</tr>
<tr>
<th>Ropsten</th>
<td>${(ropstenBalance.balance / 1e18).toFixed(5)} ETH</td>
</tr>
<tr>
<th>Rinkeby</th>
<td>${(rinkebyBalance.balance / 1e18).toFixed(5)} ETH</td>
</tr>
</tbody>
</table>
`
}
// NFTs function
getNFTs = async () => {
console.log('get nfts clicked');
let nfts = await Moralis.Web3API.account.getNFTs({ chain: 'rinkeby' });
console.log(nfts);
let tableOfNFTs = document.querySelector('#tableOfNFTs');
if (nfts.result > 0) {
nfts.result.forEach(n => {
let metadata = JSON.parse(n.metadata);
let content = `
<div class="card col-md-3>
<img src="${fixURL(metadata.image_url)}" class="card-img-top" alt="..." height=300>
<div class="card-body">
<h5 class="card-title">${metadata.name}</h5>
<p class="card-text">${metadata.content}</p>
</div>
</div>
`
tableOfNFTs.innerHTML += content;
})
}
}
// NFT ipfs url conversion function
fixURL = (url) => {
if (url.startsWith("ipfs")) {
return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://").slice(-1)
}
else {
return url + "?format=json"
}
}
// timestamp function for table
// currenttime(ms) - blocktime(ms) = TIME IN MILLISECONDS
// millisecondstoTime(Date.parse(new Date()) - Date.parse(t.block_timestamp))
millisecondsToTime = (ms) => {
let minutes = (ms / Math.floor(1000 * 60));
let hours = (ms / Math.floor(1000 * 60 * 60));
let days = (ms / Math.floor(1000 * 60 * 60 * 24));
if (days < 1) {
if (hours < 1) {
if (minutes < 1) {
return `less than a minute ago`
} else return `${minutes} minute(s) ago`
} else return `${hours} hour(s) ago`
} else return `${days} day(s) ago`
}
// listeners
if (document.querySelector('#btn-login') != null) {
document.querySelector('#btn-login').onclick = login;
}
if (document.querySelector('#btn-logout') != null) {
document.querySelector('#btn-logout').onclick = logout;
}
if (document.querySelector('#get-transactions-link') != null) {
document.querySelector('#get-transactions-link').onclick = getTransactions;
}
if (document.querySelector('#get-balances-link') != null) {
document.querySelector('#get-balances-link').onclick = getBalances;
}
if (document.querySelector('#get-nfts-link') != null) {
document.querySelector('#get-nfts-link').onclick = getNFTs;
}
// get-transactions-link
// get-balances-link
// get-nfts-link```
first page html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Login Component</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/sign-in/">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="signin.css">
<link rel="stylesheet" href="style.css">
<!-- 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>
</head>
<body class="text-center">
<main class="form-signin">
<img class="mb-4" src="sailorMoon.png" alt="" width="375" height="285">
<h1 class="h3 mb-3 fw-normal">Please sign in</h1>
<div class="form-floating">
<input type="text" class="form-control" id="user-username" placeholder="Username">
<label for="user-username">Username</label>
</div>
<div class="form-floating">
<input type="email" class="form-control" id="user-email" placeholder="[email protected]">
<label for="user-email">Email address</label>
</div>
<button id="btn-login" class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">© 2021</p>
</main>
<script src="main.js"></script>
</body>
</html>
post sign in page html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<meta name="generator" content="Hugo 0.84.0">
<title>Dashboard</title>
<link rel="canonical" href="https://getbootstrap.com/docs/5.0/examples/dashboard/">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="dashboard.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<!-- 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>
</head>
<body>
<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Company name</a>
<button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<div class="navbar-nav">
<div class="nav-item text-nowrap">
<a id="btn-logout" class="nav-link px-3" href="#">Sign out</a>
</div>
</div>
</header>
<div class="container-fluid">
<div class="row">
<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky pt-3">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">
<span data-feather="home"></span>
Dashboard
</a>
</li>
<li id="get-transactions-link" class="nav-item">
<a class="nav-link" href="#">
Transactions
</a>
</li>
<li id="get-balances-link"class="nav-item">
<a class="nav-link" href="#">
Balances
</a>
</li>
<li id="get-nfts-link"class="nav-item">
<a class="nav-link" href="#">
NFTs
</a>
</li>
</ul>
</div>
</nav>
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<div
class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
</div>
<h2>Transactions</h2>
<div id="tableOfTransactions" class="table-responsive">
</div>
<h2>Balances</h2>
<div id="userBalances" class="table-responsive">
</div>
<h2>NFTs</h2>
<div id="tableOfNFTs" class="table-responsive d-flex flex-wrap">
</div>
</main>
</div>
</div>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/feather.min.js"
integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"
integrity="sha384-zNy6FEbO50N+Cg5wap8IKA4M/ZnLJgzc6w2NqACZaK0u0FXfOWRRJOnQtpZun8ha"
crossorigin="anonymous"></script>
<script src="dashboard.js"></script>
<script src="main.js"></script>
</body>
</html>```
Let me run your code and check it out. Give me some time.
I ran your code and the code seems to be working fine. I got authenticated and redirected to dashboard with links. Upon clicking âTransactionsâ, I was able to retrieve a response.
Most likely thereâs an issue with the initialisation. Try updating your server and please double check your App ID and server ID.
Response -
Payload -
Thank you. I updated the server, and checked again my server url and application id. I am still receiving the same errors
what is the exact error that you get now?
Ok, I tested and it looks like something is wrong with your server, as it works fine with my server but with yours it gets that error.
Can you check if this is your server info?:
Moralis.initialize("UJurYwXbXkh4XU56MAPtPzKebxpzhiOc1YKtKrT6");
Moralis.serverURL = "https://ixnw6hipouw2.bigmoralis.com:2053/server";
I see you have server https://yhsppf8qokbr.grandmoralis.com:2083 on your screens. So which one we should check?
yes, that is the correct server info
I get same error for:
Moralis.initialize("bAS3EF7dwd0SosA18W6asFkHJoeg0LBMFZmcPK2p");
Moralis.serverURL = "https://yhsppf8qokbr.grandmoralis.com:2053/server";