@movebridge/react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,703 @@
+// src/context.tsx
+import { createContext, useContext, useState, useEffect, useCallback } from "react";
+import {
+  Movement,
+  MovementError
+} from "@movebridge/core";
+import { jsx } from "react/jsx-runtime";
+var MovementContext = createContext(null);
+function MovementProvider({
+  network,
+  autoConnect = false,
+  onError,
+  children
+}) {
+  const [movement, setMovement] = useState(null);
+  const [walletState, setWalletState] = useState({
+    connected: false,
+    address: null,
+    publicKey: null
+  });
+  const [connecting, setConnecting] = useState(false);
+  const [wallets, setWallets] = useState([]);
+  const [currentWallet, setCurrentWallet] = useState(null);
+  useEffect(() => {
+    const sdk = new 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 = useCallback(
+    async (wallet) => {
+      if (!movement) return;
+      setConnecting(true);
+      try {
+        await movement.wallet.connect(wallet);
+        setCurrentWallet(wallet);
+      } catch (error) {
+        setConnecting(false);
+        if (error instanceof MovementError && onError) {
+          onError(error);
+        }
+        throw error;
+      }
+    },
+    [movement, onError]
+  );
+  const disconnect = useCallback(async () => {
+    if (!movement) return;
+    try {
+      await movement.wallet.disconnect();
+    } catch (error) {
+      if (error instanceof 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__ */ jsx(MovementContext.Provider, { value, children });
+}
+function useMovementContext() {
+  const context = 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
+import { useState as useState2, useEffect as useEffect2, useCallback as useCallback2 } from "react";
+function useBalance(address) {
+  const { movement, address: connectedAddress, onError } = useMovementContext();
+  const [balance, setBalance] = useState2(null);
+  const [loading, setLoading] = useState2(false);
+  const [error, setError] = useState2(null);
+  const targetAddress = address ?? connectedAddress;
+  const fetchBalance = useCallback2(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]);
+  useEffect2(() => {
+    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
+import { useState as useState3, useMemo, useCallback as useCallback3 } from "react";
+function useContract(options) {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = useState3(null);
+  const [loading, setLoading] = useState3(false);
+  const [error, setError] = useState3(null);
+  const contract = useMemo(() => {
+    if (!movement) return null;
+    return movement.contract(options);
+  }, [movement, options.address, options.module]);
+  const read = useCallback3(
+    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 = useCallback3(
+    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
+import { useState as useState4, useCallback as useCallback4 } from "react";
+function useTransaction() {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = useState4(null);
+  const [loading, setLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const send = useCallback4(
+    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 = useCallback4(() => {
+    setData(null);
+    setError(null);
+    setLoading(false);
+  }, []);
+  return {
+    send,
+    data,
+    loading,
+    error,
+    reset
+  };
+}
+
+// src/hooks/useWaitForTransaction.ts
+import { useState as useState5, useEffect as useEffect3 } from "react";
+function useWaitForTransaction(hash, options) {
+  const { movement, onError } = useMovementContext();
+  const [data, setData] = useState5(null);
+  const [loading, setLoading] = useState5(false);
+  const [error, setError] = useState5(null);
+  useEffect3(() => {
+    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
+import { useState as useState6 } from "react";
+
+// src/components/WalletModal.tsx
+import { jsx as jsx2, jsxs } from "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__ */ jsx2("div", { style: overlayStyles, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { style: headerStyles, children: [
+      /* @__PURE__ */ jsx2("h2", { style: titleStyles, children: "Connect Wallet" }),
+      /* @__PURE__ */ jsx2("button", { style: closeButtonStyles, onClick: onClose, children: "\xD7" })
+    ] }),
+    wallets.length === 0 ? /* @__PURE__ */ jsxs("div", { style: emptyStyles, children: [
+      /* @__PURE__ */ jsx2("p", { style: { marginBottom: "12px" }, children: "No wallets detected." }),
+      /* @__PURE__ */ jsxs("p", { style: { marginBottom: "16px" }, children: [
+        "Install a wallet that supports ",
+        /* @__PURE__ */ jsx2("strong", { children: "Movement Network" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsx2(
+          "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__ */ jsx2("div", { children: wallets.map((wallet) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        style: walletButtonStyles,
+        onClick: () => handleConnect(wallet),
+        disabled: connecting,
+        children: [
+          /* @__PURE__ */ jsx2("span", { style: { fontSize: "24px" }, children: WALLET_INFO[wallet].icon }),
+          /* @__PURE__ */ jsxs("div", { style: { textAlign: "left" }, children: [
+            /* @__PURE__ */ jsx2("div", { children: WALLET_INFO[wallet].name }),
+            /* @__PURE__ */ jsx2("div", { style: { fontSize: "12px", color: "#6b7280" }, children: WALLET_INFO[wallet].description })
+          ] })
+        ]
+      },
+      wallet
+    )) })
+  ] }) });
+}
+
+// src/components/WalletButton.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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] = useState6(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__ */ jsx3(
+      "button",
+      {
+        className,
+        style: connectedStyles,
+        onClick: disconnect,
+        title: "Click to disconnect",
+        children: truncateAddress(address)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        className,
+        style: disconnectedStyles,
+        onClick: () => setModalOpen(true),
+        disabled: connecting,
+        children: connecting ? "Connecting..." : connectText
+      }
+    ),
+    /* @__PURE__ */ jsx3(WalletModal, { open: modalOpen, onClose: () => setModalOpen(false) })
+  ] });
+}
+
+// src/components/AddressDisplay.tsx
+import { useState as useState7, useCallback as useCallback5 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "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] = useState7(false);
+  const handleCopy = useCallback5(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__ */ jsxs3("span", { className, style: containerStyles, title: address, children: [
+    /* @__PURE__ */ jsx4("span", { style: addressStyles, children: displayAddress }),
+    copyable && /* @__PURE__ */ jsx4("button", { style: buttonStyles, onClick: handleCopy, title: copied ? "Copied!" : "Copy address", children: copied ? "\u2713" : "\u{1F4CB}" })
+  ] });
+}
+
+// src/components/NetworkSwitcher.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "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__ */ jsxs4("span", { className, style: containerStyles, children: [
+      /* @__PURE__ */ jsx5("span", { style: indicatorStyles }),
+      /* @__PURE__ */ jsx5("span", { children: NETWORK_INFO[network].name })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4("span", { className, style: containerStyles, children: [
+    /* @__PURE__ */ jsx5("span", { style: indicatorStyles }),
+    /* @__PURE__ */ jsxs4(
+      "select",
+      {
+        style: selectStyles,
+        value: network,
+        onChange: (e) => onNetworkChange(e.target.value),
+        children: [
+          /* @__PURE__ */ jsx5("option", { value: "mainnet", children: "Mainnet" }),
+          /* @__PURE__ */ jsx5("option", { value: "testnet", children: "Testnet" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  AddressDisplay,
+  MovementContext,
+  MovementProvider,
+  NetworkSwitcher,
+  WalletButton,
+  WalletModal,
+  useBalance,
+  useContract,
+  useMovement,
+  useMovementContext,
+  useTransaction,
+  useWaitForTransaction
+};