@ic-pay/icpay-widget 0.1.76

package/README.md

@@ -0,0 +1,31 @@
+## ICPay Widget (Web Components)
+
+Embeddable, framework-agnostic payment widgets powered by `@ic-pay/icpay-sdk`.
+
+### Installation
+
+Using pnpm:
+```bash
+pnpm add @ic-pay/icpay-widget @ic-pay/icpay-sdk
+```
+
+Using yarn:
+```bash
+yarn add @ic-pay/icpay-widget @ic-pay/icpay-sdk
+```
+
+Using npm:
+```bash
+npm install @ic-pay/icpay-widget @ic-pay/icpay-sdk
+```
+
+### Documentation
+
+For full usage, component list, configuration, theming, and examples, see the ICPay documentation: [ICPay Docs](https://docs.icpay.org).
+
+### Basic Info
+
+- Framework-agnostic Web Components (works with vanilla JS, React, Next.js, etc.)
+- Requires and integrates with `@ic-pay/icpay-sdk`
+- TypeScript types included
+- Theming via CSS variables

package/dist/index.d.ts

@@ -0,0 +1,510 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import { Icpay, PriceCalculationResult } from '@ic-pay/icpay-sdk';
+
+type ThemeConfig = {
+    primaryColor?: string;
+    secondaryColor?: string;
+    accentColor?: string;
+    textColor?: string;
+    mutedTextColor?: string;
+    surfaceColor?: string;
+    surfaceAltColor?: string;
+    borderColor?: string;
+    fontFamily?: string;
+};
+type PlugNPlayConfig = {
+    enabled?: boolean;
+    providers?: {
+        internetIdentity?: boolean;
+        oisy?: boolean;
+        plug?: boolean;
+    };
+    theme?: {
+        modalBackground?: string;
+        modalBorderRadius?: string;
+        buttonBackground?: string;
+        buttonHoverBackground?: string;
+        textColor?: string;
+        primaryColor?: string;
+    };
+};
+type ProgressBarConfig = {
+    enabled?: boolean;
+    mode?: 'modal' | 'horizontal' | 'vertical' | 'inline';
+};
+type CommonConfig = {
+    publishableKey: string;
+    apiUrl?: string;
+    icHost?: string;
+    actorProvider?: (canisterId: string, idl: any) => any;
+    connectedWallet?: any;
+    useOwnWallet?: boolean;
+    plugNPlay?: PlugNPlayConfig;
+    theme?: ThemeConfig;
+    debug?: boolean;
+    progressBar?: ProgressBarConfig;
+    disablePaymentButton?: boolean;
+    disableAfterSuccess?: boolean;
+    showLedgerDropdown?: 'buttons' | 'dropdown' | 'none';
+};
+type CryptoOption = {
+    symbol: string;
+    label: string;
+    canisterId?: string;
+};
+type PremiumContentConfig = CommonConfig & {
+    priceUsd: number;
+    cryptoOptions?: CryptoOption[];
+    imageUrl?: string;
+    buttonLabel?: string;
+    defaultSymbol?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+    }) => void;
+};
+type TipJarConfig = CommonConfig & {
+    amountsUsd?: number[];
+    defaultAmountUsd?: number;
+    cryptoOptions?: CryptoOption[];
+    defaultSymbol?: string;
+    showLedgerDropdown?: boolean;
+    buttonLabel?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+        total?: number;
+    }) => void;
+};
+type ArticlePaywallConfig = CommonConfig & {
+    priceUsd: number;
+    cryptoOptions?: CryptoOption[];
+    title?: string;
+    preview?: string;
+    lockedContent?: string;
+    buttonLabel?: string;
+    defaultSymbol?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+    }) => void;
+};
+type CoffeeShopConfig = CommonConfig & {
+    items: Array<{
+        name: string;
+        priceUsd: number;
+    }>;
+    defaultItemIndex?: number;
+    cryptoOptions?: CryptoOption[];
+    buttonLabel?: string;
+    defaultSymbol?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+        item: string;
+    }) => void;
+};
+type DonationThermometerConfig = CommonConfig & {
+    goalUsd: number;
+    defaultAmountUsd?: number;
+    amountsUsd?: number[];
+    cryptoOptions?: CryptoOption[];
+    buttonLabel?: string;
+    defaultSymbol?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+        raised: number;
+    }) => void;
+};
+type PayButtonConfig = CommonConfig & {
+    amountUsd?: number;
+    cryptoOptions?: CryptoOption[];
+    showLedgerDropdown?: boolean;
+    defaultSymbol?: string;
+    buttonLabel?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+    }) => void;
+};
+type AmountInputConfig = CommonConfig & {
+    placeholder?: string;
+    defaultAmountUsd?: number;
+    cryptoOptions?: CryptoOption[];
+    showLedgerDropdown?: boolean;
+    defaultSymbol?: string;
+    minUsd?: number;
+    maxUsd?: number;
+    stepUsd?: number;
+    buttonLabel?: string;
+    onSuccess?: (tx: {
+        id: number;
+        status: string;
+        amountUsd: number;
+    }) => void;
+};
+
+declare const baseStyles: lit.CSSResult;
+declare function applyThemeVars(host: HTMLElement, theme?: ThemeConfig | null): void;
+
+type WidgetSdk = {
+    client: InstanceType<typeof Icpay>;
+    quoteUsd(usdAmount: number, ledgerCanisterId: string): Promise<PriceCalculationResult>;
+    sendUsd(usdAmount: number, ledgerCanisterId: string, metadata?: Record<string, any>): Promise<any>;
+};
+declare function createSdk(config: CommonConfig): WidgetSdk;
+
+type StepStatus = 'pending' | 'loading' | 'completed' | 'error';
+type Step = {
+    key: string;
+    label: string;
+    tooltip: string;
+    status: StepStatus;
+    timestamp?: string;
+    errorMessage?: string;
+};
+declare class ICPayProgressBar extends LitElement {
+    static styles: lit.CSSResult;
+    open: boolean;
+    steps: Step[];
+    amount: number;
+    currency: string;
+    ledgerSymbol: string;
+    private activeIndex;
+    private completed;
+    private failed;
+    private errorMessage;
+    private showSuccess;
+    private showConfetti;
+    private currentSteps;
+    private currentAmount;
+    private currentCurrency;
+    private currentLedgerSymbol;
+    private progressionTimer;
+    theme?: {
+        primaryColor?: string;
+        secondaryColor?: string;
+    };
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private attachSDKEventListeners;
+    private detachSDKEventListeners;
+    private onMethodStart;
+    private startAutomaticProgression;
+    private stopAutomaticProgression;
+    private onMethodSuccess;
+    private onTransactionCreated;
+    private onTransactionUpdated;
+    private onTransactionCompleted;
+    private onTransactionFailed;
+    private onMethodError;
+    private onSDKError;
+    private onWalletConnected;
+    private onWalletDisconnected;
+    private onBalanceCheck;
+    private onLedgerVerified;
+    private onWidgetPayment;
+    private onWidgetError;
+    private onWidgetUnlock;
+    private onWidgetTip;
+    private onWidgetDonation;
+    private onWidgetCoffee;
+    private updateStepStatus;
+    private getCurrentTime;
+    private progressPercent;
+    private verticalPercent;
+    private getStepIcon;
+    private transformErrorMessage;
+    private renderConfetti;
+    private renderSuccessState;
+    private renderErrorState;
+    private renderProgressContent;
+    private retryTransaction;
+    private closeProgress;
+    private renderStep;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-progress-bar': ICPayProgressBar;
+    }
+}
+
+declare class ICPayTokenSelector extends LitElement {
+    static styles: lit.CSSResult;
+    options: CryptoOption[];
+    value: string | null;
+    defaultSymbol: string;
+    mode: 'buttons' | 'dropdown' | 'none';
+    theme?: {
+        primaryColor?: string;
+        secondaryColor?: string;
+    };
+    connectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private get effectiveSymbol();
+    private onSelect;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-token-selector': ICPayTokenSelector;
+    }
+}
+
+declare class ICPayPremiumContent extends LitElement {
+    static styles: lit.CSSResult[];
+    config: PremiumContentConfig;
+    private selectedSymbol;
+    private unlocked;
+    private succeeded;
+    private processing;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private tryAutoConnectPNP;
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private onPay;
+    private select;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-premium-content': ICPayPremiumContent;
+    }
+}
+
+declare class ICPayTipJar extends LitElement {
+    static styles: lit.CSSResult[];
+    config: TipJarConfig;
+    private selectedAmount;
+    private selectedSymbol;
+    private total;
+    private processing;
+    private succeeded;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private tryAutoConnectPNP;
+    private get amounts();
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private selectAmount;
+    private selectSymbol;
+    private get fillPercentage();
+    private tip;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-tip-jar': ICPayTipJar;
+    }
+}
+
+declare class ICPayArticlePaywall extends LitElement {
+    static styles: lit.CSSResult[];
+    config: ArticlePaywallConfig;
+    title: string;
+    preview: string;
+    lockedContent: string;
+    private selectedSymbol;
+    private unlocked;
+    private succeeded;
+    private processing;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private tryAutoConnectPNP;
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private selectSymbol;
+    private unlock;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-article-paywall': ICPayArticlePaywall;
+    }
+}
+
+declare class ICPayCoffeeShop extends LitElement {
+    static styles: lit.CSSResult[];
+    config: CoffeeShopConfig;
+    private selectedIndex;
+    private selectedSymbol;
+    private processing;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private selectItem;
+    private selectSymbol;
+    private get selectedItem();
+    private order;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-coffee-shop': ICPayCoffeeShop;
+    }
+}
+
+declare class ICPayDonationThermometer extends LitElement {
+    static styles: lit.CSSResult[];
+    config: DonationThermometerConfig;
+    private selectedAmount;
+    private selectedSymbol;
+    private raised;
+    private processing;
+    private succeeded;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private tryAutoConnectPNP;
+    private get amounts();
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private selectAmount;
+    private selectSymbol;
+    private get fillPercentage();
+    private donate;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-donation-thermometer': ICPayDonationThermometer;
+    }
+}
+
+declare class ICPayPayButton extends LitElement {
+    static styles: lit.CSSResult[];
+    config: PayButtonConfig;
+    private selectedSymbol;
+    private processing;
+    private succeeded;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private selectSymbol;
+    private ensureWallet;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    private renderWalletModal;
+    private pay;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-pay-button': ICPayPayButton;
+    }
+}
+
+declare class ICPayAmountInput extends LitElement {
+    static styles: lit.CSSResult[];
+    config: AmountInputConfig;
+    private amountUsd;
+    private hasUserAmount;
+    private selectedSymbol;
+    private processing;
+    private succeeded;
+    private availableLedgers;
+    private errorMessage;
+    private errorSeverity;
+    private errorAction;
+    private walletConnected;
+    private pendingAction;
+    private showWalletModal;
+    private pnp;
+    private get cryptoOptions();
+    connectedCallback(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    private loadVerifiedLedgers;
+    private onInputChange;
+    private selectSymbol;
+    private isValidAmount;
+    private ensureWallet;
+    private getWalletId;
+    private getWalletLabel;
+    private getWalletIcon;
+    private connectWithWallet;
+    private pay;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'icpay-amount-input': ICPayAmountInput;
+    }
+}
+
+export { type AmountInputConfig, type ArticlePaywallConfig, type CoffeeShopConfig, type CommonConfig, type CryptoOption, type DonationThermometerConfig, ICPayAmountInput, ICPayArticlePaywall, ICPayCoffeeShop, ICPayDonationThermometer, ICPayPayButton, ICPayPremiumContent, ICPayTipJar, type PayButtonConfig, type PlugNPlayConfig, type PremiumContentConfig, type ProgressBarConfig, type ThemeConfig, type TipJarConfig, type WidgetSdk, applyThemeVars, baseStyles, createSdk };