Provider

<StridgeProvider /> is the Kit's single integration entry point. Mount it once at your app's root and every dialog, compound part, headless hook, and event subscription resolves through it.

import { StridgeProvider } from "@stridge/kit"

<StridgeProvider
  gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
  asset={{ networkId: "9001", symbol: "USDC" }}
  flows={{ deposit: { destination: { address: treasury } } }}
  appearance={{ theme: "dark", accent: "oklch(64.51% 0.19 274.49)", radius: "rounded" }}
>
  <YourApp />
</StridgeProvider>

Props at a glance

gatewayKey

The browser-safe identifier the Kit uses to authenticate every request to the Stridge gateway. Find it in the Dashboard under Developer → Gateway Kit → Connection.

The key itself is not a secret — it's designed to ship in the bundle. Its security comes from the origin allowlist, destination whitelist, and owner-pegged options you configure on the same page. See Gateway Kit security for the full model.

environment

environment?: "production" | "staging"

Picks which Stridge API host the Kit talks to. Default "production" (api.stridge.com); pass "staging" for integration testing against api.stridge.dev.

asset

The single source of truth for the settlement asset. Deposit settles into this (networkId, symbol) at the configured destination; withdraw sources from the user's balance of the same (networkId, symbol).

asset: {
  networkId: string   // e.g. "9001" (Arbitrum One), "9006" (BSC), "966" (Polygon)
  symbol: string      // e.g. "USDC", "USDT", "ETH"
}

networkId is the Stridge network id — the wire value the gateway routes against. The Kit forwards it to gateway/start verbatim and ships no chain catalogue, so any network the backend supports works without a Kit release.

See Supported networks for the full mapping (Stridge id ↔ EIP-155 id ↔ display name).

flows

At least one of deposit / withdraw must be set. Set both to power a single provider that opens either dialog.

flows.deposit

flows.deposit?: {
  destination: { address: `0x${string}` }   // required
  owner?: { address: `0x${string}` }        // optional
  minAmountUsd?: number
  maxAmountUsd?: number
  metadata?: Record<string, unknown>
  methods?: {
    wallet?: { disabled?: boolean; disabledHint?: string }
    transfer?: { disabled?: boolean; disabledHint?: string }
    onrampRail?: { enabled?: boolean; disabled?: boolean }
  }
}

flows.withdraw

flows.withdraw?: {
  owner: { address: `0x${string}` }   // required
  minAmountUsd?: number
  maxAmountUsd?: number
  metadata?: Record<string, unknown>
}

The host wires <WithdrawDialog onSubmit={…} balance={…} /> to broadcast the source-chain transfer and feed the live balance — see Drop-in dialogs.

appearance

appearance?: {
  theme?: "dark" | "light"                          // default "dark"
  accent?: string                                   // any CSS color
  radius?: "sharp" | "subtle" | "rounded" | "pill"  // default "rounded"
  direction?: "ltr" | "rtl"                         // auto-derived from locale otherwise
  attribution?: "visible" | "hidden"                // default "visible"
  presentation?: "auto" | "dialog" | "drawer"       // default "auto"; or { mode, breakpoint }
}

The visual values flow into CSS variables on the Kit's scope <div>. The provider doesn't restyle anything else — every consumer of --stridge-kit-* (every primitive, every compound part, every dialog) inherits the change automatically.

See Theming & CSS variables for the full token list and how to override variables directly.

i18n

i18n?: {
  locale?: string                                    // BCP-47, e.g. "en", "fr", "ar"
  messages?: Record<string, KitMessageCatalog>       // locale → catalog map
}

Per-locale catalogs ship at @stridge/kit/i18n/locales/<code> — tree-shakeable, so you only bundle what you load. Pass messages to mount catalogs at runtime; the Kit will fall back to source-key English if the active locale isn't mounted.

import { messages as fr } from "@stridge/kit/i18n/locales/fr"

<StridgeProvider i18n={{ locale: "fr", messages: { fr } }} />

RTL locales (ar, fa, he, ur) auto-derive direction: "rtl" unless appearance.direction is set explicitly. See Internationalization for defineMessages, partial overrides, and adding unsupported locales.

storage

storage?: {
  driver?: "session" | "local" | "memory"   // default "session"
  namespace?: string                        // default "stridge-kit:storage:v1"
}

Where the Kit persists per-tab UI state (settlement-banner acks, future kit-wide features).

dev

dev?: {
  userAddressOverride?: `0x${string}`
}

Production integrations never need this. userAddressOverride lets demos and previews bootstrap the Kit against a pasted EOA without firing up a wallet — wagmi-connected addresses always win.

support

Override the in-dialog "Get help" entry point.

support?: {
  url?: string                       // open this URL on click
  onOpen?: () => void                // or run this callback
}

Omit entirely to use Stridge Intercom (Stridge support handles your users). Provide either field to switch to merchant-owned support; passing one or both opts the Kit out of Stridge's messenger globals so they never instantiate alongside yours.

terms

Override the Kit's terms link.

terms?: {
  url: string         // your terms URL
  label?: string      // optional link label (default falls back to Kit copy)
}

Omit to point at Stridge's terms page.

prefetch

prefetch?: true | ReadonlyArray<"deposit" | "withdraw" | "activity">

Eager-bootstrap the driver(s) at mount instead of waiting for useDeposit().open() or usePrefetchDeposit() to do it. Two shapes:

• true — arm every enabled driver at mount, including activity.
• ["deposit"] / ["withdraw"] / ["activity"] — arm only the listed surfaces. Listing "deposit" or "withdraw" implicitly arms "activity" too, since the activity surface is cross-flow history; list "activity" alone for hosts that mount only <ActivityDialog>.

connectWallet

connectWallet?: {
  label?: string             // optional button label
  onClick: () => void        // open your wallet-connect modal
}

Rendered by the dialog's wallet-required state when deposit is enabled but no owner can be resolved (no flows.deposit.owner, no wagmi connection, no dev.userAddressOverride). Omit to show the prompt without an actionable button — useful when the host surfaces a connect affordance elsewhere.

className

Applied to the Kit's scope <div>. Use it to position the wrapper if needed; the wrapper has no styles of its own beyond the scope attributes.

Two-flow example

<StridgeProvider
  gatewayKey={process.env.NEXT_PUBLIC_STRIDGE_GATEWAY_KEY!}
  asset={{ networkId: "9001", symbol: "USDC" }}
  flows={{
    deposit:  { destination: { address: userWallet }, minAmountUsd: 5 },
    withdraw: { owner: { address: userWallet }, maxAmountUsd: 50_000 },
  }}
  appearance={{ theme: "dark", accent: "oklch(78% 0.15 240)", radius: "subtle" }}
  i18n={{ locale: "en" }}
  prefetch={["deposit"]}
  connectWallet={{ onClick: openConnectModal, label: "Connect wallet" }}
>
  <App />
</StridgeProvider>

Next

• Drop-in dialogs — open, close, withdraw onSubmit contract.
• Theming & CSS variables — go deeper than appearance.
• Internationalization — locales, RTL, message overrides.