XRPL Connect

https://github.com/xrpl-commons/xrpl-connect
Admin
A framework-agnostic wallet connection toolkit for the XRP Ledger, supporting multiple wallets like...
Tokens:137,265
Snippets:1,126
Trust Score:7.9
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Documentation example for My Wallet adapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/adapter-integration.md

Markdown snippet showing how to document the My Wallet adapter usage, including installation and setup steps.

```markdown
### My Wallet

To use My Wallet adapter:

1. Install xrpl-connect
2. Create your wallet manager with MyWalletAdapter
3. Pass it to the web component

```typescript
import { WalletManager, MyWalletAdapter } from 'xrpl-connect';

const walletManager = new WalletManager({
adapters: [new MyWalletAdapter()],
network: 'mainnet'
});
```
```

--------------------------------

### Run Development Server

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/examples/react/README.md

Start the development server from the example directory or from the monorepo root. The app will be available at http://localhost:5173.

```bash
pnpm dev
```

```bash
pnpm --filter react-example dev
```

--------------------------------

### OtsuAdapter usage example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to instantiate OtsuAdapter, check availability, and connect to the testnet. The adapter is only available if the extension is installed.

```typescript
import { OtsuAdapter } from '@xrpl-connect/adapter-otsu';
import { WalletManager } from '@xrpl-connect/core';

const otsuAdapter = new OtsuAdapter();

const walletManager = new WalletManager({
  adapters: [otsuAdapter],
  network: 'testnet',
});

const available = await otsuAdapter.isAvailable();
if (available) {
  const account = await walletManager.connect('otsu');
  console.log('Connected:', account.address);
}
```

--------------------------------

### Install xrpl-connect and xrpl

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/README.md

Install the xrpl-connect package and the xrpl library (version ^4) via npm. This is the required setup for using the toolkit.

```bash
npm install xrpl-connect xrpl@^4
```

--------------------------------

### Minimal Setup with WalletManager

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/xrpl-connect/README.md

Initializes a WalletManager with Xaman and Crossmark adapters on the mainnet network, then connects using the Xaman adapter with an API key. Use this as the minimal starting point for wallet connectivity.

```typescript
import { WalletManager, Adapters, STANDARD_NETWORKS } from 'xrpl-connect';

const walletManager = new WalletManager({
  adapters: [new Adapters.Xaman({ apiKey: 'YOUR_API_KEY' }), new Adapters.Crossmark()],
  network: STANDARD_NETWORKS.mainnet,
});

// Use wallet manager...
const account = await walletManager.connect('xaman', {
  apiKey: 'YOUR_API_KEY',
});

```

```typescript
import { WalletManager, Adapters, STANDARD_NETWORKS } from 'xrpl-connect';

// Initialize wallet manager
const walletManager = new WalletManager({
  adapters: [
    new Adapters.Xaman({ apiKey: process.env.XUMM_API_KEY }),
    new Adapters.Crossmark(),
    new Adapters.WalletConnect({ projectId: process.env.WALLETCONNECT_ID }),
    new Adapters.GemWallet(),
    new Adapters.Ledger(),
    new Adapters.Xyra(),
    new Adapters.Ghostsig(),
    new Adapters.Otsu(),
    new Adapters.MetaMaskSnap(),
  ],
  network: STANDARD_NETWORKS.mainnet,
  autoConnect: true,
});

// Connect UI component
const connector = document.querySelector('xrpl-wallet-connector');
connector.setWalletManager(walletManager);

// Listen to events
connector.addEventListener('walletconnect', (event) => {
  console.log('Wallet connected:', event.detail.address);
});

connector.addEventListener('walletdisconnect', (event) => {
  console.log('Wallet disconnected:', event.detail.address);
});

// Render the component in your app
const app = document.getElementById('app');
app.appendChild(connector);

```

--------------------------------

### JavaScript setup with WalletManager and XamanAdapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/concepts.md

Create a WalletManager with your preferred adapters, get the component, and attach the manager using setWalletManager(). Then listen for the 'connect' event to handle user connections.

