Documentation

Getting Started

Wallet Platforms

Developer Resources

XRPL Injection API

Integrate DropFi Wallet into your DApps with the XRPL Injection API. Seamlessly connect to the XRP Ledger without exposing private keys.

Overview

XRPL Injection API

Connect your DApp to DropFi Wallet seamlessly

The XRPL Injection API allows developers to integrate DropFi Wallet into their decentralized applications (DApps) by injecting the `window.xrpl` object into web pages. This facilitates seamless interaction with the XRP Ledger without exposing users' private keys.

Auto-Initialization

Automatically initializes the injected window.xrpl provider

Comprehensive Methods

Full suite of methods for DApp integration

React Integration

Built-in React context and hooks for easy development

Cross-Platform

Works with both browser extension and mobile webview

Installation

1

Install the Package

Add the DropFi XRPL React package to your project

Use npm or yarn to install the official DropFi XRPL React package

2

Import Dependencies

Import the XrplProvider and useXrplReact hook

These components provide the React context for accessing DropFi Wallet

3

Wrap Your App

Wrap your application with the XrplProvider component

This enables the XRPL injection API throughout your app

4

Use the Hook

Access wallet functionality using the useXrplReact hook

Connect, disconnect, and interact with the XRP Ledger seamlessly

Package Installation
npm install @dropfi/xrpl-react
# or
yarn add @dropfi/xrpl-react

Basic Usage

Here's how to integrate DropFi Wallet into a React application:
React Integration Example
import { XrplProvider, useXrplReact } from '@dropfi/xrpl-react';


export default function App() {
  return (
    <XrplProvider>
      <SomeComponent />
    </XrplProvider>
  );
}


function SomeComponent() {
  const { address, connect, disconnect } = useXrplReact();


  return (
    <div>
      <p>Address: {address ?? 'Not connected'}</p>
      <button onClick={connect}>Connect Wallet</button>
      <button onClick={disconnect}>Disconnect</button>
    </div>
  );
}
This setup enables your application to connect to the DropFi Wallet, manage connections, and handle transactions seamlessly.

API Methods

The XRPL Injection API provides several key methods for DApp integration:
POST
connect()

Initiates connection to DropFi Wallet

Parameters: None - returns Promise<boolean>

POST
disconnect()

Disconnects from DropFi Wallet

Parameters: None - returns Promise<void>

POST
sendTransaction(transaction)

Sends a transaction to the XRP Ledger

Parameters: transaction: XRPLTransaction - returns Promise<string>

POST
signMessage(message)

Signs a message using the connected wallet

Parameters: message: string - returns Promise<string>

GET
getAddress()

Returns the connected wallet address

Parameters: None - returns string | null

GET
isConnected()

Checks if wallet is connected

Parameters: None - returns boolean

React Integration

The @dropfi/xrpl-react package exports XrplProvider and useXrplReact. Call useXrplReact() inside XrplProvider to get:
  • address, wallet, connectedAccounts — current address and connected accounts
  • connect(), disconnect(), isConnected — connection state and methods
  • sendTransaction(tx), signMessage(message) — send payments or sign messages for auth
  • changeNetwork(network), network — switch and read mainnet/testnet
  • error, isConnecting, initialized — status and loading state

Error Handling

Handle these cases when integrating with the XRPL Injection API:
  • Connection errors — wallet extension not installed or user rejects connection
  • Transaction failures — network issues, insufficient funds, or rejected transactions
  • User rejection — user cancels signing or connection; show a clear message and optional retry
Error Handling Example
const { connect, sendTransaction } = useXrplReact();


const handleConnect = async () => {
  try {
    const connected = await connect();
    if (connected) {
      console.log('Wallet connected successfully');
    }
  } catch (error) {
    console.error('Connection failed:', error);
    // Handle connection error
  }
};

Best Practices

Follow these best practices when integrating with the XRPL Injection API:
  • Always check if the wallet is connected before attempting operations
  • Implement proper loading states during wallet operations
  • Use TypeScript for better type safety and developer experience
  • Test your integration with both the browser extension and mobile app
  • Implement proper error boundaries and user feedback
  • Follow XRPL transaction best practices for optimal performance
  • Consider implementing retry logic for failed network requests

Complete Examples

Here are complete examples of common DApp integration patterns:
Wallet Connection Component
import React, { useState } from 'react';
import { useXrplReact } from '@dropfi/xrpl-react';


function WalletConnect() {
  const { address, connect, disconnect, isConnected } = useXrplReact();
  const [isLoading, setIsLoading] = useState(false);


  const handleConnect = async () => {
    setIsLoading(true);
    try {
      await connect();
    } catch (error) {
      console.error('Connection failed:', error);
    } finally {
      setIsLoading(false);
    }
  };


  const handleDisconnect = async () => {
    try {
      await disconnect();
    } catch (error) {
      console.error('Disconnection failed:', error);
    }
  };


  if (isConnected) {
    return (
      <div>
        <p>Connected: {address}</p>
        <button onClick={handleDisconnect}>Disconnect</button>
      </div>
    );
  }


  return (
    <button onClick={handleConnect} disabled={isLoading}>
      {isLoading ? 'Connecting...' : 'Connect Wallet'}
    </button>
  );
}


export default WalletConnect;
Transaction Sending Component
import React, { useState } from 'react';
import { useXrplReact } from '@dropfi/xrpl-react';


function SendTransaction() {
  const { sendTransaction, isConnected } = useXrplReact();
  const [amount, setAmount] = useState('');
  const [recipient, setRecipient] = useState('');
  const [isLoading, setIsLoading] = useState(false);


  const handleSend = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!isConnected) return;


    setIsLoading(true);
    try {
      const transaction = {
        TransactionType: 'Payment',
        Account: 'sender-address',
        Destination: recipient,
        Amount: amount
      };


      const hash = await sendTransaction(transaction);
      console.log('Transaction sent:', hash);
      // Handle success
    } catch (error) {
      console.error('Transaction failed:', error);
      // Handle error
    } finally {
      setIsLoading(false);
    }
  };


  return (
    <form onSubmit={handleSend}>
      <input
        type="text"
        placeholder="Recipient Address"
        value={recipient}
        onChange={(e) => setRecipient(e.target.value)}
      />
      <input
        type="text"
        placeholder="Amount"
        value={amount}
        onChange={(e) => setAmount(e.target.value)}
      />
      <button type="submit" disabled={!isConnected || isLoading}>
        {isLoading ? 'Sending...' : 'Send Transaction'}
      </button>
    </form>
  );
}


export default SendTransaction;

Troubleshooting

Common issues and solutions when integrating with the XRPL Injection API:

Wallet Not Detected

Ensure the DropFi extension is installed and the page is refreshed after installation.

Connection Timeout

Check if the user has the DropFi extension open and is not blocking connection requests.

Method Not Found

Verify you're using the latest version of the @dropfi/xrpl-react package.

Next Steps

Ready to Build?

Now that you understand the XRPL Injection API, start building your DApp integration with DropFi Wallet.

On This Page

Select a documentation page to see its table of contents