Subspace block explorer frontend

Block explorer frontend that uses the Subsquid API to get the network information and display it for easy user interaction.

Table of content

The application is built with Next.js, React.js, Tailwind CSS and TypeScript. Follow these steps to set up your local development environment:

git clone git@github.com:autonomys/astral.git
cd astral/explorer

If you use nvm to manage Node.js versions, ensure you're using the stable channel:

nvm use stable

yarn install

Copy the .env.sample file to .env and update it with the necessary environment variables, especially the Subsquid GraphQL API URL:

cp .env.sample .env

Then edit the .env file with your favorite editor

yarn dev

The server will run at http://localhost:3000.

You will need to have the Subsquid GraphQL API URL to connect to the backend.

To create a production build, execute the following command:

yarn build

This will compile the project into an optimized build ready for deployment.

The table below lists the environment variables required for the project, which are set in the .env file.

Variables	Required	Default Value or Description
`REACT_APP_PUBLIC_URL`	yes	`/`
`REACT_APP_RPC_URL`	yes	`wss://rpc-0.<chainName>.subspace.network/ws`

`REACT_APP_MOCK_WALLET`	no	Set to `true` if you want to mock a specific connected wallet to ease development
`REACT_APP_MOCK_WALLET_ADDRESS`	no	Set the wallet address (Subspace format) to mock
`REACT_APP_MOCK_WALLET_SOURCE`	no	Set the source (wallet extension) to mock