Skip to content
Advanced

Embed Monstera

Embed the working public wallet explorer, then plan an authenticated integration deliberately.

Public explorer iframe

html
<iframe
  src="https://monstera.cellact.nl/embed/?appName=Fern%20Labs"
  width="100%"
  height="1350"
  style="border:0;border-radius:28px;max-width:560px"
  loading="lazy"
  referrerpolicy="no-referrer"
  title="Monstera wallet explorer"
></iframe>

The published /embed/ route is a signer-free SDK 2.3.0 explorer. It supports testnet and mainnet, username or registered wallet lookup, an account index, and factory/beacon/template inspection. Customize appName with a URL-encoded label. The component handles its own scrolling and needs no parent message listener. Public registration is not login or proof of ownership.

React component

tsx
import { MonsteraWidget } from "@/components/demo/MonsteraWidget";

<MonsteraWidget appName="Fern Labs" />

MonsteraWidget is the repository component used by /demo/ and /embed/. It is not a published widget package. Copy its reader adapter, types, assets and styles when integrating it outside this Next.js project, or use the hosted iframe. The SDK is loaded after an explicit read request.

No custody backend required

Monstera does not require an application backend that stores wallet keys or can sign without the user's authorization. You may still operate a sponsor or relayer for gas and transaction submission; treat it as transport infrastructure, not as the wallet.

  • Keep any funded Sapphire sponsor key on the server.
  • Validate strategy, addresses, username, and encoded config before creating.
  • Rate-limit wallet creation and monitor relayer balance.
  • Generate or return recovery material once, avoid persistent browser storage, and prevent server-side logging.
  • Never describe the relayer as owner authorization; protected wallet actions still require the active authenticator.