@cfxdevkit/react 1.0.0

package/README.md

@@ -0,0 +1,33 @@
+# @cfxdevkit/react
+
+A set of unstyled React hooks, providers, and utilities tailored to building Conflux experiences with your own design system.
+
+Features:
+- `DevKitProvider` establishes RPC endpoints for Core/eSpace chains and exposes the current wallet context.
+- React hooks such as `useBalance`, `useContract`, and `useTransaction` that wrap the shared Conflux clients.
+- Fully tree-shakeable exports so you only ship what you need.
+
+## Getting started
+
+```tsx
+import { DevKitProvider, useBalance } from '@conflux-devkit/ui-headless';
+
+const App = () => (
+  <DevKitProvider apiUrl="http://localhost:3001" network="testnet">
+    <YourComponent />
+  </DevKitProvider>
+);
+```
+
+## Development
+
+```bash
+pnpm --filter @conflux-devkit/ui-headless install
+pnpm --filter @conflux-devkit/ui-headless build
+pnpm --filter @conflux-devkit/ui-headless test
+```
+
+## Testing and linting
+
+- Tests run with `vitest`.
+- Formatting and linting use Biome.

package/dist/components/index.cjs

@@ -0,0 +1,506 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AccountCard: () => AccountCard,
+  ConnectButton: () => ConnectButton,
+  ContractReader: () => ContractReader,
+  ContractWriter: () => ContractWriter,
+  SwapWidget: () => SwapWidget
+});
+module.exports = __toCommonJS(components_exports);
+
+// src/hooks/useBalance.ts
+var import_react2 = require("react");
+
+// src/providers/DevKitProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DevKitContext = (0, import_react.createContext)(void 0);
+function useDevKitContext() {
+  const context = (0, import_react.useContext)(DevKitContext);
+  if (!context) {
+    throw new Error("useDevKitContext must be used within DevKitProvider");
+  }
+  return context;
+}
+
+// src/hooks/useBalance.ts
+function useBalance(options) {
+  const { address, enabled = true, refreshInterval } = options;
+  useDevKitContext();
+  const [balance, setBalance] = (0, import_react2.useState)();
+  const [isLoading, setIsLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)();
+  const fetchBalance = (0, import_react2.useCallback)(async () => {
+    if (!address || !enabled) return;
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const mockBalance = "1000000000000000000";
+      setBalance(mockBalance);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch balance")
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  }, [address, enabled]);
+  (0, import_react2.useEffect)(() => {
+    void fetchBalance();
+    if (refreshInterval) {
+      const interval = setInterval(() => {
+        void fetchBalance();
+      }, refreshInterval);
+      return () => clearInterval(interval);
+    }
+  }, [fetchBalance, refreshInterval]);
+  return {
+    balance,
+    isLoading,
+    error,
+    refetch: fetchBalance
+  };
+}
+
+// src/providers/WalletProvider.tsx
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WalletContext = (0, import_react3.createContext)(void 0);
+function useWalletContext() {
+  const context = (0, import_react3.useContext)(WalletContext);
+  if (!context) {
+    throw new Error("useWalletContext must be used within WalletProvider");
+  }
+  return context;
+}
+
+// src/components/account-display/AccountCard.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AccountCard({
+  showBalance = true,
+  children,
+  className
+}) {
+  const { isConnected, coreAddress, evmAddress } = useWalletContext();
+  const { balance: coreBalance, isLoading: isLoadingCore } = useBalance({
+    address: coreAddress,
+    chain: "core",
+    enabled: showBalance && isConnected
+  });
+  const { balance: evmBalance, isLoading: isLoadingEvm } = useBalance({
+    address: evmAddress,
+    chain: "evm",
+    enabled: showBalance && isConnected
+  });
+  const renderProps = {
+    isConnected,
+    coreAddress,
+    evmAddress,
+    coreBalance,
+    evmBalance,
+    isLoadingBalance: isLoadingCore || isLoadingEvm
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, { children: children(renderProps) });
+  }
+  if (!isConnected) {
+    return children ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className, children }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: className || "p-4 bg-gray-100 rounded-lg space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-semibold", children: "Core Space:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-2 font-mono text-sm", children: coreAddress }),
+      showBalance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-2 text-gray-600", children: isLoadingCore ? "Loading..." : `${coreBalance} CFX` })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "font-semibold", children: "eSpace:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-2 font-mono text-sm", children: evmAddress }),
+      showBalance && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ml-2 text-gray-600", children: isLoadingEvm ? "Loading..." : `${evmBalance} CFX` })
+    ] })
+  ] });
+}
+
+// src/components/connect-wallet/ConnectButton.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function ConnectButton({
+  accountIndex = 0,
+  onConnect,
+  onDisconnect,
+  children,
+  className
+}) {
+  const {
+    isConnected,
+    address,
+    connect: contextConnect,
+    disconnect: contextDisconnect
+  } = useWalletContext();
+  const [isLoading, setIsLoading] = import_react4.default.useState(false);
+  const connect = async () => {
+    setIsLoading(true);
+    try {
+      await contextConnect(accountIndex);
+      onConnect?.();
+    } catch (error) {
+      console.error("Connection failed:", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const disconnect = () => {
+    contextDisconnect();
+    onDisconnect?.();
+  };
+  const renderProps = {
+    isConnected,
+    address,
+    connect,
+    disconnect,
+    isLoading
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: children(renderProps) });
+  }
+  if (children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "button",
+      {
+        onClick: isConnected ? disconnect : connect,
+        disabled: isLoading,
+        className,
+        type: "button",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      onClick: isConnected ? disconnect : connect,
+      disabled: isLoading,
+      className: className || "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50",
+      type: "button",
+      children: isLoading ? "Connecting..." : isConnected ? `Connected: ${address?.slice(0, 6)}...${address?.slice(-4)}` : "Connect Wallet"
+    }
+  );
+}
+
+// src/components/contract/ContractReader.tsx
+var import_react6 = require("react");
+
+// src/hooks/useContract.ts
+var import_react5 = require("react");
+function useContract() {
+  useDevKitContext();
+  const { accountIndex } = useWalletContext();
+  const [isLoading, setIsLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)();
+  const read = async (_options) => {
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      return {};
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Contract read failed");
+      setError(errorObj);
+      throw errorObj;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const write = async (_options) => {
+    if (accountIndex === void 0) {
+      throw new Error("Wallet not connected");
+    }
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const hash = `0x${Array.from(
+        { length: 64 },
+        () => Math.floor(Math.random() * 16).toString(16)
+      ).join("")}`;
+      return hash;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Contract write failed");
+      setError(errorObj);
+      throw errorObj;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return {
+    read,
+    write,
+    isLoading,
+    error
+  };
+}
+
+// src/components/contract/ContractReader.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function ContractReader({
+  address,
+  abi,
+  functionName,
+  chain,
+  children,
+  className
+}) {
+  const { read: readContract, isLoading, error } = useContract();
+  const [result, setResult] = (0, import_react6.useState)();
+  const read = async (args) => {
+    const data = await readContract({
+      address,
+      abi,
+      functionName,
+      args,
+      chain
+    });
+    setResult(data);
+  };
+  const renderProps = {
+    read,
+    result,
+    isLoading,
+    error
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: className || "p-4 border rounded", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("h3", { className: "font-semibold mb-2", children: [
+      "Read: ",
+      functionName
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        onClick: () => read(),
+        disabled: isLoading,
+        className: "px-3 py-1 bg-blue-500 text-white rounded disabled:opacity-50",
+        type: "button",
+        children: isLoading ? "Reading..." : "Read"
+      }
+    ),
+    result && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { className: "bg-gray-100 p-2 rounded text-sm", children: JSON.stringify(result, null, 2) }) }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "mt-2 text-red-500", children: error.message }),
+    children
+  ] });
+}
+
+// src/components/contract/ContractWriter.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ContractWriter({
+  address,
+  abi,
+  functionName,
+  chain,
+  onSuccess,
+  children,
+  className
+}) {
+  const { write: writeContract, isLoading, error } = useContract();
+  const [hash, setHash] = (0, import_react7.useState)();
+  const write = async (args, value) => {
+    const txHash = await writeContract({
+      address,
+      abi,
+      functionName,
+      args,
+      chain,
+      value
+    });
+    setHash(txHash);
+    onSuccess?.(txHash);
+  };
+  const reset = () => {
+    setHash(void 0);
+  };
+  const renderProps = {
+    write,
+    hash,
+    isLoading,
+    error,
+    reset
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: className || "p-4 border rounded", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("h3", { className: "font-semibold mb-2", children: [
+      "Write: ",
+      functionName
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "button",
+      {
+        onClick: () => write(),
+        disabled: isLoading,
+        className: "px-3 py-1 bg-green-500 text-white rounded disabled:opacity-50",
+        type: "button",
+        children: isLoading ? "Sending..." : "Execute"
+      }
+    ),
+    hash && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-sm text-gray-600", children: "Transaction Hash:" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "font-mono text-xs break-all", children: hash }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: reset,
+          className: "mt-1 text-sm text-blue-500 hover:underline",
+          type: "button",
+          children: "Reset"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mt-2 text-red-500", children: error.message }),
+    children
+  ] });
+}
+
+// src/components/swap/SwapWidget.tsx
+var import_react8 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function SwapWidget({
+  defaultSlippage = 0.5,
+  onSuccess,
+  children,
+  className
+}) {
+  useDevKitContext();
+  const { isConnected, accountIndex } = useWalletContext();
+  const [quote, setQuote] = (0, import_react8.useState)();
+  const [isLoadingQuote, setIsLoadingQuote] = (0, import_react8.useState)(false);
+  const [isExecutingSwap, setIsExecutingSwap] = (0, import_react8.useState)(false);
+  const [error, setError] = (0, import_react8.useState)();
+  const [hash, setHash] = (0, import_react8.useState)();
+  const [currentQuoteParams, setCurrentQuoteParams] = (0, import_react8.useState)();
+  const getQuote = async (tokenIn, tokenOut, amountIn) => {
+    if (!isConnected) {
+      setError(new Error("Wallet not connected"));
+      return;
+    }
+    setIsLoadingQuote(true);
+    setError(void 0);
+    try {
+      const mockQuote = {
+        amountIn,
+        amountOut: (parseFloat(amountIn) * 0.997).toString(),
+        // 0.3% fee
+        amountOutMin: (parseFloat(amountIn) * 0.997 * 0.995).toString(),
+        // With slippage
+        priceImpact: "0.3",
+        slippage: defaultSlippage
+      };
+      setQuote(mockQuote);
+      setCurrentQuoteParams({ tokenIn, tokenOut, amountIn });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to get quote"));
+    } finally {
+      setIsLoadingQuote(false);
+    }
+  };
+  const executeSwap = async () => {
+    if (!quote || !currentQuoteParams || !isConnected || accountIndex === void 0) {
+      setError(new Error("Missing required data for swap"));
+      return;
+    }
+    setIsExecutingSwap(true);
+    setError(void 0);
+    try {
+      const mockHash = `0x${Array.from(
+        { length: 64 },
+        () => Math.floor(Math.random() * 16).toString(16)
+      ).join("")}`;
+      setHash(mockHash);
+      onSuccess?.(mockHash);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Swap failed"));
+    } finally {
+      setIsExecutingSwap(false);
+    }
+  };
+  const renderProps = {
+    getQuote,
+    executeSwap,
+    quote,
+    isLoadingQuote,
+    isExecutingSwap,
+    error,
+    hash
+  };
+  if (typeof children === "function") {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: className || "p-4 border rounded-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "text-xl font-bold mb-4", children: "Swap (Swappi)" }),
+    !isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-gray-600", children: "Connect wallet to start swapping" }),
+    quote && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-4 p-3 bg-gray-100 rounded", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+        "Amount In: ",
+        quote.amountIn
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+        "Amount Out: ",
+        quote.amountOut
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+        "Min Amount: ",
+        quote.amountOutMin
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { children: [
+        "Slippage: ",
+        quote.slippage,
+        "%"
+      ] })
+    ] }),
+    hash && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "mt-4 p-3 bg-green-100 rounded", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm font-semibold", children: "Swap Successful!" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs font-mono break-all", children: hash })
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mt-4 p-3 bg-red-100 rounded", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-red-700", children: error.message }) }),
+    children
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountCard,
+  ConnectButton,
+  ContractReader,
+  ContractWriter,
+  SwapWidget
+});
+//# sourceMappingURL=index.cjs.map

