UI Components

Relevant source files

This document provides an overview of the key UI components used in the mesh-portal-js application. These components form the visual interface through which users interact with wallet functionality, view transaction history, and connect to blockchain networks. For information about the core architecture and state management systems that power these components, see System Architecture.

Component Hierarchy Overview

The UI of mesh-portal-js is built with React components using Material UI for styling. The components are organized in a hierarchical structure, with data flowing through the PortalContext.

Data Flow

App

Header

WalletBalanceCard

TransactionsDashboard

MeshModal

SendModal

PortalContext

Sources: components/WalletInfo.jsx1-218 components/Header.jsx1-47 components/Transactions.jsx1-199

Key Component Relationships

The UI components are tightly integrated with the PortalContext which provides them with blockchain connection, wallet state, and transaction functionality.

User Actions

Context Provider

UI Components

initiatePortalInstance()

Uses portalInstance, walletAddress

Uses portalInstance, chain

Header

WalletBalanceCard

TransactionsDashboard

MeshModal

SendModal

PortalContext

Chain Selection

View Balance

View Transactions

Deposit (Connect Account)

Withdraw

Sources: components/WalletInfo.jsx16-20 components/Header.jsx9-11 components/Transactions.jsx20-21

Header Component

The Header component provides chain selection functionality and displays the application title.

Key Features

  • Application title display
  • Blockchain network selection dropdown (Mainnet or Sepolia Testnet)
  • Initializes the Portal instance with the selected chain

Implementation

The Header component uses Material UI's AppBar, Toolbar, and Select components. It retrieves and updates the chain selection through the PortalContext.

PortalContextHeader ComponentUserPortalContextHeader ComponentUserSelect new chainCall initiatePortalInstance(chainId)Update isPortalReady stateDisplay selected chain

Sources: components/Header.jsx1-47

WalletBalanceCard Component

The WalletBalanceCard component displays wallet information and provides deposit and withdrawal functionality.

Key Features

  • Displays wallet address
  • Shows wallet balance (in ETH)
  • Provides "Deposit" button to open the MeshModal
  • Provides "Withdraw" button to open the SendModal
  • "Connect Account" button for users without authentication

Implementation

The WalletBalanceCard component uses Material UI's Card, CardContent, and Button components. It fetches wallet balance using the Portal instance's provider and formats it for display.

SendModalMeshModalPortalContextWalletBalanceCardUserSendModalMeshModalPortalContextWalletBalanceCardUserView wallet infoGet portalInstance, walletAddressRequest eth_getBalanceReturn balance dataDisplay formatted balanceClick "Deposit"handleOpenMeshModal()Display deposit interfaceClick "Withdraw"Open SendModalDisplay withdrawal interface

Sources: components/WalletInfo.jsx1-218

TransactionsDashboard Component

The TransactionsDashboard component displays a table of transaction history for the connected wallet.

Key Features

  • Fetches transaction history from the Portal instance
  • Displays transactions in a paginated table
  • Shows transaction details including block number, hash, from/to addresses, and more
  • Provides pagination controls

Implementation

The TransactionsDashboard component uses Material UI's Table components to display transaction data. It fetches transaction data when the component mounts or when the chain changes.

The component structure includes:

  • Initial "Show Transactions Table" button
  • Loading state with CircularProgress
  • Error handling for transaction fetching
  • Paginated table with transaction details

Yes

No

No

Yes

Click

TransactionsDashboard

getTransactions()

Loading?

CircularProgress

Show Table?

Show Transactions Button

Transaction Table

Table Headers

Transaction Rows

Pagination Controls

Sources: components/Transactions.jsx1-199

Transaction Table Structure

The transaction table displays detailed information about each transaction:

Column Description
Block Number The block in which the transaction was included
Unique ID A unique identifier for the transaction
Hash The transaction hash
From The sending address
To The receiving address
Value The transaction amount
Asset The asset type (e.g., ETH)
Category The transaction category
Contract Value Value from the raw contract
Timestamp When the transaction occurred
Chain ID The blockchain network identifier

Sources: components/Transactions.jsx76-149 components/Transactions.jsx171-183

Modal Components

The application uses two main modal components for user interactions.

MeshModal

The MeshModal component integrates with Mesh Connect to facilitate:

  • Account connections
  • Deposits from external sources
  • Authentication with third-party services

The modal is opened from the WalletBalanceCard component when a user clicks "Deposit" or "Connect Account".

SendModal

The SendModal component provides an interface for:

  • Withdrawing funds from the wallet
  • Specifying destination addresses
  • Setting transaction amounts and parameters

The modal is opened from the WalletBalanceCard component when a user clicks "Withdraw".


Yes

No

Click Deposit

Click Withdraw

Click Connect Account

onSuccess

onExit

transferFinished

onExit

WalletBalanceCard

User authenticated?

Show Deposit/Withdraw buttons

Show Connect Account button

handleOpenMeshModal()

setOpenSendModal(true)

MeshModal

SendModal

handleSuccess()

handleExit()

handleTransferFinished()

handleSendExit()

Sources: components/WalletInfo.jsx67-208 components/WalletInfo.jsx98-210

Component Styling

The UI components use a combination of Material UI's built-in styling capabilities and custom style objects defined within the component files.

Key styling approaches include:

  • Card styling with background color, borders, and box shadows
  • Button styling with custom colors and hover effects
  • Field styling with borders and spacing
  • Table styling for alternating row colors and cell formatting

Sources: components/WalletInfo.jsx75-96 components/Transactions.jsx72-149

Context Integration

All UI components integrate with the PortalContext to access shared functionality and state:

  1. Header: Uses initiatePortalInstance, chain, and isPortalReady from context
  2. WalletBalanceCard: Uses portalInstance, walletAddress, isPortalReady, and chain
  3. TransactionsDashboard: Uses portalInstance and chain to fetch transactions

This context integration ensures that UI components have access to the latest blockchain data and wallet state.

Sources: components/Header.jsx9-11 components/WalletInfo.jsx16-20 components/Transactions.jsx20-21