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
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
Install the Package
Add the DropFi XRPL React package to your project
Use npm or yarn to install the official DropFi XRPL React package
Import Dependencies
Import the XrplProvider and useXrplReact hook
These components provide the React context for accessing DropFi Wallet
Wrap Your App
Wrap your application with the XrplProvider component
This enables the XRPL injection API throughout your app
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-reactBasic Usage
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>
);
}API Methods
connect()Initiates connection to DropFi Wallet
Parameters: None - returns Promise<boolean>
disconnect()Disconnects from DropFi Wallet
Parameters: None - returns Promise<void>
sendTransaction(transaction)Sends a transaction to the XRP Ledger
Parameters: transaction: XRPLTransaction - returns Promise<string>
signMessage(message)Signs a message using the connected wallet
Parameters: message: string - returns Promise<string>
getAddress()Returns the connected wallet address
Parameters: None - returns string | null
isConnected()Checks if wallet is connected
Parameters: None - returns boolean
React Hooks
useXrplReact
Main hook for accessing wallet state and methods
useXrplAccount
Hook for accessing account-specific information
useXrplNetwork
Hook for network configuration and status
useXrplTransactions
Hook for transaction history and management
Error Handling
Connection Errors
Always handle cases where the wallet extension is not installed or the user rejects the connection.
Transaction Failures
Implement proper error handling for failed transactions, including network issues and insufficient funds.
User Rejection
Handle cases where users reject transaction signing or connection requests gracefully.
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
- 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
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
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.