@cfxdevkit/react 1.0.0

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/useBalance.ts","../../src/providers/DevKitProvider.tsx","../../src/hooks/useContract.ts","../../src/providers/WalletProvider.tsx","../../src/hooks/useTransaction.ts"],"sourcesContent":["/*\n * Copyright 2025 Conflux DevKit Team\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * useBalance Hook\n *\n * Fetches and tracks balance for an address\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport { useCallback, useEffect, useState } from 'react';\nimport { useDevKitContext } from '../providers/DevKitProvider.js';\n\nexport interface UseBalanceOptions {\n  address?: string;\n  chain: ChainType;\n  enabled?: boolean;\n  refreshInterval?: number;\n}\n\nexport interface UseBalanceReturn {\n  balance?: string;\n  isLoading: boolean;\n  error?: Error;\n  refetch: () => Promise<void>;\n}\n\n/**\n * Hook to fetch and track address balance\n *\n * @example\n * ```tsx\n * const { balance, isLoading } = useBalance({\n *   address: '0x...',\n *   chain: 'evm'\n * });\n * ```\n */\nexport function useBalance(options: UseBalanceOptions): UseBalanceReturn {\n  const { address, enabled = true, refreshInterval } = options;\n  useDevKitContext(); // ensure provider is present; apiUrl and chain used in production impl\n\n  const [balance, setBalance] = useState<string>();\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  const fetchBalance = useCallback(async () => {\n    if (!address || !enabled) return;\n\n    setIsLoading(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API with `chain` to select Core vs eSpace\n      // For now, simulate balance fetch\n      const mockBalance = '1000000000000000000'; // 1 token\n      setBalance(mockBalance);\n    } catch (err) {\n      setError(\n        err instanceof Error ? err : new Error('Failed to fetch balance')\n      );\n    } finally {\n      setIsLoading(false);\n    }\n  }, [address, enabled]);\n\n  useEffect(() => {\n    void fetchBalance();\n\n    // Set up refresh interval if provided\n    if (refreshInterval) {\n      const interval = setInterval(() => {\n        void fetchBalance();\n      }, refreshInterval);\n      return () => clearInterval(interval);\n    }\n  }, [fetchBalance, refreshInterval]);\n\n  return {\n    balance,\n    isLoading,\n    error,\n    refetch: fetchBalance,\n  };\n}\n","/*\n * Copyright 2025 Conflux DevKit Team\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * DevKit Provider\n *\n * Provides DevKit instance and configuration to all child components\n */\n\nimport { createContext, type ReactNode, useContext } from 'react';\n\nexport interface DevKitContextValue {\n  /** Backend API URL */\n  apiUrl: string;\n  /** WebSocket URL */\n  wsUrl?: string;\n  /** Current network */\n  network: 'local' | 'testnet' | 'mainnet';\n  /** Enable debug mode */\n  debug?: boolean;\n}\n\nconst DevKitContext = createContext<DevKitContextValue | undefined>(undefined);\n\nexport interface DevKitProviderProps {\n  apiUrl: string;\n  wsUrl?: string;\n  network?: 'local' | 'testnet' | 'mainnet';\n  debug?: boolean;\n  children: ReactNode;\n}\n\n/**\n * DevKit Provider Component\n *\n * Wrap your app with this provider to enable DevKit functionality\n *\n * @example\n * ```tsx\n * <DevKitProvider apiUrl=\"http://localhost:3000\" network=\"local\">\n *   <App />\n * </DevKitProvider>\n * ```\n */\nexport function DevKitProvider({\n  apiUrl,\n  wsUrl,\n  network = 'local',\n  debug = false,\n  children,\n}: DevKitProviderProps) {\n  const value: DevKitContextValue = {\n    apiUrl,\n    wsUrl,\n    network,\n    debug,\n  };\n\n  return (\n    <DevKitContext.Provider value={value}>{children}</DevKitContext.Provider>\n  );\n}\n\n/**\n * Hook to access DevKit context\n *\n * @throws Error if used outside DevKitProvider\n */\nexport function useDevKitContext() {\n  const context = useContext(DevKitContext);\n  if (!context) {\n    throw new Error('useDevKitContext must be used within DevKitProvider');\n  }\n  return context;\n}\n","/*\n * Copyright 2025 Conflux DevKit Team\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * useContract Hook\n *\n * Interact with smart contracts (read and write)\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport { useState } from 'react';\nimport { useDevKitContext } from '../providers/DevKitProvider.js';\nimport { useWalletContext } from '../providers/WalletProvider.js';\n\nexport interface ReadContractOptions {\n  address: string;\n  abi: unknown[];\n  functionName: string;\n  args?: unknown[];\n  chain: ChainType;\n}\n\nexport interface WriteContractOptions extends ReadContractOptions {\n  value?: string;\n}\n\nexport interface UseContractReturn {\n  read: <T = unknown>(options: ReadContractOptions) => Promise<T>;\n  write: (options: WriteContractOptions) => Promise<string>;\n  isLoading: boolean;\n  error?: Error;\n}\n\n/**\n * Hook to interact with smart contracts\n *\n * @example\n * ```tsx\n * const { read, write, isLoading } = useContract();\n *\n * // Read contract\n * const balance = await read({\n *   address: '0x...',\n *   abi: ERC20_ABI,\n *   functionName: 'balanceOf',\n *   args: ['0x...'],\n *   chain: 'evm'\n * });\n *\n * // Write contract\n * const hash = await write({\n *   address: '0x...',\n *   abi: ERC20_ABI,\n *   functionName: 'transfer',\n *   args: ['0x...', '1000000000000000000'],\n *   chain: 'evm'\n * });\n * ```\n */\nexport function useContract(): UseContractReturn {\n  useDevKitContext(); // ensure provider is present; apiUrl used in production impl\n  const { accountIndex } = useWalletContext();\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n\n  const read = async <T = unknown>(\n    _options: ReadContractOptions\n  ): Promise<T> => {\n    setIsLoading(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API\n      // For now, return mock data\n      return {} as T;\n    } catch (err) {\n      const errorObj =\n        err instanceof Error ? err : new Error('Contract read failed');\n      setError(errorObj);\n      throw errorObj;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const write = async (_options: WriteContractOptions): Promise<string> => {\n    if (accountIndex === undefined) {\n      throw new Error('Wallet not connected');\n    }\n\n    setIsLoading(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API\n      // For now, return mock hash\n      const hash = `0x${Array.from({ length: 64 }, () =>\n        Math.floor(Math.random() * 16).toString(16)\n      ).join('')}`;\n\n      return hash;\n    } catch (err) {\n      const errorObj =\n        err instanceof Error ? err : new Error('Contract write failed');\n      setError(errorObj);\n      throw errorObj;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  return {\n    read,\n    write,\n    isLoading,\n    error,\n  };\n}\n","/*\n * Copyright 2025 Conflux DevKit Team\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * Wallet Provider\n *\n * Manages wallet connection state and provides wallet-related functionality\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport { createContext, type ReactNode, useContext, useState } from 'react';\n\nexport interface WalletContextValue {\n  isConnected: boolean;\n  address?: string;\n  coreAddress?: string;\n  evmAddress?: string;\n  chain?: ChainType;\n  accountIndex?: number;\n  connect: (accountIndex: number) => Promise<void>;\n  disconnect: () => void;\n  switchChain: (chain: ChainType) => void;\n}\n\nconst WalletContext = createContext<WalletContextValue | undefined>(undefined);\n\nexport interface WalletProviderProps {\n  children: ReactNode;\n}\n\n/**\n * Wallet Provider Component\n *\n * Manages wallet connection state\n *\n * @example\n * ```tsx\n * <WalletProvider>\n *   <ConnectButton />\n *   <AccountCard />\n * </WalletProvider>\n * ```\n */\nexport function WalletProvider({ children }: WalletProviderProps) {\n  const [isConnected, setIsConnected] = useState(false);\n  const [coreAddress, setCoreAddress] = useState<string>();\n  const [evmAddress, setEvmAddress] = useState<string>();\n  const [chain, setChain] = useState<ChainType>('evm');\n  const [accountIndex, setAccountIndex] = useState<number>();\n\n  const connect = async (index: number) => {\n    // In production, this would fetch account info from backend\n    // For now, simulate connection\n    setAccountIndex(index);\n    setCoreAddress(`cfx:account${index}`);\n    setEvmAddress(`0xaccount${index}`);\n    setIsConnected(true);\n  };\n\n  const disconnect = () => {\n    setIsConnected(false);\n    setCoreAddress(undefined);\n    setEvmAddress(undefined);\n    setAccountIndex(undefined);\n  };\n\n  const switchChain = (newChain: ChainType) => {\n    setChain(newChain);\n  };\n\n  const value: WalletContextValue = {\n    isConnected,\n    address: chain === 'core' ? coreAddress : evmAddress,\n    coreAddress,\n    evmAddress,\n    chain,\n    accountIndex,\n    connect,\n    disconnect,\n    switchChain,\n  };\n\n  return (\n    <WalletContext.Provider value={value}>{children}</WalletContext.Provider>\n  );\n}\n\n/**\n * Hook to access Wallet context\n *\n * @throws Error if used outside WalletProvider\n */\nexport function useWalletContext() {\n  const context = useContext(WalletContext);\n  if (!context) {\n    throw new Error('useWalletContext must be used within WalletProvider');\n  }\n  return context;\n}\n","/*\n * Copyright 2025 Conflux DevKit Team\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n/**\n * useTransaction Hook\n *\n * Sends transactions and tracks their status\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport { useState } from 'react';\nimport { useDevKitContext } from '../providers/DevKitProvider.js';\nimport { useWalletContext } from '../providers/WalletProvider.js';\n\nexport interface SendTransactionOptions {\n  to: string;\n  value?: string;\n  data?: string;\n  chain?: ChainType;\n}\n\nexport interface TransactionResult {\n  hash: string;\n  status: 'pending' | 'success' | 'failed';\n}\n\nexport interface UseTransactionReturn {\n  send: (options: SendTransactionOptions) => Promise<TransactionResult>;\n  isLoading: boolean;\n  error?: Error;\n  transaction?: TransactionResult;\n  reset: () => void;\n}\n\n/**\n * Hook to send transactions\n *\n * @example\n * ```tsx\n * const { send, isLoading, transaction } = useTransaction();\n *\n * const handleSend = async () => {\n *   const result = await send({\n *     to: '0x...',\n *     value: '1000000000000000000',\n *     chain: 'evm'\n *   });\n * };\n * ```\n */\nexport function useTransaction(): UseTransactionReturn {\n  useDevKitContext(); // ensure provider is present; apiUrl used in production impl\n  const { accountIndex } = useWalletContext();\n\n  const [isLoading, setIsLoading] = useState(false);\n  const [error, setError] = useState<Error>();\n  const [transaction, setTransaction] = useState<TransactionResult>();\n\n  const send = async (\n    _options: SendTransactionOptions\n  ): Promise<TransactionResult> => {\n    if (accountIndex === undefined) {\n      throw new Error('Wallet not connected');\n    }\n\n    setIsLoading(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API to send transaction\n      // For now, simulate transaction\n      const result: TransactionResult = {\n        hash: `0x${Array.from({ length: 64 }, () =>\n          Math.floor(Math.random() * 16).toString(16)\n        ).join('')}`,\n        status: 'pending',\n      };\n\n      setTransaction(result);\n\n      // Simulate confirmation\n      setTimeout(() => {\n        setTransaction({ ...result, status: 'success' });\n      }, 2000);\n\n      return result;\n    } catch (err) {\n      const errorObj =\n        err instanceof Error ? err : new Error('Transaction failed');\n      setError(errorObj);\n      throw errorObj;\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const reset = () => {\n    setTransaction(undefined);\n    setError(undefined);\n  };\n\n  return {\n    send,\n    isLoading,\n    error,\n    transaction,\n    reset,\n  };\n}\n"],"mappings":"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","names":["useState","createContext","useContext","useState","jsx","useContext","useState","useState","useState"]}

package/dist/index-CU9Acwhq.d.cts

@@ -0,0 +1,233 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { ChainType } from '@cfxdevkit/core';
+
+/**
+ * UI Headless Types
+ */
+
+interface WalletConnection {
+    isConnected: boolean;
+    address?: string;
+    chainType?: ChainType;
+    balance?: string;
+}
+interface NetworkInfo {
+    chainId: number;
+    name: string;
+    type: 'local' | 'testnet' | 'mainnet';
+    rpcUrl: string;
+}
+interface ContractDeployment {
+    address: string;
+    transactionHash: string;
+    chain: ChainType;
+}
+interface TransactionResult {
+    hash: string;
+    status: 'pending' | 'success' | 'failed';
+    blockNumber?: bigint;
+}
+type RenderPropChild<T> = (props: T) => React.ReactNode;
+interface BaseComponentProps {
+    className?: string;
+}
+
+interface AccountCardRenderProps {
+    isConnected: boolean;
+    coreAddress?: string;
+    evmAddress?: string;
+    coreBalance?: string;
+    evmBalance?: string;
+    isLoadingBalance: boolean;
+}
+interface AccountCardProps extends BaseComponentProps {
+    showBalance?: boolean;
+    children?: RenderPropChild<AccountCardRenderProps> | React$1.ReactNode;
+}
+/**
+ * AccountCard Component
+ *
+ * Headless account information display. Use render prop pattern for custom UI.
+ *
+ * @example
+ * ```tsx
+ * // With render prop
+ * <AccountCard showBalance>
+ *   {({ coreAddress, evmAddress, coreBalance, evmBalance }) => (
+ *     <div>
+ *       <p>Core: {coreAddress}</p>
+ *       <p>EVM: {evmAddress}</p>
+ *       <p>Balance: {coreBalance}</p>
+ *     </div>
+ *   )}
+ * </AccountCard>
+ *
+ * // With default styling
+ * <AccountCard showBalance className="p-4 bg-gray-100 rounded" />
+ * ```
+ */
+declare function AccountCard({ showBalance, children, className, }: AccountCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface ConnectButtonRenderProps {
+    isConnected: boolean;
+    address?: string;
+    connect: () => Promise<void>;
+    disconnect: () => void;
+    isLoading: boolean;
+}
+interface ConnectButtonProps extends BaseComponentProps {
+    accountIndex?: number;
+    onConnect?: () => void;
+    onDisconnect?: () => void;
+    children?: RenderPropChild<ConnectButtonRenderProps> | React$1.ReactNode;
+}
+/**
+ * ConnectButton Component
+ *
+ * Headless wallet connection button. Use render prop pattern for custom UI.
+ *
+ * @example
+ * ```tsx
+ * // With render prop (full control)
+ * <ConnectButton>
+ *   {({ isConnected, address, connect, disconnect }) => (
+ *     <button onClick={isConnected ? disconnect : connect}>
+ *       {isConnected ? `Connected: ${address}` : 'Connect Wallet'}
+ *     </button>
+ *   )}
+ * </ConnectButton>
+ *
+ * // With default styling
+ * <ConnectButton className="px-4 py-2 bg-blue-500 text-white rounded" />
+ * ```
+ */
+declare function ConnectButton({ accountIndex, onConnect, onDisconnect, children, className, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ContractReaderRenderProps<T = unknown> {
+    read: (args?: unknown[]) => Promise<void>;
+    result?: T;
+    isLoading: boolean;
+    error?: Error;
+}
+interface ContractReaderProps<T = unknown> extends BaseComponentProps {
+    address: string;
+    abi: unknown[];
+    functionName: string;
+    chain: ChainType;
+    children?: RenderPropChild<ContractReaderRenderProps<T>> | React$1.ReactNode;
+}
+/**
+ * ContractReader Component
+ *
+ * Headless contract read component. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <ContractReader
+ *   address="0x..."
+ *   abi={ERC20_ABI}
+ *   functionName="balanceOf"
+ *   chain="evm"
+ * >
+ *   {({ read, result, isLoading }) => (
+ *     <div>
+ *       <button onClick={() => read(['0x...'])}>Get Balance</button>
+ *       {isLoading && <p>Loading...</p>}
+ *       {result && <p>Balance: {result}</p>}
+ *     </div>
+ *   )}
+ * </ContractReader>
+ * ```
+ */
+declare function ContractReader<T = unknown>({ address, abi, functionName, chain, children, className, }: ContractReaderProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ContractWriterRenderProps {
+    write: (args?: unknown[], value?: string) => Promise<void>;
+    hash?: string;
+    isLoading: boolean;
+    error?: Error;
+    reset: () => void;
+}
+interface ContractWriterProps extends BaseComponentProps {
+    address: string;
+    abi: unknown[];
+    functionName: string;
+    chain: ChainType;
+    onSuccess?: (hash: string) => void;
+    children?: RenderPropChild<ContractWriterRenderProps> | React$1.ReactNode;
+}
+/**
+ * ContractWriter Component
+ *
+ * Headless contract write component. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <ContractWriter
+ *   address="0x..."
+ *   abi={ERC20_ABI}
+ *   functionName="transfer"
+ *   chain="evm"
+ *   onSuccess={(hash) => console.log('Success:', hash)}
+ * >
+ *   {({ write, hash, isLoading }) => (
+ *     <div>
+ *       <button onClick={() => write(['0x...', '1000000000000000000'])}>
+ *         Transfer
+ *       </button>
+ *       {isLoading && <p>Sending...</p>}
+ *       {hash && <p>TX: {hash}</p>}
+ *     </div>
+ *   )}
+ * </ContractWriter>
+ * ```
+ */
+declare function ContractWriter({ address, abi, functionName, chain, onSuccess, children, className, }: ContractWriterProps): react_jsx_runtime.JSX.Element;
+
+interface SwapQuote {
+    amountIn: string;
+    amountOut: string;
+    amountOutMin: string;
+    priceImpact: string;
+    slippage: number;
+}
+interface SwapWidgetRenderProps {
+    getQuote: (tokenIn: string, tokenOut: string, amountIn: string) => Promise<void>;
+    executeSwap: () => Promise<void>;
+    quote?: SwapQuote;
+    isLoadingQuote: boolean;
+    isExecutingSwap: boolean;
+    error?: Error;
+    hash?: string;
+}
+interface SwapWidgetProps extends BaseComponentProps {
+    defaultSlippage?: number;
+    onSuccess?: (hash: string) => void;
+    children?: RenderPropChild<SwapWidgetRenderProps> | React$1.ReactNode;
+}
+/**
+ * SwapWidget Component
+ *
+ * Headless swap interface for Swappi DEX. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <SwapWidget defaultSlippage={0.5}>
+ *   {({ getQuote, executeSwap, quote, isLoadingQuote }) => (
+ *     <div>
+ *       <button onClick={() => getQuote('WCFX', 'USDT', '1.0')}>
+ *         Get Quote
+ *       </button>
+ *       {quote && <p>You get: {quote.amountOut}</p>}
+ *       <button onClick={executeSwap} disabled={!quote}>
+ *         Swap
+ *       </button>
+ *     </div>
+ *   )}
+ * </SwapWidget>
+ * ```
+ */
+declare function SwapWidget({ defaultSlippage, onSuccess, children, className, }: SwapWidgetProps): react_jsx_runtime.JSX.Element;
+
+export { AccountCard as A, type BaseComponentProps as B, ConnectButton as C, type NetworkInfo as N, type RenderPropChild as R, type SwapQuote as S, type TransactionResult as T, type WalletConnection as W, type AccountCardProps as a, type AccountCardRenderProps as b, type ConnectButtonProps as c, type ConnectButtonRenderProps as d, type ContractDeployment as e, ContractReader as f, type ContractReaderProps as g, type ContractReaderRenderProps as h, ContractWriter as i, type ContractWriterProps as j, type ContractWriterRenderProps as k, SwapWidget as l, type SwapWidgetProps as m, type SwapWidgetRenderProps as n };

package/dist/index-CU9Acwhq.d.ts

@@ -0,0 +1,233 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React$1 from 'react';
+import { ChainType } from '@cfxdevkit/core';
+
+/**
+ * UI Headless Types
+ */
+
+interface WalletConnection {
+    isConnected: boolean;
+    address?: string;
+    chainType?: ChainType;
+    balance?: string;
+}
+interface NetworkInfo {
+    chainId: number;
+    name: string;
+    type: 'local' | 'testnet' | 'mainnet';
+    rpcUrl: string;
+}
+interface ContractDeployment {
+    address: string;
+    transactionHash: string;
+    chain: ChainType;
+}
+interface TransactionResult {
+    hash: string;
+    status: 'pending' | 'success' | 'failed';
+    blockNumber?: bigint;
+}
+type RenderPropChild<T> = (props: T) => React.ReactNode;
+interface BaseComponentProps {
+    className?: string;
+}
+
+interface AccountCardRenderProps {
+    isConnected: boolean;
+    coreAddress?: string;
+    evmAddress?: string;
+    coreBalance?: string;
+    evmBalance?: string;
+    isLoadingBalance: boolean;
+}
+interface AccountCardProps extends BaseComponentProps {
+    showBalance?: boolean;
+    children?: RenderPropChild<AccountCardRenderProps> | React$1.ReactNode;
+}
+/**
+ * AccountCard Component
+ *
+ * Headless account information display. Use render prop pattern for custom UI.
+ *
+ * @example
+ * ```tsx
+ * // With render prop
+ * <AccountCard showBalance>
+ *   {({ coreAddress, evmAddress, coreBalance, evmBalance }) => (
+ *     <div>
+ *       <p>Core: {coreAddress}</p>
+ *       <p>EVM: {evmAddress}</p>
+ *       <p>Balance: {coreBalance}</p>
+ *     </div>
+ *   )}
+ * </AccountCard>
+ *
+ * // With default styling
+ * <AccountCard showBalance className="p-4 bg-gray-100 rounded" />
+ * ```
+ */
+declare function AccountCard({ showBalance, children, className, }: AccountCardProps): react_jsx_runtime.JSX.Element | null;
+
+interface ConnectButtonRenderProps {
+    isConnected: boolean;
+    address?: string;
+    connect: () => Promise<void>;
+    disconnect: () => void;
+    isLoading: boolean;
+}
+interface ConnectButtonProps extends BaseComponentProps {
+    accountIndex?: number;
+    onConnect?: () => void;
+    onDisconnect?: () => void;
+    children?: RenderPropChild<ConnectButtonRenderProps> | React$1.ReactNode;
+}
+/**
+ * ConnectButton Component
+ *
+ * Headless wallet connection button. Use render prop pattern for custom UI.
+ *
+ * @example
+ * ```tsx
+ * // With render prop (full control)
+ * <ConnectButton>
+ *   {({ isConnected, address, connect, disconnect }) => (
+ *     <button onClick={isConnected ? disconnect : connect}>
+ *       {isConnected ? `Connected: ${address}` : 'Connect Wallet'}
+ *     </button>
+ *   )}
+ * </ConnectButton>
+ *
+ * // With default styling
+ * <ConnectButton className="px-4 py-2 bg-blue-500 text-white rounded" />
+ * ```
+ */
+declare function ConnectButton({ accountIndex, onConnect, onDisconnect, children, className, }: ConnectButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ContractReaderRenderProps<T = unknown> {
+    read: (args?: unknown[]) => Promise<void>;
+    result?: T;
+    isLoading: boolean;
+    error?: Error;
+}
+interface ContractReaderProps<T = unknown> extends BaseComponentProps {
+    address: string;
+    abi: unknown[];
+    functionName: string;
+    chain: ChainType;
+    children?: RenderPropChild<ContractReaderRenderProps<T>> | React$1.ReactNode;
+}
+/**
+ * ContractReader Component
+ *
+ * Headless contract read component. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <ContractReader
+ *   address="0x..."
+ *   abi={ERC20_ABI}
+ *   functionName="balanceOf"
+ *   chain="evm"
+ * >
+ *   {({ read, result, isLoading }) => (
+ *     <div>
+ *       <button onClick={() => read(['0x...'])}>Get Balance</button>
+ *       {isLoading && <p>Loading...</p>}
+ *       {result && <p>Balance: {result}</p>}
+ *     </div>
+ *   )}
+ * </ContractReader>
+ * ```
+ */
+declare function ContractReader<T = unknown>({ address, abi, functionName, chain, children, className, }: ContractReaderProps<T>): react_jsx_runtime.JSX.Element;
+
+interface ContractWriterRenderProps {
+    write: (args?: unknown[], value?: string) => Promise<void>;
+    hash?: string;
+    isLoading: boolean;
+    error?: Error;
+    reset: () => void;
+}
+interface ContractWriterProps extends BaseComponentProps {
+    address: string;
+    abi: unknown[];
+    functionName: string;
+    chain: ChainType;
+    onSuccess?: (hash: string) => void;
+    children?: RenderPropChild<ContractWriterRenderProps> | React$1.ReactNode;
+}
+/**
+ * ContractWriter Component
+ *
+ * Headless contract write component. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <ContractWriter
+ *   address="0x..."
+ *   abi={ERC20_ABI}
+ *   functionName="transfer"
+ *   chain="evm"
+ *   onSuccess={(hash) => console.log('Success:', hash)}
+ * >
+ *   {({ write, hash, isLoading }) => (
+ *     <div>
+ *       <button onClick={() => write(['0x...', '1000000000000000000'])}>
+ *         Transfer
+ *       </button>
+ *       {isLoading && <p>Sending...</p>}
+ *       {hash && <p>TX: {hash}</p>}
+ *     </div>
+ *   )}
+ * </ContractWriter>
+ * ```
+ */
+declare function ContractWriter({ address, abi, functionName, chain, onSuccess, children, className, }: ContractWriterProps): react_jsx_runtime.JSX.Element;
+
+interface SwapQuote {
+    amountIn: string;
+    amountOut: string;
+    amountOutMin: string;
+    priceImpact: string;
+    slippage: number;
+}
+interface SwapWidgetRenderProps {
+    getQuote: (tokenIn: string, tokenOut: string, amountIn: string) => Promise<void>;
+    executeSwap: () => Promise<void>;
+    quote?: SwapQuote;
+    isLoadingQuote: boolean;
+    isExecutingSwap: boolean;
+    error?: Error;
+    hash?: string;
+}
+interface SwapWidgetProps extends BaseComponentProps {
+    defaultSlippage?: number;
+    onSuccess?: (hash: string) => void;
+    children?: RenderPropChild<SwapWidgetRenderProps> | React$1.ReactNode;
+}
+/**
+ * SwapWidget Component
+ *
+ * Headless swap interface for Swappi DEX. Use render prop for custom UI.
+ *
+ * @example
+ * ```tsx
+ * <SwapWidget defaultSlippage={0.5}>
+ *   {({ getQuote, executeSwap, quote, isLoadingQuote }) => (
+ *     <div>
+ *       <button onClick={() => getQuote('WCFX', 'USDT', '1.0')}>
+ *         Get Quote
+ *       </button>
+ *       {quote && <p>You get: {quote.amountOut}</p>}
+ *       <button onClick={executeSwap} disabled={!quote}>
+ *         Swap
+ *       </button>
+ *     </div>
+ *   )}
+ * </SwapWidget>
+ * ```
+ */
+declare function SwapWidget({ defaultSlippage, onSuccess, children, className, }: SwapWidgetProps): react_jsx_runtime.JSX.Element;
+
+export { AccountCard as A, type BaseComponentProps as B, ConnectButton as C, type NetworkInfo as N, type RenderPropChild as R, type SwapQuote as S, type TransactionResult as T, type WalletConnection as W, type AccountCardProps as a, type AccountCardRenderProps as b, type ConnectButtonProps as c, type ConnectButtonRenderProps as d, type ContractDeployment as e, ContractReader as f, type ContractReaderProps as g, type ContractReaderRenderProps as h, ContractWriter as i, type ContractWriterProps as j, type ContractWriterRenderProps as k, SwapWidget as l, type SwapWidgetProps as m, type SwapWidgetRenderProps as n };