🧙
Platform
🔥
Speedy Nodes
👨🍳 Tutorials
🎓Guides
Build a Simple dApp in 3 Mins - Cloud Functions (Part 5)
Build Your First Moralis dApp! This Guide Series Covers the Basics and How to Get Started Fast. In Part Five, We Finish Our dApp by Creating a Cloud Function to Calculate Average Gas Prices.
Average Gas Price
To calculate average gas prices for our users, we need to create a cloud function on the Moralis Server and then call that function from our dApp.
Create Cloud Function
Go to your Moralis Server instance and click the "Cloud Functions" button. Paste in the following code:
1
Moralis.Cloud.define("getAvgGas", async function (request) {
2
const query = new Moralis.Query("EthTransactions");
3
const pipeline = [
4
{
5
group: {
6
// group by "from_address"
7
objectId: "$from_address",
8
// add computed property avgGas
9
// get average and convert wei to gwei
10
avgGas: { $avg: { $divide: ["$gas_price", 1000000000] } },
11
},
12
},
13
{ sort: { avgGas: -1 } }, // sort by avgGas high to low
14
{ limit: 10 }, // only return top 10 results
15
];
16
17
// the master key is required for aggregate queries
18
const results = await query.aggregate(pipeline, { useMasterKey: true });
19
return results;
20
});
Copied!
Calling the Cloud Function
A cloud function can be called with
Moralis.Cloud.run(name, args) . Our cloud function does not have any arguments so we can leave that blank.1
async function getAverageGasPrices() {
2
const results = await Moralis.Cloud.run("getAvgGas");
3
console.log("average user gas prices:", results);
4
}
Copied!
Modify the
getStats() function to call getAverageGasPrices().1
function getStats() {
2
const user = Moralis.User.current();
3
if (user) {
4
getUserTransactions(user);
5
}
6
getAverageGasPrices();
7
}
Copied!
After these changes, the results will look something like this:
Displaying Gas Price
All that's left is to render the top list on the page. We can do this with a bit of dynamic HTML. First, add an unordered list tag below the buttons.
1
<ul id="gas-stats"></ul>
Copied!
Next, create a new function to loop through the cloud query results and add the list items to the list.
1
function renderGasStats(data) {
2
const container = document.getElementById("gas-stats");
3
container.innerHTML = data
4
.map(function (row, rank) {
5
return `<li>#${rank + 1}: ${Math.round(row.avgGas)} gwei</li>`;
6
})
7
.join("");
8
}
Copied!
Then call the
renderGasStats() function after getting the results back from the cloud query.1
async function getAverageGasPrices() {
2
const results = await Moralis.Cloud.run("getAvgGas");
3
console.log("average user gas prices:", results);
4
5
// ** add this **
6
renderGasStats(results);
7
}
Copied!
Final Results
The final results will look something like this after several users have logged in. The
Refresh Stats button can be clicked to update the list.
Completed Code
index.html1
<html>
2
<head>
3
<!-- Moralis SDK code -->
4
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>
5
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
6
</head>
7
<body>
8
<h1>Moralis Gas Stats</h1>
9
10
<button id="btn-login">Moralis Login</button>
11
<button id="btn-logout">Logout</button>
12
<button id="btn-get-stats">Refresh Stats</button>
13
14
<!-- stats will go here -->
15
<ul id="gas-stats"></ul>
16
17
<script>
18
// connect to Moralis server
19
const serverUrl = "https://9c8nrl6lfq8u.moralis.io:2053/server";
20
const appId = "TCDv7lnGwNN7RIhlj30wA69dnaamxtsmqcTnm3ch";
21
Moralis.start({ serverUrl, appId });
22
23
// LOG IN WITH METAMASK
24
async function login() {
25
let user = Moralis.User.current();
26
if (!user) {
27
user = await Moralis.authenticate();
28
}
29
console.log("logged in user:", user);
30
getStats();
31
}
32
33
// LOG OUT
34
async function logOut() {
35
await Moralis.User.logOut();
36
console.log("logged out");
37
}
38
39
// bind button click handlers
40
document.getElementById("btn-login").onclick = login;
41
document.getElementById("btn-logout").onclick = logOut;
42
document.getElementById("btn-get-stats").onclick = getStats;
43
44
// refresh stats
45
function getStats() {
46
const user = Moralis.User.current();
47
if (user) {
48
getUserTransactions(user);
49
}
50
getAverageGasPrices();
51
}
52
53
// HISTORICAL TRANSACTIONS
54
async function getUserTransactions(user) {
55
// create query
56
const query = new Moralis.Query("EthTransactions");
57
query.equalTo("from_address", user.get("ethAddress"));
58
59
// subscribe to query updates
60
const subscription = await query.subscribe();
61
handleNewTransaction(subscription);
62
63
// run query
64
const results = await query.find();
65
console.log("user transactions:", results);
66
}
67
68
// REAL-TIME TRANSACTIONS
69
async function handleNewTransaction(subscription) {
70
// log each new transaction
71
subscription.on("create", function (data) {
72
console.log("new transaction: ", data);
73
});
74
}
75
76
// CLOUD FUNCTION
77
async function getAverageGasPrices() {
78
const results = await Moralis.Cloud.run("getAvgGas");
79
console.log("average user gas prices:", results);
80
renderGasStats(results);
81
}
82
83
function renderGasStats(data) {
84
const container = document.getElementById("gas-stats");
85
container.innerHTML = data
86
.map(function (row, rank) {
87
return `<li>#${rank + 1}: ${Math.round(row.avgGas)} gwei</li>`;
88
})
89
.join("");
90
}
91
92
//get stats on page load
93
getStats();
94
</script>
95
</body>
96
</html>
Copied!
On the Moralis Server in the cloud code section:
1
Moralis.Cloud.define("getAvgGas", async function (request) {
2
const query = new Moralis.Query("EthTransactions");
3
const pipeline = [
4
{
5
group: {
6
// group by "from_address"
7
objectId: "$from_address",
8
// add computed property avgGas
9
// get average and convert wei to gwei
10
avgGas: { $avg: { $divide: ["$gas_price", 1000000000] } },
11
},
12
},
13
{ sort: { avgGas: -1 } }, // sort by avgGas high to low
14
{ limit: 10 }, // only return top 10 results
15
];
16
17
// the master key is required for aggregate queries
18
const results = await query.aggregate(pipeline, { useMasterKey: true });
19
return results;
20
});
Copied!
Legendary!
Wow, you finished! Congratulations on building your first Moralis dApp. You are a DeFi legend!
🏁 This is the Finish Line 🏁
Pumped and want more? What's next? Check out all our tutorials on the Moralis Web3 Youtube channel! The next guide below called "Deploy and Track ERC20 Events" is a more advanced tutorial so we suggest checking out other "Basics" tutorials on the Youtube channel first, such as "Learning Solidity Basics" and "Moralis Basics."