# Overview

## Purpose and Scope

The `mesh-portal-js` repository provides a comprehensive demonstration application showcasing the integration of Front Finance's Mesh Connect platform and Portal's WAAS (Wallet-as-a-Service) technology. This reference implementation illustrates how to build a web application that enables users to connect financial accounts, perform crypto deposits/withdrawals, and manage blockchain wallet operations.

For detailed information about the system architecture, see [System Architecture](/content/FrontFin/mesh-portal-js/2-system-architecture/index.html).

## Key Technologies

The application is built using the following key technologies:

| Component | Technology | Purpose |
| --- | --- | --- |
| Frontend Framework | React & Next.js | UI rendering and server-side functionality |
| Styling | Tailwind CSS & Material UI | Application styling and component library |
| Blockchain Integration | Portal SDK (@portal-hq/web) | Wallet management and blockchain connectivity |
| Account Connectivity | Mesh Connect SDK (@meshconnect/web-link-sdk) | Account linking and financial transfers |
| Blockchain Interaction | ethers.js | Ethereum interactions and transaction handling |

## System Architecture Overview

```
Server Functions

External Services

Core Services

Client Application

React Components

PortalContext

MeshModal

Portal SDK (@portal-hq/web)

Mesh Connect SDK (@meshconnect/web-link-sdk)

Blockchain Networks

Front Finance API

Next.js API Routes
```

This diagram illustrates the high-level architecture of the application, showing how the client-side components interface with the Core Services (Portal SDK and Mesh Connect SDK), which in turn connect to external blockchain networks and the Front Finance API.

## Core Integration Components

```
API Integration

State Management

User Interface

WalletBalanceCard

TransactionsDashboard

SendModal

MeshModal

PortalContext

Portal Instance

/api/transfers/linkToken

/api/transfers/deposits

/api/transfers/send
```

This diagram shows the relationship between UI components, state management through PortalContext, and the API routes that facilitate transfers and deposits.

## Key Features

### Wallet Management

The application demonstrates comprehensive wallet functionality through the Portal SDK:

- Creating and managing blockchain wallets
- Displaying wallet balances
- Chain selection and switching
- Transaction history viewing

### Account Connectivity

The Mesh Connect integration enables:

- Connecting to financial accounts securely
- Initiating deposits from connected accounts to crypto wallets
- Viewing transfer status and history

### Transaction Processing

The application supports:

- Sending cryptocurrency transactions
- Viewing real-time transaction status
- Transaction history management

## Configuration Requirements

The application requires configuration of:

- Portal API credentials for wallet services
- Mesh API credentials for account connectivity
- RPC provider URLs for blockchain connectivity
- Withdrawal configuration for transaction processing

For detailed information about specific components:

- For wallet features, see [Wallet Management](/content/FrontFin/mesh-portal-js/3.1-wallet-management/index.html)
- For transaction handling, see [Transaction Processing](/content/FrontFin/mesh-portal-js/3.2-transaction-processing/index.html)
- For API endpoints, see [API Endpoints](/content/FrontFin/mesh-portal-js/4-api-endpoints/index.html)
- For UI components, see [UI Components](/content/FrontFin/mesh-portal-js/5-ui-components/index.html)

## Project Structure

The project follows a standard Next.js application structure with:

- API routes for server-side functionality
- React components for UI rendering
- Context providers for state management
- Integration with external SDKs for core functionality

For more information about the project configuration, see [Project Configuration](/content/FrontFin/mesh-portal-js/6-project-configuration/index.html).