@ton-pay/ui-react 0.2.0 → 0.3.0

package/dist/index.d.mts

@@ -18,7 +18,7 @@ type PayInfo<T extends object = object> = {
     txResult: SendTransactionResponse;
 } & T;
 interface TonPayButtonProps {
-    handlePay: (onRequestSent?: (redirectToWallet: () => void) => void) => Promise<void>;
+    handlePay: () => Promise<void | any>;
     isLoading?: boolean;
     variant?: TonPayVariant;
     preset?: TonPayPreset;
@@ -38,10 +38,17 @@ interface TonPayButtonProps {
     disabled?: boolean;
     amount?: number | string;
     currency?: string;
+    asset?: string;
     apiKey?: string;
     isOnRampAvailable?: boolean;
-    onCardPaymentSuccess?: () => void;
+    onCardPaymentSuccess?: (result?: OnRampTransactionResult) => void;
     itemTitle?: string;
+    recipientWalletAddress?: string;
+}
+interface OnRampTransactionResult {
+    reference: string;
+    status: string;
+    txHash: string;
 }
 interface NotificationProps {
     title: string;
@@ -56,15 +63,42 @@ interface PaymentModalProps {
     onPayWithCrypto: () => void;
     amount?: string;
     currency?: string;
+    asset?: string;
     itemTitle?: string;
     walletAddress?: string;
+    apiKey?: string;
+    recipientWalletAddress?: string;
     onDisconnect?: () => void;
-    fetchOnRampLink?: (providerId: string) => Promise<string>;
+    fetchOnRampLink?: (providerId: string) => Promise<{
+        link: string;
+        reference: string;
+    }>;
     onRampAvailable?: boolean;
-    onPaymentSuccess?: () => void;
-    isLoading?: boolean;
+    onPaymentSuccess?: (result?: OnRampTransactionResult) => void;
+    signlessEnabled?: boolean;
+    signlessApiUrl?: string;
+    onSignlessSetupComplete?: (data: SignlessSetupData) => void;
+    onPendingReferenceChange?: (reference: string | null) => void;
+    onClearPendingTransaction?: () => void;
+    network?: 'mainnet' | 'testnet';
+    /** The payment function to call when balance is sufficient (new card top-up flow) */
+    handlePay?: () => Promise<void | any>;
+    /** User's IP address for MoonPay geo check */
+    userIp?: string;
+    /** MoonPay minimum buy amount (from limits check) */
+    moonpayMinBuyAmount?: number;
+    /** Whether to use legacy card flow (direct to merchant) — default false */
+    legacyCardFlow?: boolean;
+    /** Called when top-up flow is initiated/completed to show waiting indicator below button */
+    onTopUpWaitingChange?: (isWaiting: boolean) => void;
+}
+interface SignlessSetupData {
+    publicKey: string;
+    walletAddress: string;
+    limit?: number;
+    token?: string;
 }
-type PaymentViewState = 'main' | 'card' | 'success' | 'error';
+type PaymentViewState = 'main' | 'card' | 'confirming-card' | 'success' | 'error' | 'signless-setup' | 'signless-unlock' | 'insufficient-funds' | 'card-topup' | 'awaiting-deposit' | 'redirecting-moonpay' | 'topup-crypto' | 'topup-confirm' | 'ready-to-pay';
 interface BottomSheetProps {
     isOpen: boolean;
     onClose: () => void;
@@ -85,8 +119,29 @@ interface UseMoonPayIframeOptions {
     chain?: Chain;
     provider?: OnRampProvider;
 }
+interface TonProofData {
+    network: string;
+    publicKey: string;
+    proof: {
+        timestamp: number;
+        domain: {
+            lengthBytes: number;
+            value: string;
+        };
+        signature: string;
+        payload: string;
+        state_init?: string;
+    };
+}
 
-declare const TonPayButton: React.FC<TonPayButtonProps>;
+interface TonPayButtonExtendedProps extends TonPayButtonProps {
+    asset?: string;
+    signlessEnabled?: boolean;
+    signlessApiUrl?: string;
+    signlessWalletConnection?: 'iframe' | 'merchant';
+    network?: 'mainnet' | 'testnet';
+}
+declare const TonPayButton: React.FC<TonPayButtonExtendedProps>;
 
 declare const PaymentModal: React.FC<PaymentModalProps>;
 
@@ -104,10 +159,80 @@ interface ErrorTransactionNotificationProps {
 }
 declare const ErrorTransactionNotification: React.FC<ErrorTransactionNotificationProps>;
 
-declare function useTonPay(): {
-    pay: <T extends object = object>(getMessage: GetMessageFn<T>, options?: {
-        onRequestSent?: (redirectToWallet: () => void) => void;
-    }) => Promise<PayInfo<T>>;
+type SignlessIframeMode = 'setup' | 'payment';
+type SignlessWalletConnection = 'iframe' | 'merchant';
+type SignlessIframeTheme = 'system' | 'light' | 'dark';
+interface SignlessIframeProps {
+    isOpen: boolean;
+    mode: SignlessIframeMode;
+    sessionId?: string;
+    baseUrl?: string;
+    walletConnection?: SignlessWalletConnection;
+    theme?: SignlessIframeTheme;
+    network?: 'mainnet' | 'testnet';
+    walletAddress?: string;
+    tonProofData?: TonProofData;
+    amount?: string | number;
+    recipient?: string;
+    asset?: string;
+    assetSymbol?: string;
+    escrowTonBalance?: number;
+    comment?: string;
+    apiKey?: string;
+    referenceId?: string;
+    onSetupComplete?: (data: SignlessSetupResult) => void;
+    onSessionReady?: (data: {
+        walletAddress: string;
+    }) => void;
+    onSigned?: (data: SignlessSignedResult) => void;
+    onUseWallet?: () => void;
+    onError?: (error: string) => void;
+    onClose?: () => void;
+    onTopUpRequired?: (data: {
+        asset: string;
+        requiredAmount: string;
+    }) => void;
+    onTonProofRequestStateChange?: (isRequesting: boolean) => void;
+    onSetupRequired?: () => void;
+    variant?: 'modal' | 'embedded';
+}
+interface SignlessSetupResult {
+    publicKey: string;
+    walletAddress: string;
+}
+interface SignlessSignedResult {
+    signature: string;
+    referenceId?: string;
+    txHash?: string;
+    pin?: string;
+    sessionId?: string;
+}
+declare const SignlessIframe: React.FC<SignlessIframeProps>;
+
+interface SignlessPaymentConfig {
+    apiUrl: string;
+    onSetupRequired?: () => void;
+    onUnlockRequired?: (sessionId: string) => Promise<string>;
+}
+interface SignlessPaymentResult {
+    success: boolean;
+    signature?: string;
+    publicKey?: string;
+    referenceId?: string;
+    error?: string;
+    txHash?: string;
+}
+declare function useTonPay(signlessConfig?: SignlessPaymentConfig): {
+    pay: <T extends object = object>(getMessage: GetMessageFn<T>) => Promise<PayInfo<T>>;
+    payWithSignless: <T extends object = object>(createMessageCallback: (senderAddress: string) => Promise<{
+        message: TonPayMessage;
+        referenceId: string;
+    } & T>) => Promise<SignlessPaymentResult & T>;
+    initiateSignlessSetup: (opts?: {
+        asset?: string;
+        assetSymbol?: string;
+        amount?: string | number;
+    }) => Promise<any>;
     address: string;
 };
 
@@ -115,10 +240,18 @@ declare function useMoonPayIframe({ apiKey, chain, }: UseMoonPayIframeOptions):
     loading: boolean;
     error: string | null;
     link: string | null;
-    fetchOnRampLink: (params: CreateMoonpayTransferParams) => Promise<string>;
-    checkAvailability: (amount: number, asset: string, ipAddress: string) => Promise<boolean>;
+    fetchOnRampLink: (params: CreateMoonpayTransferParams) => Promise<{
+        link: string;
+        reference: string;
+    }>;
+    checkAvailability: (_amount: number, asset: string, ipAddress: string) => Promise<boolean>;
+    checkAvailabilityWithLimits: (_amount: number, asset: string, ipAddress: string) => Promise<{
+        available: boolean;
+        minBuyAmount?: number;
+        maxBuyAmount?: number;
+    }>;
     geoResult: MoonpayGeoResult | null;
     limits: MoonpayAmountLimits | null;
 };
 
-export { BottomSheet, type BottomSheetProps, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type OnRampProvider, type PayInfo, PaymentModal, type PaymentModalProps, type PaymentViewState, TonPayButton, type TonPayButtonProps, type TonPayMessage, type TonPayPreset, type TonPayVariant, type UseMoonPayIframeOptions, useMoonPayIframe, useTonPay };
+export { BottomSheet, type BottomSheetProps, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type OnRampProvider, type OnRampTransactionResult, type PayInfo, PaymentModal, type PaymentModalProps, type PaymentViewState, SignlessIframe, type SignlessIframeMode, type SignlessIframeProps, type SignlessPaymentConfig, type SignlessPaymentResult, type SignlessSetupData, type SignlessSetupResult, type SignlessSignedResult, TonPayButton, type TonPayButtonExtendedProps, type TonPayButtonProps, type TonPayMessage, type TonPayPreset, type TonPayVariant, type UseMoonPayIframeOptions, useMoonPayIframe, useTonPay };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ type PayInfo<T extends object = object> = {
     txResult: SendTransactionResponse;
 } & T;
 interface TonPayButtonProps {
-    handlePay: (onRequestSent?: (redirectToWallet: () => void) => void) => Promise<void>;
+    handlePay: () => Promise<void | any>;
     isLoading?: boolean;
     variant?: TonPayVariant;
     preset?: TonPayPreset;
@@ -38,10 +38,17 @@ interface TonPayButtonProps {
     disabled?: boolean;
     amount?: number | string;
     currency?: string;
+    asset?: string;
     apiKey?: string;
     isOnRampAvailable?: boolean;
-    onCardPaymentSuccess?: () => void;
+    onCardPaymentSuccess?: (result?: OnRampTransactionResult) => void;
     itemTitle?: string;
+    recipientWalletAddress?: string;
+}
+interface OnRampTransactionResult {
+    reference: string;
+    status: string;
+    txHash: string;
 }
 interface NotificationProps {
     title: string;
@@ -56,15 +63,42 @@ interface PaymentModalProps {
     onPayWithCrypto: () => void;
     amount?: string;
     currency?: string;
+    asset?: string;
     itemTitle?: string;
     walletAddress?: string;
+    apiKey?: string;
+    recipientWalletAddress?: string;
     onDisconnect?: () => void;
-    fetchOnRampLink?: (providerId: string) => Promise<string>;
+    fetchOnRampLink?: (providerId: string) => Promise<{
+        link: string;
+        reference: string;
+    }>;
     onRampAvailable?: boolean;
-    onPaymentSuccess?: () => void;
-    isLoading?: boolean;
+    onPaymentSuccess?: (result?: OnRampTransactionResult) => void;
+    signlessEnabled?: boolean;
+    signlessApiUrl?: string;
+    onSignlessSetupComplete?: (data: SignlessSetupData) => void;
+    onPendingReferenceChange?: (reference: string | null) => void;
+    onClearPendingTransaction?: () => void;
+    network?: 'mainnet' | 'testnet';
+    /** The payment function to call when balance is sufficient (new card top-up flow) */
+    handlePay?: () => Promise<void | any>;
+    /** User's IP address for MoonPay geo check */
+    userIp?: string;
+    /** MoonPay minimum buy amount (from limits check) */
+    moonpayMinBuyAmount?: number;
+    /** Whether to use legacy card flow (direct to merchant) — default false */
+    legacyCardFlow?: boolean;
+    /** Called when top-up flow is initiated/completed to show waiting indicator below button */
+    onTopUpWaitingChange?: (isWaiting: boolean) => void;
+}
+interface SignlessSetupData {
+    publicKey: string;
+    walletAddress: string;
+    limit?: number;
+    token?: string;
 }
-type PaymentViewState = 'main' | 'card' | 'success' | 'error';
+type PaymentViewState = 'main' | 'card' | 'confirming-card' | 'success' | 'error' | 'signless-setup' | 'signless-unlock' | 'insufficient-funds' | 'card-topup' | 'awaiting-deposit' | 'redirecting-moonpay' | 'topup-crypto' | 'topup-confirm' | 'ready-to-pay';
 interface BottomSheetProps {
     isOpen: boolean;
     onClose: () => void;
@@ -85,8 +119,29 @@ interface UseMoonPayIframeOptions {
     chain?: Chain;
     provider?: OnRampProvider;
 }
+interface TonProofData {
+    network: string;
+    publicKey: string;
+    proof: {
+        timestamp: number;
+        domain: {
+            lengthBytes: number;
+            value: string;
+        };
+        signature: string;
+        payload: string;
+        state_init?: string;
+    };
+}
 
-declare const TonPayButton: React.FC<TonPayButtonProps>;
+interface TonPayButtonExtendedProps extends TonPayButtonProps {
+    asset?: string;
+    signlessEnabled?: boolean;
+    signlessApiUrl?: string;
+    signlessWalletConnection?: 'iframe' | 'merchant';
+    network?: 'mainnet' | 'testnet';
+}
+declare const TonPayButton: React.FC<TonPayButtonExtendedProps>;
 
 declare const PaymentModal: React.FC<PaymentModalProps>;
 
@@ -104,10 +159,80 @@ interface ErrorTransactionNotificationProps {
 }
 declare const ErrorTransactionNotification: React.FC<ErrorTransactionNotificationProps>;
 
-declare function useTonPay(): {
-    pay: <T extends object = object>(getMessage: GetMessageFn<T>, options?: {
-        onRequestSent?: (redirectToWallet: () => void) => void;
-    }) => Promise<PayInfo<T>>;
+type SignlessIframeMode = 'setup' | 'payment';
+type SignlessWalletConnection = 'iframe' | 'merchant';
+type SignlessIframeTheme = 'system' | 'light' | 'dark';
+interface SignlessIframeProps {
+    isOpen: boolean;
+    mode: SignlessIframeMode;
+    sessionId?: string;
+    baseUrl?: string;
+    walletConnection?: SignlessWalletConnection;
+    theme?: SignlessIframeTheme;
+    network?: 'mainnet' | 'testnet';
+    walletAddress?: string;
+    tonProofData?: TonProofData;
+    amount?: string | number;
+    recipient?: string;
+    asset?: string;
+    assetSymbol?: string;
+    escrowTonBalance?: number;
+    comment?: string;
+    apiKey?: string;
+    referenceId?: string;
+    onSetupComplete?: (data: SignlessSetupResult) => void;
+    onSessionReady?: (data: {
+        walletAddress: string;
+    }) => void;
+    onSigned?: (data: SignlessSignedResult) => void;
+    onUseWallet?: () => void;
+    onError?: (error: string) => void;
+    onClose?: () => void;
+    onTopUpRequired?: (data: {
+        asset: string;
+        requiredAmount: string;
+    }) => void;
+    onTonProofRequestStateChange?: (isRequesting: boolean) => void;
+    onSetupRequired?: () => void;
+    variant?: 'modal' | 'embedded';
+}
+interface SignlessSetupResult {
+    publicKey: string;
+    walletAddress: string;
+}
+interface SignlessSignedResult {
+    signature: string;
+    referenceId?: string;
+    txHash?: string;
+    pin?: string;
+    sessionId?: string;
+}
+declare const SignlessIframe: React.FC<SignlessIframeProps>;
+
+interface SignlessPaymentConfig {
+    apiUrl: string;
+    onSetupRequired?: () => void;
+    onUnlockRequired?: (sessionId: string) => Promise<string>;
+}
+interface SignlessPaymentResult {
+    success: boolean;
+    signature?: string;
+    publicKey?: string;
+    referenceId?: string;
+    error?: string;
+    txHash?: string;
+}
+declare function useTonPay(signlessConfig?: SignlessPaymentConfig): {
+    pay: <T extends object = object>(getMessage: GetMessageFn<T>) => Promise<PayInfo<T>>;
+    payWithSignless: <T extends object = object>(createMessageCallback: (senderAddress: string) => Promise<{
+        message: TonPayMessage;
+        referenceId: string;
+    } & T>) => Promise<SignlessPaymentResult & T>;
+    initiateSignlessSetup: (opts?: {
+        asset?: string;
+        assetSymbol?: string;
+        amount?: string | number;
+    }) => Promise<any>;
     address: string;
 };
 
@@ -115,10 +240,18 @@ declare function useMoonPayIframe({ apiKey, chain, }: UseMoonPayIframeOptions):
     loading: boolean;
     error: string | null;
     link: string | null;
-    fetchOnRampLink: (params: CreateMoonpayTransferParams) => Promise<string>;
-    checkAvailability: (amount: number, asset: string, ipAddress: string) => Promise<boolean>;
+    fetchOnRampLink: (params: CreateMoonpayTransferParams) => Promise<{
+        link: string;
+        reference: string;
+    }>;
+    checkAvailability: (_amount: number, asset: string, ipAddress: string) => Promise<boolean>;
+    checkAvailabilityWithLimits: (_amount: number, asset: string, ipAddress: string) => Promise<{
+        available: boolean;
+        minBuyAmount?: number;
+        maxBuyAmount?: number;
+    }>;
     geoResult: MoonpayGeoResult | null;
     limits: MoonpayAmountLimits | null;
 };
 
-export { BottomSheet, type BottomSheetProps, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type OnRampProvider, type PayInfo, PaymentModal, type PaymentModalProps, type PaymentViewState, TonPayButton, type TonPayButtonProps, type TonPayMessage, type TonPayPreset, type TonPayVariant, type UseMoonPayIframeOptions, useMoonPayIframe, useTonPay };
+export { BottomSheet, type BottomSheetProps, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type OnRampProvider, type OnRampTransactionResult, type PayInfo, PaymentModal, type PaymentModalProps, type PaymentViewState, SignlessIframe, type SignlessIframeMode, type SignlessIframeProps, type SignlessPaymentConfig, type SignlessPaymentResult, type SignlessSetupData, type SignlessSetupResult, type SignlessSignedResult, TonPayButton, type TonPayButtonExtendedProps, type TonPayButtonProps, type TonPayMessage, type TonPayPreset, type TonPayVariant, type UseMoonPayIframeOptions, useMoonPayIframe, useTonPay };