```javascript
// Create manager
const walletManager = new WalletManager({
  adapters: [new XamanAdapter({ apiKey: 'YOUR_API_KEY' })],
  network: 'testnet',
});

// Get component and attach manager
const connector = document.getElementById('wallet-connector');
connector.setWalletManager(walletManager);

// Now the UI works!
walletManager.on('connect', (account) => {
  console.log('User connected:', account.address);
});
```

--------------------------------

### Vanilla JavaScript Example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/examples.md

Complete example with wallet connection and transaction signing.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>XRPL-Connect Example</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        margin: 0;
        padding: 2rem;
        background: #f5f5f5;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      .card {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
      button {
        padding: 0.75rem 1.5rem;
        background: #3b99fc;
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 600;
      }
      button:hover {
        background: #2a7fd8;
      }
    </style>
  </head>
  <body>
    <div class=
```

--------------------------------

### Basic Setup

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ghostsig/README.md

Initialize the WalletManager with the GhostsigAdapter and connect to a network.

```APIDOC
## Basic Setup

### Description
Create a WalletManager instance with the GhostsigAdapter and connect to a network.

### Usage
```typescript
import { WalletManager } from '@xrpl-connect/core';
import { GhostsigAdapter } from '@xrpl-connect/adapter-ghostsig';

const walletManager = new WalletManager({
  adapters: [new GhostsigAdapter()],
  network: 'testnet',
});

const account = await walletManager.connect('ghostsig');
console.log('Connected:', account.address);
```
```

--------------------------------

### Development Commands for XRPL Connect

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/README.md

Use these commands to set up and work on the XRPL Connect project. Run 'pnpm exec vp install' to install dependencies, then use 'build', 'test', 'lint', 'fmt', and 'run dev' for respective tasks. The 'run dev' command starts the development watch mode.

```bash
# 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 dev
```

--------------------------------

### Install @xrpl-connect/adapter-ledger with npm, pnpm, or yarn

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ledger/README.md

Install the adapter package using your preferred package manager. The example shows npm, pnpm, and yarn alternatives for adding @xrpl-connect/adapter-ledger to your project.

```bash
npm install @xrpl-connect/adapter-ledger
# or
pnpm add @xrpl-connect/adapter-ledger
# or
yarn add @xrpl-connect/adapter-ledger
```

--------------------------------

### Ledger Hardware Wallet Integration Example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/examples.md

Complete HTML example integrating the Ledger hardware wallet with xrpl-connect. Includes the HTML structure, the LedgerAdapter and WalletManager setup, and device status checking before connecting.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>XRPL-Connect Ledger Example</title>
  </head>
  <body>
    <div class="container">
      <h1>Ledger Hardware Wallet Demo</h1>
      <xrpl-wallet-connector id="wallet-connector"></xrpl-wallet-connector>

      <div id="device-status"></div>
      <div id="account-info"></div>
    </div>

    <script type="module">
      import { WalletManager, LedgerAdapter, LedgerDeviceState } from 'xrpl-connect';

      const ledgerAdapter = new LedgerAdapter({
        accountIndex: 0, // First account (44'/144'/0'/0/0)
        timeout: 60000, // 60 seconds for user to confirm
      });

      const walletManager = new WalletManager({
        adapters: [ledgerAdapter],
        network: 'testnet',
      });

      const connector = document.getElementById('wallet-connector');
      connector.setWalletManager(walletManager);

      // Check device status before connecting
      const statusDiv = document.getElementById('device-status');

      ledgerAdapter.getDeviceState().then((state) => {
        switch (state) {
          case LedgerDeviceState.NOT_CONNECTED:
            statusDiv.innerHTML = '<p>⚠️ Please connect your Ledger device via USB</p>';
            break;
          case LedgerDeviceState.CONNECTED_AND_LOCKED:
            statusDiv.innerHTML = '<p>🔒 Device connected but locked. Please unlock your Ledger.</p>';
            break;
          case LedgerDeviceState.CONNECTED_AND_UNLOCKED: // Device is ready to use (unlocked and app open) - this is the state we want to connect to the wallet in.  // Note: This is a comment about the state.  // The device is ready to use.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a comment.  // This is a
```

--------------------------------

### Install XRPL Connect packages for different frameworks

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/migration-v1.md

