feat: release (#62)

- [x]  Fully functional UI with all the required features
- [x]  1 to 1 with design
- [x]  Fetches data from the backend
- [x]  Multiple languages
- [x]  Dark and light theme
- [x]  Fully responsive
- [x]  Mainnet and Testnet mode
- [x]  E2E tests
- [x]  Ensure significant decimal place
- [x]  Guide on how to deploy to Vercel
- [x]  Docker deployment

.dockerignore

@@ -0,0 +1,14 @@
+# Ignore all .env files in any directory or subdirectory
+**/.env
+
+# Ignore node_modules and dist directories in any directory or subdirectory
+**/node_modules
+**/dist
+
+**/.git
+**/*.md
+**/cypress
+**/.github
+.next
+!.next/static
+!.next/standalone

.env.example

@@ -1,3 +1,3 @@
-NEXT_PUBLIC_RPC_URL= # Example: https://localhost:8545
-NEXT_PUBLIC_PROJECT_ID= # ProjectID from WalletConnect
-NEXT_PUBLIC_ALCHEMY_KEY= # API key from Alchemy 
+NEXT_PUBLIC_API_BASE_URL= # Example: https://api.example.com
+NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID= # ProjectID from WalletConnect (Optional)
+NEXT_PUBLIC_TESTNET_MODE= # true or false

.github/workflows/build-test.yml

@@ -25,9 +25,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.5.0
 
       - name: Install Node
         uses: actions/setup-node@v4
@@ -37,7 +37,7 @@ jobs:
           cache: 'pnpm'
 
       - name: Install project dependencies
-        run: pnpm install --frozen-lockfile --prefer-frozen-lockfile
+        run: pnpm install
 
       - name: Run Prettier
         run: pnpm prettier

.github/workflows/test.yml

@@ -12,21 +12,19 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
         with:
-          version: 8
+          version: 9.5.0
 
       - name: Create env file
         run: |
           touch .env
-          echo "NEXT_PUBLIC_RPC_URL=${{ secrets.NEXT_PUBLIC_RPC_URL }}" >> .env
-          echo "NEXT_PUBLIC_PROJECT_ID=${{ secrets.NEXT_PUBLIC_PROJECT_ID }}" >> .env
-          echo "NEXT_PUBLIC_ALCHEMY_KEY=${{ secrets.NEXT_PUBLIC_ALCHEMY_KEY }}" >> .env
+          echo "NEXT_PUBLIC_API_BASE_URL=${{ secrets.NEXT_PUBLIC_API_BASE_URL }}" >> .env
 
       - name: run Cypress and Jest
         uses: cypress-io/github-action@v6
         with:
           build: pnpm build
           start: pnpm start
-          wait-on: 'http://localhost:3000'
+          wait-on: 'http://localhost:5173'
           command: pnpm test

Dockerfile

@@ -0,0 +1,51 @@
+# Use an official Node.js image as a parent image
+FROM node:20 AS build
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# # Install pnpm globally
+# RUN npm install -g pnpm
+
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy pnpm-lock.yaml and package.json files
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies using pnpm
+RUN CI=1 pnpm install --frozen-lockfile
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the application
+RUN pnpm build
+
+# Use a lighter Node.js image for the final stage
+FROM node:20-slim AS ui
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+ENV NODE_ENV=production
+RUN corepack enable
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy only necessary files from the build stage
+COPY --from=build /app/package.json /app/pnpm-lock.yaml ./
+COPY --from=build /app/public ./public
+COPY --from=build /app/.next/standalone ./
+COPY --from=build /app/.next/static ./.next/static
+
+
+# # Install only production dependencies with pnpm
+# RUN CI=1 pnpm install --no-frozen-lockfile
+
+# Expose the port on which the application will run
+EXPOSE 5173
+ENV PORT=5173
+
+# Specify the command to run the application
+CMD ["node", "server.js"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Wonderland
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,45 +1,127 @@
-# Web3 React Boilerplate
+# ZKchainHub UI 🌐
 
-## Features
+## Description
 
-- Modern React setup with the latest tools and libraries.
-- Boilerplate for building web3-enabled applications.
-- Example unit and integration tests included.
-- Code linting and formatting for clean and maintainable code.
-- GitHub workflows for continuous integration.
+The **ZKchainHub** proposes a decentralized, permissionless platform that provides custom analytics dashboards for ZK ecosystems, empowering chain operators to track and visualize key metrics like TVL, transaction counts, and block details. This allows users to easily explore each chain.
 
-## Setup
+## 📋 Prerequisites
 
-1. Clone this repository.
-2. Copy the `.env.example` file to `.env` and fill in the variables.
-3. Install the project dependencies by running:
+- Ensure you have `pnpm >= 9.0.0` installed.
+
+## 💻 WebFlow
+
+The flow of the application is as follows:
+
+Home Page: The ecosystem page, where data is fetched from `metrics/ecosystem`. From here, you can navigate to all token's TVL data or directly to the Chain Page.
+
+Chain Page: Accessible via search in the header or by selecting a row in the table. Information is fetched from `metrics/zkchain/:id`.
+
+## 🚀 Installation
+
+```bash
+$ pnpm install
+```
+
+## ⚙️ Setting up env variables
+
+- Create `.env` file in the `root` folder and copy paste `.env.example` content in there.
+
+```
+$ cp .env.example .env
+```
+
+- Set up `NEXT_PUBLIC_API_BASE_URL` with ZKchainHub Backend API url. It will typically run on `http://localhost:3000`
+- (Optionally)
+  - Set `NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID` with your [Wallet Connect](https://walletconnect.com/) ProjectID
+  - Set `NEXT_PUBLIC_TESTNET_MODE ` with `true` to use testnet mode with testnet backend API URL set up in `NEXT_PUBLIC_API_BASE_URL`
+
+## 🏃 Running the app
+
+```bash
+$ pnpm run start
+```
+
+To verify ZKchainHub UI is running open http://localhost:5173 in your browser
+
+## Deployment
+
+## 🏗️ Vercel deployment
+
+## Prerequisites
+
+1. **Vercel Account**: [Sign up](https://vercel.com) if you don’t have an account.
+2. **Vercel CLI**: Install the Vercel CLI by running:
+
+   ```bash
+   npm install -g vercel
+   ```
+
+## Deployment Steps
+
+1. **Authenticate with Vercel**: Run the following command and follow the prompts to log in
+
+   ```bash
+   vercel login
+   ```
+
+2. **Deploy Your Project**: Navigate to your project directory and run:
 
    ```bash
-   pnpm install
+   vercel
    ```
 
-## Available Scripts
+Follow the prompts to configure your project.
+Vercel will automatically deploy your project and provide a live URL.
+
+3. **Set Environment Variables**: To add environment variables, use:
+
+   ```bash
+   vercel env add <name> <value>
+   ```
+
+**Additional Resources**
+
+- **[Vercel CLI Documentation](https://vercel.com/docs/cli)**: Find comprehensive information on using the Vercel CLI.
+- **[Vercel Documentation](https://vercel.com/docs)**: Access general Vercel documentation and guides.
+
+## 🐳 Docker deployment
+
+## Prerequisites
+
+- **Docker**: Ensure that Docker is installed.
+
+## Deployment Steps
+
+1. **Build the Docker Image**
+
+   From your project directory, build the Docker image by running the following command:
+
+   ```bash
+   docker build -t <app-name> .
+   ```
+
+2. **Run the Docker Container**
+
+   After the image is built, run the Docker container with the environment variables.
+
+   ```bash
+   docker run -p 5173:5173 --env-file .env <app-name>
+   ```
+
+3. **Access your app:**
+
+   http://localhost:5173
+
+## Development
+
+### 💻 Conventional Commits
 
-Available scripts that can be run using `pnpm`:
+We follow the Conventional Commits [specification](https://www.conventionalcommits.org/en/v1.0.0/#specification).
 
-| Script         | Description                                                  |
-| -------------- | ------------------------------------------------------------ |
-| `dev`          | Start the development server using Next.                     |
-| `build`        | Build the project for production.                            |
-| `preview`      | Preview the production build using Next.                     |
-| `lint`         | Run ESLint on the source code to check for coding standards. |
-| `lint:fix`     | Run ESLint and automatically fix code formatting issues.     |
-| `prettier`     | Check code formatting using Prettier.                        |
-| `prettier:fix` | Format code using Prettier and automatically fix issues.     |
-| `format`       | Run Prettier and ESLint to format and fix code issues.       |
-| `format:check` | Check code formatting and linting without making changes.    |
-| `test`         | Run tests using Cypress and Jest                             |
+## Contributing
 
-## Technologies Used
+ZKchainHub was built with ❤️ by [Wonderland](https://defi.sucks).
 
-This boilerplate leverages the latest technologies, including:
+Wonderland is a team of top Web3 researchers, developers, and operators who believe that the future needs to be open-source, permissionless, and decentralized.
 
-- [NextJS](https://nextjs.org/)
-- [Wagmi](https://wagmi.sh/)
-- [Viem](https://viem.sh/)
-- [Rainbowkit](https://www.rainbowkit.com/)
+[DeFi sucks](https://defi.sucks), but Wonderland is here to make it better.

cypress.config.ts

@@ -2,6 +2,6 @@ import { defineConfig } from 'cypress';
 
 export default defineConfig({
   e2e: {
-    baseUrl: 'http://localhost:3000',
+    baseUrl: 'http://localhost:5173',
   },
 });

cypress/cypress.env.json

@@ -0,0 +1,3 @@
+{
+  "NEXT_PUBLIC_API_BASE_URL": "http://mock-api:3000"
+}

cypress/e2e/navigation.cy.ts

@@ -0,0 +1,67 @@
+describe('Navigation tests', () => {
+  beforeEach(() => {
+    // Intercept the ecosystem data API call and mock the response using a JSON fixture
+    cy.fixture('ecosystemMockData.json').then((ecosystemData) => {
+      cy.intercept('GET', '**/metrics/ecosystem', {
+        statusCode: 200,
+        body: ecosystemData,
+      }).as('fetchEcosystemData');
+    });
+
+    // Intercept the chain data API call and mock the response using a JSON fixture for chainId 324
+    cy.fixture('chainMockData.json').then((chainData) => {
+      cy.intercept('GET', '**/metrics/zkchain/*', {
+        statusCode: 200,
+        body: chainData,
+      }).as('fetchChainData');
+    });
+
+    // Intercept the chain data API call and mock the response using a JSON fixture for chainId 324
+    cy.fixture('nextData.json').then((nextData) => {
+      cy.intercept('GET', '**/_next/data/**/324.json?chain=324', {
+        statusCode: 200,
+        body: nextData,
+      }).as('fetchNextData');
+    });
+
+    cy.visit('/');
+  });
+
+  it('should navigate to search page, type a query, navigate to chain details, and go back to home on breadcrumb', () => {
+    cy.getByTestId('search-bar').click();
+    cy.url().should('include', '/search');
+
+    cy.getByTestId('search-bar').find('input').click().type('Invalid chain name');
+    cy.get('input').should('have.value', 'Invalid chain name');
+    cy.getByTestId('data-not-found').should('be.visible');
+
+    cy.getByTestId('search-bar').find('input').clear();
+    cy.get('input').should('have.value', '');
+
+    cy.getByTestId('search-bar').find('input').type('324');
+    cy.getByTestId('chain-row').should('be.visible').click();
+
+    cy.getByTestId('chain-id').should('be.visible').and('contain', '324');
+    cy.url().should('include', '/324');
+
+    cy.getByTestId('home-breadcrumb').click();
+    cy.url().should('eq', 'http://localhost:5173/');
+    cy.getByTestId('search-bar').find('input').should('have.value', '');
+  });
+
+  it('should navigate to tokens page, on all tokens button click', () => {
+    cy.getByTestId('all-tokens-button').click();
+    cy.url().should('include', '/tokens');
+
+    cy.getByTestId('tokens-title').should('be.visible');
+    cy.getByTestId('tokens-row').should('be.visible');
+  });
+
+  it('should navigate to chain page by clicking on dashboard chain row', () => {
+    cy.getByTestId('chains-dashboard').should('be.visible');
+    cy.getByTestId('chain-row').first().click();
+    cy.url().should('include', '/324');
+
+    cy.getByTestId('chain-id').should('be.visible').and('contain', '324');
+  });
+});