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.html
1
<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>
97
​
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."

🎓Guides - Previous

Build a Simple dApp in 3 Mins - Real-Time Transactions (Part 4)

Next - 🎓Guides

Deploy and Track ERC-20 Events

Last modified 1mo ago

Copy link

Contents

Average Gas Price

Create Cloud Function

Calling the Cloud Function