@cfxdevkit/react 1.0.0

package/dist/index.cjs

@@ -0,0 +1,622 @@
+"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/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AccountCard: () => AccountCard,
+  ConnectButton: () => ConnectButton,
+  ContractReader: () => ContractReader,
+  ContractWriter: () => ContractWriter,
+  DevKitProvider: () => DevKitProvider,
+  SwapWidget: () => SwapWidget,
+  VERSION: () => VERSION,
+  WalletProvider: () => WalletProvider,
+  useBalance: () => useBalance,
+  useContract: () => useContract,
+  useDevKitContext: () => useDevKitContext,
+  useTransaction: () => useTransaction,
+  useWalletContext: () => useWalletContext
+});
+module.exports = __toCommonJS(src_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 DevKitProvider({
+  apiUrl,
+  wsUrl,
+  network = "local",
+  debug = false,
+  children
+}) {
+  const value = {
+    apiUrl,
+    wsUrl,
+    network,
+    debug
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DevKitContext.Provider, { value, children });
+}
+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 WalletProvider({ children }) {
+  const [isConnected, setIsConnected] = (0, import_react3.useState)(false);
+  const [coreAddress, setCoreAddress] = (0, import_react3.useState)();
+  const [evmAddress, setEvmAddress] = (0, import_react3.useState)();
+  const [chain, setChain] = (0, import_react3.useState)("evm");
+  const [accountIndex, setAccountIndex] = (0, import_react3.useState)();
+  const connect = async (index) => {
+    setAccountIndex(index);
+    setCoreAddress(`cfx:account${index}`);
+    setEvmAddress(`0xaccount${index}`);
+    setIsConnected(true);
+  };
+  const disconnect = () => {
+    setIsConnected(false);
+    setCoreAddress(void 0);
+    setEvmAddress(void 0);
+    setAccountIndex(void 0);
+  };
+  const switchChain = (newChain) => {
+    setChain(newChain);
+  };
+  const value = {
+    isConnected,
+    address: chain === "core" ? coreAddress : evmAddress,
+    coreAddress,
+    evmAddress,
+    chain,
+    accountIndex,
+    connect,
+    disconnect,
+    switchChain
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(WalletContext.Provider, { value, children });
+}
+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
+  ] });
+}
+
+// src/hooks/useTransaction.ts
+var import_react9 = require("react");
+function useTransaction() {
+  useDevKitContext();
+  const { accountIndex } = useWalletContext();
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
+  const [error, setError] = (0, import_react9.useState)();
+  const [transaction, setTransaction] = (0, import_react9.useState)();
+  const send = async (_options) => {
+    if (accountIndex === void 0) {
+      throw new Error("Wallet not connected");
+    }
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const result = {
+        hash: `0x${Array.from(
+          { length: 64 },
+          () => Math.floor(Math.random() * 16).toString(16)
+        ).join("")}`,
+        status: "pending"
+      };
+      setTransaction(result);
+      setTimeout(() => {
+        setTransaction({ ...result, status: "success" });
+      }, 2e3);
+      return result;
+    } catch (err) {
+      const errorObj = err instanceof Error ? err : new Error("Transaction failed");
+      setError(errorObj);
+      throw errorObj;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const reset = () => {
+    setTransaction(void 0);
+    setError(void 0);
+  };
+  return {
+    send,
+    isLoading,
+    error,
+    transaction,
+    reset
+  };
+}
+
+// src/index.ts
+var VERSION = "1.0.0";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccountCard,
+  ConnectButton,
+  ContractReader,
+  ContractWriter,
+  DevKitProvider,
+  SwapWidget,
+  VERSION,
+  WalletProvider,
+  useBalance,
+  useContract,
+  useDevKitContext,
+  useTransaction,
+  useWalletContext
+});
+//# sourceMappingURL=index.cjs.map