@stablecoin.xyz/react/dist/index.d.ts

React hooks and components for SBC Account Abstraction

import * as _stablecoin_xyz_core from '@stablecoin.xyz/core';
import { AccountInfo, SbcAppKitConfig, SbcAppKit, SendUserOperationParams, UserOperationResult, UserOperationEstimate, SupportedWalletType, WalletConnectionResult, DetectedWallet } from '@stablecoin.xyz/core';
export { AccountInfo, CallParams, ChainConfig, LoggingConfig, SbcAppKitConfig, SendUserOperationParams, SupportedWalletType, UserOperationEstimate, UserOperationParams, UserOperationResult, WalletOptions } from '@stablecoin.xyz/core';
import { ReactNode } from 'react';
import * as viem from 'viem';
import { Chain } from 'viem';
import * as react_jsx_runtime from 'react/jsx-runtime';

interface UseSbcAppReturn {
    /** SBC App Kit instance */
    sbcAppKit: _stablecoin_xyz_core.SbcAppKit | null;
    /** Whether the SDK is initialized */
    isInitialized: boolean;
    /** Initialization error if any */
    error: Error | null;
    /** Account information */
    account: AccountInfo | null;
    /** Whether account info is loading */
    isLoadingAccount: boolean;
    /** Error loading account info */
    accountError: Error | null;
    /** Refresh account information */
    refreshAccount: () => Promise<void>;
    /** EOA address (MetaMask, etc) that owns the smart account */
    ownerAddress: string | null;
    /** Disconnect the wallet and clear all state */
    disconnectWallet: () => void;
}
/**
 * Main hook for accessing SBC App Kit functionality
 */
declare function useSbcApp(): UseSbcAppReturn;

interface SbcProviderProps {
    /** SBC App Kit configuration */
    config: SbcAppKitConfig;
    /** Child components */
    children: ReactNode;
    /** Optional: Custom error boundary */
    onError?: (error: Error) => void;
}
interface SbcContextValue {
    /** SBC App Kit instance */
    sbcAppKit: SbcAppKit | null;
    /** Whether the SDK is initialized */
    isInitialized: boolean;
    /** Initialization error if any */
    error: Error | null;
}
interface UseUserOperationOptions {
    /** Callback fired on successful transaction */
    onSuccess?: (result: _stablecoin_xyz_core.UserOperationResult) => void;
    /** Callback fired on transaction error */
    onError?: (error: Error) => void;
    /** Auto-refresh account after successful transaction */
    refreshAccount?: boolean;
}
interface UserOperationState {
    /** Whether a transaction is currently being sent */
    isLoading: boolean;
    /** Whether the last transaction was successful */
    isSuccess: boolean;
    /** Whether the last transaction failed */
    isError: boolean;
    /** Error from the last transaction */
    error: Error | null;
    /** Result from the last successful transaction */
    data: _stablecoin_xyz_core.UserOperationResult | null;
    /** Reset the state */
    reset: () => void;
}

interface UseUserOperationReturn extends UserOperationState {
    /** Send a user operation */
    sendUserOperation: (params: SendUserOperationParams) => Promise<UserOperationResult | undefined>;
    /** Estimate gas for a user operation */
    estimateUserOperation: (params: SendUserOperationParams) => Promise<UserOperationEstimate | undefined>;
}
/**
 * Hook for sending user operations with automatic state management
 */
declare function useUserOperation(options?: UseUserOperationOptions): UseUserOperationReturn;

interface UseSbcDynamicReturn {
    /** SBC App Kit instance */
    sbcAppKit: SbcAppKit | null;
    /** Whether the SDK is initialized */
    isInitialized: boolean;
    /** Initialization error if any */
    error: Error | null;
    /** Account information */
    account: AccountInfo | null;
    /** Whether account info is loading */
    isLoadingAccount: boolean;
    /** Error loading account info */
    accountError: Error | null;
    /** Refresh account information */
    refreshAccount: () => Promise<void>;
    /** EOA address from Dynamic that owns the smart account */
    ownerAddress: string | null;
    /** Disconnect the wallet and clear all state */
    disconnectWallet: () => void;
}
interface UseSbcDynamicConfig {
    /** Your SBC API key */
    apiKey: string;
    /** Blockchain network to operate on */
    chain: viem.Chain;
    /** Dynamic primary wallet from useDynamicContext() */
    primaryWallet: any;
    /** Optional: Custom RPC URL */
    rpcUrl?: string;
    /** Optional: Enable debug logging */
    debug?: boolean;
}
/**
 * Simplified hook for Dynamic + SBC integration
 * Automatically handles wallet client creation and SBC initialization
 */
