Guides

Embed the widget

Drop a working marketplace browser into your dApp with one component. It fetches the catalog itself and is self-styled (inline, no external CSS); signing stays with your wallet.

#Install

@workspace/sup-marketplace (workspace package). react is a peer dependency — the widget uses your app's React, so there's no duplicate React.

#Basic use

import { SupMarketplace } from "@workspace/sup-marketplace/react";

export function Adapters() {
  return (
    <SupMarketplace
      baseUrl="https://app.sup.xyz"
      network="mainnet"
      theme="light"
      onAuthorize={(entry) => myWallet.signGrant(entry)}
      onUse={(entry) => openRunFlow(entry)}
    />
  );
}

#Props

prop	type	default	notes
`baseUrl`	`string`	— (required)	a Sup host
`network`	`"testnet" \| "mainnet"`	`"testnet"`	which catalog
`theme`	`"light" \| "dark"`	`"light"`	inline palette
`onAuthorize`	`(entry: CatalogEntry) => void`	—	clicked Authorize → wire your wallet
`onUse`	`(entry: CatalogEntry) => void`	—	clicked Use
`categories`	`string[]`	—	restrict which categories show
`className` / `style`	—	—	the outer container

If you omit onAuthorize / onUse, those buttons simply don't render (browse-only mode).

#Wiring the wallet (turn a click into a signed tx)

The entry your callback receives is a full CatalogEntry. Build the transaction with the SDK and sign with your wallet:

import { buildAuthorizeTx } from "@workspace/sup-marketplace/tx";

<SupMarketplace
  baseUrl={SUP} network="mainnet"
  onAuthorize={async (entry) => {
    const tx = buildAuthorizeTx({
      supWalletPackage, walletId,
      serviceType: entry.serviceType,
      coinType: selectedCoin,
    });
    await wallet.signAndExecuteTransaction({ transaction: tx });
  }}
/>

#Theming & SSR

The widget ships with light/dark inline palettes; wrap it in your own container for layout.
It's a client component (uses hooks + fetch); render it client-side (e.g. Next.js "use client" or dynamic import with ssr: false).

Keyless: the widget never signs and never asks for a key. Buttons only fire your callbacks.