Explorer UI
Explorer UI is a client-sided Angular based application that utilizes PolkADAPT and its Adapters to obtain data from multiple data sources. Its design is based on flat Material component design, styled in Polkascan branding.
Clone with submodules!
Use the following command to clone this repository and polkadapt
submodule:
git clone --recurse-submodules <repository_url>
If you already cloned this repository, but without submodules, then you still need to initialize the submodules:
git submodule init
git submodule update
You need the submodule to build and run this application.
Configuration file
You will need to add a file named config.json
in src/assets/
. This file contains configuration per network for the used PolkADAPT adapters.
The order in which the networks are shown in the UI is also based on this configuration. It is advised to add multiple endpoints for fallback and custom switching capabilities.
{
"polkadot": {
"substrateRpcUrlArray": ["wss://rpc.polkadot.io"],
"explorerWsUrlArray": ["wss://mycustomnode.io/polkadot"]
},
"kusama": {
"substrateRpcUrlArray": ["wss://kusama-rpc.polkadot.io", "wss://other-kusama-node.io"],
"explorerWsUrlArray": ["wss://mycustomnode.io/kusama"]
}
}
Build and run with Docker
If you want a quick and easy way to run the application, you can build a Docker image with the included Dockerfile. In a shell, from this project's directory, run the following command to build the Docker image:
docker build -t explorer-ui .
To run the image and start a local webserver with the application:
docker run --rm -p 8000:80 explorer-ui
You can now open your web browser and navigate to http://localhost:8000/
to visit the application.
You can also use the hosted Docker image at Docker Hub, you only need to map a volume to overwrite the config.json
in the container:
docker run --rm -it -p 80:80 -v /path/to/your/src/assets/config.json:/usr/share/nginx/html/assets/config.json polkascan/explorer-ui
Build manually
These are the instructions for a manual build. It is advised to use the latest Node LTS. Or at least the node version asked by Angular or Polkadot JS:
You need to install and build polkadapt
before you install and build the application:
cd polkadapt
npm i
npm run build
cd ..
npm i
npm run build
The build artifacts will be stored in the dist/
directory.
Development server
For a dev server, open a terminal and run:
cd polkadapt
npm i
npm run build
When making changes in polkadapt
source files you have to build again.
Now open a second terminal and run:
npm i
npm run start
Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.