declare function useSbcDynamic(config: UseSbcDynamicConfig): UseSbcDynamicReturn;

interface UseSbcParaConfig {
    /** SBC API key */
    apiKey: string;
    /** Target blockchain chain */
    chain: Chain;
    /** Para account object from the useAccount hook */
    paraAccount: any;
    /** Optional RPC URL override */
    rpcUrl?: string;
    /** Enable debug logging */
    debug?: boolean;
    /** Para viem clients from useParaViem hook */
    paraViemClients?: {
        publicClient: any;
        walletClient: any;
        account: any;
    } | null;
}
interface UseSbcParaResult {
    /** SBC AppKit instance (available when initialized) */
    sbcAppKit: SbcAppKit | null;
    /** Whether SBC is initialized and ready */
    isInitialized: boolean;
    /** Initialization or runtime error */
    error: Error | null;
    /** Smart account information */
    account: any;
    /** Whether account information is loading */
    isLoadingAccount: boolean;
    /** Account loading error */
    accountError: Error | null;
    /** Owner address (Para wallet address) */
    ownerAddress: string | null;
    /** Function to refresh account data */
    refreshAccount: () => Promise<void>;
    /** Function to disconnect and cleanup */
    disconnectWallet: () => Promise<void>;
}
/**
 * React hook for integrating SBC AppKit with Para embedded wallets
 *
 * This hook should be used within a ParaProvider context and requires
 * a Para account from the useAccount hook.
 *
 * @example
 * ```tsx
 * import { ParaProvider, useAccount } from "@getpara/react-sdk";
 * import "@getpara/react-sdk/styles.css";
 *
 * function App() {
 *   return (
 *     <ParaProvider
 *       paraClientConfig={{
 *         env: "development",
 *         apiKey: "your-para-api-key",
 *       }}
 *       config={{
 *         appName: "Your App Name",
 *       }}
 *     >
 *       <YourAppComponent />
 *     </ParaProvider>
 *   );
 * }
 *
 * function YourAppComponent() {
 *   const paraAccount = useAccount();
 *
 *   const {
 *     sbcAppKit,
 *     isInitialized,
 *     account,
 *     ownerAddress
 *   } = useSbcPara({
 *     apiKey: 'your-sbc-api-key',
 *     chain: baseSepolia,
 *     paraAccount
 *   });
 *
 *   return <div>Smart Account: {account?.address}</div>;
 * }
 * ```
 */
declare function useSbcPara(config: UseSbcParaConfig): UseSbcParaResult;

interface UseSbcTurnkeyReturn {
    /** SBC App Kit instance */
    sbcAppKit: SbcAppKit | null;
    /** Whether the SDK is initialized */
    isInitialized: boolean;
    /** Initialization error if any */
    error: Error | null;
    /** Account information */
    account: AccountInfo | null;
    /** Whether account info is loading */
    isLoadingAccount: boolean;
    /** Error loading account info */
    accountError: Error | null;
    /** Refresh account information */
    refreshAccount: () => Promise<void>;
    /** EOA address from Turnkey that owns the smart account */
    ownerAddress: string | null;
    /** Disconnect the wallet and clear all state */
    disconnectWallet: () => void;
}
interface UseSbcTurnkeyConfig {
    /** Your SBC API key */
    apiKey: string;
    /** Blockchain network to operate on */
    chain: viem.Chain;
    /** Turnkey client from getActiveClient() */
    turnkeyClient: any;
    /** Organization ID from Turnkey */
    organizationId: string;
    /** Optional: Custom RPC URL */
    rpcUrl?: string;
    /** Optional: Enable debug logging */
    debug?: boolean;
    /** Optional: Pre-created Turnkey viem wallet client */
    turnkeyWalletClient?: any;
}
/**
 * Simplified hook for Turnkey + SBC integration
 * Automatically handles wallet client creation and SBC initialization
 *
 * @example
 * ```tsx
 * import { TurnkeyProvider, useTurnkey } from "@turnkey/sdk-react";
 * import { useSbcTurnkey } from "@stablecoin.xyz/react";
 * import { baseSepolia } from "viem/chains";
 * import { useState, useEffect } from "react";
 *
 * function App() {
 *   return (
 *     <TurnkeyProvider config={turnkeyConfig}>
 *       <YourComponent />
 *     </TurnkeyProvider>
 *   );
 * }
 *
 * function YourComponent() {
 *   const { turnkey, passkeyClient } = useTurnkey();
 *   const [turnkeyClient, setTurnkeyClient] = useState(null);
 *   const [organizationId, setOrganizationId] = useState('');
 *
 *   // Check authentication and get organization ID
 *   useEffect(() => {
 *     const checkAuth = async () => {
 *       if (turnkey) {
 *         const session = await turnkey.getSession();
 *         if (session?.organizationId) {
 *           setOrganizationId(session.organizationId);
 *           setTurnkeyClient(passkeyClient);
 *         }
 *       }
 *     };
 *     checkAuth();
 *   }, [turnkey, passkeyClient]);
 *
 *   const {
 *     sbcAppKit,
 *     isInitialized,
 *     account,
 *     ownerAddress
 *   } = useSbcTurnkey({
 *     apiKey: 'your-sbc-api-key',
 *     chain: baseSepolia,
 *     turnkeyClient,
 *     organizationId,
 *   });
 *
 *   return <div>Smart Account: {account?.address}</div>;
 * }
 * ```
 */
