Merge pull request #18 from MoralisWeb3/moralis-scan-ep09

Moralis scan ep09

moralis-scan/README.md

@@ -18,6 +18,8 @@
 
 [Part 8 - I Cloned Etherscan in 5 hours - Token Transactions](https://youtu.be/lzjMcjn6XCk)
 
+[Part 9 - I Cloned Etherscan in 5 hours - Token Balances](https://youtu.be/Xt4lxc2kEuw)
+
 # Getting Started with Create React App
 
 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

moralis-scan/src/components/AddressResults.css

@@ -0,0 +1,15 @@
+.nav .nav-link {
+  color: rgba(74,79,85,.8);
+  font-weight: 600;
+  padding: .75rem;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  transition: .3s;
+  margin-bottom: -1px;
+  margin-top: -1px;
+}
+
+.nav .nav-link.active {
+  border-bottom-color: #3498db;
+  color: #3498db;
+}

moralis-scan/src/components/AddressResults.jsx

@@ -7,6 +7,7 @@ import {
   useParams,
 } from "react-router-dom";
 import Transactions from './Transactions';
+import "./AddressResults.css";
 
 export default function AddressResults() {
   const {address} =  useParams();
@@ -34,6 +35,15 @@ export default function AddressResults() {
                   ERC20 Token Txns
                 </NavLink>
               </li>
+              <li className="nav-item">
+                <NavLink
+                  className="nav-link"
+                  activeClassName="active"
+                  to={`/address/${address}/tokenBalance`}
+                >
+                  Token Balances
+                </NavLink>
+              </li>
             </ul>
           </div>
           <div className="card-body">

moralis-scan/src/hooks/useTransType.js

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react"
 import { useParams } from "react-router";
+import { processTokenBalance } from "../queries/tokenBalance";
 import { processTokenTransfer } from "../queries/tokenTransfer";
 import { processTransaction } from "../queries/transactions";
 
@@ -29,6 +30,15 @@ const TransTypeOptions = {
     methodName: "getTokenTranfers",
     postProcess: processTokenTransfer,
   },
+  tokenBalance: {
+    cols: [
+      { colName: "Name", key: "name" },
+      { colName: "Balance", key: "balance" },
+    ],
+    methodName: "getTokenBalances",
+    postProcess: processTokenBalance,
+    // itemName: "tokens",
+  },
 };
 
 export const useTransType = () => {

moralis-scan/src/queries/cloud-queries.js

@@ -1,40 +1,40 @@
 import Moralis from "moralis";
 
-Moralis.Cloud.define("searchEthAddress", async function(request) {
-  const { address } = request.params
+Moralis.Cloud.define("searchEthAddress", async function (request) {
+  const { address } = request.params;
   if (!address) {
-    return null
+    return null;
   }
 
   // find out if address is already watched
   const query = new Moralis.Query("WatchedEthAddress");
-  query.equalTo("address", address)
+  query.equalTo("address", address);
   const watchCount = await query.count();
-  
+
   if (watchCount > 0) {
     // already watched don't sync again
     return null;
   }
-  
-  return Moralis.Cloud.run("watchEthAddress", {address});
+
+  return Moralis.Cloud.run("watchEthAddress", { address });
 });
 
-Moralis.Cloud.define("getTransactions", function(request) {
-  const {userAddress, pageSize, pageNum } = request.params;
+Moralis.Cloud.define("getTransactions", function (request) {
+  const { userAddress, pageSize, pageNum } = request.params;
   const offset = (pageNum - 1) * pageSize;
-  
+
   const query = new Moralis.Query("EthTransactions");
   query.equalTo("from_address", userAddress);
   query.descending("block_number");
   query.withCount();
-  query.skip(offset)
+  query.skip(offset);
   query.limit(pageSize);
 
   return query.find();
 });
 
 Moralis.Cloud.define("getTokenTranfers", async (request) => {
-  const {userAddress, pageSize, pageNum } = request.params;
+  const { userAddress, pageSize, pageNum } = request.params;
   const offset = (pageNum - 1) * pageSize;
   const output = {
     results: [],
@@ -87,3 +87,44 @@ Moralis.Cloud.define("getTokenTranfers", async (request) => {
   output.results = await query.aggregate(lookupPipeline);
   return output;
 });
+
+Moralis.Cloud.define("getTokenBalances", async (request) => {
+  const { userAddress, pageSize, pageNum } = request.params;
+  const offset = (pageNum - 1) * pageSize;
+
+  // count results
+  const query = new Moralis.Query("EthTokenBalance");
+  const matchPipeline = {
+    match: {
+      address: userAddress,
+      contract_type: "ERC20",
+      balance: { $ne: "0" },
+    },
+  };
+  const countPipeline = { ...matchPipeline, count: "count" };
+  const countResult = await query.aggregate(countPipeline);
+
+  // get page
+  const pagePipeline = {
+    ...matchPipeline,
+    addFields: {
+      adjBal: {
+        $divide: [
+          { $toDouble: "$balance" },
+          { $pow: [10, { $toDouble: "$decimals" }] },
+        ],
+      },
+    },
+    sort: { adjBal: -1 },
+    skip: offset,
+    limit: pageSize,
+  };
+  const pageResults = await query.aggregate(pagePipeline);
+
+  const output = {
+    results: pageResults,
+    count: countResult[0].count,
+  };
+
+  return output;
+});

moralis-scan/src/queries/tokenBalance.js

@@ -0,0 +1,8 @@
+import { tokenValueTxt } from "./utils";
+
+export const processTokenBalance = (t) => ({
+  name: `${t.name} (${t.symbol})`,
+  symbol: t.symbol,
+  decimals: t.decimals,
+  balance: tokenValueTxt(t.balance, t.decimals, t.symbol),
+});