@cfxdevkit/react 1.0.0

package/dist/index.js

@@ -0,0 +1,573 @@
+// src/hooks/useBalance.ts
+import { useCallback, useEffect, useState } from "react";
+
+// src/providers/DevKitProvider.tsx
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+var DevKitContext = createContext(void 0);
+function DevKitProvider({
+  apiUrl,
+  wsUrl,
+  network = "local",
+  debug = false,
+  children
+}) {
+  const value = {
+    apiUrl,
+    wsUrl,
+    network,
+    debug
+  };
+  return /* @__PURE__ */ jsx(DevKitContext.Provider, { value, children });
+}
+function useDevKitContext() {
+  const context = 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] = useState();
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState();
+  const fetchBalance = 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]);
+  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
+import { createContext as createContext2, useContext as useContext2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var WalletContext = createContext2(void 0);
+function WalletProvider({ children }) {
+  const [isConnected, setIsConnected] = useState2(false);
+  const [coreAddress, setCoreAddress] = useState2();
+  const [evmAddress, setEvmAddress] = useState2();
+  const [chain, setChain] = useState2("evm");
+  const [accountIndex, setAccountIndex] = useState2();
+  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__ */ jsx2(WalletContext.Provider, { value, children });
+}
+function useWalletContext() {
+  const context = useContext2(WalletContext);
+  if (!context) {
+    throw new Error("useWalletContext must be used within WalletProvider");
+  }
+  return context;
+}
+
+// src/components/account-display/AccountCard.tsx
+import { Fragment, jsx as jsx3, jsxs } from "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__ */ jsx3(Fragment, { children: children(renderProps) });
+  }
+  if (!isConnected) {
+    return children ? /* @__PURE__ */ jsx3("div", { className, children }) : null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: className || "p-4 bg-gray-100 rounded-lg space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: "Core Space:" }),
+      /* @__PURE__ */ jsx3("span", { className: "ml-2 font-mono text-sm", children: coreAddress }),
+      showBalance && /* @__PURE__ */ jsx3("span", { className: "ml-2 text-gray-600", children: isLoadingCore ? "Loading..." : `${coreBalance} CFX` })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx3("span", { className: "font-semibold", children: "eSpace:" }),
+      /* @__PURE__ */ jsx3("span", { className: "ml-2 font-mono text-sm", children: evmAddress }),
+      showBalance && /* @__PURE__ */ jsx3("span", { className: "ml-2 text-gray-600", children: isLoadingEvm ? "Loading..." : `${evmBalance} CFX` })
+    ] })
+  ] });
+}
+
+// src/components/connect-wallet/ConnectButton.tsx
+import React from "react";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
+function ConnectButton({
+  accountIndex = 0,
+  onConnect,
+  onDisconnect,
+  children,
+  className
+}) {
+  const {
+    isConnected,
+    address,
+    connect: contextConnect,
+    disconnect: contextDisconnect
+  } = useWalletContext();
+  const [isLoading, setIsLoading] = React.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__ */ jsx4(Fragment2, { children: children(renderProps) });
+  }
+  if (children) {
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        onClick: isConnected ? disconnect : connect,
+        disabled: isLoading,
+        className,
+        type: "button",
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    "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
+import { useState as useState4 } from "react";
+
+// src/hooks/useContract.ts
+import { useState as useState3 } from "react";
+function useContract() {
+  useDevKitContext();
+  const { accountIndex } = useWalletContext();
+  const [isLoading, setIsLoading] = useState3(false);
+  const [error, setError] = useState3();
+  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
+import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ContractReader({
+  address,
+  abi,
+  functionName,
+  chain,
+  children,
+  className
+}) {
+  const { read: readContract, isLoading, error } = useContract();
+  const [result, setResult] = useState4();
+  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__ */ jsx5(Fragment3, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ jsxs2("div", { className: className || "p-4 border rounded", children: [
+    /* @__PURE__ */ jsxs2("h3", { className: "font-semibold mb-2", children: [
+      "Read: ",
+      functionName
+    ] }),
+    /* @__PURE__ */ jsx5(
+      "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__ */ jsx5("div", { className: "mt-2", children: /* @__PURE__ */ jsx5("pre", { className: "bg-gray-100 p-2 rounded text-sm", children: JSON.stringify(result, null, 2) }) }),
+    error && /* @__PURE__ */ jsx5("p", { className: "mt-2 text-red-500", children: error.message }),
+    children
+  ] });
+}
+
+// src/components/contract/ContractWriter.tsx
+import { useState as useState5 } from "react";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function ContractWriter({
+  address,
+  abi,
+  functionName,
+  chain,
+  onSuccess,
+  children,
+  className
+}) {
+  const { write: writeContract, isLoading, error } = useContract();
+  const [hash, setHash] = useState5();
+  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__ */ jsx6(Fragment4, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: className || "p-4 border rounded", children: [
+    /* @__PURE__ */ jsxs3("h3", { className: "font-semibold mb-2", children: [
+      "Write: ",
+      functionName
+    ] }),
+    /* @__PURE__ */ jsx6(
+      "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__ */ jsxs3("div", { className: "mt-2", children: [
+      /* @__PURE__ */ jsx6("p", { className: "text-sm text-gray-600", children: "Transaction Hash:" }),
+      /* @__PURE__ */ jsx6("p", { className: "font-mono text-xs break-all", children: hash }),
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: reset,
+          className: "mt-1 text-sm text-blue-500 hover:underline",
+          type: "button",
+          children: "Reset"
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx6("p", { className: "mt-2 text-red-500", children: error.message }),
+    children
+  ] });
+}
+
+// src/components/swap/SwapWidget.tsx
+import { useState as useState6 } from "react";
+import { Fragment as Fragment5, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function SwapWidget({
+  defaultSlippage = 0.5,
+  onSuccess,
+  children,
+  className
+}) {
+  useDevKitContext();
+  const { isConnected, accountIndex } = useWalletContext();
+  const [quote, setQuote] = useState6();
+  const [isLoadingQuote, setIsLoadingQuote] = useState6(false);
+  const [isExecutingSwap, setIsExecutingSwap] = useState6(false);
+  const [error, setError] = useState6();
+  const [hash, setHash] = useState6();
+  const [currentQuoteParams, setCurrentQuoteParams] = useState6();
+  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__ */ jsx7(Fragment5, { children: children(renderProps) });
+  }
+  return /* @__PURE__ */ jsxs4("div", { className: className || "p-4 border rounded-lg", children: [
+    /* @__PURE__ */ jsx7("h2", { className: "text-xl font-bold mb-4", children: "Swap (Swappi)" }),
+    !isConnected && /* @__PURE__ */ jsx7("p", { className: "text-gray-600", children: "Connect wallet to start swapping" }),
+    quote && /* @__PURE__ */ jsxs4("div", { className: "mt-4 p-3 bg-gray-100 rounded", children: [
+      /* @__PURE__ */ jsxs4("p", { children: [
+        "Amount In: ",
+        quote.amountIn
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { children: [
+        "Amount Out: ",
+        quote.amountOut
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { children: [
+        "Min Amount: ",
+        quote.amountOutMin
+      ] }),
+      /* @__PURE__ */ jsxs4("p", { children: [
+        "Slippage: ",
+        quote.slippage,
+        "%"
+      ] })
+    ] }),
+    hash && /* @__PURE__ */ jsxs4("div", { className: "mt-4 p-3 bg-green-100 rounded", children: [
+      /* @__PURE__ */ jsx7("p", { className: "text-sm font-semibold", children: "Swap Successful!" }),
+      /* @__PURE__ */ jsx7("p", { className: "text-xs font-mono break-all", children: hash })
+    ] }),
+    error && /* @__PURE__ */ jsx7("div", { className: "mt-4 p-3 bg-red-100 rounded", children: /* @__PURE__ */ jsx7("p", { className: "text-red-700", children: error.message }) }),
+    children
+  ] });
+}
+
+// src/hooks/useTransaction.ts
+import { useState as useState7 } from "react";
+function useTransaction() {
+  useDevKitContext();
+  const { accountIndex } = useWalletContext();
+  const [isLoading, setIsLoading] = useState7(false);
+  const [error, setError] = useState7();
+  const [transaction, setTransaction] = useState7();
+  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";
+export {
+  AccountCard,
+  ConnectButton,
+  ContractReader,
+  ContractWriter,
+  DevKitProvider,
+  SwapWidget,
+  VERSION,
+  WalletProvider,
+  useBalance,
+  useContract,
+  useDevKitContext,
+  useTransaction,
+  useWalletContext
+};
+//# sourceMappingURL=index.js.map