declare function useSbcTurnkey(config: UseSbcTurnkeyConfig): UseSbcTurnkeyReturn;

declare function SbcProvider({ config, children, onError }: SbcProviderProps): react_jsx_runtime.JSX.Element;
declare function useSbcContext(): SbcContextValue;

interface WalletConnectProps {
    /** Custom className for styling */
    className?: string;
    /** Callback when wallet connection changes */
    onConnectionChange?: (connected: boolean) => void;
}
/**
 * WalletConnect component - placeholder for future wallet integration
 *
 * This component will be expanded in the future to handle:
 * - Multiple wallet providers (MetaMask, WalletConnect, Coinbase Wallet, etc.)
 * - Wallet switching
 * - Connection state management
 * - Network switching
 */
declare function WalletConnect({ className, onConnectionChange }: WalletConnectProps): react_jsx_runtime.JSX.Element;

interface WalletButtonProps {
    /** Wallet type to connect to ('auto' for automatic detection) */
    walletType?: SupportedWalletType;
    /** Custom className for styling */
    className?: string;
    /** Callback when wallet connection succeeds */
    onConnect?: (result: WalletConnectionResult) => void;
    /** Callback when wallet connection fails */
    onError?: (error: Error) => void;
    /** Custom button text */
    children?: React.ReactNode;
    /** Show loading state */
    showLoading?: boolean;
    /** Disabled state */
    disabled?: boolean;
    /** Custom render prop for full control */
    render?: (props: {
        onClick: () => void;
        isConnecting: boolean;
        disabled: boolean;
        children: React.ReactNode;
        className: string;
    }) => React.ReactNode;
}
/**
 * WalletButton - Simple button component for connecting to wallets
 *
 * Automatically detects available wallets and connects with one click
 */
declare function WalletButton({ walletType, className, onConnect, onError, children, showLoading, disabled, render, }: WalletButtonProps): react_jsx_runtime.JSX.Element;

interface WalletSelectorProps {
    /** Custom className for styling */
    className?: string;
    /** Callback when wallet connection succeeds */
    onConnect?: (result: WalletConnectionResult) => void;
    /** Callback when wallet connection fails */
    onError?: (error: Error) => void;
    /** Show only available wallets */
    showOnlyAvailable?: boolean;
    /** Custom wallet list (overrides auto-detection) */
    wallets?: DetectedWallet[];
}
/**
 * WalletSelector - Component that displays available wallets and allows selection
 *
 * Automatically detects installed wallets and shows connection options
 */
declare function WalletSelector({ className, onConnect, onError, showOnlyAvailable, wallets: customWallets, }: WalletSelectorProps): react_jsx_runtime.JSX.Element;
declare global {
    interface Window {
        ethereum?: any;
        coinbaseWalletExtension?: any;
    }
}

export { SbcProvider, WalletButton, WalletConnect, WalletSelector, useSbcApp, useSbcContext, useSbcDynamic, useSbcPara, useSbcTurnkey, useUserOperation };
export type { SbcContextValue, SbcProviderProps, UseSbcAppReturn, UseSbcDynamicConfig, UseSbcDynamicReturn, UseSbcParaConfig, UseSbcParaResult, UseSbcTurnkeyConfig, UseSbcTurnkeyReturn, UseUserOperationOptions, UseUserOperationReturn, UserOperationState, WalletButtonProps, WalletConnectProps, WalletSelectorProps };