@xrpl-wallet-kit/ui

Framework-agnostic UI components for XRPL Wallet Kit.

Install

npm install @xrpl-wallet-kit/core @xrpl-wallet-kit/ui

WalletModal

Use WalletModal for the default full-screen overlay flow.

import { WalletModal } from "@xrpl-wallet-kit/ui";

const modal = new WalletModal({ manager });
modal.open();

WalletInline

Use WalletInline when the wallet picker must render inside a page, drawer, onboarding step, or host-managed sheet.

import { WalletInline } from "@xrpl-wallet-kit/ui";

const inline = new WalletInline({
  manager,
  themeMode: "dark",
  layout: "list",
  walletConnectUiMode: "group",
});

inline.on("connect", (session) => {
  console.log("Connected", session.account.address);
});

inline.mount("#wallet-section");

// Later:
inline.destroy();

WalletInline reuses the modal wallet list, WalletConnect group/list flow, QR states, themes, and translations. It does not create a backdrop, lock page scrolling, handle Escape, or render a close button.

Phase 1 intentionally does not add WalletInline to createWalletKit; instantiate it directly when an embedded picker is required.

WalletButton

WalletButton renders the connect/account control and opens a compatible modal controller.

import { WalletButton, WalletModal } from "@xrpl-wallet-kit/ui";

const modal = new WalletModal({ manager });
const button = new WalletButton({
  manager,
  modal,
  target: "#connect-wallet",
});

The disconnected button shows the built-in wallet SVG by default. Customize it only when you want a brand image or trusted inline SVG/HTML; use showAdapterIcon: false to hide the icon entirely.

new WalletButton({
  manager,
  modal,
  target: "#connect-wallet",
  icon: { type: "image", src: "/brand-wallet.svg", alt: "MyApp wallet" },
});

See the project documentation for complete options, theming, i18n, and WalletConnect configuration.

Recent Transactions and Toasts

WalletButton can show a compact recent transaction section in the account panel when showRecentTransactions is enabled. It reads transactions from WalletManager.getTransactions() and updates when transaction lifecycle events fire.

const button = new WalletButton({
  manager,
  modal,
  target: "#connect-wallet",
  showRecentTransactions: true,
  maxVisibleTransactions: 5,
});

Use WalletToast when you want floating transaction notifications for submitted, confirmed, and failed transactions.

Theming

The UI shares one token system across WalletModal, WalletInline, WalletButton, account panels, and WalletToast.

const modal = new WalletModal({
  manager,
  themeName: "midnight",
  theme: {
    accent: "#3b82f6",
    accentText: "#ffffff",
    success: "#34d399",
    overlayBlur: 12,
  },
});

Built-in presets: default, light, dark, xrpl, minimal, midnight, glass, rounded, crisp, and soft.

Important tokens include accent, accentText, success, error, surface, surfaceHover, border, overlay, overlayBlur, spinnerTrail, headerBackground, radius, walletRadius, and fontFamily.

Strict CSP

Pass a per-response nonce when your app uses a strict style-src policy. The UI applies it to generated style tags for modal, inline, button, account panel, and toast surfaces.

const modal = new WalletModal({ manager, nonce });
const button = new WalletButton({ manager, modal, target: "#connect-wallet", nonce });
const toast = new WalletToast({ manager, nonce });