@ton-pay/ui-react 0.1.2 → 0.2.0-beta.2

package/README.md

@@ -1,145 +1,173 @@
 # @ton-pay/ui-react
 
-React components and hooks for TON Pay SDK.
-
-## Documentation
-
-Full documentation: https://docs.tonpay.tech
+Professional React components and hooks for integrating TON blockchain payments into your application.
 
 ## Installation
 
 ```bash
-npm install @ton-pay/ui-react @tonconnect/ui-react
+npm install @ton-pay/ui-react @ton-pay/api @tonconnect/ui-react
 ```
 
 ## Quick Start
 
-### Basic Usage
-
 ```tsx
-import { TonPayButton } from "@ton-pay/ui-react";
+import { TonConnectUIProvider } from "@tonconnect/ui-react";
+import { TonPayButton, useTonPay } from "@ton-pay/ui-react";
 import { createTonPayTransfer, TON } from "@ton-pay/api";
-import { useTonAddress } from "@tonconnect/ui-react";
+
+function App() {
+  return (
+    <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
+      <PaymentForm />
+    </TonConnectUIProvider>
+  );
+}
 
 function PaymentForm() {
-  const senderAddr = useTonAddress();
+  const { pay } = useTonPay();
 
   const handlePay = async () => {
-    const transfer = await createTonPayTransfer(
-      {
-        amount: 10.5,
-        asset: TON,
-        recipientAddr: "EQC...", // Optional if API key is provided
-        senderAddr,
-        commentToSender: "Payment for order #123",
-      },
-      { chain: "mainnet", apiKey: "your-api-key" }
-    );
-
-    return transfer;
+    await pay(async (senderAddr) => {
+      return createTonPayTransfer(
+        {
+          amount: 10.5,
+          asset: TON,
+          recipientAddr: "EQC...",
+          senderAddr,
+          commentToSender: "Payment for order #123",
+        },
+        { chain: "mainnet", apiKey: "your-api-key" }
+      );
+    });
   };
 
   return <TonPayButton handlePay={handlePay} />;
 }
 ```
 
-### With Presets
+## Components
 
-```tsx
-<TonPayButton preset="gradient" variant="long" handlePay={handlePay} />
-```
+### TonPayButton
 
-### Custom Styling
+Complete payment button with wallet connection, loading states, and error handling.
 
 ```tsx
 <TonPayButton
-  bgColor="#000000"
-  textColor="#FFFFFF"
-  borderRadius={99}
-  variant="short"
   handlePay={handlePay}
+  variant="long"
+  preset="gradient"
+  amount={10.5}
+  currency="TON"
 />
 ```
 
-### useTonPay Hook
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `handlePay` | `() => Promise<void>` | **required** | Payment handler |
+| `isLoading` | `boolean` | `false` | Loading state |
+| `variant` | `"long" \| "short"` | `"long"` | Button text variant |
+| `preset` | `"default" \| "gradient"` | - | Theme preset |
+| `bgColor` | `string` | `"#0098EA"` | Background color |
+| `textColor` | `string` | `"#FFFFFF"` | Text color |
+| `borderRadius` | `number \| string` | `8` | Border radius |
+| `width` | `number \| string` | `300` | Button width |
+| `height` | `number \| string` | `44` | Button height |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `amount` | `number \| string` | - | Payment amount |
+| `currency` | `string` | `"TON"` | Currency code |
+| `apiKey` | `string` | - | API key for on-ramp |
+| `onError` | `(error: unknown) => void` | - | Error callback |
+| `showErrorNotification` | `boolean` | `true` | Show error toast |
+
+## Hooks
+
+### useTonPay
+
+Core hook for TON wallet integration and payments.
 
 ```tsx
-import { useTonPay } from "@ton-pay/ui-react";
-import { createTonPayTransfer, TON } from "@ton-pay/api";
+const { pay, address } = useTonPay();
+
+const handlePayment = async () => {
+  const result = await pay(async (senderAddr) => {
+    return createTonPayTransfer({
+      amount: 10.5,
+      asset: TON,
+      recipientAddr: "EQC...",
+      senderAddr,
+    }, { chain: "mainnet", apiKey: "your-api-key" });
+  });
+  
+  console.log("Transaction:", result.txResult);
+};
+```
 
