# Dependencies

Relevant source files

- [package-lock.json](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package-lock.json)
- [package.json](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json)

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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L11-L22)

## 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L12-L22)

### 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L14-L19)

### Application Framework

| Dependency | Version | Purpose |
| --- | --- | --- |
| Next.js | ^14.2.3 | React framework for server-rendered applications |

Sources: [package.json20](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L20-L20)

## 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L11-L22)

## 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L24-L33)

### 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L25-L31)

### 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L26-L33)

## 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L5-L9)

## 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](https://github.com/FrontFin/mesh-portal-js/blob/4bfa6dbf/package.json#L11-L33)

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.