A framework-agnostic wallet connection toolkit for the XRP Ledger
- Framework Agnostic - Works with Vanilla JS, React, Vue, and any other framework
- Multiple Wallets - Support for Xaman, Crossmark, GemWallet, WalletConnect, Ledger, Xyra, Otsu, and MetaMask Snap
- Modular Architecture - Install only what you need
- Type Safe - Full TypeScript support with comprehensive type definitions
- Event Driven - Reactive architecture for connection state changes
- Persistent Sessions - Auto-reconnect with localStorage support
- Developer Friendly - Simple API, extensive documentation, great DX
The xrpl-connect package includes everything you need:
- Core: Wallet management, event system, and state persistence
- UI: Beautiful pre-built web component with QR codes and wallet selection
- Adapters: All eight XRPL wallet adapters (Xaman, Crossmark, GemWallet, WalletConnect, Ledger, Xyra, Otsu, and MetaMask Snap)
Please read the documentation here DOCS as it is way more detailed than the README.
npm install xrpl-connect@rc xrpl@^4That's it! Everything you need in one package.
The easiest way to use XRPL Connect is with the plug-and-play web component:
HTML:
<!-- Add the web component to your HTML -->
<button id="connect-btn">Connect Wallet</button>
<xrpl-wallet-connector id="wallet-connector" background-color="#1a202c" primary-wallet="xaman">
</xrpl-wallet-connector>JavaScript:
Create a Xaman application at apps.xumm.dev and replace the placeholder below with its API key.
import { WalletManager, XamanAdapter, CrossmarkAdapter } from 'xrpl-connect';
// Initialize wallet manager
const walletManager = new WalletManager({
adapters: [new XamanAdapter({ apiKey: 'YOUR_XAMAN_API_KEY' }), new CrossmarkAdapter()],
network: 'testnet',
// When true, the WalletManager attempts to restore the previous session
// from localStorage on page load (the user is not prompted again). Set to
// false if you want users to explicitly reconnect every time.
autoConnect: true,
});
// Connect the UI component to the wallet manager
const connector = document.getElementById('wallet-connector');
connector.setWalletManager(walletManager);
// Open the modal when button is clicked
document.getElementById('connect-btn').addEventListener('click', () => {
connector.open();
});
// Listen to connection events
walletManager.on('connect', (account) => {
console.log('Connected:', account.address);
});
// Always handle disconnects so your UI can reset
walletManager.on('disconnect', () => {
console.log('Disconnected');
});
// Sign transactions after connection. Always wrap in try/catch — the promise
// rejects when the user cancels the request in their wallet (SIGN_REJECTED).
try {
const signed = await walletManager.sign({
TransactionType: 'Payment',
Account: walletManager.account.address,
Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT',
Amount: '1000000',
});
} catch (error) {
if (error.code === 'SIGN_REJECTED') {
console.log('User rejected the transaction');
} else {
console.error('Sign failed:', error);
}
}That's it! The web component provides a beautiful, pre-built UI for wallet selection, QR codes, and connection states.
Heads up on
autoConnect: withautoConnect: true, the WalletManager silently restores the previous session fromlocalStoragewhen your page loads and emits aconnectevent before any user interaction. Register yourconnectanddisconnectlisteners immediately after constructing the manager so you don't miss that initial event. Handle operation failures through their rejected promises or the web component'serrorevent.
The meta-package also exposes the complete upstream wallet APIs under namespaces, so applications do not need to add the transitive SDKs as direct dependencies:
import { CrossmarkSDK, GemWalletAPI, XamanOAuth2, XamanSDK } from 'xrpl-connect';
const xaman = new XamanSDK.Xumm('YOUR_API_KEY');
const oauth = new XamanOAuth2.XummPkce('YOUR_API_KEY');
const installed = CrossmarkSDK.default.sync.isInstalled();
const address = await GemWalletAPI.getAddress();- Getting Started Guide - Complete introduction to XRPL Connect
- Vanilla JS Integration - Using XRPL Connect with vanilla JavaScript
- React Integration - React integration patterns and best practices
- Vue Integration - Vue 3 integration guide
XRPL Connect is built with a modular, adapter-based architecture:
┌─────────────────────────────────────────┐
│ Your Application │
└─────────────────┬───────────────────────┘
│
┌─────────────────▼───────────────────────┐
│ @xrpl-connect/core │
│ ┌─────────────────────────────────┐ │
│ │ WalletManager │ │
│ │ - Event system │ │
│ │ - State management │ │
│ │ - Storage layer │ │
│ └─────────────────────────────────┘ │
└─────────────────┬───────────────────────┘
│
┌─────────┴─────────┬─────────┬─────────┐
│ │ │ │
┌───────▼────────┐ ┌──────▼──────┐ │ │
│ Xaman Adapter │ │ Crossmark │ │ ... │
└────────────────┘ └─────────────┘ │ │
│ │
┌──────▼──────┐ │
│ GemWallet │ │
└─────────────┘ │
│
┌──────▼──────┐
│WalletConnect│
└─────────────┘
# Install dependencies
pnpm exec vp install
# Build all packages
pnpm exec vp run build
# Run tests
pnpm exec vp run test
# Lint
pnpm exec vp lint
# Format
pnpm exec vp fmt
# Development mode (watch)
pnpm exec vp run devContributions are welcome! Please read our Contributing Guide for development setup, branch/PR conventions, and the release process. To author a new wallet adapter specifically, see the Adapter Integration Guide.
A summary of notable changes in each release lives in CHANGELOG.md.
MIT License - see the LICENSE file for details
Inspired by:
- RainbowKit - Ethereum wallet connection
- ConnectKit - Ethereum wallet connection kit
- Solana Wallet Adapter - Solana wallet standard
Built for the XRPL community with ❤️