[WIP] [explorer/frontend] fix ci errors

.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:

.github/workflows/combine-dependabot-pr.yaml

@@ -30,7 +30,7 @@ jobs:
     steps:
       - name: combine dependabot prs
         id: combine-prs
-        uses: github/combine-prs@v5.0.0
+        uses: github/combine-prs@v5.2.0
         with:
           pr_title: '[dependency]: Combine dependabot PRs'
           ci_required: true

.gitignore

@@ -23,6 +23,7 @@ _data/
 .next/
 
 # python
+.python-version
 __pycache__/
 *.egg-info/
 build/

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,147 @@
+# 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
+
+```plaintext
+peregrine-partners/
+├── api/              # Functions for interacting with internal and external APIs
+├── components/       # Reusable React components
+├── config/           # Configuration for the project
+├── constants/        # Global constants used throughout the application
+├── pages/            # Website pages .
+├── public/           # Images, fonts and other static assets
+├── styles/           # Global SCSS files
+└── utils/            # Utility functions and helpers
+```
+
+## Environment Variables
+
+All environment variables listed below are required for both development and production modes.
+
+### Public Environment Variables
+
+These variables are prefixed with `NEXT_PUBLIC_` and are exposed to the browser, meaning they can be accessed both on the server and in the client-side code.
+
+- **`NEXT_PUBLIC_NATIVE_MOSAIC_ID`**: Native mosaic ID. Example: `nem.xem`.
+
+- **`NEXT_PUBLIC_NATIVE_MOSAIC_TICKER`**: Native mosaic ticker. Example: `XEM`.
+
+- **`NEXT_PUBLIC_NATIVE_MOSAIC_DIVISIBILITY`**: Native mosaic divisibility. Example: `6`.
+
+- **`NEXT_PUBLIC_BLOCKCHAIN_UNWIND_LIMIT`**: Blockchain unwind limit. Example: `360`.
+
+- **`NEXT_PUBLIC_REQUEST_TIMEOUT`**: The timeout duration (in milliseconds) for network requests made by the application. Example: `15000` (15 seconds).
+
+- **`NEXT_PUBLIC_API_BASE_URL`**: Explorer REST API endpoint. Example: `http://explorer-backend.com:4000/api/nem`.
+
+- **`NEXT_PUBLIC_SUPERNODE_API_URL`**: Supernodes API endpoint. Example: `https://nem.io/supernode/api/statistics`.
+
+- **`NEXT_PUBLIC_NODELIST_URL`**: Node list endpoint. Example: `https://nodewatch.symbol.tools/api/nem/nodes`.
+
+- **`NEXT_PUBLIC_MARKET_DATA_URL`**: Market data endpoint. Example: `https://marketdata.com/data/data?sym1=XEM&sym2=USD`.
+
+- **`NEXT_PUBLIC_HISTORICAL_PRICE_URL`**: Historical coin price endpoint. Example: `https://marketdata.com/history/data?sym1=XEM`.
+
+- **`NEXT_PUBLIC_SOCIAL_URL_TWITTER`**: The URL for the company's Twitter/X social profile. This can be used to display social media links in the application. Example: `https://twitter.com/company`.
+
+- **`NEXT_PUBLIC_SOCIAL_URL_GITHUB`**: The URL for the company's GitHub organization. This can be used to display social media links in the application. Example: `https://github.com/company`.
+
+- **`NEXT_PUBLIC_SOCIAL_URL_DISCORD`**: The URL for the company's Discord server. This can be used to display social media links in the application. Example: `https://discord.com/company`.
+
+- **`NEXT_PUBLIC_FOOTER_URL_DOCS`**: The URL for the NEM documentation. Example: `https://website.com`.
+
+- **`NEXT_PUBLIC_FOOTER_URL_TECHNICAL_REFERENCE`**: The URL for the NEM technical reference. Example: `https://website.com`.
+
+- **`NEXT_PUBLIC_FOOTER_URL_FAUCET`**: The URL for the XEM Faucet. Example: `https://website.com`.
+
+- **`NEXT_PUBLIC_FOOTER_URL_SUPERNODE_PROGRAM`**: The URL for the NEM Supernode Program. Example: `https://website.com`.
+
+## 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;