@movebridge/react 0.0.1

package/dist/index.js

@@ -0,0 +1,738 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AddressDisplay: () => AddressDisplay,
+  MovementContext: () => MovementContext,
+  MovementProvider: () => MovementProvider,
+  NetworkSwitcher: () => NetworkSwitcher,
+  WalletButton: () => WalletButton,
+  WalletModal: () => WalletModal,
+  useBalance: () => useBalance,
+  useContract: () => useContract,
+  useMovement: () => useMovement,
+  useMovementContext: () => useMovementContext,
+  useTransaction: () => useTransaction,
+  useWaitForTransaction: () => useWaitForTransaction
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/context.tsx
+var import_react = require("react");
+var import_core = require("@movebridge/core");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MovementContext = (0, import_react.createContext)(null);
+function MovementProvider({
+  network,
+  autoConnect = false,
+  onError,
+  children
+}) {
+  const [movement, setMovement] = (0, import_react.useState)(null);
+  const [walletState, setWalletState] = (0, import_react.useState)({
+    connected: false,
+    address: null,
+    publicKey: null
+  });
+  const [connecting, setConnecting] = (0, import_react.useState)(false);
+  const [wallets, setWallets] = (0, import_react.useState)([]);
+  const [currentWallet, setCurrentWallet] = (0, import_react.useState)(null);
+  (0, import_react.useEffect)(() => {
+    const sdk = new import_core.Movement({
+      network,
+      autoConnect
+    });
+    setMovement(sdk);
+    const detected = sdk.wallet.detectWallets();
+    setWallets(detected);
+    const handleConnect = (address) => {
+      setWalletState((prev) => ({
+        ...prev,
+        connected: true,
+        address
+      }));
+      setConnecting(false);
+    };
+    const handleDisconnect = () => {
+      setWalletState({
+        connected: false,
+        address: null,
+        publicKey: null
+      });
+      setCurrentWallet(null);
+    };
+    const handleAccountChanged = (newAddress) => {
+      setWalletState((prev) => ({
+        ...prev,
+        address: newAddress
+      }));
+    };
+    sdk.wallet.on("connect", handleConnect);
+    sdk.wallet.on("disconnect", handleDisconnect);
+    sdk.wallet.on("accountChanged", handleAccountChanged);
+    const state = sdk.wallet.getState();
+    if (state.connected) {
+      setWalletState(state);
+      setCurrentWallet(sdk.wallet.getWallet());
+    }
+    return () => {
+      sdk.wallet.off("connect", handleConnect);
+      sdk.wallet.off("disconnect", handleDisconnect);
+      sdk.wallet.off("accountChanged", handleAccountChanged);
+      sdk.events.unsubscribeAll();
+    };
+  }, [network, autoConnect]);
+  const connect = (0, import_react.useCallback)(
+    async (wallet) => {
+      if (!movement) return;
+      setConnecting(true);
+      try {
+        await movement.wallet.connect(wallet);
+        setCurrentWallet(wallet);
+      } catch (error) {
+        setConnecting(false);
+        if (error instanceof import_core.MovementError && onError) {
+          onError(error);
+        }
+        throw error;
+      }
+    },
+    [movement, onError]
+  );
+  const disconnect = (0, import_react.useCallback)(async () => {
+    if (!movement) return;
+    try {
+      await movement.wallet.disconnect();
+    } catch (error) {
+      if (error instanceof import_core.MovementError && onError) {
+        onError(error);
+      }
+      throw error;
+    }
+  }, [movement, onError]);
+  const value = {
+    movement,
+    network,
+    address: walletState.address,
+    connected: walletState.connected,
+    connecting,
+    wallets,
+    wallet: currentWallet,
+    connect,
+    disconnect,
+    ...onError && { onError }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MovementContext.Provider, { value, children });
+}
+function useMovementContext() {
+  const context = (0, import_react.useContext)(MovementContext);
+  if (!context) {
+    throw new Error("useMovementContext must be used within a MovementProvider");
+  }
+  return context;
+}
+
+// src/hooks/useMovement.ts
+function useMovement() {
+  const { movement, network, address, connected, connecting, connect, disconnect, wallets, wallet } = useMovementContext();
+  return {
+    movement,
+    network,
+    address,
+    connected,
+    connecting,
+    connect,
+    disconnect,
+    wallets,
+    wallet
+  };
+}
+
+// src/hooks/useBalance.ts
+var import_react2 = require("react");
+function useBalance(address) {
+  const { movement, address: connectedAddress, onError } = useMovementContext();
+  const [balance, setBalance] = (0, import_react2.useState)(null);
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const targetAddress = address ?? connectedAddress;
+  const fetchBalance = (0, import_react2.useCallback)(async () => {
+    if (!movement || !targetAddress) {
+      setBalance(null);
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await movement.getAccountBalance(targetAddress);
+      setBalance(result);
+    } catch (err) {
+      const movementError = err;
+      setError(movementError);
+      setBalance(null);
+      if (onError) {
+        onError(movementError);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }, [movement, targetAddress, onError]);
+  (0, import_react2.useEffect)(() => {
+    let cancelled = false;
+    const doFetch = async () => {
+      if (!movement || !targetAddress) {
+        setBalance(null);
+        return;
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await movement.getAccountBalance(targetAddress);
+        if (!cancelled) {
+          setBalance(result);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const movementError = err;
+          setError(movementError);
+          setBalance(null);
+          if (onError) {
+            onError(movementError);
+          }
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+    doFetch();
+    return () => {
+      cancelled = true;
+    };
+  }, [movement, targetAddress, onError]);
+  return {
+    balance,
+    loading,
+    error,
+    refetch: fetchBalance
+  };
+}
+
+// src/hooks/useContract.ts
+var import_react3 = require("react");
+function useContract(options) {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = (0, import_react3.useState)(null);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)(null);
+  const contract = (0, import_react3.useMemo)(() => {
+    if (!movement) return null;
+    return movement.contract(options);
+  }, [movement, options.address, options.module]);
+  const read = (0, import_react3.useCallback)(
+    async (functionName, args, typeArgs = []) => {
+      if (!contract) {
+        throw new Error("Contract not initialized");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await contract.view(functionName, args, typeArgs);
+        setData(result);
+        return result;
+      } catch (err) {
+        const movementError = err;
+        setError(movementError);
+        if (onError) {
+          onError(movementError);
+        }
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [contract, onError]
+  );
+  const write = (0, import_react3.useCallback)(
+    async (functionName, args, typeArgs = []) => {
+      if (!contract) {
+        throw new Error("Contract not initialized");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const txHash = await contract.call(functionName, args, typeArgs);
+        setData(txHash);
+        return txHash;
+      } catch (err) {
+        const movementError = err;
+        setError(movementError);
+        if (onError) {
+          onError(movementError);
+        }
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [contract, onError]
+  );
+  return {
+    data,
+    loading,
+    error,
+    read,
+    write,
+    contract
+  };
+}
+
+// src/hooks/useTransaction.ts
+var import_react4 = require("react");
+function useTransaction() {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = (0, import_react4.useState)(null);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)(null);
+  const send = (0, import_react4.useCallback)(
+    async (options) => {
+      if (!movement) {
+        throw new Error("Movement SDK not initialized");
+      }
+      setLoading(true);
+      setError(null);
+      try {
+        const payload = await movement.transaction.build(options);
+        const hash = await movement.transaction.signAndSubmit(payload);
+        setData(hash);
+        return hash;
+      } catch (err) {
+        const movementError = err;
+        setError(movementError);
+        if (onError) {
+          onError(movementError);
+        }
+        throw err;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [movement, onError]
+  );
+  const reset = (0, import_react4.useCallback)(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+  return {
+    send,
+    data,
+    loading,
+    error,
+    reset
+  };
+}
+
+// src/hooks/useWaitForTransaction.ts
+var import_react5 = require("react");
+function useWaitForTransaction(hash, options) {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = (0, import_react5.useState)(null);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (!hash || !movement) {
+      setData(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    const waitForTx = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const waitOptions = {};
+        if (options?.timeoutMs !== void 0) {
+          waitOptions.timeoutMs = options.timeoutMs;
+        }
+        if (options?.checkIntervalMs !== void 0) {
+          waitOptions.checkIntervalMs = options.checkIntervalMs;
+        }
+        const response = await movement.waitForTransaction(hash, waitOptions);
+        if (!cancelled) {
+          setData(response);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          const movementError = err;
+          setError(movementError);
+          if (onError) {
+            onError(movementError);
+          }
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    };
+    waitForTx();
+    return () => {
+      cancelled = true;
+    };
+  }, [hash, movement, options?.timeoutMs, options?.checkIntervalMs, onError]);
+  return {
+    data,
+    loading,
+    error
+  };
+}
+
+// src/components/WalletButton.tsx
+var import_react6 = require("react");
+
+// src/components/WalletModal.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var WALLET_INFO = {
+  petra: {
+    name: "Petra",
+    icon: "\u{1F98A}",
+    description: "Recommended for Movement"
+  },
+  pontem: {
+    name: "Pontem",
+    icon: "\u{1F309}",
+    description: "Multi-chain with Movement support"
+  },
+  nightly: {
+    name: "Nightly",
+    icon: "\u{1F319}",
+    description: "Movement & Aptos wallet"
+  }
+};
+function WalletModal({ open, onClose }) {
+  const { wallets, connect, connecting } = useMovement();
+  if (!open) return null;
+  const handleConnect = async (wallet) => {
+    try {
+      await connect(wallet);
+      onClose();
+    } catch {
+    }
+  };
+  const overlayStyles = {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3
+  };
+  const modalStyles = {
+    backgroundColor: "white",
+    borderRadius: "12px",
+    padding: "24px",
+    minWidth: "320px",
+    maxWidth: "400px",
+    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)"
+  };
+  const headerStyles = {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "20px"
+  };
+  const titleStyles = {
+    fontSize: "18px",
+    fontWeight: 600,
+    margin: 0
+  };
+  const closeButtonStyles = {
+    background: "none",
+    border: "none",
+    fontSize: "24px",
+    cursor: "pointer",
+    padding: "4px",
+    lineHeight: 1
+  };
+  const walletButtonStyles = {
+    display: "flex",
+    alignItems: "center",
+    gap: "12px",
+    width: "100%",
+    padding: "12px 16px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "8px",
+    backgroundColor: "white",
+    cursor: "pointer",
+    fontSize: "16px",
+    marginBottom: "8px",
+    transition: "all 0.2s ease"
+  };
+  const emptyStyles = {
+    textAlign: "center",
+    color: "#6b7280",
+    padding: "20px"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: overlayStyles, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: headerStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h2", { style: titleStyles, children: "Connect Wallet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("button", { style: closeButtonStyles, onClick: onClose, children: "\xD7" })
+    ] }),
+    wallets.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: emptyStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { style: { marginBottom: "16px" }, children: [
+        "Install a wallet that supports ",
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "Movement Network" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "a",
+          {
+            href: "https://petra.app/",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              display: "inline-block",
+              padding: "8px 16px",
+              backgroundColor: "#4f46e5",
+              color: "white",
+              borderRadius: "6px",
+              textDecoration: "none",
+              fontSize: "14px"
+            },
+            children: "\u{1F98A} Get Petra (Recommended)"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "a",
+          {
+            href: "https://pontem.network/pontem-wallet",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              display: "inline-block",
+              padding: "8px 16px",
+              backgroundColor: "#6366f1",
+              color: "white",
+              borderRadius: "6px",
+              textDecoration: "none",
+              fontSize: "14px"
+            },
+            children: "\u{1F309} Get Pontem"
+          }
+        )
+      ] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: wallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        style: walletButtonStyles,
+        onClick: () => handleConnect(wallet),
+        disabled: connecting,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { fontSize: "24px" }, children: WALLET_INFO[wallet].icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { textAlign: "left" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { children: WALLET_INFO[wallet].name }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
+          ] })
+        ]
+      },
+      wallet
+    )) })
+  ] }) });
+}
+
+// src/components/WalletButton.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function truncateAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function WalletButton({ className = "", connectText = "Connect Wallet" }) {
+  const { address, connected, connecting, disconnect } = useMovement();
+  const [modalOpen, setModalOpen] = (0, import_react6.useState)(false);
+  const baseStyles = {
+    padding: "10px 20px",
+    borderRadius: "8px",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "14px",
+    fontWeight: 500,
+    transition: "all 0.2s ease"
+  };
+  const connectedStyles = {
+    ...baseStyles,
+    backgroundColor: "#f0f0f0",
+    color: "#333"
+  };
+  const disconnectedStyles = {
+    ...baseStyles,
+    backgroundColor: "#6366f1",
+    color: "white"
+  };
+  if (connected && address) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        className,
+        style: connectedStyles,
+        onClick: disconnect,
+        title: "Click to disconnect",
+        children: truncateAddress(address)
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        className,
+        style: disconnectedStyles,
+        onClick: () => setModalOpen(true),
+        disabled: connecting,
+        children: connecting ? "Connecting..." : connectText
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WalletModal, { open: modalOpen, onClose: () => setModalOpen(false) })
+  ] });
+}
+
+// src/components/AddressDisplay.tsx
+var import_react7 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function truncateAddress2(address, startChars = 6, endChars = 4) {
+  if (address.length <= startChars + endChars + 3) {
+    return address;
+  }
+  return `${address.slice(0, startChars)}...${address.slice(-endChars)}`;
+}
+function AddressDisplay({
+  address,
+  truncate = true,
+  copyable = true,
+  className = ""
+}) {
+  const [copied, setCopied] = (0, import_react7.useState)(false);
+  const handleCopy = (0, import_react7.useCallback)(async () => {
+    try {
+      await navigator.clipboard.writeText(address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [address]);
+  const displayAddress = truncate ? truncateAddress2(address) : address;
+  const containerStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    fontFamily: "monospace",
+    fontSize: "14px"
+  };
+  const addressStyles = {
+    backgroundColor: "#f3f4f6",
+    padding: "4px 8px",
+    borderRadius: "4px"
+  };
+  const buttonStyles = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: "4px",
+    fontSize: "14px",
+    color: copied ? "#10b981" : "#6b7280"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className, style: containerStyles, title: address, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: addressStyles, children: displayAddress }),
+    copyable && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { style: buttonStyles, onClick: handleCopy, title: copied ? "Copied!" : "Copy address", children: copied ? "\u2713" : "\u{1F4CB}" })
+  ] });
+}
+
+// src/components/NetworkSwitcher.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NETWORK_INFO = {
+  mainnet: { name: "Mainnet", color: "#10b981" },
+  testnet: { name: "Testnet", color: "#f59e0b" }
+};
+function NetworkSwitcher({ className = "", onNetworkChange }) {
+  const { network } = useMovementContext();
+  const containerStyles = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px"
+  };
+  const indicatorStyles = {
+    width: "8px",
+    height: "8px",
+    borderRadius: "50%",
+    backgroundColor: NETWORK_INFO[network].color
+  };
+  const selectStyles = {
+    padding: "6px 12px",
+    borderRadius: "6px",
+    border: "1px solid #e5e7eb",
+    backgroundColor: "white",
+    fontSize: "14px",
+    cursor: onNetworkChange ? "pointer" : "default"
+  };
+  if (!onNetworkChange) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className, style: containerStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: indicatorStyles }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: NETWORK_INFO[network].name })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className, style: containerStyles, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: indicatorStyles }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "select",
+      {
+        style: selectStyles,
+        value: network,
+        onChange: (e) => onNetworkChange(e.target.value),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "mainnet", children: "Mainnet" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "testnet", children: "Testnet" })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AddressDisplay,
+  MovementContext,
+  MovementProvider,
+  NetworkSwitcher,
+  WalletButton,
+  WalletModal,
+  useBalance,
+  useContract,
+  useMovement,
+  useMovementContext,
+  useTransaction,
+  useWaitForTransaction
+});