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

This project was bootstrapped with Create React App. You can find the most recent version of guide here.

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

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

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

1. Replace RIPPLED_HOST=s2.ripple.com with RIPPLED_HOST=s.altnet.rippletest.net in the .env file
2. Remove RIPPLED_SECONDARY from .env (optional, but the extra validator subscriptions are not necessary)
3. Add REACT_APP_ENVIRONMENT=testnet to .env to enable TESTNET banner

1. Replace RIPPLED_HOST=s2.ripple.com with RIPPLED_HOST=s.devnet.rippletest.net in the .env file
2. Remove RIPPLED_SECONDARY from .env (optional, but the extra validator subscriptions are not necessary)
3. Add REACT_APP_ENVIRONMENT=devnet to .env to enable TESTNET banner

• 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

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 ;)

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

1. US English (default)
2. Simplified Chinese
3. Japanese
4. Korean
5. Mexican Spanish
6. Brazilian Portuguese

• Most updated documentation for create-react-app
• Latest news in react blog
• React documentation
• How to think in react and break down components
• More details on packages and step by step tutorial

We load some polyfills conditionally because

1. React 16 depends on the collection types Map and Set, Doc
2. React also depends on requestAnimationFrame, Doc
3. We are using Intl to format our number and dates, Doc

The following polyfills has been loaded conditionally to support older browsers such as < IE11:

1. es6-promise
2. Intl.js
3. core-js
4. raf

Using require-ensure Webpack will create different chunk for these polyfills and they get loaded if user borwser don't support the feature needed.