Providers & Context
Stellar Explorer uses React context providers to share global state. The wrap order matters — inner providers can access outer providers but not the reverse.
Provider Hierarchy
Section titled “Provider Hierarchy”The providers wrap the application in this order:
| Order | Provider | Purpose | Hook |
|---|---|---|---|
| 1 (outer) | ThemeProvider | Dark/light mode | useTheme() |
| 2 | QueryProvider | TanStack Query client | — |
| 3 | NetworkProvider | Current Stellar network | useNetwork() |
| 4 | DeveloperModeProvider | Show/hide technical details | useDeveloperMode() |
| 5 (inner) | AnalyticsModeProvider | Analytics view toggle | useAnalyticsMode() |
Why Order Matters
Section titled “Why Order Matters”NetworkProviderneedsQueryProviderto be above it so network changes can trigger query invalidationDeveloperModeProvidersits belowNetworkProviderbecause developer mode preferences may be network-specificThemeProvideris outermost because it has no dependencies on other providers
Source: src/lib/providers/index.tsx