Skip to content
This repository has been archived by the owner on Dec 10, 2024. It is now read-only.

cardano-foundation/cf-explorer-frontend

Folders and files

NameName
Last commit message
Last commit date

Latest commit

cc956e5 · Nov 15, 2024
Oct 30, 2024
Aug 3, 2023
Aug 5, 2023
Jan 5, 2024
Dec 19, 2023
Mar 21, 2024
Oct 28, 2024
Dec 19, 2023
Nov 15, 2024
Oct 5, 2023
Aug 19, 2024
Nov 17, 2022
Jan 25, 2024
Mar 1, 2024
Oct 11, 2023
Aug 19, 2024
Mar 1, 2024
May 31, 2023
Oct 15, 2024
Jun 27, 2023
Jun 27, 2023
Mar 1, 2024
Apr 28, 2023
Jun 29, 2023
Mar 13, 2023
Aug 19, 2024
Feb 16, 2024
Aug 8, 2023
Dec 26, 2023
Aug 20, 2024
Jan 3, 2024
Jun 7, 2024
Aug 28, 2024
Jan 11, 2024
Aug 12, 2024
Nov 15, 2024
Nov 15, 2024
Oct 1, 2024
Dec 19, 2023
Nov 18, 2022
Sep 29, 2023
Aug 19, 2024
Jan 10, 2024
Jan 10, 2024
Sep 20, 2024

Repository files navigation

Explorer Frontend

Tests Release Publish FOSSA Status conventionalcommits

This repository houses the frontend component of Explorer. Developed with TypeScript, React.js, and mui, it showcases a user-friendly interface that presents the Cardano blockchain data collected and aggregated by LedgerSync.

👉 Check the Explorer repository to understand how the microservices work together

Prerequisites

In order to build and run everything you will need:

  • Node version: ^v14.19.0 (^v16.16.0 recommended)
  • npm: ^6.14.17

Install and run

Install the app with npm (it's work well with yarn but we using npm in here):

Step 1: Install packages Open terminal and run commad: npm install

Step 2: Create .env file from .env.example In the terminal run command: cp .env.example .env

Step 3 Update env variables:

  • Update port for application.

    Example: PORT=3000

  • Update API URL for explorer service.

    Example: REACT_APP_API_URL=http://localhost:8080

  • Update WebSocket URL for real-time expolorer service.

    Example: REACT_APP_WS_URL=ws://localhost:8080/ws

  • Update API URL for authentication service.

    Example: REACT_APP_AUTH_API_URL=http://localhost:8081

  • Update APP URL for other network. Example:

    REACT_APP_TESTNET_APP_URL=http://localhost:3000
    REACT_APP_PREVIEW_APP_URL=http://localhost:3001
    REACT_APP_PREPROD_APP_URL=http://localhost:3002
    REACT_APP_MAINNET_APP_URL=http://localhost:3003
    
  • Update Jira Embedded Key to Add Jira Support Widget to explorer

    Example: REACT_APP_JSD_WIDGET_KEY=xxx

  • Update link to the cardano price

    Example: REACT_APP_EXT_ADA_PRICE_URL=https://www.coingecko.com/en/coins/cardano

  • Update link to the cardano news

    Example: REACT_APP_CARDANO_NEWS_URL=https://cardanofoundation.org/en/news

  • Update application network (mainnet, preprod or preview)

    Example: REACT_APP_NETWORK=mainnet

  • Configure supported network names (mainnet, preprod or preview)

    Example: REACT_APP_NETWORK_NAMES="{"mainnet":"Mainnet","preprod":"Preprod", ...}"

  • Update link takes the name of Bolnisi wine

    Example: REACT_APP_BOLNISI_NAME_API="https://minio.pro.cf-bolnisi-mainnet.eu-west-1.bnwa.metadata.dev.cf-deployments.org/georgian-wine/public/winerymapping.json"

Step 4 Run on localhost

Runs the app in the development mode. Open terminal and run command: npm start

The application will run by default on port 3000. If you want to run the application on another port, please change the PORT in the .env file.

Open http://localhost:3000 to view it in the browser.

Testing with Jest

This app uses Jest for Unit test.

To run your tests, execute the following command:

  • npm run jest-test to test all file *.test.ts.

  • npm run jest-test-one [file_relative_path] to test a file with [file_relative_path] being relative path of file. Ex: npm run jest-test-one src\commons\utils\helper.test.ts

Web automation test with Playwright

Pre-installed on local:

  • allure commandline
  • npm and node js
  • add .env to root folder with APPLICATION_URL property pointing to chosen environment e.g.
APPLICATION_URL=<Explorer env url>
API_URL=<Explorer api url>
BLOCKFROST_API_URL=<BlockFrost api url>
BLOCKFROST_API_TOKEN=<BlockFrost api token>
KOIOS_API_URL=<Koios api url>
KOIOS_API_TOKEN=<Koios api token>
USERNAME=<Explorer user>
PASSWORD=<Explorer user password>

Test run in local:

  1. Install all packages locally
npm install
  1. Install browsers
npx playwright install
  1. Run tests for chosen project e.g.
npm run chrome

or

npm run firefox

Test run with allure report

  1. Run tests in root folder
ALLURE_RESULTS_DIR=.reports/chrome/allure-results npx playwright test --project='chrome'
  • there is also shorter command from package.json scripts to run all tests
npm run chrome
  • to run specific feature test indicate full path to feature file
npm run chrome playwright/tests/features/sing-up.feature
  • to run specific scenario for a feature add tag @only to the scenario and generate test changes:
npx bddgen
npm run chrome playwright/tests/features/sing-up.feature
  • more examples and documentation here
  1. Generate report
allure generate .reports/chrome/allure-results -o .reports/chrome/allure-report --clean
  1. Open report
allure open .reports/chrome/allure-report

Build into production

Execute npm run build

Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!