Dhali XRP NFT Fetcher

A full-stack application with Node.js backend and React frontend to fetch and display NFT lists from XRP accounts using Dhali's payment claim API.

📖 Read the Complete Dhali API Documentation - Comprehensive guide to understanding and using Dhali's payment-based API system.

💻 Code References:

• DHALI_INTEGRATION_REFERENCE.js - Detailed code reference with extensive comments
• DHALI_QUICK_REFERENCE.js - Minimal quick-start code snippets for copy-paste

Project Structure

.
├── index.js              # Backend server
├── package.json          # Backend dependencies
├── .env                  # Environment variables
└── frontend/             # React frontend
    ├── public/
    ├── src/
    └── package.json

Setup

Backend Setup

1. Install backend dependencies:

npm install

2. Make sure your .env file contains:

PAYMENT_CLAIM=your_payment_claim_token
MY_XRPL_ADDRESS=your_xrp_address

Frontend Setup

1. Navigate to the frontend directory and install dependencies:

cd frontend
npm install

Running the Application

Option 1: Run Both Backend and Frontend

1. Start the backend server (from root directory):

npm start

The backend will run on http://localhost:3000

2. In a new terminal, start the frontend (from frontend directory):

cd frontend
npm start

The frontend will run on http://localhost:3001 and automatically proxy API requests to the backend.

3. Open your browser and visit http://localhost:3001 to use the application.

Option 2: Use Backend API Only

npm start

The server will start on http://localhost:3000 and you can access the API endpoints directly.

Frontend Features

The React frontend provides a beautiful and intuitive interface to:

• View NFTs for the configured XRP account
• Search for NFTs from any XRP address
• Display NFT images, metadata, and details
• View payment claim information
• Expand NFT cards to see full details including Token ID, Issuer, URI, and raw data
• Responsive design that works on desktop and mobile

API Endpoints

1. Fetch NFTs for configured account

GET http://localhost:3000/nfts

Fetches NFTs for the XRP address configured in .env file.

2. Fetch NFTs for specific account

GET http://localhost:3000/nfts/:address

Example:

GET http://localhost:3000/nfts/r9ukPqsBE5B3Sdf3asPnXWLUYVpGihJTYc

3. View payment claim info

GET http://localhost:3000/claim-info

Shows decoded payment claim information.

4. Health check

GET http://localhost:3000/

Shows API information and available endpoints.

Testing

You can test the endpoints using curl:

# Fetch NFTs for configured account
curl http://localhost:3000/nfts

# Fetch NFTs for specific account
curl http://localhost:3000/nfts/r9ukPqsBE5B3Sdf3asPnXWLUYVpGihJTYc

# View claim information
curl http://localhost:3000/claim-info

Or open the URLs in your browser.

Response Format

Success response:

{
  "message": "NFTs fetched successfully",
  "success": true,
  "account": "r9ukPqsBE5B3Sdf3asPnXWLUYVpGihJTYc",
  "nfts": [...],
  "count": 5
}

Error response:

{
  "message": "Failed to fetch NFTs",
  "success": false,
  "error": "Error details",
  "account": "r9ukPqsBE5B3Sdf3asPnXWLUYVpGihJTYc"
}

Notes

• The application uses Dhali's payment claim for authorization
• Uses XRPL JSON-RPC account_nfts method via Dhali's XRPL Cluster API
• All errors are logged to the console for debugging
• Payment claims are cumulative - authorization amount covers multiple requests

Documentation

📚 Available Documentation

• DHALI_API_DOCUMENTATION.md - Complete guide to Dhali API integration

  • What is Dhali and how it works
  • Payment claims explained in detail
  • Technical implementation details
  • Cost analysis and usage guide
  • Troubleshooting common issues

• QUICK_START.md - Quick setup guide to get running fast

• frontend/README.md - React frontend documentation

🔗 External Resources

• Dhali Official Website
• Dhali Documentation
• Dhali Payment Terminal
• XRPL account_nfts Documentation
• XRP Ledger Payment Channels

How It Works

This application demonstrates pay-per-use API access using XRP Ledger payment channels:

1. You create a payment channel on the XRP Ledger with Dhali as the destination
2. You generate a payment claim that authorizes Dhali to pull funds from your channel
3. Each API request includes the payment claim in the Payment-Claim header
4. Dhali validates the claim and forwards the request to the XRPL Cluster API
5. You only pay for actual usage - not the full authorization amount
6. The response includes the NFT data from the XRP Ledger

Example NFT Response

{
  "NFTokenID": "0008271005ECDB63C36C15BAAF49634CA2D7C65D9ADDD1DD864A4F3B05A2CF96",
  "Issuer": "rYL3n9Ufc3W6ZHarPKEPZaF9gZruhRZkw",
  "NFTokenTaxon": 10,
  "TransferFee": 10000,
  "URI": "ipfs://bafybeicqbqeuf3xdl2opbnzd7jevyulovzy5vvr7icl6z64guvcjc4vuumq/XDawg2875.json"
}

Features

✅ Pay-per-use - No subscriptions, only pay for what you use ✅ No rate limits - Scale as needed ✅ Transparent pricing - Know exactly what each request costs ✅ Real-time payments - Using XRP Ledger payment channels ✅ Beautiful UI - React frontend with responsive design ✅ Search any address - Look up NFTs for any XRP account ✅ Detailed NFT view - See metadata, URIs, and raw JSON data

Tech Stack

Backend:

• Node.js + Express
• Axios for HTTP requests
• Dhali XRPL Cluster API

Frontend:

• React 18
• Axios for API calls
• CSS with gradient design
• Responsive layout

Blockchain:

• XRP Ledger (Mainnet)
• Dhali payment channels
• XRPL JSON-RPC methods