peaq
Search…
peaqScan
peaqScan Documentation

Overview

This document provides technical supporting documentation for peaqScan. It covers peaqScan architecture, code structure, data sources, and functionality. It should help anyone understand how the software is built and how it works. It should also be a living document that gets updated as development progresses on the project.

Introduction

peaqScan is a blockchain explorer. It is used to visualize blockchain data from the Agung network. It can also be used for any other substrate-based network like Polkadot, etc.

Architecture

peaqScan was bootstrapped with Create React App (CRA) to leverage the component-based architecture and reaction to app state with hooks. The freedom to structure the application rather than be restricted to a particular pattern was also a consideration.

Technologies

The following technologies have been used in different parts of the application:
● Application - React (Hooks and functional components)
● Global state management - Redux, Redux Toolkit
● Routing - React Router
● Jest and React Testing Library for testing
● Testing - Jest, React Testing Library
● Styles - Global CSS definitions
● Data pipeline - PolkadotJS API, Subsquid

Functionality

The application reads chain data from a specified network address and displays it in a way that makes it easy to know what is happening on the network at any time. The data obtained can be divided into two groups according to age. These include real time and historical chain data, which are obtained via a hybrid data fetching strategy.
Real time chain data is fetched directly from the network using the PolkadotJS API. It includes information like chain height, number of finalised blocks, latest blocks, latest transfers, total issuance, etc. This kind of data is displayed on the home and latest blocks screens of the app.
Historical chain data such as lists of events, transfers, extrinsics, etc, are fetched from our data aggregation infrastructure at subSquid. subsQuid provides an aggregation service that pulls data from the chain and stores them in a searchable database enabling fast searches, filters and list pagination using GraphQL APIs.
Hybrid data fetching strategy - Arrows show direction of data flow
All our list pages including extrinsics, events and transfers fetch data either from our subsquid Archive or Squid Processor. An archive is software that gathers historical blockchain data, converting it into something that is easy for Squids to digest, while a Processor (or Squid) is a specialised program that looks through archives in order to process the exact information applications need.
Transfers for instance, are special event types and we aggregate them in our Squid. Events on the other hand are general form and so fetched from the archive. A present challenge with the above arrangement is that the squid provides a full options GraphQL API including cursor pagination, page-count etc, while the archive does not.
Home screen: displays the snapshot, latest blocks, recent transfers and validators components.
latest blocks and recent transfers
Blocks screen: lists blocks on the chain as they are produced. It is more a latest blocks screen.
Blocks
Block details: displays details about a specific block including a tabular list of extrinsics, events and logs on the block.
Block Details
Extrinsics screen: lists extrinsics on the chain. It includes a history chart that displays the number of times extrinsics were created in the last one hour, six hours and one day. It also has a filter that enables listing extrinsics by block number, created date and module.
Extrinsics Graph
Extrinsics details: displays details about a specific extrinsic.
Extrinsics details:
Transfers screen: lists transfers that have occurred on the chain. It includes a chart that shows how many transfers occurred in the last one hour, six hours and one day.
Transfers screen
Last modified 30d ago