fmt

Author: Ansonhkg

apps/explorer/package.json

@@ -14,11 +14,11 @@
     "update:lit": "pnpm update --latest --filter '@lit-protocol/*'"
   },
   "dependencies": {
-    "@lit-protocol/access-control-conditions": "8.0.2",
-    "@lit-protocol/auth": "8.1.2",
-    "@lit-protocol/lit-client": "8.2.3",
-    "@lit-protocol/naga-la-types": "^0.1.0",
-    "@lit-protocol/networks": "8.3.2",
+    "@lit-protocol/access-control-conditions": "workspace:*",
+    "@lit-protocol/auth": "workspace:*",
+    "@lit-protocol/lit-client": "workspace:*",
+    "@lit-protocol/naga-la-types": "0.1.0",
+    "@lit-protocol/networks": "workspace:*",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",

apps/explorer/plan.md

@@ -1,23 +1,74 @@
-## Architecture Improvements Roadmap
+## Goal
 
-- [ ] **Decouple auth provider layers**
-  - Extract a lean `lit-auth-service` module (hooks + context) from the 2.4k‑line `LitAuthProvider`.
-  - Move modal UI, funding gate, and settings panes into dedicated presentational components that consume the new hooks.
-  - [x] Remove the direct dependency on `PaymentManagementDashboard` inside the provider by introducing a minimal funding widget + callbacks.
+Create a single source of truth for explorer network metadata (slugs, modules, tokens, auth URLs, default chains) so future networks can be onboarded by editing one object instead of touching multiple components.
 
-- [x] **Modularize payment management**
-  - Split `PaymentManagementDashboard` into headless hooks (`usePaymentManager`, `useLedgerBalance`, `useWithdrawals`) and small visual components.
-  - Reuse shared types from `protectedApp/types.ts` instead of redefining them locally.
-  - Replace inline style objects with styled components or utility classes for consistency.
+## Files to update / add
 
-- [ ] **Unify chain configuration + ledger helpers**
-  - [x] Move the canonical chain list and ledger balance utilities into a shared `src/domain/lit/chains.ts`.
-  - [x] Update `PKPSelectionSection`, wallet utilities, and dashboards to import the shared helpers instead of keeping local copies.
+1. `apps/explorer/src/domain/lit/networks.ts` (new)
+2. `apps/explorer/src/domain/lit/networkDefaults.ts`
+3. `apps/explorer/src/domain/lit/litChainConfig.ts`
+4. `apps/explorer/src/hooks/useLitServiceSetup.ts`
+5. `apps/explorer/src/lit-login-modal/LitAuthProvider.tsx`
+6. `apps/explorer/src/_config.ts`
+7. `apps/explorer/src/lit-login-modal/components/AuthSettingsPanel.tsx`
+8. `apps/explorer/src/lit-logged-page/LoggedInDashboard.tsx`
+9. `apps/explorer/src/lit-login-modal/PKPSelectionSection.tsx`
+10. `apps/explorer/src/lit-logged-page/protectedApp/components/pkp/PKPInfoCard.tsx`
+11. `apps/explorer/src/lit-logged-page/protectedApp/components/PaymentManagement/PaymentManagementDashboard.tsx`
+12. `apps/explorer/src/main.tsx`
 
-- [ ] **Route-level composition**
-  - Define separate React Router child routes (`Playground`, `Permissions`, `Payments`) that each render focused page components.
-  - Keep shared state (selected PKP, balances, toasts) in a parent provider instead of a monolithic `LoggedInDashboard`.
+## Planned changes
 
-- [ ] **Strengthen domain typing**
-  - Introduce typed service interfaces for permissions, payments, and ledger data instead of returning `any`.
-  - Add discriminated unions / DTOs to the contexts so consumers know which operations and states are available without casting.
+### 1. `domain/lit/networks.ts` (new)
+- **Before**: No registry; constants are duplicated across multiple files.
+- **After**: Export a `NETWORKS` object keyed by `SupportedNetworkName`. Each entry contains `label`, `isTestnet`, `chainSlug`, `ledgerSymbol`, `authEnvVar`, and `moduleKey`. Also export derived helpers (`SUPPORTED_NETWORKS`, `getNetworkMeta`, `getAuthUrlForNetwork(env)`, etc.).
+
+### 2. `domain/lit/networkDefaults.ts`
+- **Before**: Manually defines `DEFAULT_CHAIN_BY_NETWORK` and `TESTNET_NETWORKS`.
+- **After**: Re-export `SupportedNetworkName`, `SUPPORTED_NETWORKS`, `getDefaultChainForNetwork`, and `isTestnetNetwork` from the new registry so there is no bespoke map here.
+
+### 3. `domain/lit/litChainConfig.ts`
+- **Before**: Hard-codes Lit chain RPC/Explorer URLs and viem config.
+- **After**: Export a `getLitChainConfig(env)` helper that reads env overrides once and feeds both the Ledger registry and wagmi config. Remove duplicate Chronicle definitions from other files by exporting `chronicleChainConfig`.
+
+### 4. `hooks/useLitServiceSetup.ts`
+- **Before**: Imports `@lit-protocol/networks` directly, builds `NETWORK_MODULES` locally, relies on literal strings.
+- **After**: Import `LIT_NETWORK_MODULES` from the registry, so the hook simply looks up the module by `config.networkName`. Removes duplicate destructuring and string arrays.
+
+### 5. `lit-login-modal/LitAuthProvider.tsx`
+- **Before**: Contains its own `NETWORK_MODULES` and re-creates the `supportedNetworks` list, auth-service default map, and testnet logic.
+- **After**: Consume the registry helpers. `supportedNetworks` defaults to `SUPPORTED_NETWORKS`. `forceNetworkSelection` uses `LIT_NETWORK_MODULES`. `authServiceUrlMap` seeds from `AppEnv.authUrls`. `shouldDisplayNetworkMessage` calls `isTestnetNetwork`.
+
+### 6. `_config.ts`
+- **Before**: Reads env vars inline and exports `APP_INFO`.
+- **After**: Import `AppEnv` (new helper) so URLs are sourced from one place. Optionally expose `networkAuthServiceUrls` directly from the registry to avoid per-file duplication.
+
+### 7. `lit-login-modal/components/AuthSettingsPanel.tsx`
+- **Before**: Builds the network tab list from props and hard-coded labels.
+- **After**: Map over `SUPPORTED_NETWORKS` and read labels/testnet badges from the registry. This ensures new networks automatically appear with correct metadata.
+
+### 8. `lit-logged-page/LoggedInDashboard.tsx`
+- **Before**: Tracks `selectedChain` default via inline `useEffect` + `getDefaultChainForNetwork`.
+- **After**: Initialize state from `NETWORKS[currentNetworkName].chainSlug` and rely on the registry for network badges (e.g., the header pill).
+
+### 9. `lit-login-modal/PKPSelectionSection.tsx`
+- **Before**: Determines ledger symbol/testnet state via manual checks.
+- **After**: Use the registry meta to decide which RPC to hit and which ledger symbol to display, avoiding local ternaries.
+
+### 10. `lit-logged-page/protectedApp/components/pkp/PKPInfoCard.tsx`
+- **Before**: Defines `ledgerUnit` using hard-coded comparisons.
+- **After**: Import `NETWORKS` meta and read `ledgerSymbol`, so the UI automatically reflects any future testnet/mainnet differences.
+
+### 11. `lit-logged-page/protectedApp/components/PaymentManagement/PaymentManagementDashboard.tsx`
+- **Before**: Similar duplicate logic for ledger symbol and chain labels.
+- **After**: Use registry meta for chain labels/ledger unit, keeping UI consistent.
+
+### 12. `main.tsx`
+- **Before**: Repeats Chronicle/Lit RPC constants and logs env vars manually.
+- **After**: Consume `chronicleChainConfig` / `getLitChainConfig` plus `AppEnv` for logging. Wagmi config becomes data-driven.
+
+## Testing
+
+1. `pnpm nx run explorer:lint`
+2. `pnpm nx run explorer:build`
+3. Smoke-test the explorer dev server (`pnpm nx serve explorer`) to ensure the network selector and auth modal show the new options and ledger balances display correct tokens.

apps/explorer/src/_config.ts

@@ -28,6 +28,9 @@ export const APP_INFO = {
     "naga-test":
       import.meta.env.VITE_AUTH_SERVICE_URL_NAGA_TEST ||
       "https://auth-api.litprotocol.com",
+    "naga-proto":
+      import.meta.env.VITE_AUTH_SERVICE_URL_NAGA_PROTO ||
+      "https://auth-api.litprotocol.com",
     naga:
       import.meta.env.VITE_AUTH_SERVICE_URL_NAGA ||
       "https://auth-api.litprotocol.com",

apps/explorer/src/domain/lit/chains.ts

@@ -1,3 +1,11 @@
+import {
+  LIT_CHAIN_EXPLORER_URL,
+  LIT_CHAIN_ID,
+  LIT_CHAIN_NAME,
+  LIT_CHAIN_RPC_URL,
+  LIT_CHAIN_SYMBOL,
+} from "./litChainConfig";
+
 export interface LitChainConfig {
   id: number;
   name: string;
@@ -11,6 +19,16 @@ export interface LitChainConfig {
 export const SUPPORTED_CHAIN_ID = 2888;
 const CUSTOM_CHAINS_STORAGE_KEY = "chains.custom.v1";
 
+const LIT_CHAIN_BASE_CONFIG: LitChainConfig = {
+  id: LIT_CHAIN_ID,
+  name: LIT_CHAIN_NAME,
+  symbol: LIT_CHAIN_SYMBOL,
+  rpcUrl: LIT_CHAIN_RPC_URL,
+  explorerUrl: LIT_CHAIN_EXPLORER_URL,
+  litIdentifier: "lit-chain",
+  testnet: false,
+};
+
 export const DEFAULT_CHAINS: Record<string, LitChainConfig> = {
   yellowstone: {
     id: 175188,
@@ -21,6 +39,16 @@ export const DEFAULT_CHAINS: Record<string, LitChainConfig> = {
     litIdentifier: "yellowstone",
     testnet: true,
   },
+  "naga-proto": {
+    ...LIT_CHAIN_BASE_CONFIG,
+    name: "Lit Chain (naga-proto)",
+    litIdentifier: "naga-proto",
+  },
+  naga: {
+    ...LIT_CHAIN_BASE_CONFIG,
+    name: "Lit Chain (naga)",
+    litIdentifier: "naga",
+  },
   ethereum: {
     id: 1,
     name: "Ethereum",

apps/explorer/src/domain/lit/litChainConfig.ts

@@ -0,0 +1,40 @@
+import type { Chain } from "viem";
+
+const DEFAULT_LIT_CHAIN_RPC_URL = "https://lit-chain-rpc.litprotocol.com/";
+const DEFAULT_LIT_CHAIN_EXPLORER_URL =
+  "https://lit-chain-explorer.litprotocol.com/";
+const DEFAULT_LIT_CHAIN_EXPLORER_NAME = "Lit Chain Explorer";
+
+export const LIT_CHAIN_ID = 175200;
+export const LIT_CHAIN_NAME = "Lit Chain";
+export const LIT_CHAIN_SYMBOL = "LITKEY";
+
+export const LIT_CHAIN_RPC_URL =
+  import.meta.env.VITE_LIT_CHAIN_RPC_URL || DEFAULT_LIT_CHAIN_RPC_URL;
+export const LIT_CHAIN_EXPLORER_URL =
+  import.meta.env.VITE_LIT_CHAIN_EXPLORER_URL ||
+  DEFAULT_LIT_CHAIN_EXPLORER_URL;
+export const LIT_CHAIN_EXPLORER_NAME =
+  import.meta.env.VITE_LIT_CHAIN_EXPLORER_NAME ||
+  DEFAULT_LIT_CHAIN_EXPLORER_NAME;
+
+export const litChainViemConfig: Chain = {
+  id: LIT_CHAIN_ID,
+  name: LIT_CHAIN_NAME,
+  nativeCurrency: {
+    name: LIT_CHAIN_NAME,
+    symbol: LIT_CHAIN_SYMBOL,
+    decimals: 18,
+  },
+  rpcUrls: {
+    default: { http: [LIT_CHAIN_RPC_URL] },
+    public: { http: [LIT_CHAIN_RPC_URL] },
+  },
+  blockExplorers: {
+    default: {
+      name: LIT_CHAIN_EXPLORER_NAME,
+      url: LIT_CHAIN_EXPLORER_URL,
+    },
+  },
+  testnet: false,
+};

apps/explorer/src/domain/lit/networkDefaults.ts

@@ -0,0 +1,43 @@
+import type { SupportedNetworkName } from "@/lit-login-modal/types";
+
+const KNOWN_NETWORKS = [
+  "naga-dev",
+  "naga-test",
+  "naga-proto",
+  "naga",
+] as const;
+
+const TESTNET_NETWORKS = new Set<SupportedNetworkName>([
+  "naga-dev",
+  "naga-test",
+]);
+
+const DEFAULT_CHAIN_BY_NETWORK: Record<SupportedNetworkName, string> = {
+  "naga-dev": "yellowstone",
+  "naga-test": "yellowstone",
+  "naga-proto": "naga-proto",
+  naga: "naga",
+};
+
+function isSupportedNetworkName(value: string): value is SupportedNetworkName {
+  return (KNOWN_NETWORKS as readonly string[]).includes(value);
+}
+
+export function normalizeNetworkName(
+  networkName?: string
+): SupportedNetworkName {
+  const candidate = (networkName?.toLowerCase() ?? "naga-dev") as string;
+  return isSupportedNetworkName(candidate)
+    ? (candidate as SupportedNetworkName)
+    : "naga-dev";
+}
+
+export function getDefaultChainForNetwork(networkName?: string): string {
+  const normalized = normalizeNetworkName(networkName);
+  return DEFAULT_CHAIN_BY_NETWORK[normalized];
+}
+
+export function isTestnetNetwork(networkName?: string): boolean {
+  const normalized = normalizeNetworkName(networkName);
+  return TESTNET_NETWORKS.has(normalized);
+}

apps/explorer/src/hooks/useLitServiceSetup.ts

@@ -8,14 +8,20 @@
 import React, { useState, useCallback, useRef } from "react";
 import { createLitClient } from "@lit-protocol/lit-client";
 import { createAuthManager, storagePlugins } from "@lit-protocol/auth";
-import { nagaDev, nagaTest } from "@lit-protocol/networks";
+import { nagaDev, nagaTest, nagaProto, naga } from "@lit-protocol/networks";
 
 // Configuration constants at the top
 const DEFAULT_APP_NAME = "lit-auth-app";
-type NetworkModule = typeof nagaDev | typeof nagaTest;
+type NetworkModule =
+  | typeof nagaDev
+  | typeof nagaTest
+  | typeof nagaProto
+  | typeof naga;
 const NETWORK_MODULES: Record<string, NetworkModule> = {
   "naga-dev": nagaDev,
   "naga-test": nagaTest,
+  "naga-proto": nagaProto,
+  naga,
 };
 
 interface LitServiceSetupConfig {

apps/explorer/src/index.tsx

@@ -55,7 +55,7 @@ export const HomePage = () => {
   return (
     <LitAuthProvider
       appName="lit-auth-modal-demo"
-      supportedNetworks={["naga-dev", "naga-test", "naga"]}
+      supportedNetworks={["naga-dev", "naga-test", "naga-proto", "naga"]}
       defaultNetwork="naga-dev"
       authServiceBaseUrl={APP_INFO.litAuthServer}
       persistUser={false}

apps/explorer/src/lit-logged-page/LoggedInDashboard.tsx

@@ -27,6 +27,7 @@ import { getAddress } from "viem";
 import { formatPublicKey } from "./protectedApp/utils";
 import { PKPData } from "@lit-protocol/schemas";
 import { APP_INFO } from "@/_config";
+import { getDefaultChainForNetwork } from "@/domain/lit/networkDefaults";
 
 enum LOGIN_STYLE {
   button = "button",
@@ -125,6 +126,10 @@ export default function LoggedInDashboard() {
   const [selectedChain, setSelectedChain] = useState<string>("yellowstone");
   const [, setStatus] = useState<string>("");
 
+  useEffect(() => {
+    setSelectedChain(getDefaultChainForNetwork(currentNetworkName));
+  }, [currentNetworkName]);
+
   // Transaction toast state
   const [transactionToasts, setTransactionToasts] = useState<
     TransactionToast[]

apps/explorer/src/lit-logged-page/protectedApp/components/PaymentManagement/PaymentManagementDashboard.tsx

@@ -6,6 +6,7 @@ import { triggerLedgerRefresh } from "../../utils/ledgerRefresh";
 import { usePaymentManagerInstance } from "../../hooks/usePaymentManagerInstance";
 import { useLedgerBalance } from "../../hooks/useLedgerBalance";
 import { useWithdrawStatus } from "../../hooks/useWithdrawStatus";
+import { getAllChains } from "@/domain/lit/chains";
 
 interface PaymentManagementDashboardProps {
   selectedPkp: UIPKP | null;
@@ -101,9 +102,13 @@ export const PaymentManagementDashboard: React.FC<
   const [error, setError] = useState<string>("");
   const resolvedAccountAddress =
     targetUserAddress || account?.address || account?.account?.address;
-  const activeChainLabel = selectedChain
-    ? selectedChain.replace(/-/g, " ")
-    : "unknown";
+  const allChains = getAllChains();
+  const selectedChainInfo = selectedChain
+    ? allChains[selectedChain as keyof typeof allChains]
+    : undefined;
+  const activeChainLabel =
+    selectedChainInfo?.name ||
+    (selectedChain ? selectedChain.replace(/-/g, " ") : "unknown");
 
   // Success feedback helper
   const showSuccess = (actionId: string) => {