Use these commands to install the coordinated 1.0.0 packages. Choose the command that matches your framework: vanilla JavaScript, React, or Vue 3/Nuxt. Do not install both framework bindings.

```bash
# Vanilla JavaScript or a custom framework integration
pnpm add xrpl-connect xrpl@^4
```

```bash
# React
pnpm add xrpl-connect @xrpl-commons/xrpl-connect-react xrpl@^4 react react-dom
```

```bash
# Vue 3 or Nuxt
pnpm add xrpl-connect @xrpl-commons/xrpl-connect-vue xrpl@^4 vue
```

--------------------------------

### Installation

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ghostsig/README.md

Install the adapter package using npm or pnpm.

```APIDOC
## Installation

### Description
Install the @xrpl-connect/adapter-ghostsig package.

### Command
```bash
npm install @xrpl-connect/adapter-ghostsig
# or
pnpm add @xrpl-connect/adapter-ghostsig
```
```

--------------------------------

### Basic Setup with WalletManager

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/core/README.md

Initializes a WalletManager instance with Xaman and Crossmark adapters, specifying the mainnet network and enabling auto-connect.

```typescript
import { WalletManager, STANDARD_NETWORKS } from '@xrpl-connect/core';
import { XamanAdapter } from '@xrpl-connect/adapter-xaman';
import { CrossmarkAdapter } from '@xrpl-connect/adapter-crossmark';

const walletManager = new WalletManager({
  adapters: [new XamanAdapter({ apiKey: process.env.XUMM_API_KEY }), new CrossmarkAdapter()],
  network: STANDARD_NETWORKS.mainnet,
  autoConnect: true,
});
```

--------------------------------

### Install XRPL Connect packages

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/frameworks/react.md

Install the coordinated stable v1 packages. Keep the SDK and React binding on the same release line.

```bash
pnpm add xrpl-connect @xrpl-commons/xrpl-connect-react xrpl@^4 react react-dom
```

--------------------------------

### Complete HTML example with XRPL-Connect integration

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/frameworks/vanilla-js.md

A single HTML file that sets up the XRPL-Connect wallet connector, initializes WalletManager with Xaman and Crossmark adapters, and handles connect/disconnect events. Requires a valid Xaman API key and a testnet network. The example includes a disconnect button and displays account information upon connection.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>XRPL-Connect Example</title>
    <style>
      body {
        font-family:
          system-ui,
          -apple-system,
          sans-serif;
        max-width: 600px;
        margin: 40px auto;
        padding: 20px;
      }
      #account-info {
        margin-top: 20px;
        padding: 15px;
        background: #f5f5f5;
        border-radius: 8px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>XRPL-Connect Demo</h1>
    <xrpl-wallet-connector id="wallet-connector"></xrpl-wallet-connector>

    <div id="account-info">
      <h2>Connected Account</h2>
      <p><strong>Address:</strong> <span id="address">-</span></p>
      <p><strong>Network:</strong> <span id="network">-</span></p>
      <p><strong>Wallet:</strong> <span id="wallet">-</span></p>
      <button id="disconnect-btn">Disconnect</button>
    </div>

    <script type="module">
      import { WalletManager, XamanAdapter, CrossmarkAdapter } from 'xrpl-connect';

      // Initialize WalletManager
      const walletManager = new WalletManager({
        adapters: [new XamanAdapter({ apiKey: 'YOUR_API_KEY' }), new CrossmarkAdapter()],
        network: 'testnet',
        autoConnect: true,
      });

      // Get DOM elements
      const connector = document.getElementById('wallet-connector');
      const accountInfo = document.getElementById('account-info');
      const addressEl = document.getElementById('address');
      const networkEl = document.getElementById('network');
      const walletEl = document.getElementById('wallet');
      const disconnectBtn = document.getElementById('disconnect-btn');

      // Connect component to wallet manager
      connector.setWalletManager(walletManager);

      // Handle connection
      walletManager.on('connect', (account) => {
        console.log('Connected:', account.address);
        addressEl.textContent = account.address;
        networkEl.textContent = account.network.name;
        walletEl.textContent = walletManager.wallet.name;
        accountInfo.style.display = 'block';
      });

      // Handle disconnection
      walletManager.on('disconnect', () => {
        console.log('Disconnected');
        accountInfo.style.display = 'none';
      });

      // Disconnect button
      disconnectBtn.addEventListener('click', async () => {
        try {
          await walletManager.disconnect();
        } catch (error) {
          console.error('Disconnect failed:', error);
        }
      });
    </script>
  </body>
