Skip to content

XRPL-Commons/scaffold-xrp

Repository files navigation

Scaffold-XRP

A Next.js-based development stack for building decentralized applications on XRPL with smart contracts. Built with Turborepo, inspired by Scaffold-ETH-2.

Features

  • Next.js 14 - Modern React framework with App Router
  • Turborepo - High-performance build system for monorepos
  • XRPL Integration - Full XRPL client with WebSocket support
  • Multi-Wallet Support - Connect with Xaman, Crossmark, GemWallet, or manual address
  • Network Switching - Easy switching between AlphaNet, Testnet, and Devnet
  • Smart Contract Tools - Deploy and interact with XRPL smart contracts
  • Faucet Integration - Request test XRP directly from the UI
  • Transaction History - View your transaction history with explorer links
  • Debug Panel - Execute custom XRPL commands and view network info
  • Sample Contract - Counter contract example in Rust

Quick Start

Prerequisites

  • Node.js 18+ and pnpm 8+
  • Rust (optional, for building contracts)

Installation

# Clone the repository
git clone https://github.com/yourusername/scaffold-xrp.git
cd scaffold-xrp

# Install dependencies
pnpm install

# Start the development server
pnpm dev

The app will be available at http://localhost:3000

Project Structure

scaffold-xrp/
├── apps/
│   └── web/                 # Next.js application
│       ├── app/             # Next.js App Router
│       ├── components/      # React components
│       └── lib/             # Utilities and configurations
├── packages/
│   └── bedrock/             # Smart contracts (Rust)
│       ├── src/
│       │   └── lib.rs       # Counter contract example
│       └── Cargo.toml
├── package.json
├── pnpm-workspace.yaml
└── turbo.json

Usage

Connecting Your Wallet

  1. Click "Connect Wallet" in the header
  2. Choose your wallet (Xaman, Crossmark, GemWallet) or enter address manually
  3. Approve the connection in your wallet extension

Getting Test XRP

  1. Connect your wallet
  2. Go to the "Faucet" section
  3. Click "Request Test XRP"
  4. Wait for the transaction to complete

Deploying a Smart Contract

  1. Build your contract (see Building Contracts)
  2. Go to "Deploy Contract"
  3. Upload your .wasm file
  4. Confirm the transaction (requires 100 XRP fee)
  5. Copy the contract address from the confirmation

Interacting with Contracts

  1. Go to "Interact with Contract"
  2. Enter the contract address
  3. Enter the function name (e.g., increment)
  4. Add arguments if needed
  5. Click "Call Contract Function"
  6. Confirm the transaction in your wallet

Building Contracts

Install Rust

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup target add wasm32-unknown-unknown

Build the Counter Contract

cd packages/bedrock
cargo build --target wasm32-unknown-unknown --release

The compiled WASM file will be at:

target/wasm32-unknown-unknown/release/counter.wasm

See packages/bedrock/README.md for more details.

Development

Available Commands

pnpm dev          # Start development server
pnpm build        # Build all packages
pnpm lint         # Lint all packages
pnpm format       # Format code with Prettier
pnpm clean        # Clean build artifacts

Environment Variables

Create a .env.local file in apps/web/:

# Optional: Configure default network
NEXT_PUBLIC_DEFAULT_NETWORK=alphanet

Networks

AlphaNet (Default)

Testnet

Devnet

Components

Core Components

  • Header - Navigation with wallet connection and network switching
  • AccountInfo - Display wallet address and balance
  • FaucetRequest - Request test XRP from network faucet
  • ContractDeployment - Upload and deploy WASM contracts
  • ContractInteraction - Call contract functions
  • TransactionHistory - View transaction history
  • DebugPanel - Execute custom XRPL commands

Providers

  • XRPLProvider - Global state for XRPL connection, wallet, and network

Technologies

Resources

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE file for details

Acknowledgments

About

A development stack based on Next.js for building decentralized applications on XRP with a multi-wallet connector.

Topics

Resources

License

Contributing

Stars

Watchers

Forks

Contributors