Feat/cleanup explorer

[Ansonhkg]

WHAT

• Refactor and fixed all lint errors
• Remove build warnings
• Publish dual ESM + CJS outputs via exports
• include Explorer in Docker build matrix (GH Action)
• (NEW) lit-login-modal

Test it in the Naga Explorer app

pnpm nx run explorer:dev

Quickstart

Wrap your app with LitAuthProvider, then call showAuthModal() when you want to prompt login.

import { LitAuthProvider, useLitAuth } from "@lit-protocol/login-modal";

function App() {
  const { isAuthenticated, showAuthModal, logout, user } = useLitAuth();

  return (
    <div>
      {isAuthenticated ? (
        <>
          <pre>{JSON.stringify(user?.pkpInfo, null, 2)}</pre>
          <button onClick={logout}>Logout</button>
        </>
      ) : (
        <button onClick={showAuthModal}>Sign in</button>
      )}
    </div>
  );
}

export default function Root() {
  return (
    <LitAuthProvider appName="my-app" enabledAuthMethods={["eoa"]}>
      <App />
    </LitAuthProvider>
  );
}

Auth services (required for non-EOA methods)

If you enable any auth method other than eoa, you must provide:

• services.authServiceUrls (per network)
• services.loginServerUrl (Google/Discord)
• services.discordClientId (Discord)

import { LitAuthProvider } from "@lit-protocol/login-modal";

export function Root() {
  return (
    <LitAuthProvider
      appName="my-app"
      supportedNetworks={["naga-dev", "naga-test", "naga-proto", "naga"]}
      enabledAuthMethods={["eoa", "google", "discord", "webauthn"]}
      services={{
        authServiceUrls: {
          "naga-dev": "https://naga-dev-auth-service.getlit.dev",
          "naga-test": "https://naga-test-auth-service.getlit.dev",
          "naga-proto": "https://naga-proto-auth-service.getlit.dev",
          naga: "https://naga-auth-service.getlit.dev",
        },
        // Optional: required only if your Auth Service gates requests.
        authServiceApiKey: "YOUR_OPTIONAL_API_KEY",
        loginServerUrl: "https://login.litgateway.com",
        discordClientId: "YOUR_DISCORD_CLIENT_ID",
      }}
    >
      {/* ... */}
    </LitAuthProvider>
  );
}

EOA wallet provider integration (RainbowKit / Wagmi, etc.)

By default, the EOA flow uses window.ethereum. If your app uses a wallet framework (Wagmi, WalletConnect, custom EIP-1193 provider), pass an EOA wallet provider so the modal can authenticate with the already connected wallet client.

import { ConnectButton } from "@rainbow-me/rainbowkit";
import { useWalletClient } from "wagmi";
import { LitAuthProvider } from "@lit-protocol/login-modal";

export function Root() {
  const { data: walletClient } = useWalletClient();

  return (
    <LitAuthProvider
      appName="my-app"
      enabledAuthMethods={["eoa"]}
      eoa={{
        getWalletClient: async () => {
          if (!walletClient) throw new Error("Connect a wallet first.");
          return walletClient;
        },
        renderConnect: () => <ConnectButton showBalance={false} />,
      }}
    >
      {/* ... */}
    </LitAuthProvider>
  );
}

Any EIP-1193 provider (WalletConnect / Web3Modal / Privy / Dynamic, etc.)

If your connection layer gives you an EIP-1193 provider, you can adapt it to the modal using createEoaWalletProvider.

import { LitAuthProvider, createEoaWalletProvider } from "@lit-protocol/login-modal";

export function Root() {
  const eoa = createEoaWalletProvider({
    getEip1193Provider: async () => {
      // Return the connected EIP-1193 provider from your wallet stack.
      // For injected wallets, this could be `window.ethereum`.
      return window.ethereum!;
    },
    // Optional connect UI:
    // renderConnect: () => <YourConnectButton />,
  });

  return (
    <LitAuthProvider appName="my-app" enabledAuthMethods={["eoa"]} eoa={eoa}>
      {/* ... */}
    </LitAuthProvider>
  );
}

Minting PKPs (EOA vs Auth Service)

• EOA (enabledAuthMethods includes eoa): minting is on-chain by default (no Auth Service). The user’s connected wallet signs the transaction, so it must have gas / test tokens.
  • Optional: if you run an Auth Service, the modal can also do a sponsored mint via POST /pkp/mint (useful when the user has no gas). This requires services.authServiceUrls (and services.authServiceApiKey if your Auth Service gates requests).
• Non-EOA methods (Google/Discord/WebAuthn/Stytch, etc.): minting happens via the Auth Service (POST /pkp/mint), so you must provide services.authServiceUrls (and any required API key configuration).

[Copilot]

Pull request overview

This PR refactors the explorer and SDK packages to support dual ESM+CJS outputs, fixes all lint errors, and introduces a new @lit-protocol/login-modal React component for PKP authentication. The changes modernize the build system by switching from CommonJS to ES2022 modules with CJS compatibility layers.

Key changes:

• New login-modal package providing a React-based authentication UI
• Dual ESM/CJS build system for all packages via separate build targets
• Module format updates from commonjs to ES2022 across all packages
• Fix for aggressive RPC polling in the networks package
• ESLint rule suppressions and type safety improvements in Explorer

Reviewed changes

Copilot reviewed 123 out of 155 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tools/write-cjs-packagejson.mjs	New utility to generate CJS package.json markers
packages/*/package.json	Updated exports for dual ESM/CJS support
packages/*/tsconfig.json	Module format changed from commonjs to ES2022
packages/*/project.json	Split build into build-esm and build-cjs targets
packages/login-modal/*	New React authentication modal package
packages/networks/.../createStateManager.ts	Fixed aggressive RPC polling issue
apps/explorer/*	Integration with new login-modal, ESLint fixes
docs/*	Added documentation for login-modal

Files not reviewed (1)

• pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This use of variable 'servicesState' always evaluates to true.