</html>
```

--------------------------------

### OtsuAdapter Example Usage

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Example of using OtsuAdapter with WalletManager to connect to a wallet.

```APIDOC
## OtsuAdapter Example Usage

### Description
Demonstrates how to instantiate OtsuAdapter and use it with WalletManager to connect to a wallet.

### Method
Usage Example

### Endpoint
`walletManager.connect('otsu')`

### Parameters
#### Query Parameters
- **adapterId** (string) - Required - The adapter identifier 'otsu'

### Request Example
```typescript
import { OtsuAdapter } from '@xrpl-connect/adapter-otsu';
import { WalletManager } from '@xrpl-connect/core';

const otsuAdapter = new OtsuAdapter();

const walletManager = new WalletManager({
  adapters: [otsuAdapter],
  network: 'testnet',
});

const available = await otsuAdapter.isAvailable();
if (available) {
  const account = await walletManager.connect('otsu');
  console.log('Connected:', account.address);
}
```

### Response
Returns an account object with an `address` property.
```

--------------------------------

### Install XRPL-Connect with yarn

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/getting-started.md

Installs XRPL-Connect and xrpl v4 using yarn.

```bash
yarn add xrpl-connect xrpl@^4
```

--------------------------------

### Run docs development server

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/adapter-integration.md

Starts the documentation development server to test locally.

```bash
pnpm docs:dev
```

--------------------------------

### TypeScript example with WalletManager and XamanAdapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/frameworks/vanilla-js.md

Shows how to set up a WalletManager with a Xaman adapter, listen for connection events, and handle errors.

```typescript
import { WalletManager, XamanAdapter } from 'xrpl-connect';
import type { AccountInfo, WalletError } from 'xrpl-connect';

const walletManager: WalletManager = new WalletManager({
  adapters: [new XamanAdapter({ apiKey: 'YOUR_API_KEY' })],
  network: 'testnet',
  autoConnect: true,
});

walletManager.on('connect', (account: AccountInfo) => {
  console.log('Connected:', account.address);
});

try {
  await walletManager.connect('xaman');
} catch (error) {
  const walletError = error as WalletError;
  console.error('Connection failed:', walletError.message);
}
```

--------------------------------

### CrossmarkAdapter usage example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to instantiate CrossmarkAdapter and connect it via WalletManager, checking availability first.

```typescript
import { CrossmarkAdapter } from '@xrpl-connect/adapter-crossmark';
import { WalletManager } from '@xrpl-connect/core';

const crossmarkAdapter = new CrossmarkAdapter();

const walletManager = new WalletManager({
  adapters: [crossmarkAdapter],
});

// Check if available before connecting
const available = await crossmarkAdapter.isAvailable();
if (available) {
  const account = await walletManager.connect('crossmark');
}
```

--------------------------------

### Quick Start: Wire UI, listen to connect/disconnect, and sign a Payment with xrpl-connect

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/getting-started.md

Minimal setup for xrpl-connect: an HTML button and custom element, plus JavaScript that wires the WalletManager with Xaman and Crossmark adapters on testnet, listens for connect/disconnect, and signs a Payment with user-rejection handling. Register connect/disconnect listeners immediately after constructing the manager so the autoConnect reconnect event is not missed.

```html
<button id="connect-btn">Connect Wallet</button>
<xrpl-wallet-connector id="wallet-connector"></xrpl-wallet-connector>
```

```javascript
import {
  CrossmarkAdapter,
  WalletErrorCode,
  WalletManager,
  XamanAdapter,
  isWalletError,
} from 'xrpl-connect';

const walletManager = new WalletManager({
  adapters: [new XamanAdapter({ apiKey: 'YOUR_API_KEY' }), new CrossmarkAdapter()],
  network: 'testnet',
  autoConnect: true,
});

const connector = document.getElementById('wallet-connector');
connector.setWalletManager(walletManager);

document.getElementById('connect-btn').addEventListener('click', () => {
  connector.open();
});

