@multiplatform.one/connectkit

Signer-agnostic wallet-modal UI kit: the modal shell, routing, theming, common UI primitives, and a screen-registration API. Contains no wagmi/viem — @multiplatform.one/web3 (wallets) and @multiplatform.one/gpg (GPG sign-in) register their screens into this kit.

Install

pnpm add @multiplatform.one/connectkit

Peers: react, @tanstack/react-query.

What it owns

• ConnectKitProvider / ConnectKitModal — the modal shell, route state, and ConnectKitOptions; a bridge prop lets a signer package inject its screens + modal state
• Screen registry — useRegisterScreens and the ModalState injection API (how signer packages plug in)
• useModal() — open/close the modal from anywhere
• Theming — ConnectKitThemeProvider, useThemeContext, defaultTheme, styled, ResetContainer
• Common primitives — Button, Alert, Tooltip, CustomQRCode, CopyToClipboard, FitText, Portal, … plus UI hooks (useIsMobile, useLockBodyScroll, FocusTrap, useLocales)

What it must not do

• No wallet connectors, chains, or signing — wagmi/viem live in @multiplatform.one/web3; GPG lives in @multiplatform.one/gpg
• No app auth/session logic — Keycloak bridging is the app's concern

Usage

import { ConnectKitProvider, useModal } from "@multiplatform.one/connectkit";
import { GpgBridge, GpgProvider } from "@multiplatform.one/gpg";

function OpenButton() {
  const { setOpen } = useModal();
  return <button onClick={() => setOpen(true)}>Sign in</button>;
}

export function App() {
  return (
    <GpgProvider>
      <ConnectKitProvider bridge={GpgBridge}>
        <OpenButton />
      </ConnectKitProvider>
    </GpgProvider>
  );
}

The modal is themed through connectkit's own theme system (ConnectKitThemeProvider), separate from the app-wide knobs system in @multiplatform.one/theme.

License

Apache-2.0