@problee/widget

React checkout launchers and embed helpers for Problee Builder integrations.

Launch-wave registry status: source is 0.2.0. Use package install commands only after the operator publish checklist in docs/PACKAGE_STANDARDS.md has pushed @problee/widget@0.2.0 to npm. Until then, use /v3/embed.js or the Builder OpenAPI contract directly.

The widget does not sign transactions, hold custody, expose API keys, or run an in-page trading engine. Browser integrations use a public integration ID to create a short-lived trade token, create a hosted checkout session, and open the Problee checkout popup or redirect.

The canonical Builder browser contract is https://api.problee.com/api/builder/v1/openapi.json. This package is a thin launcher over that contract, not a wallet engine.

import { ProbleeCheckoutButton } from "@problee/widget";

<ProbleeCheckoutButton
  config={{
    publicIntegrationId: "pub_...",
    chainId: 480,
    marketAddress: "0x...",
    expectedWalletAddress: "0xuser...",
    walletProviderHint: "web3auth",
    walletAuthProfileId: "wap_...",
    defaultTrade: {
      tradeType: "buy",
      side: 0,
      amountWei: "1000000000000000000",
      collateralToken: "PRB",
    },
    successUrl: "https://partner.example/problee/success",
    cancelUrl: "https://partner.example/problee/cancel",
    openMode: "popup",
  }}
  onCheckoutEvent={(event) => {
    if (event.type === "trade_indexed") {
      console.log("Indexed", event.txHash);
    }
  }}
/>

Production browser integrations must have verified, non-empty allowed origins. Server API keys stay server-side; the widget only calls /api/builder/v1/trade-token and /api/builder/v1/checkout/sessions from the partner origin.

For Web3Auth/Gmail users, pass the wallet address already shown in your app as expectedWalletAddress and the partner Web3Auth profile ID as walletAuthProfileId. Problee checkout will initialize Web3Auth from that partner profile and block the trade if the derived wallet does not match.

For vanilla integrations, use the v3 script with the same checkout defaults:

<div data-problee-embed="market"
     data-market-id="0x1234567890123456789012345678901234567890"
     data-chain-id="480"
     data-public-integration-id="pub_0123456789abcdef01234567"
     data-view="card"
     data-theme="dark"
     data-checkout="1"
     data-trade-type="buy"
     data-side="0"
     data-amount-wei="1000000000000000000"
     data-collateral-token="PRB"></div>
<script src="https://problee.com/v3/embed.js" async></script>