Appearance

Vanilla JavaScript ​

Integrate XRPL-Connect into your Vanilla JavaScript application.

Basic Setup ​

Here's a complete example with a single HTML file:

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';
    });

    // Handle errors
    walletManager.on('error', (error) => {
      console.error('Error:', error.message);
      alert('Connection error: ' + error.message);
    });

    // Disconnect button
    disconnectBtn.addEventListener('click', async () => {
      await walletManager.disconnect();
    });
  </script>
</body>
</html>

Handling Wallet Events ​

Listen to wallet events to keep your UI in sync:

javascript
// Connection event
walletManager.on('connect', (account) => {
  console.log('Connected to:', account.address);
  console.log('Network:', account.network.name);
});

// Disconnection event
walletManager.on('disconnect', () => {
  console.log('Disconnected');
});

// Error event
walletManager.on('error', (error) => {
  console.error('Error code:', error.code);
  console.error('Error message:', error.message);
});

// Account change (user switched accounts)
walletManager.on('accountChange', (account) => {
  console.log('Account changed:', account.address);
});

// Network change (user switched networks)
walletManager.on('networkChange', (network) => {
  console.log('Network changed:', network.name);
});

Signing Transactions ​

Sign and submit transactions to the XRP Ledger:

javascript
// Simple payment transaction
async function sendPayment() {
  try {
    const result = await walletManager.signAndSubmit({
      TransactionType: 'Payment',
      Account: walletManager.account.address,
      Destination: 'rN7n7otQDd6FczFgLdlqtyMVrn3HMfXoQT',
      Amount: '1000000',  // 1 XRP in drops
    });

    console.log('Transaction submitted:', result.hash);
    alert('Payment sent! Hash: ' + result.hash);
  } catch (error) {
    console.error('Transaction failed:', error.message);
    alert('Transaction failed: ' + error.message);
  }
}

Signing Messages ​

Sign messages with the connected wallet:

javascript
async function signMessage() {
  try {
    const result = await walletManager.signMessage('Hello XRPL');

    console.log('Message signed:', result.signature);
    console.log('Signed message:', result.message);
  } catch (error) {
    console.error('Sign failed:', error.message);
  }
}

Checking Connection Status ​

Check if a wallet is connected and access account information:

javascript
// Check connection
if (walletManager.connected) {
  console.log('Wallet address:', walletManager.account.address);
  console.log('Network:', walletManager.account.network.name);
  console.log('Wallet name:', walletManager.wallet.name);
} else {
  console.log('No wallet connected');
}

// Access current state
const { connected, account, wallet } = walletManager;

Multiple Wallet Adapters ​

Give users choice by supporting multiple wallets:

javascript
import { WalletManager,XamanAdapter,WalletConnectAdapter,GemWalletAdapter;CrossmarkAdapter } from 'xrpl-connect';


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

Now users will see all four wallets in the connection modal!

Error Handling ​

Always handle errors gracefully:

javascript
walletManager.on('error', (error) => {
  console.error('Error code:', error.code);
  console.error('Error message:', error.message);
  console.error('Error details:', error.details);

  // Handle specific errors
  switch (error.code) {
    case 'WALLET_NOT_FOUND':
      alert('Please install a wallet to continue');
      break;
    case 'CONNECTION_FAILED':
      alert('Failed to connect. Please try again.');
      break;
    case 'SIGN_FAILED':
      alert('You rejected the transaction');
      break;
    default:
      alert('An error occurred: ' + error.message);
  }
});

Or use try-catch with promise-based methods:

javascript
try {
  const result = await walletManager.signAndSubmit(transaction);
  console.log('Success:', result);
} catch (error) {
  if (error.code === 'SIGN_FAILED') {
    console.error('User rejected the transaction');
  } else if (error.code === 'NETWORK_ERROR') {
    console.error('Network problem:', error.message);
  } else {
    console.error('Unexpected error:', error);
  }
}

Web Component Attributes ​

Customize the component with attributes:

html
<!-- Feature a specific wallet -->
<xrpl-wallet-connector
  id="wallet-connector"
  primary-wallet="xaman"
></xrpl-wallet-connector>

<!-- Show only specific wallets -->
<xrpl-wallet-connector
  id="wallet-connector"
  wallets="xaman,crossmark"
></xrpl-wallet-connector>

<!-- Customize styling -->
<xrpl-wallet-connector
  id="wallet-connector"
  style="
    --xc-primary-color: #667eea;
    --xc-background-color: #1a202c;
    --xc-text-color: #ffffff;
  "
></xrpl-wallet-connector>

Component Methods ​

The component has useful methods you can call:

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

// Open wallet selection modal
await connector.open();

// Close any open modals
connector.close();

Best Practices ​

  1. Initialize Once - Create the WalletManager at app startup, not in loops or event handlers

  2. Use Event Listeners - Listen to events to keep UI in sync with wallet state

  3. Handle Errors - Always have error handlers for wallet operations

  4. Validate Transactions - Check transaction parameters before signing

  5. Check Connection - Always verify walletManager.connected before accessing account info

  6. Support Multiple Wallets - Include at least Xaman and Crossmark for good UX

  7. Test Thoroughly - Test with different wallets and networks

  8. Use TypeScript - Consider migrating to TypeScript for better type safety

Complete Example with TypeScript ​

If you want to add TypeScript:

typescript
import { WalletManager, Account, WalletError, XamanAdapter} from 'xrpl-connect';

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

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

walletManager.on('error', (error: WalletError) => {
  console.error('Error:', error.message);
});

Released under the MIT License.

Copyright © 2025 XRPL Commons