walletManager.on('connect', (account) => {
  console.log('Connected:', account.address);
});

// Reset your UI when the user (or an autoConnect failure) disconnects.
walletManager.on('disconnect', () => {
  console.log('Disconnected');
});

// `sign` rejects when the user cancels in their wallet — always wrap it.
async function sendPayment() {
  try {
    const signed = await walletManager.sign({
      TransactionType: 'Payment',
      Account: walletManager.account.address,
      Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT',
      Amount: '1000000',
    });
    console.log('Signed:', signed);
  } catch (error) {
    if (isWalletError(error) && error.code === WalletErrorCode.SIGN_REJECTED) {
      // User rejected the prompt in their wallet — usually a no-op.
      console.log('User rejected the transaction');
    } else {
      console.error('Sign failed:', error);
    }
  }
}
```

--------------------------------

### Clone and install dependencies

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/adapter-integration.md

Clones the forked repository and installs dependencies using pnpm.

```bash
git clone https://github.com/YOUR_USERNAME/xrpl-connect.git
cd xrpl-connect
pnpm install
```

--------------------------------

### Install XRPL-Connect with pnpm

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/getting-started.md

Installs XRPL-Connect and xrpl v4 using pnpm.

```bash
pnpm add xrpl-connect xrpl@^4
```

--------------------------------

### XyraAdapter Example Usage

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Example of using XyraAdapter with WalletManager to connect to a wallet.

```APIDOC
## XyraAdapter Example Usage

### Description
Demonstrates how to instantiate XyraAdapter and use it with WalletManager to connect to a wallet.

### Method
Usage Example

### Endpoint
`walletManager.connect('xyra')`

### Parameters
#### Query Parameters
- **adapterId** (string) - Required - The adapter identifier 'xyra'

### Request Example
```typescript
import { XyraAdapter } from '@xrpl-connect/adapter-xyra';
import { WalletManager } from '@xrpl-connect/core';

const xyraAdapter = new XyraAdapter();

const walletManager = new WalletManager({
  adapters: [xyraAdapter],
  network: 'testnet',
});

// Xyra is always available — no availability check needed
const account = await walletManager.connect('xyra');
console.log('Connected:', account.address);
```

### Response
Returns an account object with an `address` property.
```

--------------------------------

### Install GHOSTSIG adapter with npm or pnpm

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ghostsig/README.md

Install the adapter package using npm or pnpm. The adapter has no dependency beyond @xrpl-connect/core.

```bash
npm install @xrpl-connect/adapter-ghostsig
# or
pnpm add @xrpl-connect/adapter-ghostsig
```

--------------------------------

### package.json for adapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/adapter-integration.md

Example package.json for a new adapter, using the Xaman adapter as a template. Replace 'my-wallet' and 'MyWallet' with your wallet name.

```json
{
  "name": "@xrpl-connect/adapter-my-wallet",
  "version": "1.0.0",
  "description": "My Wallet adapter for XRPL Connect",
  "author": "Your Name",
  "license": "MIT",
  "homepage": "https://github.com/XRPL-Commons/xrpl-connect#readme",
  "repository": {
    "type": "git",
    "url": "https://github.com/XRPL-Commons/xrpl-connect",
    "directory": "packages/adapters/my-wallet"
  },
  "bugs": {
    "url": "https://github.com/XRPL-Commons/xrpl-connect/issues"
  },
  "keywords": ["xrpl", "my-wallet", "wallet", "adapter", "web3"],
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    }
  },
  "files": ["dist", "README.md"],
  "scripts": {
    "build": "vp pack",
    "dev": "vp pack --watch",
    "test": "vp test run",
    "test:watch": "vp test",
    "lint": "vp lint src",
    "clean": "rm -rf dist"
  },
  "dependencies": {
    "@xrpl-connect/core": "workspace:*"
  },
  "peerDependencies": {
    "xrpl": "^3.0.0 || ^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^20.14.0",
    "typescript": "^5.5.0"
  }
}
```

--------------------------------

### open()

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/ui/README.md

Opens the wallet connection modal immediately. Availability discovery starts when the mounted connector has a manager and runs in the background.

```APIDOC
## open()

