XRPL Explorer

This repo contains the source code for the block explorer of the XRP Ledger hosted at livenet.xrpl.org.

This project uses Vite. You can find information about how to use it here.

Basic requirements

Install Node and NPM

The project requires node@18.12.x. Follow installation instructions on nodejs.org.

(Recommended) Install using nvm.

Make sure to use npm version 8+ by running npm install -g npm@latest after you install Node.

Google BigQuery Setup

This setup is required for the Tokens page of the explorer to function:

1. Select or create a Cloud Platform project.
2. Enable the Google BigQuery API.
3. Set up authentication with a service account

Once you have completed these steps and generated the JSON key file, you must populate the following environment variables in the .env file with their corresponding values from the JSON key file:

GOOGLE_APP_PROJECT_ID=your-project-id
GOOGLE_APP_PRIVATE_KEY=-----BEGIN PRIVATE KEY-----\n...
GOOGLE_APP_CLIENT_EMAIL=your-client-email

Copy example env

cp .env.example .env

Install, compile, and run

• npm install then
• npm start for development mode, or
• npm run build then npm run prod-server for production mode

Installing on Apple Silicon

Since canvas does not provide pre-built binaries for Apple chips during npm install it will try to compile it manually. To get this to succeed you need to install several dependencies by following the instructions here.

Running on Parallel Networks

Testnet mode

1. Replace VITE_RIPPLED_HOST=s2.ripple.com with VITE_RIPPLED_HOST=s.altnet.rippletest.net in the .env file
2. Add VITE_ENVIRONMENT=testnet to .env to enable TESTNET banner

Devnet mode

1. Replace VITE_RIPPLED_HOST=s2.ripple.com with VITE_RIPPLED_HOST=s.devnet.rippletest.net in the .env file
2. Add VITE_ENVIRONMENT=devnet to .env to enable TESTNET banner

Testing

Run unit tests

• Run tests in watch mode npm test
• Run test to produce coverage npm run test:coverage
• To open coverage HTML report in app root do open coverage/index.html

Debugging Unit Tests in Chrome

1. Place debugger; in your unit test
2. Do npm run test:debug
3. Open about:inspect in Chrome
4. Click on inspect link
5. Chrome Developer Tools will be open, click play button
6. Now test will start running and will stop on your debugger;
7. You know the rest ;)

Targeted view sizes

1. phone-only: 0px - 375px
2. tablet-portrait-up: 375px - 600px
3. tablet-landscape-up: 600px - 900px
4. desktop-up: 900px - 1200px
5. big-desktop-up: 1200px and up

Targeted languages

1. US English (default)
2. Spanish
3. French
4. Japanese
5. Korean

When updating translation entires or adding new languages consult the guide Translating.

Additional Documentation

• How to define transactions
• Routing

React Documentation

• Latest news in react blog
• React documentation
• How to think in react and break down components