xApps: build & integrate
xApps are small, user friendly embedded WebApps in XUMM for XRPL Labs / XUMM partners.
To publish xApps, contact XRPL Labs Support. Visit the XUMM Developer Console, register your app and read the xApp page for more information: https://apps.xumm.dev/app-xapp
Method #1: Xumm SDK (xApp JWT flow)
The easiest way to work with xApps & interact with the Xumm API from your xApp (frontend), is through the XUMM SDK for Javascript. You can read about using the Xumm SDK in (frontend) xApps on this page:
» Xumm SDK: xApp (JWT) flow
Xumm UI interaction
The Xumm SDK offers an easy way to get your xApp to communicate with the Xumm platform. For UI interactions, there's also the xApp Javascript SDK for xApp Xumm UI interaction.
If you want to build your own xApp API integration, or consume xApp context information from your own backend, you can read the content below on fetching context information. If you use the XUMM SDK for Javascript from your frontend using the xApp (JWT) flow, the content below is not for you:
Method #2: DIY: getting xApp context information (Backend)
Note: calling the XUMM API from your frontend / xApp
The XUMM API is not supposed to be called from your frontend (for security reasons). Your XUMM tokens could be used by a 3rd party to trick users into signing sign requests.
- You can use the xApp JWT flow for direct interaction between your frontend and the XUMM platform
- You can use the JS/TS SDK to build your own backend.
Your xApp URL will get two extra GET parameters appended when opened, with an "OTT": One Time Token, and the app style (light, dark, ...) for to render the xApp UI. The first GET param. is called xAppToken and contains a UUID. To retrieve the environment and user data for your own xApp session, you must fetch the OTT data from the XUMM API within one minute (and only once): xapp/ott/:token.
You can find an example on consuming the OTT data using the XUMM SDK for JS/TS.
While developing your xApp, you can easily re-fetch an OTT (so: fetch the OTT without invalidating it, allowing for easy page refreshing) by whitelisting your Device ID when using the JWT endpoints, or by using a specially crafted hash when using the XUMM backend API (SDK/DIY).
The OTT data will contain the selected r-address of the XRPL account managed with XUMM, as well as the selected locale (in XUMM) and other data. When your WebApp relies on eg. browser locale, please note that you'll have to get the locale from the OTT, as the XUMM xApp frame locale will always be default.
The second GET parameter is called xAppStyle, and contains one of the values as mentioned in the xapp/ott/:token reference. For standard stylesheets to use, see the xApp style guide.
If your xApp URL is configured as https://my.app/?load=true, we will effectively fact call:
https://my.app/?load=true&xAppToken=af0eabb2...&xAppStyle=MOONLIGHT
Updated about 1 year ago