SetupSubscriptionModal

The SetupSubscriptionModal is a fully-featured UI component that guides a user through:

Creating a PayStreamer account (if they don't have one).
Depositing an initial PUSD buffer to cover future billing cycles.
Subscribing to your platform's specific tier.

Usage

import { SetupSubscriptionModal } from "@paystreamer/sdk/ui";
 
<SetupSubscriptionModal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  platformId="0x1240aa8e48d2df02ff25a359b3b83bc04c749aa6234a923419f5c0d9903d746"
  tierIndex={0}
  onSuccess={(digest) => alert("Success! Tx: " + digest)}
  theme={{
    primary: "#6c63ff",
    radius: "12px",
  }}
/>

Props

Prop	Type	Description
`isOpen`	`boolean`	Whether the modal is currently visible.
`onClose`	`() => void`	Callback fired when the user dismisses the modal.
`platformId`	`string`	The object ID of your deployed platform.
`tierIndex`	`number`	The array index of the tier the user is subscribing to (used to fetch tier details from on-chain).
`onSuccess?`	`(txDigest: string) => void`	Callback fired after a successful transaction.
`formatUsd?`	`(amount: bigint \| number \| string) => number`	Optional custom formatter for displaying USD/PUSD values.
`theme?`	`PayStreamerTheme`	Optional. Local theme variables to customize colors and radius.

Theme Customization

You can pass a custom theme object to override color variables and border-radius. Theme parameters can also be configured globally using PayStreamerThemeProvider.

export interface PayStreamerTheme {
  primary?: string;            // Primary button and accent color
  primaryForeground?: string;  // Text color on primary buttons
  background?: string;         // Modal root background
  card?: string;               // Inner card background
  cardForeground?: string;     // Inner card text color
  muted?: string;              // Muted status and inputs background
  mutedForeground?: string;    // Muted text color
  border?: string;             // Borders color
  radius?: string;             // Base border-radius (e.g., '12px')
}

Styling Requirements

This component leverages standard class names compatible with TailwindCSS. If you are importing this component, ensure your application either compiles Tailwind utilities or includes standard shadcn-ui styles.

useSponsoredTransaction TestnetFaucetButton