### Description
Opens the wallet connection modal immediately. Availability discovery starts when the mounted connector has a manager and runs in the background. The modal uses cached results or shows a loading status until discovery completes; stale results refresh while the wallet list is open. `await open()` waits for the modal to open, not for discovery or a wallet connection.

### Method
open

### Returns
- **Promise<void>** - Resolves when the modal is opened.

### Request Example
```typescript
const connector = document.querySelector('xrpl-wallet-connector');
connector.open();
```

```

--------------------------------

### GHOSTSIG Adapter initialization

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/concepts.md

Creates a GhostsigAdapter instance. No installation required; a passkey prompt approves each transaction.

```typescript
import { GhostsigAdapter } from 'xrpl-connect';

const adapter = new GhostsigAdapter();
```

--------------------------------

### XamanAdapter usage example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to instantiate XamanAdapter with options and connect it via WalletManager. Note that return URLs are for navigation after signing, not the signing result.

```typescript
import { XamanAdapter } from '@xrpl-connect/adapter-xaman';
import { WalletManager } from '@xrpl-connect/core';

const xamanAdapter = new XamanAdapter({
  apiKey: process.env.XUMM_API_KEY,
  returnUrl: {
    app: 'myapp://wallet',
    web: 'https://example.com/wallet',
  },
  onQRCode: (uri) => {
    console.log('QR Code URI:', uri);
    // Display QR code to user
    showQRCode(uri);
  },
});

const walletManager = new WalletManager({
  adapters: [xamanAdapter],
});

const account = await walletManager.connect('xaman');
```

--------------------------------

### Basic setup with WalletManager and GhostsigAdapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ghostsig/README.md

Create a WalletManager with the GhostsigAdapter and connect to the 'ghostsig' adapter on testnet. The adapter is also included in createAdapters() and the <xrpl-wallet-connector> picker.

```typescript
import { WalletManager } from '@xrpl-connect/core';
import { GhostsigAdapter } from '@xrpl-connect/adapter-ghostsig';

const walletManager = new WalletManager({
  adapters: [new GhostsigAdapter()],
  network: 'testnet',
});

const account = await walletManager.connect('ghostsig');
console.log('Connected:', account.address);
```

--------------------------------

### Vue/Nuxt: Client-only plugin for createXrplConnect

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/migration-v1.md

Install createXRPLConnect() once, then use useWallet(), useSigner(), and useWalletModal() below that plugin. In Nuxt, the plugin and every component that calls these composables must be client-only; a <ClientOnly> wrapper does not prevent SSR setup.

```ts
// plugins/xrpl-connect.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(createXrplConnect({ adapters, network: 'testnet' }));
});
```

--------------------------------

### useWallet and useWalletModal for wallet connection state

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/frameworks/react.md

Use the useWallet hook to get connection state and actions, and useWalletModal to open the connection modal. The example renders a connect button when not connected, and shows account, network, and error info when connected.

```tsx
import { useWallet, useWalletModal } from '@xrpl-commons/xrpl-connect-react';

function Header() {
  const { connected, connecting, account, network, error, disconnect } = useWallet();
  const { ready, open } = useWalletModal();

  if (!connected || !account) {
    return (
      <button onClick={() => void open()} disabled={!ready || connecting}>
        Connect wallet
      </button>
    );
  }

  return (
    <div>
      <span>{account.address}</span>
      <span>{network?.name}</span>
      {error && <span role="alert">{error.message}</span>}
      <button onClick={() => void disconnect()}>Disconnect</button>
    </div>
  );
}
```

--------------------------------

### Retrieving multiple accounts with getAccounts()

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ledger/README.md

Retrieves multiple account addresses using getAccounts() for an account selection UI. The example shows fetching 5 accounts starting from index 0, displaying them, and then connecting with a selected account (index 2) via walletManager.connect().

```typescript
const adapter = new LedgerAdapter();

// Get 5 accounts starting from index 0
const accounts = await adapter.getAccounts(5, 0);

// Display accounts to user
accounts.forEach((account) => {
  console.log(`Account ${account.index}: ${account.address}`);
  console.log(`  Path: ${account.path}`);
});

