Dependencies
Relevant source files
This page documents the external dependencies used by the mesh-portal-js project, explaining their purpose and how they integrate with the system. It covers both runtime dependencies required for the application to function and development dependencies used during the build and development process.
Runtime Dependencies Overview
The mesh-portal-js application relies on several external libraries and frameworks to provide its functionality:
Application Framework
Blockchain & Finance
UI Framework & Styling
React (^18)
React DOM (^18)
Material UI (@mui/material ^5.14.18)
Material UI Icons (@mui/icons-material ^5.14.18)
Emotion (@emotion/react ^11.11.1, @emotion/styled ^11.11.0)
Ethers.js (^6.8.1)
@portal-hq/web (^3.1.0)
@front-finance/api (^1.1.8)
@meshconnect/web-link-sdk (^2.0.1)
Next.js (^14.2.3)
mesh-portal-js Application
Sources: package.json11-22
Core Dependencies by Category
UI Framework and Components
The user interface of the application is built using these libraries:
| Dependency | Version | Purpose |
|---|---|---|
| React | ^18 | Core UI library for building component-based interfaces |
| React DOM | ^18 | DOM-specific methods for React |
| Material UI | ^5.14.18 | React component library implementing Material Design |
| Material UI Icons | ^5.14.18 | Icon components for Material UI |
| Emotion | ^11.11.x | CSS-in-JS styling engine used by Material UI |
Sources: package.json12-22
Blockchain and Finance Integration
These dependencies enable blockchain wallet functionality and financial service integration:
| Dependency | Version | Purpose |
|---|---|---|
| Ethers.js | ^6.8.1 | Library for interacting with Ethereum blockchain |
| @portal-hq/web | ^3.1.0 | Portal Web Client for wallet and blockchain connections |
| @front-finance/api | ^1.1.8 | Client for Front Finance API services |
| @meshconnect/web-link-sdk | ^2.0.1 | SDK for Mesh Connect account linking and transfers |
Sources: package.json14-19
Application Framework
| Dependency | Version | Purpose |
|---|---|---|
| Next.js | ^14.2.3 | React framework for server-rendered applications |
Sources: package.json20
Component-Dependency Integration
This diagram illustrates how specific components in the application utilize the different blockchain and finance libraries:
API Routes
Finance Dependencies
Blockchain Dependencies
Core Components
PortalContext
WalletBalanceCard
MeshModal
SendModal
TransactionsDashboard
@portal-hq/web
ethers.js
@meshconnect/web-link-sdk
@front-finance/api
/api/transfers/linkToken
/api/transfers/deposits
/api/transfers/send
Sources: package.json11-22
Development Dependencies
The project utilizes several development tools for code quality, formatting, and CSS processing:
Development Processes
Development Dependencies
ESLint (^8)
eslint-config-next (14.0.2)
Prettier (^3.0.3)
eslint-config-prettier (^9.0.0)
eslint-plugin-prettier (^5.0.1)
@babel/eslint-parser (^7.23.3)
TailwindCSS (^3.3.0)
PostCSS (^8)
Autoprefixer (^10.0.1)
Code Linting
Code Formatting
CSS Processing
Build Process
Sources: package.json24-33
Code Quality and Formatting Tools
| Tool | Version | Purpose |
|---|---|---|
| ESLint | ^8 | JavaScript linter for identifying code problems |
| eslint-config-next | 14.0.2 | Next.js specific ESLint configuration |
| Prettier | ^3.0.3 | Code formatter for consistent style |
| eslint-config-prettier | ^9.0.0 | Disables ESLint rules that conflict with Prettier |
| eslint-plugin-prettier | ^5.0.1 | Runs Prettier as an ESLint rule |
| @babel/eslint-parser | ^7.23.3 | Babel parser for ESLint |
Sources: package.json25-31
CSS Processing Tools
| Tool | Version | Purpose |
|---|---|---|
| TailwindCSS | ^3.3.0 | Utility-first CSS framework |
| PostCSS | ^8 | Tool for transforming CSS with JavaScript |
| Autoprefixer | ^10.0.1 | PostCSS plugin to add vendor prefixes to CSS |
Sources: package.json26-33
NPM Scripts
The project defines the following npm scripts for development workflows:
| Script | Command | Purpose |
|---|---|---|
| dev | next dev | Starts the development server |
| build | next build | Builds the application for production |
| start | next start | Starts the production server |
| lint | next lint | Runs linting across the codebase |
Sources: package.json5-9
Dependency Versioning
The project uses semantic versioning to specify dependency requirements:
Examples
Version Specifiers
Means compatible with version
Means exactly this version
^ (Caret)
Exact Version
React (^18) - Compatible with any 18.x.x
eslint-config-next (14.0.2) - Exactly 14.0.2
Sources: package.json11-33
The caret (^) symbol indicates compatibility with the specified version or higher within the same major version, providing flexibility for minor updates and patches while maintaining backward compatibility.