@chipi-stack/chipi-react 14.0.0 → 14.1.1

package/README.md

@@ -52,6 +52,15 @@ function Wallet() {
 }
 ```
 
+## What you can ship
+
+- **Crypto checkout components** — drop-in payment UIs for e-commerce and SaaS
+- **In-app token transfer UIs** — send and receive USDC with a few lines of React
+- **Connect-with-passkey flows** — biometric wallet login without seed phrases
+- **DeFi dashboards and loyalty/rewards redemption interfaces** — display balances, history, and reward claims
+
+Have an idea? [Tell us what you want to build](https://github.com/chipi-pay/build-with-chipi/issues/new)
+
 ## Documentation
 
 Full docs at [docs.chipipay.com](https://docs.chipipay.com)

package/dist/hooks.d.mts

@@ -1,4 +1,4 @@
-import { CreateWalletParams, CreateWalletResponse, GetWalletParams, GetWalletResponse, ChainToken, GetTokenBalanceResponse, WalletType, WalletData, SessionKeyData, SessionDataResponse, CreateSessionKeyParams, SessionConfig, Call, MigrateWalletToPasskeyParams, UpdateWalletEncryptionParams, UpdateWalletEncryptionResponse, TransferHookInput, ApproveHookInput, GetTransactionListQuery, PaginatedResponse, Transaction, CreateSkuPurchaseParams, GetSkuListQuery, Sku, CallAnyContractParams, RecordSendTransactionParams, GetTokenBalanceParams, AddSessionKeyParams, RevokeSessionKeyParams, GetSessionDataParams, ExecuteWithSessionParams } from '@chipi-stack/types';
+import { CreateWalletParams, CreateWalletResponse, GetWalletParams, GetWalletResponse, ChainToken, GetTokenBalanceResponse, WalletType, WalletData, SessionKeyData, SessionDataResponse, CreateSessionKeyParams, SessionConfig, Call, MigrateWalletToPasskeyParams, UpdateWalletEncryptionParams, UpdateWalletEncryptionResponse, TransferHookInput, ApproveHookInput, GetTransactionListQuery, PaginatedResponse, Transaction, TransactionStatusResponse, CreateSkuPurchaseParams, GetSkuListQuery, Sku, CallAnyContractParams, RecordSendTransactionParams, GetTokenBalanceParams, AddSessionKeyParams, RevokeSessionKeyParams, GetSessionDataParams, ExecuteWithSessionParams, PaymentRequirement, PaymentPayload } from '@chipi-stack/types';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query';
 
@@ -700,6 +700,366 @@ declare function useGetTransactionList(input?: TransactionListInput): {
     promise: Promise<PaginatedResponse<Transaction>>;
 };
 
+type GetTransactionInput = {
+    hashOrId?: string;
+    getBearerToken?: () => Promise<string | null | undefined>;
+    queryOptions?: Omit<UseQueryOptions<Transaction, Error>, "queryKey" | "queryFn">;
+};
+type FetchTransactionInput = {
+    hashOrId: string;
+    getBearerToken: () => Promise<string | null | undefined>;
+};
+declare function useGetTransaction(input?: GetTransactionInput): {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: Transaction;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+} | {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: Transaction;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+} | {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+} | {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+} | {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+} | {
+    fetchTransaction: (newInput: FetchTransactionInput) => Promise<Transaction>;
+    data: Transaction;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<Transaction, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<Transaction>;
+};
+
+type GetTransactionStatusInput = {
+    hash?: string;
+    getBearerToken?: () => Promise<string | null | undefined>;
+    /** Polling interval in ms. Defaults to 3000. Set to false to disable polling. */
+    refetchInterval?: number | false;
+    queryOptions?: Omit<UseQueryOptions<TransactionStatusResponse, Error>, "queryKey" | "queryFn" | "refetchInterval">;
+};
+type FetchTransactionStatusInput = {
+    hash: string;
+    getBearerToken: () => Promise<string | null | undefined>;
+};
+declare function useGetTransactionStatus(input?: GetTransactionStatusInput): {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: TransactionStatusResponse;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: true;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+} | {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: TransactionStatusResponse;
+    error: null;
+    isError: false;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: false;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+} | {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: undefined;
+    error: Error;
+    isError: true;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: true;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "error";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+} | {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoading: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+} | {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: undefined;
+    error: null;
+    isError: false;
+    isPending: true;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: false;
+    isPlaceholderData: false;
+    status: "pending";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isLoading: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+} | {
+    fetchTransactionStatus: (newInput: FetchTransactionStatusInput) => Promise<TransactionStatusResponse>;
+    data: TransactionStatusResponse;
+    isError: false;
+    error: null;
+    isPending: false;
+    isLoading: false;
+    isLoadingError: false;
+    isRefetchError: false;
+    isSuccess: true;
+    isPlaceholderData: true;
+    status: "success";
+    dataUpdatedAt: number;
+    errorUpdatedAt: number;
+    failureCount: number;
+    failureReason: Error | null;
+    errorUpdateCount: number;
+    isFetched: boolean;
+    isFetchedAfterMount: boolean;
+    isFetching: boolean;
+    isInitialLoading: boolean;
+    isPaused: boolean;
+    isRefetching: boolean;
+    isStale: boolean;
+    isEnabled: boolean;
+    refetch: (options?: _tanstack_react_query.RefetchOptions) => Promise<_tanstack_react_query.QueryObserverResult<TransactionStatusResponse, Error>>;
+    fetchStatus: _tanstack_react_query.FetchStatus;
+    promise: Promise<TransactionStatusResponse>;
+};
+
 type PurchaseSkuInput = {
     params: CreateSkuPurchaseParams;
     bearerToken: string;
@@ -1648,4 +2008,89 @@ declare function useExecuteWithSession(): {
     reset: () => void;
 };
 
-export { type ChipiWalletData, type SessionState, type SessionWallet, type UseChipiSessionConfig, type UseChipiSessionReturn, type UseChipiWalletConfig, type UseChipiWalletReturn, useAddSessionKeyToContract, useApprove, useCallAnyContract, useChipiSession, useChipiWallet, useCreateSessionKey, useCreateWallet, useExecuteWithSession, useGetSessionData, useGetSku, useGetSkuList, useGetSkuPurchase, useGetTokenBalance, useGetTransactionList, useGetWallet, useMigrateWalletToPasskey, usePurchaseSku, useRecordSendTransaction, useRevokeSessionKey, useTransfer, useUpdateWalletEncryption };
+/**
+ * Configuration for useX402Payment hook
+ */
+interface UseX402PaymentConfig {
+    /** Wallet data */
+    wallet: WalletData | null | undefined;
+    /** Encryption key for signing */
+    encryptKey: string;
+    /** Function to get the bearer token for API calls */
+    getBearerToken?: () => Promise<string | null | undefined>;
+    /** Static bearer token string (alternative to getBearerToken) */
+    bearerToken?: string;
+    /** Max amount per payment (USDC, human-readable e.g. "1.00") */
+    maxPaymentAmount?: string;
+    /** Alias for maxPaymentAmount */
+    maxAmount?: string;
+    /** Allowed recipient addresses (whitelist). Empty = allow all. */
+    allowedRecipients?: string[];
+    /** Active session for automatic payments (optional) */
+    session?: SessionKeyData | null;
+    /** Callback on successful payment */
+    onPaymentComplete?: (txHash: string, amount: string) => void | Promise<void>;
+}
+/**
+ * Last payment info returned by the hook
+ */
+interface LastPaymentInfo {
+    txHash: string | null;
+    amount: string | null;
+    timestamp: number;
+}
+/**
+ * Return type for useX402Payment hook
+ */
+interface UseX402PaymentReturn {
+    /** Fetch wrapper that auto-handles 402 payments */
+    x402Fetch: (url: string, init?: Record<string, any>) => Promise<Response>;
+    /** Alias for x402Fetch */
+    payFetch: (url: string, init?: Record<string, any>) => Promise<Response>;
+    /** Manual payment signing (for custom flows) */
+    signPayment: (requirement: PaymentRequirement) => Promise<PaymentPayload>;
+    /** Whether a payment is in progress */
+    isPaying: boolean;
+    /** Last payment transaction hash */
+    lastTxHash: string | null;
+    /** Last payment amount (human-readable USDC) */
+    lastAmount: string | null;
+    /** Last payment info (txHash + amount + timestamp) */
+    lastPayment: LastPaymentInfo | null;
+    /** Total USDC spent in this session (human-readable) */
+    totalSpent: string;
+    /** Error from last payment attempt */
+    error: Error | null;
+    /** Total payments made in this session */
+    paymentCount: number;
+}
+/**
+ * React hook for x402 payment protocol support.
+ *
+ * Wraps fetch calls with automatic HTTP 402 payment handling.
+ * When a server returns 402, the hook:
+ * 1. Parses the payment requirement
+ * 2. Validates against configured limits
+ * 3. Signs using the wallet (or session key for automatic payments)
+ * 4. Retries with the X-PAYMENT header
+ *
+ * @example
+ * ```tsx
+ * const { x402Fetch, isPaying, lastTxHash, paymentCount } = useX402Payment({
+ *   wallet,
+ *   encryptKey: pin,
+ *   getBearerToken: getToken,
+ *   maxPaymentAmount: "1.00",
+ *   onPaymentComplete: (txHash, amount) => {
+ *     console.log(`Paid ${amount} USDC, tx: ${txHash}`);
+ *   },
+ * });
+ *
+ * // Automatic 402 handling
+ * const response = await x402Fetch("https://api.example.com/premium");
+ * const data = await response.json();
+ * ```
+ */
+declare function useX402Payment(config: UseX402PaymentConfig): UseX402PaymentReturn;
+
+export { type ChipiWalletData, type SessionState, type SessionWallet, type UseChipiSessionConfig, type UseChipiSessionReturn, type UseChipiWalletConfig, type UseChipiWalletReturn, type UseX402PaymentConfig, type UseX402PaymentReturn, useAddSessionKeyToContract, useApprove, useCallAnyContract, useChipiSession, useChipiWallet, useCreateSessionKey, useCreateWallet, useExecuteWithSession, useGetSessionData, useGetSku, useGetSkuList, useGetSkuPurchase, useGetTokenBalance, useGetTransaction, useGetTransactionList, useGetTransactionStatus, useGetWallet, useMigrateWalletToPasskey, usePurchaseSku, useRecordSendTransaction, useRevokeSessionKey, useTransfer, useUpdateWalletEncryption, useX402Payment };