#Buidl Ethereum dApp activity feed in a few lines of code!— Tutorial

Published in

amberdata

4 min readApr 26, 2019

Developing for Ethereum shouldn’t be complicated. Get your dApp to production fast, with Amberdata.io. Let’s walk through the process of building a simple Ethereum dApp that lets users get detailed a activity list about an account.

TLDR; It’s super simple to integrate Amberdata API’s into your dApp → check out the demo to see it in action!

Tutorial: Get details & latest activity for an address

We’re going to build a simple dApp utilizing quite a few of our endpoints:

Address Metadata — Metadata about an address
Address Transactions — Historical transactions for an account
Address Functions — Internal messages sent from or received by the address
Address Logs — Any logs outputted by a contract
Contract Functions — Contract function names and signatures from abi

What is this used for?

Quickly get historical activity about any account or contract
Determine contract or address types
Simple dApp integration
No need to run a geth or parity node!

Tutorial: Overview

Let’s get started in a few steps:

0. Get a free Amberdata API key, to make calls to gas data endpoints
1. Call the first endpoint: Address Metadata (to determine address type)
2. Call the next 3 endpoints: Address Transactions, Address Logs, Address Functions
3. Call the last endpoint (only for contracts): Contract Functions

Step 0: Get a Free Amberdata API Key

Go to Amberdata.io, and click “Get Started” to get a Free Developer API Key. You will need this to access the data in the next steps.

Step 1: Get the Address Type

Using Axios & Amberdata API it is easy to request an Ethereum address metadata. See the following snippet:

Let’s look at the fields we are interested in…

firstSeen — This is the time when the address first appeared on the network.
type — Is it an Externally Owned Account (EOA) or a Contract? (For the purposes of this tutorial this is the field in which we are most interested.)

We’ll display the time when the address was first seen on the network in our UI. The type will be used to determine whether or not to get the Contract Functions later on in the code.

Step 2: Get Address Transactions, Logs, and Functions

There’s two ways to accomplish this: Make 3 individual requests or we can use Javascript’s Promise.all() like a boss 😎 and take full advantage of parallel requests!

You can view the complete responses in our API Docs! But for now I’ll highlight the key data fields we need for this example.

Transactions

We need to get the hash and value from the response:

{
"hash":"0x81ccfbab5d3bdacee89ae19c7691005bc02bf7ba0a20aec20f8bc8ca5c441872",
"value": "0",
  ...
}

Logs

For logs, we are looking for the topics and transactionHash fields:

{
"transactionHash":"0x3c0abea77f9324b565696e51a6e7109a10fe320e985963b869105ce6e8db20f7",
"topics": [
"0x241ea03ca20251805084d27d4440371c34a0b85ff108f6bb5611248f73818b80
],
  ...
}

Functions

With functions, we want the transactionHash and the input fields:

{
"input":"0x88c2a0bf0000000000000000000000000000000000000000000000000000000000156aba",
"transactionHash":"0x63e10d5ce03fce3116a19a4d8c1869fd53630f8ff9d8fb16790200af965ba0c2",
...
}

Step 3: Get Contract Functions (Conditionally)

In the first step we determine the type of the address. If it is a contract then we want to match the full hexadecimal signatures of the function with the human readable name.

Turning this 0xa9059cbb0000000000000000000000000a23...

…into this: transfer(address,uint...

That’s how we are able to display the method name like so: