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.
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
- For transaction handling, see Transaction Processing
- For API endpoints, see API Endpoints
- For UI components, see UI Components
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.