-function PaymentComponent() {
-  const { pay, address } = useTonPay();
+### useMoonPayIframe
 
-  const handlePayment = async () => {
-    const result = await pay(async (senderAddr) => {
-      const transfer = await createTonPayTransfer(
-        {
-          amount: 10.5,
-          asset: TON,
-          recipientAddr: "EQC...", // Optional if API key is provided
-          senderAddr,
-          commentToSender: "Payment for order #123",
-        },
-        { chain: "mainnet", apiKey: "your-api-key" }
-      );
+Hook for MoonPay on-ramp integration.
 
-      return transfer;
-    });
-  };
+```tsx
+const { 
+  checkAvailability, 
+  fetchOnRampLink, 
+  loading 
+} = useMoonPayIframe({
+  apiKey: "your-api-key",
+  chain: "mainnet",
+});
+```
 
-  return (
-    <div>
-      {address ? `Connected: ${address}` : "Not connected"}
-      <button onClick={handlePayment}>Pay</button>
-    </div>
-  );
-}
+## Styling
+
+### Presets
+
+Built-in theme presets:
+
+```tsx
+<TonPayButton preset="default" />  // Blue solid
+<TonPayButton preset="gradient" /> // Blue gradient
 ```
 
-## Features
-
-- **Highly Customizable** - Background color, text color, border radius, font family
-- **Presets** - Built-in themes (default, gradient) matching Figma designs
-- **Variants** - Long ("Pay with TON Pay") and Short ("TON Pay") text options
-- **Loading States** - Built-in spinner and loading text
-- **Wallet Integration** - Connect, disconnect, copy address via dropdown menu
-- **Responsive** - Flexible width and height
-- **Zero Config** - Works out of the box with sensible defaults
-
-## Props
-
-| Prop           | Type                      | Default           | Description                  |
-| -------------- | ------------------------- | ----------------- | ---------------------------- |
-| `handlePay`    | `() => Promise<void>`     | **required**      | Payment handler function     |
-| `isLoading`    | `boolean`                 | `false`           | Loading state                |
-| `variant`      | `"long" \| "short"`       | `"long"`          | Button text variant          |
-| `preset`       | `"default" \| "gradient"` | -                 | Predefined theme preset      |
-| `bgColor`      | `string`                  | `"#0098EA"`       | Background (hex or gradient) |
-| `textColor`    | `string`                  | `"#FFFFFF"`       | Text color                   |
-| `borderRadius` | `number \| string`        | `8`               | Border radius                |
-| `fontFamily`   | `string`                  | `"inherit"`       | Font family                  |
-| `width`        | `number \| string`        | `300`             | Button width                 |
-| `height`       | `number \| string`        | `44`              | Button height                |
-| `loadingText`  | `string`                  | `"Processing..."` | Loading state text           |
-| `showMenu`     | `boolean`                 | `false`           | Show dropdown menu           |
-| `disabled`     | `boolean`                 | `false`           | Disabled state               |
-| `style`        | `Record<string, any>`     | -                 | Additional styles            |
-| `className`    | `string`                  | -                 | Additional CSS class         |
-
-## Visual Showcase
-
-Run the interactive button showcase to see all variants and styling options:
+### Custom Styling
 
-```bash
-bun test:button-react
+```tsx
+<TonPayButton
+  bgColor="#000000"
+  textColor="#FFFFFF"
+  borderRadius={99}
+  fontFamily="'SF Pro Display', sans-serif"
+  width={280}
+  height={48}
+/>
 ```
 
-This will start a local dev server with a visual gallery of all button configurations.
+### CSS Variables
 
-## Components
+The button uses CSS variables for theming:
+
+```css
+--tp-bg: #0098EA;
+--tp-text: #FFFFFF;
+--tp-radius: 8px;
+--tp-font: inherit;
+--tp-width: 300px;
+--tp-height: 44px;
+```
+
+## TypeScript
 
-- **TonPayButton**: Complete payment button with wallet connection and customizable styling
-- **useTonPay**: Hook for TON wallet integration
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  TonPayButtonProps,
+  PayInfo,
+  GetMessageFn,
+  TonPayMessage,
+} from "@ton-pay/ui-react";
+```
 
 ## License
 

package/dist/index.d.mts

@@ -1,10 +1,27 @@
+import * as React from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import { SendTransactionRequest, SendTransactionResponse } from '@tonconnect/sdk';
+import { Chain, CreateMoonpayTransferParams, MoonpayGeoResult, MoonpayAmountLimits } from '@ton-pay/api';
+export { Chain } from '@ton-pay/api';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 
 type TonPayPreset = "default" | "gradient";
-type TonPayButtonProps = {
+type TonPayVariant = "long" | "short";
+type OnRampProvider = "moonpay";
+type TonPayMessage = SendTransactionRequest["messages"][number] & {
+    payload: string;
+};
+type GetMessageFn<T extends object = object> = (senderAddr: string) => Promise<{
+    message: TonPayMessage;
+} & T>;
+type PayInfo<T extends object = object> = {
+    message: TonPayMessage;
+    txResult: SendTransactionResponse;
+} & T;
+interface TonPayButtonProps {
     handlePay: () => Promise<void>;
     isLoading?: boolean;
-    variant?: "long" | "short";
+    variant?: TonPayVariant;
     preset?: TonPayPreset;
     onError?: (error: unknown) => void;
     showErrorNotification?: boolean;
@@ -16,47 +33,259 @@ type TonPayButtonProps = {
     height?: number | string;
     text?: string;
     loadingText?: string;
-    style?: Record<string, any>;
+    style?: CSSProperties;
     className?: string;
     showMenu?: boolean;
     disabled?: boolean;
-};
-declare const TonPayButton: ({ handlePay, isLoading, variant, preset, bgColor, textColor, borderRadius, fontFamily, width, height, text, loadingText, style, className, showMenu, disabled, onError, showErrorNotification, }: TonPayButtonProps) => JSX.Element;
-
-type NotificationProps = {
+    amount?: number | string;
+    currency?: string;
+    apiKey?: string;
+    isOnRampAvailable?: boolean;
+    onCardPaymentSuccess?: () => void;
+    itemTitle?: string;
+}
+interface NotificationProps {
     title: string;
     text?: string;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     className?: string;
-    style?: React.CSSProperties;
-};
+    style?: CSSProperties;
+}
+interface PaymentModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onPayWithCrypto: () => void;
+    amount?: string;
+    currency?: string;
+    itemTitle?: string;
+    walletAddress?: string;
+    onDisconnect?: () => void;
+    fetchOnRampLink?: (providerId: string) => Promise<string>;
+    onRampAvailable?: boolean;
+    onPaymentSuccess?: () => void;
+}
+type PaymentViewState = "main" | "card" | "success" | "error";
+interface BottomSheetProps {
+    isOpen: boolean;
+    onClose: () => void;
+    detents?: number[];
+    initialDetent?: number;
+    children: ReactNode;
+    className?: string;
+    backdropClassName?: string;
+    handleClassName?: string;
+    contentClassName?: string;
+    enableBackdropClose?: boolean;
+    enableSwipeToClose?: boolean;
+    maxHeight?: number | string;
+    minHeight?: number | string;
+}
+interface UseMoonPayIframeOptions {
+    apiKey?: string;
+    chain?: Chain;
+    provider?: OnRampProvider;
+}
+
+declare const TonPayButton: React.FC<TonPayButtonProps>;
+
+declare const PaymentModal: React.FC<PaymentModalProps>;
+
+declare const BottomSheet: React.FC<BottomSheetProps>;
+
 declare const NotificationCard: React.FC<NotificationProps>;
 declare const NotificationRoot: React.FC<{
     children?: React.ReactNode;
 }>;
-declare const ErrorDotIcon: React.FC<{
-    color?: string;
-}>;
 
-declare const ErrorTransactionNotification: React.FC<{
+interface ErrorTransactionNotificationProps {
     text?: string;
     className?: string;
     style?: React.CSSProperties;
-}>;
+}
+declare const ErrorTransactionNotification: React.FC<ErrorTransactionNotificationProps>;
 
-type TonPayMessage = SendTransactionRequest["messages"][number] & {
-    payload: string;
+declare function useTonPay(): {
+    pay: <T extends object = object>(getMessage: GetMessageFn<T>) => Promise<PayInfo<T>>;
+    address: string;
 };
-type GetMessageFn<T extends object = object> = (senderAddr: string) => Promise<{
-    message: TonPayMessage;
-} & T>;
-type PayInfo<T extends object = object> = {
-    message: TonPayMessage;
-    txResult: SendTransactionResponse;
-} & T;
-declare const useTonPay: () => {
-    pay: any;
-    address: string | null;
+
+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>;
+    geoResult: MoonpayGeoResult | null;
+    limits: MoonpayAmountLimits | null;
 };
 
-export { ErrorDotIcon, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type PayInfo, TonPayButton, type TonPayMessage, useTonPay };
+interface KeyPair {
+    publicKey: Uint8Array;
+    privateKey: Uint8Array;
+}
+declare function generateKeyPair(): Promise<KeyPair>;
+declare function signMessage(privateKey: Uint8Array, message: Uint8Array): Promise<Uint8Array>;
+declare function verifySignlessSignature(publicKey: Uint8Array, message: Uint8Array, signature: Uint8Array): Promise<boolean>;
+
+interface EncryptedKeyVault {
+    salt: string;
+    iv: string;
+    encryptedBlob: string;
+    publicKey: string;
+    version: number;
+}
+declare function encryptPrivateKey(privateKey: Uint8Array, publicKey: Uint8Array, pin: string): Promise<EncryptedKeyVault>;
+declare function decryptPrivateKey(vault: EncryptedKeyVault, pin: string): Promise<Uint8Array>;
+
+interface WebAuthnCredentialInfo {
+    credentialId: string;
+    publicKey: string;
+    transports?: AuthenticatorTransport[];
+}
+declare function isWebAuthnSupported(): boolean;
+declare function createWebAuthnCredential(walletAddress: string): Promise<WebAuthnCredentialInfo>;
+declare function getWebAuthnCredential(credentialInfo: WebAuthnCredentialInfo): Promise<ArrayBuffer>;
+
+type SignlessAuthMethod = "pin" | "biometric" | "none";
+type SignlessStatus = "disabled" | "not_setup" | "locked" | "unlocked" | "setting_up";
+interface SignlessConfig {
+    enabled: boolean;
+    authMethod: SignlessAuthMethod;
+    autoLockTimeout?: number;
+    storageKey?: string;
+}
+interface SignlessState {
+    status: SignlessStatus;
+    isEnabled: boolean;
+    isSetup: boolean;
+    isUnlocked: boolean;
+    authMethod: SignlessAuthMethod;
+    publicKey: string | null;
+    walletAddress: string | null;
+}
+interface SignlessVaultData {
+    vault: EncryptedKeyVault;
+    authMethod: SignlessAuthMethod;
+    walletAddress: string;
+    webauthnCredential?: WebAuthnCredentialInfo;
+    createdAt: number;
+    updatedAt: number;
+}
+interface SignlessSetupParams {
+    authMethod: SignlessAuthMethod;
+    pin?: string;
+}
+interface SignlessUnlockParams {
+    pin?: string;
+}
+interface SignlessPayloadParams {
+    recipient: string;
+    amount: string;
+    token?: string;
+    payload?: string;
+    reference?: string;
+    validUntil?: number;
+}
+interface SignlessSignedPayload {
+    payload: Uint8Array;
+    signature: Uint8Array;
+    publicKey: string;
+    reference: string;
+    validUntil: number;
+}
+interface SignlessContextValue {
+    state: SignlessState;
+    config: SignlessConfig;
+    setup: (params: SignlessSetupParams) => Promise<void>;
+    unlock: (params: SignlessUnlockParams) => Promise<void>;
+    lock: () => void;
+    reset: () => Promise<void>;
+    signPayload: (params: SignlessPayloadParams) => Promise<SignlessSignedPayload>;
+    updateConfig: (config: Partial<SignlessConfig>) => void;
+    isBiometricAvailable: boolean;
+}
+interface PinInputProps {
+    length?: number;
+    onComplete: (pin: string) => void;
+    onCancel?: () => void;
+    title?: string;
+    subtitle?: string;
+    error?: string | null;
+    isLoading?: boolean;
+    showBiometric?: boolean;
+    onBiometricPress?: () => void;
+}
+interface SignlessSetupModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onComplete: () => void;
+    showBiometric?: boolean;
+}
+interface SignlessUnlockModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onUnlock: () => void;
+    showBiometric?: boolean;
+}
+
+interface SignlessProviderProps {
+    children: React.ReactNode;
+    config?: Partial<SignlessConfig>;
+}
+declare function SignlessProvider({ children, config }: SignlessProviderProps): react_jsx_runtime.JSX.Element;
+declare function useSignless(): SignlessContextValue;
+
+interface UseTonPaySignlessResult {
+    pay: <T extends object = object>(getMessage: GetMessageFn<T>) => Promise<PayInfo<T>>;
+    paySignless: (params: SignlessPayloadParams) => Promise<SignlessSignedPayload>;
+    address: string;
+    signless: {
+        state: SignlessState;
+        config: SignlessConfig;
+        setup: (params: SignlessSetupParams) => Promise<void>;
+        unlock: (params: SignlessUnlockParams) => Promise<void>;
+        lock: () => void;
+        reset: () => Promise<void>;
+        updateConfig: (config: Partial<SignlessConfig>) => void;
+        isBiometricAvailable: boolean;
+        isEnabled: boolean;
+        isSetup: boolean;
+        isUnlocked: boolean;
+        requiresUnlock: boolean;
+    };
+}
+declare function useTonPaySignless(): UseTonPaySignlessResult;
+
+type SignlessModalType = "setup" | "unlock" | null;
+interface UseSignlessModalResult {
+    modalType: SignlessModalType;
+    isOpen: boolean;
+    openSetup: () => void;
+    openUnlock: () => void;
+    close: () => void;
+    onSetupComplete: () => void;
+    onUnlockComplete: () => void;
+}
+declare function useSignlessModal(): UseSignlessModalResult;
+
+declare const PinInput: React.FC<PinInputProps>;
+
+declare const SignlessSetupModal: React.FC<SignlessSetupModalProps>;
+
+declare const SignlessUnlockModal: React.FC<SignlessUnlockModalProps>;
+
+declare class SignlessStorage {
+    private storageKey;
+    constructor(storageKey?: string);
+    private getStorage;
+    saveVault(walletAddress: string, vault: EncryptedKeyVault, authMethod: SignlessAuthMethod, webauthnCredential?: WebAuthnCredentialInfo): Promise<void>;
+    loadVault(walletAddress: string): Promise<SignlessVaultData | null>;
+    deleteVault(walletAddress: string): Promise<void>;
+    hasVault(walletAddress: string): Promise<boolean>;
+    updateVaultTimestamp(walletAddress: string): Promise<void>;
+    getAllWalletsWithVaults(): Promise<string[]>;
+    private getStorageKeyForWallet;
+}
+declare const signlessStorage: SignlessStorage;
+
+export { BottomSheet, type BottomSheetProps, type EncryptedKeyVault, ErrorTransactionNotification, type GetMessageFn, NotificationCard, type NotificationProps, NotificationRoot, type OnRampProvider, type PayInfo, PaymentModal, type PaymentModalProps, type PaymentViewState, PinInput, type PinInputProps, type SignlessAuthMethod, type SignlessConfig, type SignlessContextValue, type SignlessModalType, type SignlessPayloadParams, SignlessProvider, SignlessSetupModal, type SignlessSetupModalProps, type SignlessSetupParams, type SignlessSignedPayload, type SignlessState, type SignlessStatus, SignlessStorage, SignlessUnlockModal, type SignlessUnlockModalProps, type SignlessUnlockParams, type SignlessVaultData, TonPayButton, type TonPayButtonProps, type TonPayMessage, type TonPayPreset, type TonPayVariant, type UseMoonPayIframeOptions, type UseSignlessModalResult, type UseTonPaySignlessResult, type WebAuthnCredentialInfo, createWebAuthnCredential, decryptPrivateKey, encryptPrivateKey, generateKeyPair, getWebAuthnCredential, isWebAuthnSupported, signMessage, signlessStorage, useMoonPayIframe, useSignless, useSignlessModal, useTonPay, useTonPaySignless, verifySignlessSignature };