Integrate Web3Auth with the XRPL Blockchain

The Embedded Wallets Web SDK uses @web3auth/xrpl-provider for XRPL JSON-RPC methods such as xrpl_getAccounts and xrpl_signTransaction. After sign-in, read that provider from the auth connector. Do not use connection.ethereumProvider, which is the EVM EIP-1193 provider for Wagmi and eth_* methods.

Installation

To interact with the XRPL blockchain, you can use the @web3auth/xrpl-provider package.

npm

npm install --save @web3auth/xrpl-provider

Yarn

yarn add @web3auth/xrpl-provider

pnpm

pnpm add @web3auth/xrpl-provider

Bun

bun add @web3auth/xrpl-provider

Getting the chainConfig

Mainnet

• Chain Namespace: OTHER
• Chain ID: 0x1
• Public RPC URL: https://ripple-node.tor.us (Avoid using public rpcTarget in production, use services like Infura)
• WebSocket URL: wss://s2.ripple.com
• Ticker: XRP
• Ticker Name: XRPL
• Display Name: xrpl mainnet
• Block Explorer Link: https://livenet.xrpl.org

Testnet

• Chain Namespace: OTHER
• Chain ID: 0x2
• Public RPC URL: https://testnet-ripple-node.tor.us (Avoid using public rpcTarget in production, use services like Infura)
• WebSocket URL: wss://s.altnet.rippletest.net
• Ticker: XRP
• Ticker Name: XRPL
• Display Name: xrpl testnet
• Block Explorer Link: https://testnet.xrpl.org

Devnet

• Chain Namespace: OTHER
• Chain ID: 0x3
• Public RPC URL: https://devnet-ripple-node.tor.us (Avoid using public rpcTarget in production, use services like Infura)
• WebSocket URL: wss://s.devnet.rippletest.net/
• Ticker: XRP
• Ticker Name: XRPL
• Display Name: xrpl devnet
• Block Explorer Link: https://devnet.xrpl.org

Initializing provider

From v11 onward, enable XRPL on the dashboard. You do not need to pass a chains array in code for standard XRPL networks.

import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from '@web3auth/modal'
import type { IProvider } from '@web3auth/modal'

const web3AuthOptions: Web3AuthOptions = {
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
}

const web3auth = new Web3Auth(web3AuthOptions)

await web3auth.init()

await web3auth.connect()
// await web3auth.connectTo(WALLET_CONNECTORS.AUTH, { ... }); // For custom flow

// XRPL RPC — not connection.ethereumProvider (EVM only).
const provider: IProvider | null = web3auth.getConnector(WALLET_CONNECTORS.AUTH)?.provider ?? null

Custom chain configuration in code

If you override RPC endpoints or chain IDs in code, pass an XrplPrivateKeyProvider as privateKeyProvider (see Web3AuthOptions):

import { CHAIN_NAMESPACES } from '@web3auth/base'
import { XrplPrivateKeyProvider } from '@web3auth/xrpl-provider'
import { Web3Auth, WALLET_CONNECTORS, WEB3AUTH_NETWORK } from '@web3auth/modal'

const privateKeyProvider = new XrplPrivateKeyProvider({
  config: {
    chainConfig: {
      chainNamespace: CHAIN_NAMESPACES.OTHER,
      chainId: '0x2',
      rpcTarget: 'https://testnet-ripple-node.tor.us',
      displayName: 'xrpl testnet',
      ticker: 'XRP',
      tickerName: 'XRPL',
    },
  },
})

const web3auth = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_MAINNET,
  privateKeyProvider,
})

await web3auth.init()
await web3auth.connect()

const provider = web3auth.getConnector(WALLET_CONNECTORS.AUTH)?.provider ?? null

Get account and Balance

try {
  // provider is from above
  const accounts = await provider.request<string[]>({
    method: 'xrpl_getAccounts',
  })

  if (accounts) {
    const accInfo = (await provider.request({
      method: 'account_info',
      params: [
        {
          account: accounts[0],
          strict: true,
          ledger_index: 'current',
          queue: true,
        },
      ],
    })) as Record<string, Record<string, string>>
    console.log('XRPL account info', accInfo)
    // XRPL Account
    const account = accInfo?.account_data?.Account
    // Balance
    const balance = accInfo?.account_data?.Balance
  } else {
    console.log('No accounts found, please report this issue.')
  }
} catch (error) {
  console.error('Error', error)
}

Sign a transaction

import { Payment, xrpToDrops } from 'xrpl'

try {
  const accounts = await provider.request<string[]>({
    method: 'xrpl_getAccounts',
  })

  if (accounts && accounts.length > 0) {
    const tx: Payment = {
      TransactionType: 'Payment',
      Account: accounts[0] as string,
      Amount: xrpToDrops(2),
      Destination: 'rJAHHPYmy4g3h7kzfj2Mzm2nHwpKuVdEvX', // Destination address
    }
    const txSign = await provider.request({
      method: 'xrpl_signTransaction',
      params: {
        transaction: tx,
      },
    })
    console.log('txRes', txSign)
  } else {
    console.log('failed to fetch accounts')
  }
} catch (error) {
  console.log('error', error)
}

Send transaction

import { Payment, xrpToDrops } from 'xrpl'

try {
  const accounts = await provider.request<string[]>({
    method: 'xrpl_getAccounts',
  })

  if (accounts && accounts.length > 0) {
    const tx: Payment = {
      TransactionType: 'Payment',
      Account: accounts[0] as string,
      Amount: xrpToDrops(2),
      Destination: 'rJAHHPYmy4g3h7kzfj2Mzm2nHwpKuVdEvX',
    }
    const txSign = await provider.request({
      method: 'xrpl_submitTransaction',
      params: {
        transaction: tx,
      },
    })
    console.log('txRes', txSign)
  } else {
    console.log('failed to fetch accounts')
  }
} catch (error) {
  console.log('error', error)
}

Sign a message

import { convertStringToHex } from 'xrpl'

try {
  const msg = 'Hello world'
  const hexMsg = convertStringToHex(msg)
  const txSign = await provider.request<{ signature: string }>({
    method: 'xrpl_signMessage',
    params: {
      message: hexMsg,
    },
  })
  console.log('txRes', txSign)
} catch (error) {
  console.log('error', error)
}