@dngbuilds/zapkit-react 0.0.1

package/dist/index.mjs

@@ -0,0 +1,473 @@
+import ZapKit, { Amount, BridgeToken, ChainId, ExternalChain, OnboardStrategy, StarkSigner, Tx, TxBuilder, accountPresets, fromAddress, getPresets } from "@dngbuilds/zapkit-core";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { QueryClient, QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/context.ts
+const ZapContext = createContext(void 0);
+/** Internal helper — throws a clear error outside ZapProvider */
+function useZapContext() {
+	const ctx = useContext(ZapContext);
+	if (!ctx) throw new Error("🚫 ZapKit: hook used outside <ZapProvider>. Wrap your app with <ZapProvider config={...}>.");
+	return ctx;
+}
+//#endregion
+//#region src/components/ZapDevPanel.tsx
+function ZapDevPanel({ error, status, address }) {
+	if (!error && status !== "error") return null;
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			position: "fixed",
+			bottom: 16,
+			right: 16,
+			zIndex: 9999,
+			maxWidth: 400,
+			background: "#1a1a1a",
+			color: "#ff4444",
+			borderRadius: 8,
+			padding: "12px 16px",
+			fontFamily: "monospace",
+			fontSize: 13,
+			boxShadow: "0 4px 24px rgba(0,0,0,0.4)",
+			border: "1px solid #ff4444"
+		},
+		children: [
+			/* @__PURE__ */ jsx("strong", { children: "⚡ ZapKit Dev Panel" }),
+			/* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: 8,
+					color: "#fff"
+				},
+				children: ["Status: ", /* @__PURE__ */ jsx("span", {
+					style: { color: status === "error" ? "#ff4444" : "#4caf50" },
+					children: status
+				})]
+			}),
+			address && /* @__PURE__ */ jsxs("div", {
+				style: {
+					color: "#aaa",
+					marginTop: 4
+				},
+				children: [
+					"Address: ",
+					address.slice(0, 10),
+					"…",
+					address.slice(-6)
+				]
+			}),
+			error && /* @__PURE__ */ jsxs("div", {
+				style: {
+					marginTop: 8,
+					color: "#ff4444",
+					wordBreak: "break-word"
+				},
+				children: ["Error: ", error.message]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/provider.tsx
+const STORAGE_KEY = "zapkit_wallet_connected";
+/** Default QueryClient config suitable for blockchain data: longer stale times, no window-focus refetch. */
+function createDefaultQueryClient() {
+	return new QueryClient$1({ defaultOptions: { queries: {
+		staleTime: 3e4,
+		gcTime: 5 * 6e4,
+		retry: 2,
+		refetchOnWindowFocus: false
+	} } });
+}
+/**
+* Root provider for @zapkit/react. Wrap your app (or a subtree) with this.
+*
+* @example
+* <ZapProvider config={{ network: "mainnet" }}>
+*   <App />
+* </ZapProvider>
+*/
+function ZapProvider({ config, queryClient: externalQC, showDevPanel = false, children }) {
+	const [internalQC] = useState(() => externalQC ?? createDefaultQueryClient());
+	return /* @__PURE__ */ jsx(QueryClientProvider, {
+		client: internalQC,
+		children: /* @__PURE__ */ jsx(ZapCore, {
+			config,
+			showDevPanel,
+			children
+		})
+	});
+}
+function ZapCore({ config, showDevPanel, children }) {
+	const [address, setAddress] = useState(null);
+	const [ens] = useState(null);
+	const [balances] = useState({});
+	const [status, setStatus] = useState("idle");
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const kitRef = useRef(null);
+	const [zapkit, setZapkit] = useState(null);
+	useEffect(() => {
+		if (!kitRef.current) {
+			kitRef.current = new ZapKit(config);
+			setZapkit(kitRef.current);
+		}
+	}, []);
+	/**
+	* Returns true when the thrown error should silently reset to idle without
+	* showing an error banner — covers user dismissal and transient init failures.
+	*
+	* @param isAutoReconnect — when true, also treat controller-init timeouts as
+	*   non-fatal (the page just loaded and the iframe wasn't ready).
+	*/
+	function isNonFatalError(err, isAutoReconnect = false) {
+		const msg = err.message.toLowerCase();
+		const name = (err.name ?? "").toLowerCase();
+		if (name === "usercancellederror" || name === "aborterror" || msg.includes("user closed") || msg.includes("user cancelled") || msg.includes("user canceled") || msg.includes("user rejected") || msg.includes("user denied") || msg.includes("user dismissed") || msg.includes("popup closed") || msg.includes("window closed")) return true;
+		if (isAutoReconnect && (msg.includes("cartridge controller failed to initialize") || msg.includes("controller failed to initialize"))) return true;
+		return false;
+	}
+	const connect = useCallback(async (options, { isAutoReconnect = false } = {}) => {
+		const kit = kitRef.current;
+		if (!kit) return;
+		setStatus("connecting");
+		setLoading(true);
+		setError(null);
+		try {
+			await kit.onboard(options);
+			setAddress(kit.getWallet()?.address ?? null);
+			setStatus("connected");
+			localStorage.setItem(STORAGE_KEY, options.strategy);
+		} catch (err) {
+			const e = err instanceof Error ? err : new Error(String(err));
+			if (isNonFatalError(e, isAutoReconnect)) {
+				localStorage.removeItem(STORAGE_KEY);
+				setStatus("idle");
+			} else {
+				setError(e);
+				setStatus("error");
+			}
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+	const disconnect = useCallback(async () => {
+		await kitRef.current?.disconnect();
+		setAddress(null);
+		setStatus("idle");
+		setError(null);
+		localStorage.removeItem(STORAGE_KEY);
+	}, []);
+	const ensureReady = useCallback(async () => {
+		const kit = kitRef.current;
+		if (!kit) return;
+		setLoading(true);
+		try {
+			await kit.ensureReady();
+		} catch (err) {
+			setError(err instanceof Error ? err : new Error(String(err)));
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+	useEffect(() => {
+		if (!zapkit) return;
+		if (localStorage.getItem(STORAGE_KEY) !== "cartridge") return;
+		const originalError = console.error.bind(console);
+		console.error = (...args) => {
+			const msg = typeof args[0] === "string" ? args[0] : "";
+			if (msg.includes("Failed to fetch price for") || msg.includes("Insufficient liquidity in the routes")) return;
+			originalError(...args);
+		};
+		connect({ strategy: "cartridge" }, { isAutoReconnect: true }).finally(() => {
+			console.error = originalError;
+		});
+	}, [zapkit]);
+	const wallet = useMemo(() => ({
+		address,
+		ens,
+		balances,
+		status,
+		connect,
+		disconnect,
+		ensureReady,
+		loading,
+		error
+	}), [
+		address,
+		ens,
+		balances,
+		status,
+		connect,
+		disconnect,
+		ensureReady,
+		loading,
+		error
+	]);
+	const value = useMemo(() => ({
+		zapkit,
+		wallet,
+		showDevPanel
+	}), [
+		zapkit,
+		wallet,
+		showDevPanel
+	]);
+	return /* @__PURE__ */ jsxs(ZapContext.Provider, {
+		value,
+		children: [children, showDevPanel && /* @__PURE__ */ jsx(ZapDevPanel, {
+			error,
+			status,
+			address
+		})]
+	});
+}
+//#endregion
+//#region src/hooks/useZapKit.ts
+/** Returns the raw ZapKit instance. Prefer domain hooks (useWallet, useLending…) when possible. */
+function useZapKit() {
+	return useZapContext().zapkit;
+}
+//#endregion
+//#region src/hooks/useWallet.ts
+/**
+* Returns wallet state and actions: address, status, connect, disconnect, ensureReady, loading, error.
+*
+* @example
+* const { address, connect, status } = useWallet();
+*/
+function useWallet() {
+	return useZapContext().wallet;
+}
+//#endregion
+//#region src/hooks/useLending.ts
+/**
+* Lending actions via the connected wallet's lending interface.
+* Uses TanStack Query `useMutation` for loading/error state.
+*
+* @example
+* const { deposit, withdraw, isPending, error } = useLending();
+* await deposit({ token, amount });
+*/
+function useLending() {
+	const { zapkit } = useZapContext();
+	const depositMutation = useMutation({ mutationFn: async (params) => {
+		const wallet = zapkit?.getWallet();
+		if (!wallet) throw new Error("Wallet not connected.");
+		const tx = await wallet.lending().deposit(params);
+		await tx.wait();
+		return tx;
+	} });
+	const withdrawMutation = useMutation({ mutationFn: async (params) => {
+		const wallet = zapkit?.getWallet();
+		if (!wallet) throw new Error("Wallet not connected.");
+		const tx = await wallet.lending().withdraw(params);
+		await tx.wait();
+		return tx;
+	} });
+	const isPending = depositMutation.isPending || withdrawMutation.isPending;
+	const error = depositMutation.error ?? withdrawMutation.error;
+	return {
+		deposit: depositMutation.mutateAsync,
+		withdraw: withdrawMutation.mutateAsync,
+		depositMutation,
+		withdrawMutation,
+		isPending,
+		error,
+		reset: () => {
+			depositMutation.reset();
+			withdrawMutation.reset();
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useSwap.ts
+/**
+* Swap action — currently a placeholder until ZapKit core exposes
+* an AVNU/Ekubo swap shortcut. Powered by TanStack Query `useMutation`.
+*
+* @example
+* const { swap, isPending, error } = useSwap();
+* await swap(params);
+*/
+function useSwap() {
+	const { zapkit } = useZapContext();
+	const swapMutation = useMutation({ mutationFn: async (_params) => {
+		if (!zapkit) throw new Error("Wallet not connected.");
+		throw new Error("Swap not yet available. Use wallet.execute() directly via useZapKit().");
+	} });
+	return {
+		swap: swapMutation.mutateAsync,
+		swapMutation,
+		isPending: swapMutation.isPending,
+		isError: swapMutation.isError,
+		error: swapMutation.error,
+		reset: swapMutation.reset
+	};
+}
+//#endregion
+//#region src/hooks/useStaking.ts
+/**
+* Staking actions and pool data, powered by TanStack Query.
+*
+* @example
+* const { stake, claimRewards, isPending, error } = useStaking();
+* await stake({ poolAddress, amount });
+*/
+function useStaking() {
+	const { zapkit } = useZapContext();
+	const address = (zapkit?.getWallet())?.account?.address;
+	const stakingTokensQuery = useQuery({
+		queryKey: ["zapkit", "stakingTokens"],
+		queryFn: () => zapkit.stakingTokens(),
+		enabled: !!zapkit
+	});
+	const stakerPoolsQuery = useQuery({
+		queryKey: [
+			"zapkit",
+			"stakerPools",
+			address
+		],
+		queryFn: () => zapkit.getStakerPools(address),
+		enabled: !!zapkit && !!address
+	});
+	const stakeMutation = useMutation({ mutationFn: (params) => {
+		if (!zapkit) throw new Error("Wallet not connected.");
+		return zapkit.stake(params);
+	} });
+	const claimMutation = useMutation({ mutationFn: (poolAddress) => {
+		if (!zapkit) throw new Error("Wallet not connected.");
+		return zapkit.claimRewards(poolAddress);
+	} });
+	const isPending = stakeMutation.isPending || claimMutation.isPending;
+	const error = stakeMutation.error ?? claimMutation.error;
+	return {
+		stake: stakeMutation.mutateAsync,
+		claimRewards: claimMutation.mutateAsync,
+		stakeMutation,
+		claimMutation,
+		isPending,
+		error,
+		reset: () => {
+			stakeMutation.reset();
+			claimMutation.reset();
+		},
+		stakingTokens: stakingTokensQuery.data,
+		stakerPools: stakerPoolsQuery.data,
+		isLoading: stakingTokensQuery.isLoading || stakerPoolsQuery.isLoading
+	};
+}
+//#endregion
+//#region src/hooks/useBalance.ts
+/**
+* Fetches a token balance for the connected wallet.
+* Refreshes every 30 s while mounted.
+*
+* @example
+* const { data: balance, isLoading } = useBalance("STRK");
+*/
+function useBalance(token) {
+	const { zapkit } = useZapContext();
+	return useQuery({
+		queryKey: [
+			"zapkit",
+			"balance",
+			token
+		],
+		queryFn: () => zapkit.getBalance(token),
+		enabled: !!zapkit,
+		refetchInterval: 3e4
+	});
+}
+//#endregion
+//#region src/hooks/useBridgingTokens.ts
+/**
+* Fetches the list of bridging tokens via TanStack Query.
+*
+* @example
+* const { data: tokens, isLoading } = useBridgingTokens();
+* const { data: ethTokens } = useBridgingTokens("ethereum");
+*/
+function useBridgingTokens(chain) {
+	const { zapkit } = useZapContext();
+	return useQuery({
+		queryKey: [
+			"zapkit",
+			"bridgingTokens",
+			chain
+		],
+		queryFn: () => zapkit.getBridgingTokens(chain),
+		enabled: !!zapkit,
+		staleTime: 6e4
+	});
+}
+//#endregion
+//#region src/hooks/useStakingPools.ts
+/**
+* Fetches staking token list and pools for a given staker address.
+*
+* @example
+* const { pools, stakingTokens, isLoading } = useStakingPools("0x049d36…");
+* // Or use the connected wallet address automatically:
+* const { pools, stakingTokens } = useStakingPools();
+*/
+function useStakingPools(stakerAddress) {
+	const { zapkit, wallet } = useZapContext();
+	const resolvedAddress = stakerAddress ?? wallet.address;
+	const stakingTokensQuery = useQuery({
+		queryKey: ["zapkit", "stakingTokens"],
+		queryFn: () => zapkit.stakingTokens(),
+		enabled: !!zapkit,
+		staleTime: 6e4
+	});
+	const stakerPoolsQuery = useQuery({
+		queryKey: [
+			"zapkit",
+			"stakerPools",
+			resolvedAddress
+		],
+		queryFn: () => zapkit.getStakerPools(resolvedAddress),
+		enabled: !!zapkit && !!resolvedAddress,
+		staleTime: 3e4
+	});
+	return {
+		stakingTokens: stakingTokensQuery.data,
+		pools: stakerPoolsQuery.data,
+		isLoading: stakingTokensQuery.isLoading || stakerPoolsQuery.isLoading,
+		isError: stakingTokensQuery.isError || stakerPoolsQuery.isError,
+		error: stakingTokensQuery.error ?? stakerPoolsQuery.error,
+		stakingTokensQuery,
+		stakerPoolsQuery
+	};
+}
+//#endregion
+//#region src/queryClient.ts
+/**
+* Creates a pre-configured `QueryClient` suitable for ZapKit blockchain queries.
+*
+* Sensible defaults:
+* - `staleTime`: 30 s (blocks don't update instantly)
+* - `gcTime`: 5 min
+* - `retry`: 2
+* - `refetchOnWindowFocus`: false (avoids noisy refetches on tab switch)
+*
+* Pass to `<QueryClientProvider>` when you want to share a single client
+* across your app AND ZapKit:
+*
+* @example
+* const queryClient = createZapQueryClient();
+*
+* <QueryClientProvider client={queryClient}>
+*   <ZapProvider config={config} queryClient={queryClient}>
+*     <App />
+*   </ZapProvider>
+* </QueryClientProvider>
+*/
+function createZapQueryClient() {
+	return new QueryClient({ defaultOptions: { queries: {
+		staleTime: 3e4,
+		gcTime: 5 * 6e4,
+		retry: 2,
+		refetchOnWindowFocus: false
+	} } });
+}
+//#endregion
+export { Amount, BridgeToken, ChainId, ExternalChain, OnboardStrategy, QueryClient, StarkSigner, Tx, TxBuilder, ZapContext, ZapDevPanel, ZapProvider, accountPresets, createZapQueryClient, fromAddress, getPresets, useBalance, useBridgingTokens, useLending, useStaking, useStakingPools, useSwap, useWallet, useZapContext, useZapKit };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@dngbuilds/zapkit-react",
+  "version": "0.0.1",
+  "description": "Zapkit React package.",
+  "homepage": "",
+  "bugs": {
+    "url": ""
+  },
+  "license": "MIT",
+  "author": "DngBuilds <dng.builds@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/author/library.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.mjs",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vp pack",
+    "dev": "vp pack --watch",
+    "test": "vp test",
+    "check": "vp check",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "catalog:",
+    "@dngbuilds/zapkit-core": "workspace:*",
+    "react": "catalog:",
+    "react-dom": "catalog:"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "@types/react": "catalog:",
+    "@typescript/native-preview": "7.0.0-dev.20260316.1",
+    "bumpp": "^11.0.1",
+    "typescript": "^5.9.3",
+    "vite-plus": "^0.1.11"
+  },
+  "inlinedDependencies": {
+    "@noble/curves": "1.7.0",
+    "@starknet-io/types-js": [
+      "0.10.0",
+      "0.9.2"
+    ],
+    "starknet": "9.4.2",
+    "starkzap": "2.0.0",
+    "ts-mixer": "6.0.4"
+  }
+}