Quickstart
Build the widget from the repository, import its stylesheet, and render it with one config object.
Build it
@mavna/widget is part of the Mavna repository and is built from a checkout along with the packages
it uses. Install covers building the workspace. Your app needs React and React DOM,
version 19 or later.
Import the stylesheet
import "@mavna/widget/widget.css";Import it once, anywhere in your app. The build writes the widget's styles to this separate file, so importing only the component renders the widget without any styling.
Render it
/**
* The whole widget, in an integration the size of the API.
*
* One import for the component, one for its stylesheet, and one object of config.
* The widget quotes, races the rails, connects both wallets, and runs the
* transfer itself. The host supplies an integrator name and, in production, the
* URL of a sponsor it runs.
*/
import { MavnaWidget } from "@mavna/widget";
import "@mavna/widget/widget.css";
import type { ReactElement } from "react";
export function Deposit(): ReactElement {
return (
<MavnaWidget
config={{
integrator: "your-product",
network: "testnet",
variant: "compact",
// Your own sponsor in production. The default is a local dev sponsor,
// which is why zero-XLM arrival works out of the box only on localhost.
sponsorUrl: "https://sponsor.your-product.example",
onEvent: (event) => {
console.log(event.type);
},
}}
/>
);
}
integrator is the one required field: a name for your integration. The network defaults to
Stellar's test network.
sponsorUrl points at the sponsor service you run. On the test network it defaults to
http://localhost:8787, a sponsor on the reader's own machine, so a page you host needs your own.
On the main network there is no default, and the widget refuses to mount without one.
Next
- Every field: Configuration.
- Reacting to what your user does: Events.
- Inline, full page or drawer: Layouts.
- Matching your product: Theming.