package/dist/components/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/index.ts","../../src/hooks/useBalance.ts","../../src/providers/DevKitProvider.tsx","../../src/providers/WalletProvider.tsx","../../src/components/account-display/AccountCard.tsx","../../src/components/connect-wallet/ConnectButton.tsx","../../src/components/contract/ContractReader.tsx","../../src/hooks/useContract.ts","../../src/components/contract/ContractWriter.tsx","../../src/components/swap/SwapWidget.tsx"],"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\nexport type {\n  AccountCardProps,\n  AccountCardRenderProps,\n} from './account-display/AccountCard.js';\n// Account Display\nexport { AccountCard } from './account-display/AccountCard.js';\nexport type {\n  ConnectButtonProps,\n  ConnectButtonRenderProps,\n} from './connect-wallet/ConnectButton.js';\n// Connect Wallet\nexport { ConnectButton } from './connect-wallet/ConnectButton.js';\nexport type {\n  ContractReaderProps,\n  ContractReaderRenderProps,\n} from './contract/ContractReader.js';\n// Contract Interaction\nexport { ContractReader } from './contract/ContractReader.js';\nexport type {\n  ContractWriterProps,\n  ContractWriterRenderProps,\n} from './contract/ContractWriter.js';\nexport { ContractWriter } from './contract/ContractWriter.js';\nexport type {\n  SwapQuote,\n  SwapWidgetProps,\n  SwapWidgetRenderProps,\n} from './swap/SwapWidget.js';\n// Swap\nexport { SwapWidget } from './swap/SwapWidget.js';\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 * 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 * 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 * AccountCard - Headless Account Display Component\n *\n * Displays account information with customizable rendering\n */\n\nimport type React from 'react';\nimport { useBalance } from '../../hooks/useBalance.js';\nimport { useWalletContext } from '../../providers/WalletProvider.js';\nimport type { BaseComponentProps, RenderPropChild } from '../../types/index.js';\n\nexport interface AccountCardRenderProps {\n  isConnected: boolean;\n  coreAddress?: string;\n  evmAddress?: string;\n  coreBalance?: string;\n  evmBalance?: string;\n  isLoadingBalance: boolean;\n}\n\nexport interface AccountCardProps extends BaseComponentProps {\n  showBalance?: boolean;\n  children?: RenderPropChild<AccountCardRenderProps> | React.ReactNode;\n}\n\n/**\n * AccountCard Component\n *\n * Headless account information display. Use render prop pattern for custom UI.\n *\n * @example\n * ```tsx\n * // With render prop\n * <AccountCard showBalance>\n *   {({ coreAddress, evmAddress, coreBalance, evmBalance }) => (\n *     <div>\n *       <p>Core: {coreAddress}</p>\n *       <p>EVM: {evmAddress}</p>\n *       <p>Balance: {coreBalance}</p>\n *     </div>\n *   )}\n * </AccountCard>\n *\n * // With default styling\n * <AccountCard showBalance className=\"p-4 bg-gray-100 rounded\" />\n * ```\n */\nexport function AccountCard({\n  showBalance = true,\n  children,\n  className,\n}: AccountCardProps) {\n  const { isConnected, coreAddress, evmAddress } = useWalletContext();\n\n  const { balance: coreBalance, isLoading: isLoadingCore } = useBalance({\n    address: coreAddress,\n    chain: 'core',\n    enabled: showBalance && isConnected,\n  });\n\n  const { balance: evmBalance, isLoading: isLoadingEvm } = useBalance({\n    address: evmAddress,\n    chain: 'evm',\n    enabled: showBalance && isConnected,\n  });\n\n  const renderProps: AccountCardRenderProps = {\n    isConnected,\n    coreAddress,\n    evmAddress,\n    coreBalance,\n    evmBalance,\n    isLoadingBalance: isLoadingCore || isLoadingEvm,\n  };\n\n  // If children is a function, use render prop pattern\n  if (typeof children === 'function') {\n    return <>{children(renderProps)}</>;\n  }\n\n  // If not connected, show nothing or custom children\n  if (!isConnected) {\n    return children ? <div className={className}>{children}</div> : null;\n  }\n\n  // Default rendering\n  return (\n    <div className={className || 'p-4 bg-gray-100 rounded-lg space-y-2'}>\n      <div>\n        <span className=\"font-semibold\">Core Space:</span>\n        <span className=\"ml-2 font-mono text-sm\">{coreAddress}</span>\n        {showBalance && (\n          <span className=\"ml-2 text-gray-600\">\n            {isLoadingCore ? 'Loading...' : `${coreBalance} CFX`}\n          </span>\n        )}\n      </div>\n      <div>\n        <span className=\"font-semibold\">eSpace:</span>\n        <span className=\"ml-2 font-mono text-sm\">{evmAddress}</span>\n        {showBalance && (\n          <span className=\"ml-2 text-gray-600\">\n            {isLoadingEvm ? 'Loading...' : `${evmBalance} CFX`}\n          </span>\n        )}\n      </div>\n    </div>\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 * ConnectButton - Headless Wallet Connection Component\n *\n * Provides wallet connection functionality with customizable rendering\n */\n\nimport React from 'react';\nimport { useWalletContext } from '../../providers/WalletProvider.js';\nimport type { BaseComponentProps, RenderPropChild } from '../../types/index.js';\n\nexport interface ConnectButtonRenderProps {\n  isConnected: boolean;\n  address?: string;\n  connect: () => Promise<void>;\n  disconnect: () => void;\n  isLoading: boolean;\n}\n\nexport interface ConnectButtonProps extends BaseComponentProps {\n  accountIndex?: number;\n  onConnect?: () => void;\n  onDisconnect?: () => void;\n  children?: RenderPropChild<ConnectButtonRenderProps> | React.ReactNode;\n}\n\n/**\n * ConnectButton Component\n *\n * Headless wallet connection button. Use render prop pattern for custom UI.\n *\n * @example\n * ```tsx\n * // With render prop (full control)\n * <ConnectButton>\n *   {({ isConnected, address, connect, disconnect }) => (\n *     <button onClick={isConnected ? disconnect : connect}>\n *       {isConnected ? `Connected: ${address}` : 'Connect Wallet'}\n *     </button>\n *   )}\n * </ConnectButton>\n *\n * // With default styling\n * <ConnectButton className=\"px-4 py-2 bg-blue-500 text-white rounded\" />\n * ```\n */\nexport function ConnectButton({\n  accountIndex = 0,\n  onConnect,\n  onDisconnect,\n  children,\n  className,\n}: ConnectButtonProps) {\n  const {\n    isConnected,\n    address,\n    connect: contextConnect,\n    disconnect: contextDisconnect,\n  } = useWalletContext();\n  const [isLoading, setIsLoading] = React.useState(false);\n\n  const connect = async () => {\n    setIsLoading(true);\n    try {\n      await contextConnect(accountIndex);\n      onConnect?.();\n    } catch (error) {\n      console.error('Connection failed:', error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const disconnect = () => {\n    contextDisconnect();\n    onDisconnect?.();\n  };\n\n  const renderProps: ConnectButtonRenderProps = {\n    isConnected,\n    address,\n    connect,\n    disconnect,\n    isLoading,\n  };\n\n  // If children is a function, use render prop pattern\n  if (typeof children === 'function') {\n    return <>{children(renderProps)}</>;\n  }\n\n  // If children provided, wrap in default button\n  if (children) {\n    return (\n      <button\n        onClick={isConnected ? disconnect : connect}\n        disabled={isLoading}\n        className={className}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    );\n  }\n\n  // Default rendering with Tailwind classes\n  return (\n    <button\n      onClick={isConnected ? disconnect : connect}\n      disabled={isLoading}\n      className={\n        className ||\n        'px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50'\n      }\n      type=\"button\"\n    >\n      {isLoading\n        ? 'Connecting...'\n        : isConnected\n          ? `Connected: ${address?.slice(0, 6)}...${address?.slice(-4)}`\n          : 'Connect Wallet'}\n    </button>\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 * ContractReader - Headless Contract Read Component\n *\n * Reads data from smart contracts with customizable rendering\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { useContract } from '../../hooks/useContract.js';\nimport type { BaseComponentProps, RenderPropChild } from '../../types/index.js';\n\nexport interface ContractReaderRenderProps<T = unknown> {\n  read: (args?: unknown[]) => Promise<void>;\n  result?: T;\n  isLoading: boolean;\n  error?: Error;\n}\n\nexport interface ContractReaderProps<T = unknown> extends BaseComponentProps {\n  address: string;\n  abi: unknown[];\n  functionName: string;\n  chain: ChainType;\n  children?: RenderPropChild<ContractReaderRenderProps<T>> | React.ReactNode;\n}\n\n/**\n * ContractReader Component\n *\n * Headless contract read component. Use render prop for custom UI.\n *\n * @example\n * ```tsx\n * <ContractReader\n *   address=\"0x...\"\n *   abi={ERC20_ABI}\n *   functionName=\"balanceOf\"\n *   chain=\"evm\"\n * >\n *   {({ read, result, isLoading }) => (\n *     <div>\n *       <button onClick={() => read(['0x...'])}>Get Balance</button>\n *       {isLoading && <p>Loading...</p>}\n *       {result && <p>Balance: {result}</p>}\n *     </div>\n *   )}\n * </ContractReader>\n * ```\n */\nexport function ContractReader<T = unknown>({\n  address,\n  abi,\n  functionName,\n  chain,\n  children,\n  className,\n}: ContractReaderProps<T>) {\n  const { read: readContract, isLoading, error } = useContract();\n  const [result, setResult] = useState<T>();\n\n  const read = async (args?: unknown[]) => {\n    const data = await readContract<T>({\n      address,\n      abi,\n      functionName,\n      args,\n      chain,\n    });\n    setResult(data);\n  };\n\n  const renderProps: ContractReaderRenderProps<T> = {\n    read,\n    result,\n    isLoading,\n    error,\n  };\n\n  // If children is a function, use render prop pattern\n  if (typeof children === 'function') {\n    return <>{children(renderProps)}</>;\n  }\n\n  // Default rendering\n  return (\n    <div className={className || 'p-4 border rounded'}>\n      <h3 className=\"font-semibold mb-2\">Read: {functionName}</h3>\n      <button\n        onClick={() => read()}\n        disabled={isLoading}\n        className=\"px-3 py-1 bg-blue-500 text-white rounded disabled:opacity-50\"\n        type=\"button\"\n      >\n        {isLoading ? 'Reading...' : 'Read'}\n      </button>\n      {result && (\n        <div className=\"mt-2\">\n          <pre className=\"bg-gray-100 p-2 rounded text-sm\">\n            {JSON.stringify(result, null, 2)}\n          </pre>\n        </div>\n      )}\n      {error && <p className=\"mt-2 text-red-500\">{error.message}</p>}\n      {children}\n    </div>\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 * 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 * ContractWriter - Headless Contract Write Component\n *\n * Writes to smart contracts with customizable rendering\n */\n\nimport type { ChainType } from '@cfxdevkit/core';\nimport type React from 'react';\nimport { useState } from 'react';\nimport { useContract } from '../../hooks/useContract.js';\nimport type { BaseComponentProps, RenderPropChild } from '../../types/index.js';\n\nexport interface ContractWriterRenderProps {\n  write: (args?: unknown[], value?: string) => Promise<void>;\n  hash?: string;\n  isLoading: boolean;\n  error?: Error;\n  reset: () => void;\n}\n\nexport interface ContractWriterProps extends BaseComponentProps {\n  address: string;\n  abi: unknown[];\n  functionName: string;\n  chain: ChainType;\n  onSuccess?: (hash: string) => void;\n  children?: RenderPropChild<ContractWriterRenderProps> | React.ReactNode;\n}\n\n/**\n * ContractWriter Component\n *\n * Headless contract write component. Use render prop for custom UI.\n *\n * @example\n * ```tsx\n * <ContractWriter\n *   address=\"0x...\"\n *   abi={ERC20_ABI}\n *   functionName=\"transfer\"\n *   chain=\"evm\"\n *   onSuccess={(hash) => console.log('Success:', hash)}\n * >\n *   {({ write, hash, isLoading }) => (\n *     <div>\n *       <button onClick={() => write(['0x...', '1000000000000000000'])}>\n *         Transfer\n *       </button>\n *       {isLoading && <p>Sending...</p>}\n *       {hash && <p>TX: {hash}</p>}\n *     </div>\n *   )}\n * </ContractWriter>\n * ```\n */\nexport function ContractWriter({\n  address,\n  abi,\n  functionName,\n  chain,\n  onSuccess,\n  children,\n  className,\n}: ContractWriterProps) {\n  const { write: writeContract, isLoading, error } = useContract();\n  const [hash, setHash] = useState<string>();\n\n  const write = async (args?: unknown[], value?: string) => {\n    const txHash = await writeContract({\n      address,\n      abi,\n      functionName,\n      args,\n      chain,\n      value,\n    });\n    setHash(txHash);\n    onSuccess?.(txHash);\n  };\n\n  const reset = () => {\n    setHash(undefined);\n  };\n\n  const renderProps: ContractWriterRenderProps = {\n    write,\n    hash,\n    isLoading,\n    error,\n    reset,\n  };\n\n  // If children is a function, use render prop pattern\n  if (typeof children === 'function') {\n    return <>{children(renderProps)}</>;\n  }\n\n  // Default rendering\n  return (\n    <div className={className || 'p-4 border rounded'}>\n      <h3 className=\"font-semibold mb-2\">Write: {functionName}</h3>\n      <button\n        onClick={() => write()}\n        disabled={isLoading}\n        className=\"px-3 py-1 bg-green-500 text-white rounded disabled:opacity-50\"\n        type=\"button\"\n      >\n        {isLoading ? 'Sending...' : 'Execute'}\n      </button>\n      {hash && (\n        <div className=\"mt-2\">\n          <p className=\"text-sm text-gray-600\">Transaction Hash:</p>\n          <p className=\"font-mono text-xs break-all\">{hash}</p>\n          <button\n            onClick={reset}\n            className=\"mt-1 text-sm text-blue-500 hover:underline\"\n            type=\"button\"\n          >\n            Reset\n          </button>\n        </div>\n      )}\n      {error && <p className=\"mt-2 text-red-500\">{error.message}</p>}\n      {children}\n    </div>\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 * SwapWidget - Headless Swap Component (Swappi)\n *\n * Token swap interface with customizable rendering\n */\n\nimport type React from 'react';\nimport { useState } from 'react';\nimport { useDevKitContext } from '../../providers/DevKitProvider.js';\nimport { useWalletContext } from '../../providers/WalletProvider.js';\nimport type { BaseComponentProps, RenderPropChild } from '../../types/index.js';\n\nexport interface SwapQuote {\n  amountIn: string;\n  amountOut: string;\n  amountOutMin: string;\n  priceImpact: string;\n  slippage: number;\n}\n\nexport interface SwapWidgetRenderProps {\n  getQuote: (\n    tokenIn: string,\n    tokenOut: string,\n    amountIn: string\n  ) => Promise<void>;\n  executeSwap: () => Promise<void>;\n  quote?: SwapQuote;\n  isLoadingQuote: boolean;\n  isExecutingSwap: boolean;\n  error?: Error;\n  hash?: string;\n}\n\nexport interface SwapWidgetProps extends BaseComponentProps {\n  defaultSlippage?: number;\n  onSuccess?: (hash: string) => void;\n  children?: RenderPropChild<SwapWidgetRenderProps> | React.ReactNode;\n}\n\n/**\n * SwapWidget Component\n *\n * Headless swap interface for Swappi DEX. Use render prop for custom UI.\n *\n * @example\n * ```tsx\n * <SwapWidget defaultSlippage={0.5}>\n *   {({ getQuote, executeSwap, quote, isLoadingQuote }) => (\n *     <div>\n *       <button onClick={() => getQuote('WCFX', 'USDT', '1.0')}>\n *         Get Quote\n *       </button>\n *       {quote && <p>You get: {quote.amountOut}</p>}\n *       <button onClick={executeSwap} disabled={!quote}>\n *         Swap\n *       </button>\n *     </div>\n *   )}\n * </SwapWidget>\n * ```\n */\nexport function SwapWidget({\n  defaultSlippage = 0.5,\n  onSuccess,\n  children,\n  className,\n}: SwapWidgetProps) {\n  useDevKitContext(); // ensure provider is present; apiUrl used in production impl\n  const { isConnected, accountIndex } = useWalletContext();\n\n  const [quote, setQuote] = useState<SwapQuote>();\n  const [isLoadingQuote, setIsLoadingQuote] = useState(false);\n  const [isExecutingSwap, setIsExecutingSwap] = useState(false);\n  const [error, setError] = useState<Error>();\n  const [hash, setHash] = useState<string>();\n\n  const [currentQuoteParams, setCurrentQuoteParams] = useState<{\n    tokenIn: string;\n    tokenOut: string;\n    amountIn: string;\n  }>();\n\n  const getQuote = async (\n    tokenIn: string,\n    tokenOut: string,\n    amountIn: string\n  ) => {\n    if (!isConnected) {\n      setError(new Error('Wallet not connected'));\n      return;\n    }\n\n    setIsLoadingQuote(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API to get quote from Swappi\n      // For now, simulate quote\n      const mockQuote: SwapQuote = {\n        amountIn,\n        amountOut: (parseFloat(amountIn) * 0.997).toString(), // 0.3% fee\n        amountOutMin: (parseFloat(amountIn) * 0.997 * 0.995).toString(), // With slippage\n        priceImpact: '0.3',\n        slippage: defaultSlippage,\n      };\n\n      setQuote(mockQuote);\n      setCurrentQuoteParams({ tokenIn, tokenOut, amountIn });\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Failed to get quote'));\n    } finally {\n      setIsLoadingQuote(false);\n    }\n  };\n\n  const executeSwap = async () => {\n    if (\n      !quote ||\n      !currentQuoteParams ||\n      !isConnected ||\n      accountIndex === undefined\n    ) {\n      setError(new Error('Missing required data for swap'));\n      return;\n    }\n\n    setIsExecutingSwap(true);\n    setError(undefined);\n\n    try {\n      // In production, call backend API to execute swap on Swappi\n      // For now, simulate swap\n      const mockHash = `0x${Array.from({ length: 64 }, () =>\n        Math.floor(Math.random() * 16).toString(16)\n      ).join('')}`;\n\n      setHash(mockHash);\n      onSuccess?.(mockHash);\n    } catch (err) {\n      setError(err instanceof Error ? err : new Error('Swap failed'));\n    } finally {\n      setIsExecutingSwap(false);\n    }\n  };\n\n  const renderProps: SwapWidgetRenderProps = {\n    getQuote,\n    executeSwap,\n    quote,\n    isLoadingQuote,\n    isExecutingSwap,\n    error,\n    hash,\n  };\n\n  // If children is a function, use render prop pattern\n  if (typeof children === 'function') {\n    return <>{children(renderProps)}</>;\n  }\n\n  // Default rendering\n  return (\n    <div className={className || 'p-4 border rounded-lg'}>\n      <h2 className=\"text-xl font-bold mb-4\">Swap (Swappi)</h2>\n\n      {!isConnected && (\n        <p className=\"text-gray-600\">Connect wallet to start swapping</p>\n      )}\n\n      {quote && (\n        <div className=\"mt-4 p-3 bg-gray-100 rounded\">\n          <p>Amount In: {quote.amountIn}</p>\n          <p>Amount Out: {quote.amountOut}</p>\n          <p>Min Amount: {quote.amountOutMin}</p>\n          <p>Slippage: {quote.slippage}%</p>\n        </div>\n      )}\n\n      {hash && (\n        <div className=\"mt-4 p-3 bg-green-100 rounded\">\n          <p className=\"text-sm font-semibold\">Swap Successful!</p>\n          <p className=\"text-xs font-mono break-all\">{hash}</p>\n        </div>\n      )}\n\n      {error && (\n        <div className=\"mt-4 p-3 bg-red-100 rounded\">\n          <p className=\"text-red-700\">{error.message}</p>\n        </div>\n      )}\n\n      {children}\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_jsx_runtime","import_react","import_jsx_runtime","React","import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}

package/dist/components/index.d.cts

@@ -0,0 +1,4 @@
+export { A as AccountCard, a as AccountCardProps, b as AccountCardRenderProps, C as ConnectButton, c as ConnectButtonProps, d as ConnectButtonRenderProps, f as ContractReader, g as ContractReaderProps, h as ContractReaderRenderProps, i as ContractWriter, j as ContractWriterProps, k as ContractWriterRenderProps, S as SwapQuote, l as SwapWidget, m as SwapWidgetProps, n as SwapWidgetRenderProps } from '../index-CU9Acwhq.cjs';
+import 'react/jsx-runtime';
+import 'react';
+import '@cfxdevkit/core';

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export { A as AccountCard, a as AccountCardProps, b as AccountCardRenderProps, C as ConnectButton, c as ConnectButtonProps, d as ConnectButtonRenderProps, f as ContractReader, g as ContractReaderProps, h as ContractReaderRenderProps, i as ContractWriter, j as ContractWriterProps, k as ContractWriterRenderProps, S as SwapQuote, l as SwapWidget, m as SwapWidgetProps, n as SwapWidgetRenderProps } from '../index-CU9Acwhq.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@cfxdevkit/core';