// Example output:
// Account 0: rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT
//   Path: 44'/144'/0'/0/0
// Account 1: rPEPPER7kfTD9w2To4CQk6UCfuHM9c6GDY
//   Path: 44'/144'/1'/0/0
// ...

// User selects account 2, now connect with that account:
const selectedAdapter = new LedgerAdapter({ accountIndex: 2 });
await walletManager.connect(selectedAdapter);
```

--------------------------------

### Install Dependencies with pnpm

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/examples/react/README.md

Install dependencies from the monorepo root using pnpm install. For standalone projects, install the published stable packages explicitly with pnpm add.

```bash
pnpm install
```

```bash
pnpm add @xrpl-commons/xrpl-connect-react xrpl-connect xrpl@^4 react react-dom
```

--------------------------------

### Basic Setup with LedgerAdapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/ledger/README.md

Initializes the WalletManager with a LedgerAdapter for hardware wallet integration. The derivation path and timeout are optional and default to "44'/144'/0'/0/0" and 60000 ms respectively.

```typescript
import { WalletManager } from '@xrpl-connect/core';
import { LedgerAdapter } from '@xrpl-connect/adapter-ledger';

const walletManager = new WalletManager({
  adapters: [
    new LedgerAdapter({
      // Optional: customize derivation path (default: "44'/144'/0'/0/0")
      derivationPath: "44'/144'/0'/0/0",

      // Optional: timeout for operations in ms (default: 60000)
      timeout: 60000,

      // Optional: prefer WebHID over WebUSB (default: false)
      preferWebHID: true,
    }),
  ],
});
```

--------------------------------

### XamanAdapter initialization with returnUrl and optional callbacks

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/api-reference.md

Creates an XamanAdapter with an API key from https://apps.xumm.dev/. Optional returnUrl configures navigation after a signing request resolves; onQRCode and onDeepLink callbacks are commented out. Arbitrary message signing is not supported, and return URLs only control navigation — use the resolved signing operation as confirmation and restore application state if Xaman opens a different browser tab. Callers using XamanAdapter directly may pass a per-session returnUrl to connect(); WalletManager callers configure it on the constructor.

```typescript
import { XamanAdapter } from 'xrpl-connect';

const adapter = new XamanAdapter({
  apiKey: 'YOUR_API_KEY', // Get from https://apps.xumm.dev/
  // Optional: destinations offered after a signing request is resolved
  returnUrl: {
    app: 'myapp://wallet',
    web: 'https://example.com/wallet',
  },
  // Optional: customize QR / deep link handling
  // onQRCode: (uri) => { /* ... */ },
  // onDeepLink: (uri) => uri,
});
```

--------------------------------

### Example Usage: Import and instantiate GhostsigAdapter

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to import and create a GhostsigAdapter instance. The import can be from the adapter package or from the main xrpl-connect package.

```typescript
import { GhostsigAdapter } from '@xrpl-connect/adapter-ghostsig';
// or: import { GhostsigAdapter, Adapters } from 'xrpl-connect';

const ghostsigAdapter = new GhostsigAdapter();
```

--------------------------------

### MetaMaskSnapAdapter.connect()

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Installs/connects the snap, switches network, and reads the account.

```APIDOC
## MetaMaskSnapAdapter.connect()

### Description
Connects to the MetaMask snap by installing/connecting it via wallet_requestSnaps, switching network, and reading the account via xrpl_getAccount.

### Method
`connect(): Promise<void>`

### Example
```typescript
await metaMaskSnapAdapter.connect();
```
```

--------------------------------

### Recommend Xaman with primary-wallet and wallets attributes

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/customization.md

Example showing how to recommend Xaman to users by setting primary-wallet to 'xaman' and specifying a list of wallets to display.

```html
<!-- Recommend Xaman to users -->
<xrpl-wallet-connector
  primary-wallet="xaman"
  wallets="xaman,crossmark,gemwallet"
></xrpl-wallet-connector>
```

--------------------------------

### Error Handling Example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/core/README.md

An example showing how to catch and handle WalletError instances thrown by WalletManager methods.

```APIDOC
## Error Handling Example

### Description
This example demonstrates how to catch a `WalletError` and handle different error codes appropriately.

