Frontend Documentation

Introduction

This document provides an overview of the frontend architecture and technologies used in the PORTERS portal.

Framework and Libraries

• Next.js: Used as the frontend framework.
• Mantine: UI library for components.
• Connect Kit: For Sign-in-with-Ethereum functionality.
• WAGMI: Connects the frontend to the blockchain.
• Jotai and Tanstack Query: For state management.
• @react-pdf/renderer: For generating invoices.

Folder Structure

• Pages: Uses next.js pages router, each page resides in its respective directory [pageName]/index.tsx.
• Components: Reusable components reside in components/[pageFolder]/...components.tsx.

Functionality

• Sign-in-with-Ethereum: Handled by Connect Kit, which validates sessions using the /siwe endpoint on backend.
• Blockchain Integration: WAGMI is used for connecting frontend to the blockchain.
• State Management: Jotai and Tanstack Query are used for managing state.
• Fetching Data: Tanstack Query is used for general fetching.
• Theming: Centralized theming in a theme.ts file.

Integration with Backend

• Endpoints: Frontend calls endpoints on the next.js backend/API, which redirects to the nest.js backend.
• Swap Feature: Swapping feature related to payment infrastructure uses 0x.
• Usage Data: Backend calls Prometheus for usage data and alerts.

Session and User Information

• Balances: Provided from sessions, containing user info such as apps, orgs, enterprises, and tenant ID.
• Rate Limiting: Notifications retrieved from the backend by calling Prometheus.
• Redeeming: Calls the applyToAccount function.

Additional Tools

• Invoice Generation: Utilizes @react-pdf/renderer for generating invoices.

For detailed information on each aspect, refer to the relevant sections above.