@xrpl-wallet-kit/client

All-in-one XRPL Wallet Kit client for browser dApps.

This package creates the wallet manager, official adapters, modal UI, connect button, identity resolver, balance display, transaction toast, and recent transaction wiring from one configuration object.

Install

npm install @xrpl-wallet-kit/client

For React apps, also install @xrpl-wallet-kit/react.

npm install @xrpl-wallet-kit/client @xrpl-wallet-kit/react

Choosing an entry

• @xrpl-wallet-kit/client provides the batteries-included factory and first-party adapter exports. It has the largest bundle profile.
• @xrpl-wallet-kit/client/selective provides core, UI, storage resolution, and a manager factory without importing any wallet adapter. Install and pass only the adapter packages your app supports.

import { createWalletClient } from "@xrpl-wallet-kit/client/selective";
import { createGemWalletAdapter } from "@xrpl-wallet-kit/adapter-gemwallet";

const manager = createWalletClient({
  adapters: [createGemWalletAdapter()],
  network: "mainnet",
  storage: "localStorage",
});

Quick Start

import { createWalletKit } from "@xrpl-wallet-kit/client";

const kit = createWalletKit({
  metadata: {
    name: "My XRPL App",
    description: "Wallet connection for My XRPL App",
    url: window.location.origin,
    icons: [`${window.location.origin}/icon.png`],
  },
  network: "mainnet",
  autoReconnect: true,
  walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID,
  connectButton: "#connect-wallet",
  ui: {
    nonce: window.__CSP_NONCE__, // optional, for strict Content Security Policy
    themeMode: "light",
    walletConnect: { mode: "default" },
    accountPanel: {
      showBalance: true,
      showAddressQr: true,
      showRecentTransactions: true,
      maxVisibleTransactions: 5,
    },
    toast: true,
  },
});

metadata is used by WalletConnect/AppKit and future auth prompts to identify the dApp. Legacy fields (appName, appDescription, appUrl, appIcons) are still accepted, but new integrations should prefer metadata.

walletConnect.mode: "default" uses the official WalletConnect AppKit modal. Use "list" or "group" when you want XRPL Wallet Kit to render its custom wallet list and QR/deeplink panel.

Selecting Wallets

const kit = createWalletKit({
  wallets: ["xaman", "gemwallet", "dropfi", "ledger", "walletconnect"],
  walletConnectProjectId: "...",
  connectButton: "#connect-wallet",
});

Available built-in ids:

• xaman
• gemwallet
• crossmark
• dropfi
• walletconnect
• xrpl-snap or xrplsnap
• ledger
• otsu

ledger is included in wallets: "all" by default. Because it is a hardware wallet, it does not silently restore after reload; users must reconnect the device and open the XRP app.

Signing

const signed = await kit.signMessage({
  message: "Sign in to My XRPL App",
});

const submitted = await kit.signAndSubmit({
  txJson: {
    TransactionType: "Payment",
    Account: kit.getSession()?.account.address,
    Destination: "r...",
    Amount: "1000000",
  },
});

The client delegates to the active adapter. Apps do not need to branch by wallet id for supported methods.

Recent Transactions

When showRecentTransactions is enabled, manager.signAndSubmit() records submitted transactions with a returned hash and the account panel can show compact rows with status, relative time, and an explorer link.

kit.manager.addTransaction({
  hash: "A1B2...",
  status: "submitted",
  account: kit.getSession()?.account,
});

WalletConnect Sign Message Destination

Some WalletConnect wallets use a non-submitted transaction proof for message signing. Pass walletConnectSignMessageDestination when you want that proof transaction to use a known destination instead of the default.

createWalletKit({
  walletConnectProjectId: "...",
  walletConnectSignMessageDestination: "r...",
});

Related

• @xrpl-wallet-kit/core - headless manager and adapter contract
• @xrpl-wallet-kit/ui - modal, button, inline picker, and toast
• @xrpl-wallet-kit/browser - IIFE bundle for HTML/legacy apps