React Providers

🏠 Home > Frontend/Application Structure > Providers

Aurellion uses a layered React Context system to manage global state. All providers are composed in main.provider.tsx and wrap the entire application. This page documents each provider's responsibilities, exposed values, and usage patterns.

---

Provider Hierarchy

PrivyProvider (wallet/auth)
  └── DiamondProvider (contract instances)
        └── RepositoryProvider (data access)
              └── PlatformProvider (config)
                    └── NodesProvider (node data)
                          └── PoolsProvider (AMM pools)
                                └── CustomerProvider (customer state)
                                      └── DriverProvider (driver state)
                                            └── TradeProvider (CLOB state)
                                                  └── {children}

The ordering matters — lower providers can consume context from higher providers.

---

PrivyProvider

File: app/providers/privy.provider.tsx

Wraps the entire application with Privy's authentication system.

Exposed via: usePrivy(), useWallets() hooks from @privy-io/react-auth

const { user, authenticated, login, logout } = usePrivy();
const { wallets } = useWallets();
const activeWallet =
  wallets.find((w) => w.walletClientType === 'privy') ?? wallets[0];

---

DiamondProvider

File: app/providers/diamond.provider.tsx

Creates and exposes typed contract instances for the Diamond proxy and related tokens.

Context values:

Usage:

const { diamond, signerAddress } = useDiamond();

// Write call
await diamond.placeOrder(
  baseToken,
  baseTokenId,
  quoteToken,
  price,
  amount,
  true,
  0,
  0,
);

---

RepositoryProvider

File: app/providers/RepositoryProvider.tsx

Injects repository implementations into the React tree, allowing components to access data without knowing the implementation details (direct RPC vs indexer).

Context values:

Usage:

const { orderRepository } = useRepositories();
const orders = await orderRepository.getBuyerOrders(address);

---

PlatformProvider

File: app/providers/platform.provider.tsx

Fetches and caches platform-level configuration: supported asset classes, active markets, system status.

Context values:

---

NodesProvider

File: app/providers/nodes.provider.tsx

Fetches and caches all registered nodes. Provides filtering utilities.

Context values:

---

SelectedNodeProvider

File: app/providers/selected-node.provider.tsx

Tracks which node the operator is currently managing.

Context values:

---

PoolsProvider

File: app/providers/pools.provider.tsx

Fetches and manages AMM liquidity pool data.

Context values:

---

TradeProvider

File: app/providers/trade.provider.tsx

Manages CLOB trading state including order book data and active orders.

Context values:

---

CustomerProvider

File: app/providers/customer.provider.tsx

Manages customer-specific state: portfolio, orders, P2P offers.

Context values:

---

DriverProvider

File: app/providers/driver.provider.tsx

Manages driver-specific state: assigned journeys, earnings.

Context values:

---

Using Providers in Components

// Example: Customer trading page
import { useTradeProvider } from '@/app/providers/trade.provider';
import { useCustomerProvider } from '@/app/providers/customer.provider';
import { useDiamond } from '@/app/providers/diamond.provider';

function TradingPage() {
  const { diamond } = useDiamond();
  const { orderBook, placeOrder } = useTradeProvider();
  const { tokenBalances } = useCustomerProvider();

  const handleBuy = async () => {
    await placeOrder({
      baseToken, baseTokenId, quoteToken,
      price, amount, isBuy: true
    });
  };

  return (
    <div>
      <OrderBook data={orderBook} />
      <OrderForm onSubmit={handleBuy} />
    </div>
  );
}

---

Related Pages

• Frontend/Application Structure
• Frontend/Pages Reference