Browser Extension

Quick Start: Browser Extension

Detect Joey, connect, read the network and send a payment in a few lines.

This guide uses @joeywallet/wallet-sdk to connect to the Joey browser extension and send a payment. Using React? Jump to React and vanilla.

1. Install

npm install @joeywallet/wallet-sdk

2. Detect Joey

waitForJoey() resolves as soon as the extension is present, and rejects if it isn't installed within the timeout.

import { waitForJoey } from '@joeywallet/wallet-sdk'

let joey
try {
  joey = await waitForJoey({ timeoutMs: 3000 })
} catch {
  showInstallPrompt('https://joeywallet.xyz/extension')
}

3. Connect

Try a silent connect on page load. It never shows a prompt and returns an empty list if the user hasn't approved your site yet. Then connect for real from a user action, such as a button click.

// On page load: reconnect without prompting
let { accounts } = await joey.connect({ silent: true })

// On a button click: opens the Joey approval window
if (accounts.length === 0) {
  ;({ accounts } = await joey.connect())
}

const address = accounts[0].address

4. Read the network

const network = await joey.getNetwork()
// { chain: 'xrpl:1', networkId: 1, name: 'Testnet' }

getNetwork() only works once your site is connected.

5. Send a payment

import { isUserRejection, JoeyRpcError, JOEY_ERROR_CODES } from '@joeywallet/wallet-sdk'

try {
  const result = await joey.signAndSubmitTransaction({
    account: address,      // which granted account signs
    chain: network.chain,  // refused with 4901 if the user has switched network
    tx_json: {
      TransactionType: 'Payment',
      Account: address,
      Destination: 'rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe',
      Amount: '1000000', // 1 XRP, in drops
      DestinationTag: 42,
    },
  })
  console.log(result.hash, result.engine_result) // e.g. 'tesSUCCESS' (preliminary)
} catch (error) {
  if (isUserRejection(error)) return // the user declined
  if (error instanceof JoeyRpcError && error.code === JOEY_ERROR_CODES.LIMIT_EXCEEDED) {
    // too many requests: back off
  }
  throw error
}

Good to know

  • Autofill. Joey fills in Fee, Sequence and LastLedgerSequence unless you pass autofill: false.
  • Amounts. XRP amounts are strings of drops (1 XRP = 1,000,000 drops). Issued tokens use { currency, issuer, value }, with value as a string.
  • Results are preliminary. engine_result is the server's first answer. Confirm the final outcome on-ledger by hash.
  • Be patient. A signing call waits for the user and can stay pending for up to 5 minutes. Don't wrap it in a short timeout.

Next steps

PreviousInstallationNext React and Vanilla