xApp developer basics

Guidelines to respect (UI/UX/design) when building xApps, for consistency (user experience)

To get started, please Register your app first. Then visit the xApp section in the side bar of the developer console to enable xApp features for your app.

Anyone can kick off xApp development without our help, straight from the Developer Console. However: then only the creator and max 10 invitees (based on device UUID) can visit the xApp. The permission (review, it's a conversation, a process, please discuss in advance to prevent bad news after development) comes when you want to take the xApp public.

We will need your XUMM Developer App API Key (not the secret) & the https:// endpoint where your xApp will be running (use Cloudflared Argo / Localtunnel / ...) for local development.

  1. Respect the xApp style guide
  2. 🎉 If you want to call the XUMM API / use the SDK straight from your frontend (without going through your own backend or using a proxy), use the xApps JWT flow.
    ⚠️ NEVER call the regular XUMM API / use the SDK from your SPA/WebApp frontend, if you need a simple proxy, take a look at https://github.com/XRPL-Labs/xapp-proxy-for-xumm-api.
  3. Read the xApp (technical) flow page carefully!
  4. You can code & debug in your browser, locally, see this page & section for more information
  5. For remote client side JS debugging while your xApp is running in XUMM on your phone, check out remotejs.com

CORS headers

To allow an xApp to be loaded in Xumm (if you're getting a blank page when loading your xApp in Xumm: this is usually the problem) CORS headers are required.

Please have your xApp service the Access-Control-Allow-Origin: * header & value.
Or more strict: Access-Control-Allow-Origin: https://xumm.app

Also, the X-Frame-Options header must not be present, some servers send SAMEORIGIN or DENY as X-Frame-Options, in which case the xApp will render as just a blank page.