[explorer/frontend] task: initial project (#974)

Problem:
There is no frontend project for NEM Explorer.

Solution:
- Setup Next.js project.
- Add Jenkinsfile and Dockerfile.
- Add lint and test configuration.
- Add styles.
- Add pages:
1. Home
2. Account List.
3. Account Info.
4. Block List.
5. Block Info.
6. Mosaic List.
7. Mosaic Info.
8. Namespace List.
9. Namespace Info.
10. Transaction List.
11. Transaction Info.
12. Error 404.
13. Error 500.
- Add services for API communication.
- Add utils.
- Add reusable UI components.
- Add tests.

Author: OlegMakarenko

.github/buildConfiguration.yaml

@@ -1,4 +1,7 @@
 builds:
+  - name: Explorer Frontend
+    path: explorer/frontend
+
   - name: Explorer Nodewatch
     path: explorer/nodewatch
 

.github/codecov.yaml

@@ -6,6 +6,12 @@ coverage:
       default:
         target: 95%  # overall project / repo coverage
 
+      explorer-frontend:
+        target: auto
+        threshold: 1%
+        flags:
+          - explorer-frontend
+
       explorer-nodewatch:
         target: auto
         threshold: 1%
@@ -61,6 +67,11 @@ coverage:
 # monorepo.  This allows code coverage per package.
 
 flags:
+  explorer-frontend:
+    paths:
+      - explorer/frontend
+    carryforward: true
+
   explorer-nodewatch:
     paths:
       - explorer/nodewatch

.github/dependabot.yaml

@@ -17,6 +17,24 @@ updates:
           - minor
           - patch
 
+  - package-ecosystem: npm
+    directory: /explorer/frontend
+    schedule:
+      interval: weekly
+      day: sunday
+    target-branch: dev
+    labels: [Explorer Frontend]
+    versioning-strategy: increase-if-necessary
+    commit-message:
+      prefix: '[dependency]'
+    groups:
+      explorer-frontend-dependencies:
+        patterns:
+          - '*'
+        update-types:
+          - minor
+          - patch
+
   - package-ecosystem: pip
     directory: /explorer/nodewatch
     schedule:

explorer/frontend/.dockerignore

@@ -0,0 +1,3 @@
+/node_modules
+
+/build

explorer/frontend/.eslintignore

@@ -0,0 +1,4 @@
+node_modules/
+build/
+coverage/
+setupTests.js

explorer/frontend/.eslintrc.yaml

@@ -0,0 +1,21 @@
+extends:
+  - ../../_symbol/linters/javascript/default.eslintrc
+  - eslint-config-next
+  - plugin:import/react
+
+rules:
+  import/extensions:
+    - error
+    - always
+    - json: always
+      js: never
+      jsx: never
+  yoda: off
+
+settings:
+  import/resolver:
+    jsconfig:
+      config: jsconfig.json
+
+globals:
+  $t: false

explorer/frontend/.gitignore

@@ -0,0 +1,23 @@
+
+# dependencies
+node_modules/
+
+# testing
+coverage/
+
+# production
+build/
+.next/
+
+# sqlite3 database
+data/
+
+# misc
+.DS_Store
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*

explorer/frontend/.prettierignore

@@ -0,0 +1,4 @@
+node_modules/
+build/
+coverage/
+setupTests.js

explorer/frontend/.prettierrc.yaml

@@ -0,0 +1,9 @@
+bracketSpacing: true
+jsxBracketSameLine: false
+singleQuote: true
+trailingComma: none
+tabWidth: 4
+useTabs: true
+arrowParens: avoid
+semi: true
+printWidth: 140

explorer/frontend/.stylelintrc.yaml

@@ -0,0 +1,13 @@
+extends:
+  - stylelint-config-standard-scss
+  - stylelint-config-rational-order
+
+plugins:
+  - stylelint-order
+
+rules:
+  font-family-no-missing-generic-family-keyword: null
+  font-family-name-quotes: always-unless-keyword
+  color-function-notation: legacy
+  selector-class-pattern: '([a-z]+([A-Z][a-z0-9]+)*)'
+  selector-id-pattern: '([a-z]+([A-Z][a-z0-9]+)*)'

explorer/frontend/Dockerfile

@@ -0,0 +1,52 @@
+FROM node:lts-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies using npm
+COPY package.json package-lock.json* ./
+RUN npm install
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD HOSTNAME="0.0.0.0" node server.js

explorer/frontend/Jenkinsfile

@@ -0,0 +1,14 @@
+defaultCiPipeline {
+	operatingSystem = ['ubuntu']
+	instanceSize = 'medium'
+
+	environment = 'javascript'
+
+	packageId = 'explorer-frontend'
+
+	publisher = 'docker'
+	dockerImageName = 'symbolplatform/explorer-frontend'
+
+	codeCoverageTool = 'c8'
+	minimumCodeCoverage = 95
+}

explorer/frontend/README.md

@@ -0,0 +1,117 @@
+# NEM Block Explorer
+
+This project is a NEM blockchain explorer built using the Next.js framework. It provides a user-friendly interface to explore and interact with the NEM blockchain, including features such as transaction searches, block exploration, and statistic data visualization.
+
+## Folder Structure
+
+- **api/**: Contains modules for making requests to APIs to fetch data.
+- **components/**: Contains reusable UI components.
+- **config/**: Contains app configuration and reexports environment variables.
+- **constants/**: Contains constants used across the app.
+- **pages/**: Contains the pages of the application.
+- **public/**: Contains static files.
+- **scripts/**: Contains CI scripts.
+- **styles/**: Contains stylesheets.
+- **utils/**: Contains commonly used functions.
+- **.env**: Contains environment variables.
+
+## Environment Variables
+
+- `NEXT_PUBLIC_NATIVE_MOSAIC_ID`: Native mosaic ID
+- `NEXT_PUBLIC_NATIVE_MOSAIC_TICKER`: Native mosaic ticker
+- `NEXT_PUBLIC_NATIVE_MOSAIC_DIVISIBILITY`: Native mosaic divisibility
+- `NEXT_PUBLIC_BLOCKCHAIN_UNWIND_LIMIT`: Blockchain unwind limit
+- `NEXT_PUBLIC_REQUEST_TIMEOUT`: Request timeout
+- `NEXT_PUBLIC_API_BASE_URL`: Explorer REST API endpoint
+- `NEXT_PUBLIC_SUPERNODE_STATS_URL`: Supernodes statistics endpoint
+- `NEXT_PUBLIC_NODELIST_URL`: Node list endpoint
+- `NEXT_PUBLIC_MARKET_DATA_URL`: Market data endpoint
+- `NEXT_PUBLIC_HISTORICAL_PRICE_URL`: Historical coin price endpoint
+
+## Requirements
+
+- Node.js v20.11.0
+
+## Installation
+
+This project is part of a Product monorepo. Follow the steps below to set up and run the project.
+
+1. Clone the repository from GitHub:
+   ```bash
+   git clone https://github.com/symbol/product.git
+   ```
+
+2. Initialize:
+   ```bash
+   bash init.sh
+   ```
+
+3. Navigate to the project folder:
+   ```bash
+   cd explorer/frontend
+   ```
+
+4. Install Node.js dependencies:
+   ```bash
+   npm install
+   ```
+
+5. Setup environment variables (or create `.env` file in `frontend/` root directory).
+
+## Building the Project
+
+To build the project, run:
+```bash
+npm run build
+```
+
+## Running the Project
+
+To run the built project, use:
+```bash
+npm run start
+```
+
+## Development Server
+
+To run the development server, use:
+```bash
+npm run dev
+```
+
+## Running Tests
+
+To run tests, use:
+```bash
+npm run test
+```
+
+## Linting
+
+To run lint checks, use:
+```bash
+npm run lint
+```
+
+To fix lint issues, use:
+```bash
+npm run lint:fix
+```
+
+## Building the Docker Image
+
+1. Make sure you are in the explorer/frontend directory.
+
+2. Build the Docker image:
+```bash
+docker build -t symbolplatform/explorer-frontend .
+```
+
+## Running the Docker Container
+
+Run the Docker container:
+```bash
+docker run -p 3000:3000 symbolplatform/explorer-frontend
+```
+
+This command will start the container and expose the application on port 3000.

explorer/frontend/__mocks__/axios.js

@@ -0,0 +1,2 @@
+import mockAxios from 'jest-mock-axios';
+export default mockAxios;

explorer/frontend/__mocks__/ethereum-blockies-base64.js

@@ -0,0 +1,2 @@
+const makeBlockie = address => `image-${address}`;
+export default makeBlockie;

explorer/frontend/__mocks__/next-i18next/index.js

@@ -0,0 +1,3 @@
+export const useTranslation = () => ({
+	t: key => key
+});

explorer/frontend/__mocks__/next-i18next/serverSideTranslations.js

@@ -0,0 +1,5 @@
+export const useTranslation = () => ({
+	t: key => key
+});
+
+export const serverSideTranslations = () => Promise.resolve({});

explorer/frontend/__mocks__/react-apexcharts.js

@@ -0,0 +1,2 @@
+const ReactApexChart = () => <div id="mocked-react-apexcharts">Mocked React ApexCharts</div>;
+export default ReactApexChart;