### Code
```typescript
import { WalletError, WalletErrorCode } from '@xrpl-connect/core';

try {
  await walletManager.connect('xaman', { apiKey: 'key' });
} catch (error) {
  if (error instanceof WalletError) {
    switch (error.code) {
      case WalletErrorCode.WALLET_NOT_FOUND:
        console.error('Wallet adapter not registered');
        break;
      case WalletErrorCode.CONNECTION_REJECTED:
        console.error('User rejected connection');
        break;
      case WalletErrorCode.NETWORK_NOT_SUPPORTED:
        console.error('Wallet does not support this network');
        break;
      default:
        console.error('Unknown error:', error.message);
    }
  }
}
```
```

--------------------------------

### Initialize WalletManager with adapters

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/core/README.md

Shows how to create a WalletManager instance with Xaman and Crossmark adapters, specifying network, autoConnect, storage, and logger options.

```typescript
import { LocalStorageAdapter, WalletManager } from '@xrpl-connect/core';
import { XamanAdapter } from '@xrpl-connect/adapter-xaman';
import { CrossmarkAdapter } from '@xrpl-connect/adapter-crossmark';

const walletManager = new WalletManager({
  adapters: [new XamanAdapter({ apiKey: 'YOUR_API_KEY' }), new CrossmarkAdapter()],
  network: 'mainnet',
  autoConnect: true,
  storage: new LocalStorageAdapter(),
  logger: { level: 'debug' },
});
```

--------------------------------

### Install @xrpl-commons/xrpl-connect-react

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/react/README.md

Install the package along with its peer dependencies. Note that react and react-dom are peer dependencies, and importing any named export from xrpl-connect also registers the web component.

```bash
npm install @xrpl-commons/xrpl-connect-react xrpl-connect xrpl@^4 react react-dom
```

--------------------------------

### XyraAdapter usage example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to instantiate XyraAdapter and use it with WalletManager to connect to the testnet. Xyra is always available, so no availability check is needed.

```typescript
import { XyraAdapter } from '@xrpl-connect/adapter-xyra';
import { WalletManager } from '@xrpl-connect/core';

const xyraAdapter = new XyraAdapter();

const walletManager = new WalletManager({
  adapters: [xyraAdapter],
  network: 'testnet',
});

// Xyra is always available — no availability check needed
const account = await walletManager.connect('xyra');
console.log('Connected:', account.address);
```

--------------------------------

### Install framework bindings for React and Vue

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/getting-started.md

Installs the official framework bindings for React and Vue 3/Nuxt. The React binding requires react and react-dom; the Vue binding requires vue.

```bash
# React
npm install @xrpl-commons/xrpl-connect-react react react-dom
```

```bash
# Vue 3 or Nuxt
npm install @xrpl-commons/xrpl-connect-vue vue
```

--------------------------------

### Install XRPL-Connect Vue packages

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/frameworks/nuxt.md

Install the required packages for using XRPL-Connect with Vue and Nuxt. The command selects the coordinated stable v1 packages; keep the Vue binding and xrpl-connect on the same release line.

```bash
npm install @xrpl-commons/xrpl-connect-vue xrpl-connect xrpl@^4 vue
```

--------------------------------

### Build entire project

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/adapter-integration.md

Builds the entire xrpl-connect project.

```bash
pnpm build
```

--------------------------------

### MetaMaskSnapAdapter usage example

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/packages/adapters/README.md

Shows how to import and instantiate MetaMaskSnapAdapter.

```typescript
import { MetaMaskSnapAdapter } from '@xrpl-connect/adapter-metamask-snap';
// or: import { MetaMaskSnapAdapter, Adapters } from 'xrpl-connect';

const metaMaskSnapAdapter = new MetaMaskSnapAdapter();
```

--------------------------------

### Client-side setup for React with XRPL Connect

Source: https://github.com/xrpl-commons/xrpl-connect/blob/develop/docs/guide/production.md

Import the XRPL Connect React provider and connector in client code. This is required because wallet adapters interact with browser APIs. The official React package can be imported during SSR, but provider/plugin setup and the connector must be in client code.

```tsx
'use client';

import { XrplConnectProvider, WalletConnector } from '@xrpl-commons/xrpl-connect-react';
```
Tokens:
Raw