State Management

Relevant source files

Overview

The Mesh Explorer JS application employs React Context API as its primary state management mechanism. This document describes how application state is organized, managed, and accessed across different components.

For information about the overall system architecture, see Core Architecture.

Sources: context/transferContext.jsx1-81 context/transactionContext.jsx1-84

Context Architecture

The application organizes state using multiple context providers, each responsible for a specific domain of application data. This separation of concerns allows for more maintainable code and prevents unnecessary re-renders.

Components

Context Providers

TransactionContext

TransferContext

IntegrationsContext

NetworksContext

Dashboard

TransactionsTable

TransfersTable

IntegrationsTable

NetworksTable

PortfolioHoldings

Sources: context/transferContext.jsx17-24 context/transactionContext.jsx17-24 components/IntegrationsTable.jsx30-36 components/NetworksTable.jsx1-140

Primary Context Providers

TransferContext

The TransferContext manages state related to asset transfers across different brokers and networks.

creates

TransferContext

+transferDetails: array

+loading: boolean

+message: string

+lastXFRBrokerType: string

+getTransferDetails(payload, brokerType) : : Promise

+setLoadingTransfers(boolean) : : void

TransferProvider

-useState()

+render() : : JSX

The TransferContext provides:

  • A list of transfer details retrieved from the API
  • Loading state indicators for async operations
  • Error/status messages
  • Tracking of the last broker type used for transfers
  • Methods to fetch transfer data from the server

Sources: context/transferContext.jsx20-76

TransactionContext

The TransactionContext manages state related to financial transactions like trading and purchases.

creates

TransactionContext

+transactionDetails: array

+loadingTransactions: boolean

+message: string

+lastTXNBrokerType: string

+getTransactionsDetails(payload, brokerType) : : Promise

+setLoadingTransactions(boolean) : : void

TransactionProvider

-useState()

+render() : : JSX

The TransactionContext provides:

  • A list of transaction details retrieved from the API
  • Loading state indicators for async operations
  • Error/status messages
  • Tracking of the last broker type used for transactions
  • Methods to fetch transaction data from the server

Sources: context/transactionContext.jsx20-77

Context Data Flow

The application follows a unidirectional data flow pattern with React Context.

"External API""API Route""Context Provider""UI Component""External API""API Route""Context Provider""UI Component"Call context method (e.g., getTransferDetails)Set loading stateFetch data (/api/transfers/list)Forward request to Mesh Connect APIReturn responseReturn formatted dataUpdate state (setTransferDetails)Render with new data

Sources: context/transferContext.jsx30-60 context/transactionContext.jsx30-61 components/IntegrationsTable.jsx38-59

Common State Management Patterns

Loading States

Each context maintains its own loading state to indicate when asynchronous operations are in progress. Components consuming these contexts can display loading indicators when appropriate.

Context Loading State Variable Setter Function
TransferContext loading setLoadingTransfers
TransactionContext loadingTransactions setLoadingTransactions
IntegrationsContext (referenced indirectly) (referenced indirectly)

Sources: context/transferContext.jsx25-26 context/transactionContext.jsx25-26 components/IntegrationsTable.jsx34

Error Handling

Contexts implement consistent error handling patterns by:

  1. Catching exceptions from API calls
  2. Setting error messages in state
  3. Clearing loading states regardless of success or failure

Error messages are stored in the message state variable and can be displayed by consuming components.


Yes

No

API Call

Success?

Update state with data

Set error message

Clear loading state

Sources: context/transferContext.jsx42-59 context/transactionContext.jsx42-60

State Persistence

Most state in the application is ephemeral and not persisted between page refreshes, with a few exceptions:

  1. Authentication data is stored in localStorage for persistence
  2. Certain UI preferences may be stored temporarily

Components like PortfolioHoldings access localStorage directly to retrieve or update persistent data.

Sources: components/PortfolioHoldings.jsx106

Consuming Context

Components consume context using the useContext hook. This pattern is used consistently throughout the application.

Example from IntegrationsTable.jsx:

const { getIntegrations, integrations, setIntegrations } =
  useContext(IntegrationsContext);

The pattern is similar for all context consumers:

  1. Import the appropriate context
  2. Use the useContext hook to access state and methods
  3. Use destructuring to extract only needed values
  4. Use state and methods directly in component logic

Sources: components/IntegrationsTable.jsx35-36

State and Component Relationships

This diagram shows how the different context providers relate to key components in the application:

Components

Context Providers

Provides transferDetails, loading state

Provides transfer data

Provides transactionDetails, loading state

Provides integrations list

Provides integrations data

Provides networks data

Provides networks list

Provides network info

Updates

TransactionContext

TransferContext

IntegrationsContext

NetworksContext

ChooseProvider

Dashboard

TransferModal

MeshModal

PortfolioHoldings

IntegrationsTable

NetworksTable

Sources: context/transferContext.jsx1-81 context/transactionContext.jsx1-84 components/IntegrationsTable.jsx30-36 components/NetworksTable.jsx1-140 components/PortfolioHoldings.jsx1-237

Best Practices

The application follows several state management best practices:

  1. Separation of concerns: Each context handles a specific domain of application data
  2. Minimizing prop drilling: Context API is used to avoid passing props through intermediate components
  3. Consistent patterns: Similar patterns are used across different contexts
  4. Conditional rendering: Loading states are used for conditional rendering of UI elements
  5. Error handling: Consistent error handling patterns across contexts

These practices help maintain code quality and developer experience when working with application state.

Sources: context/transferContext.jsx1-81 context/transactionContext.jsx1-84 components/IntegrationsTable.jsx1-174 components/NetworksTable.jsx1-140 components/PortfolioHoldings.jsx1-237