@chipi-stack/chipi-react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,601 @@
+import React, { createContext, useContext, useState } from 'react';
+import { ChipiSDK } from '@chipi-stack/backend';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { formatAddress, formatCurrency } from '@chipi-stack/shared';
+
+// src/context/ChipiProvider.tsx
+var ChipiContext = createContext(null);
+function ChipiProvider({ children, config }) {
+  const chipiSDK = React.useMemo(() => new ChipiSDK(config), [config]);
+  const value = React.useMemo(
+    () => ({
+      chipiSDK,
+      config
+    }),
+    [chipiSDK, config]
+  );
+  return /* @__PURE__ */ jsx(ChipiContext.Provider, { value, children });
+}
+function useChipiContext() {
+  const context = useContext(ChipiContext);
+  if (!context) {
+    throw new Error("useChipiContext must be used within a ChipiProvider");
+  }
+  return context;
+}
+function useCreateWallet() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.createWallet(params)
+  });
+  return {
+    createWallet: mutation.mutate,
+    createWalletAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useWallets(params) {
+  const { chipiSDK } = useChipiContext();
+  const { enabled = true, ...queryParams } = params;
+  return useQuery({
+    queryKey: ["wallets", queryParams],
+    queryFn: () => chipiSDK.wallets.getWallets(queryParams),
+    enabled: enabled && !!queryParams.apiKeyId && !!queryParams.orgId
+  });
+}
+function useTransfer() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.transfer(params)
+  });
+  return {
+    transfer: mutation.mutate,
+    transferAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useApprove() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.approve(params)
+  });
+  return {
+    approve: mutation.mutate,
+    approveAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useExecuteTransaction() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.executeTransaction(params)
+  });
+  return {
+    executeTransaction: mutation.mutate,
+    executeTransactionAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useSkus(params = {}) {
+  const { chipiSDK } = useChipiContext();
+  const { enabled = true, ...queryParams } = params;
+  return useQuery({
+    queryKey: ["skus", queryParams],
+    queryFn: () => chipiSDK.skus.findSkus(queryParams),
+    enabled
+  });
+}
+function useSkuTransactions(params) {
+  const { chipiSDK } = useChipiContext();
+  const { enabled = true, walletAddress, ...queryParams } = params;
+  return useQuery({
+    queryKey: ["sku-transactions", { walletAddress, ...queryParams }],
+    queryFn: () => chipiSDK.skus.getSkuTransactionsByWallet(walletAddress, queryParams),
+    enabled: enabled && !!walletAddress
+  });
+}
+function usePurchaseSku() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.skus.purchaseSku(params)
+  });
+  return {
+    purchaseSku: mutation.mutate,
+    purchaseSkuAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useStakeVesuUsdc() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.stakeVesuUsdc(params)
+  });
+  return {
+    stakeVesuUsdc: mutation.mutate,
+    stakeVesuUsdcAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useWithdrawVesuUsdc() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.withdrawVesuUsdc(params)
+  });
+  return {
+    withdrawVesuUsdc: mutation.mutate,
+    withdrawVesuUsdcAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function useCallAnyContract() {
+  const { chipiSDK } = useChipiContext();
+  const mutation = useMutation({
+    mutationFn: (params) => chipiSDK.callAnyContract(params)
+  });
+  return {
+    callAnyContract: mutation.mutate,
+    callAnyContractAsync: mutation.mutateAsync,
+    data: mutation.data,
+    isLoading: mutation.isPending,
+    isError: mutation.isError,
+    error: mutation.error,
+    isSuccess: mutation.isSuccess,
+    reset: mutation.reset
+  };
+}
+function WalletCreator({ onWalletCreated, className, children }) {
+  const [encryptKey, setEncryptKey] = useState("");
+  const [bearerToken, setBearerToken] = useState("");
+  const { createWallet, isLoading, isError, error, data, isSuccess } = useCreateWallet();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!encryptKey || !bearerToken) return;
+    createWallet({
+      encryptKey,
+      bearerToken
+    });
+  };
+  React.useEffect(() => {
+    if (isSuccess && data && onWalletCreated) {
+      onWalletCreated(data);
+    }
+  }, [isSuccess, data, onWalletCreated]);
+  if (children) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("h2", { children: "Create Wallet" }),
+    isError && error && /* @__PURE__ */ jsxs("div", { style: { color: "red", marginBottom: "1rem" }, children: [
+      "Error: ",
+      error.message
+    ] }),
+    isSuccess && data && /* @__PURE__ */ jsxs("div", { style: { color: "green", marginBottom: "1rem" }, children: [
+      "Wallet created successfully! Address: ",
+      data.walletPublicKey
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "encryptKey", children: "Encrypt Key:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "encryptKey",
+            type: "password",
+            value: encryptKey,
+            onChange: (e) => setEncryptKey(e.target.value),
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "bearerToken", children: "Bearer Token:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "bearerToken",
+            type: "text",
+            value: bearerToken,
+            onChange: (e) => setBearerToken(e.target.value),
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: isLoading || !encryptKey || !bearerToken,
+          style: {
+            padding: "0.75rem 1.5rem",
+            backgroundColor: isLoading ? "#ccc" : "#007bff",
+            color: "white",
+            border: "none",
+            borderRadius: "0.25rem",
+            cursor: isLoading ? "not-allowed" : "pointer"
+          },
+          children: isLoading ? "Creating..." : "Create Wallet"
+        }
+      )
+    ] })
+  ] });
+}
+function WalletBalance({
+  address,
+  balance,
+  currency = "USD",
+  isLoading = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Wallet:" }),
+      " ",
+      formatAddress(address)
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("strong", { children: "Balance:" }),
+      " ",
+      isLoading ? /* @__PURE__ */ jsx("span", { children: "Loading..." }) : balance !== void 0 ? formatCurrency(balance, currency) : /* @__PURE__ */ jsx("span", { children: "--" })
+    ] })
+  ] });
+}
+function TransactionForm({
+  wallet,
+  encryptKey,
+  bearerToken,
+  onTransactionComplete,
+  className
+}) {
+  const [contractAddress, setContractAddress] = useState("");
+  const [recipient, setRecipient] = useState("");
+  const [amount, setAmount] = useState("");
+  const [decimals, setDecimals] = useState(18);
+  const { transfer, isLoading, isError, error, data, isSuccess } = useTransfer();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!contractAddress || !recipient || !amount) return;
+    transfer({
+      encryptKey,
+      wallet,
+      contractAddress,
+      recipient,
+      amount: parseFloat(amount),
+      decimals,
+      bearerToken
+    });
+  };
+  React.useEffect(() => {
+    if (isSuccess && data && onTransactionComplete) {
+      onTransactionComplete(data);
+    }
+  }, [isSuccess, data, onTransactionComplete]);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("h3", { children: "Transfer Tokens" }),
+    isError && error && /* @__PURE__ */ jsxs("div", { style: { color: "red", marginBottom: "1rem" }, children: [
+      "Error: ",
+      error.message
+    ] }),
+    isSuccess && data && /* @__PURE__ */ jsxs("div", { style: { color: "green", marginBottom: "1rem" }, children: [
+      "Transaction successful! Hash: ",
+      data
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "contractAddress", children: "Token Contract:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "contractAddress",
+            type: "text",
+            value: contractAddress,
+            onChange: (e) => setContractAddress(e.target.value),
+            placeholder: "0x...",
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "recipient", children: "Recipient:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "recipient",
+            type: "text",
+            value: recipient,
+            onChange: (e) => setRecipient(e.target.value),
+            placeholder: "0x...",
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "amount", children: "Amount:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "amount",
+            type: "number",
+            step: "any",
+            value: amount,
+            onChange: (e) => setAmount(e.target.value),
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "decimals", children: "Decimals:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "decimals",
+            type: "number",
+            value: decimals,
+            onChange: (e) => setDecimals(parseInt(e.target.value)),
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: isLoading || !contractAddress || !recipient || !amount,
+          style: {
+            padding: "0.75rem 1.5rem",
+            backgroundColor: isLoading ? "#ccc" : "#007bff",
+            color: "white",
+            border: "none",
+            borderRadius: "0.25rem",
+            cursor: isLoading ? "not-allowed" : "pointer"
+          },
+          children: isLoading ? "Sending..." : "Send Transaction"
+        }
+      )
+    ] })
+  ] });
+}
+function SkuList({ categories, onSkuSelect, className }) {
+  const { data: skus, isLoading, isError, error } = useSkus({ categories });
+  if (isLoading) {
+    return /* @__PURE__ */ jsx("div", { className, children: "Loading SKUs..." });
+  }
+  if (isError) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { style: { color: "red" }, children: [
+      "Error loading SKUs: ",
+      error?.message
+    ] }) });
+  }
+  if (!skus || skus.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { children: "No SKUs available." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("h3", { children: "Available SKUs" }),
+    /* @__PURE__ */ jsx("div", { style: { display: "grid", gap: "1rem", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))" }, children: skus.map((sku) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          border: "1px solid #ddd",
+          borderRadius: "0.5rem",
+          padding: "1rem",
+          backgroundColor: "white",
+          cursor: onSkuSelect ? "pointer" : "default"
+        },
+        onClick: () => onSkuSelect?.(sku),
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx("h4", { style: { margin: 0, fontSize: "1.1rem" }, children: sku.name }) }),
+          sku.description && /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.5rem", color: "#666", fontSize: "0.9rem" }, children: sku.description }),
+          /* @__PURE__ */ jsx("div", { style: { marginBottom: "0.5rem" }, children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              style: {
+                backgroundColor: "#f0f0f0",
+                padding: "0.25rem 0.5rem",
+                borderRadius: "0.25rem",
+                fontSize: "0.8rem",
+                color: "#666"
+              },
+              children: sku.category
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "1.2rem", fontWeight: "bold" }, children: formatCurrency(sku.price, sku.currency) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: {
+                  color: sku.isActive ? "green" : "red",
+                  fontSize: "0.9rem",
+                  fontWeight: "bold"
+                },
+                children: sku.isActive ? "Available" : "Unavailable"
+              }
+            )
+          ] })
+        ]
+      },
+      sku.id
+    )) })
+  ] });
+}
+function SkuPurchaseForm({
+  sku,
+  walletAddress,
+  onPurchaseComplete,
+  className
+}) {
+  const [chain, setChain] = useState("STARKNET_MAINNET");
+  const [chainToken, setChainToken] = useState("USDC");
+  const [reference, setReference] = useState("");
+  const [transactionHash, setTransactionHash] = useState("");
+  const { purchaseSku, isLoading, isError, error, data, isSuccess } = usePurchaseSku();
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!reference || !transactionHash) return;
+    purchaseSku({
+      skuId: sku.id,
+      walletAddress,
+      chain,
+      chainToken,
+      mxnAmount: sku.price,
+      reference,
+      transactionHash
+    });
+  };
+  React.useEffect(() => {
+    if (isSuccess && data && onPurchaseComplete) {
+      onPurchaseComplete(data.transaction.transactionHash);
+    }
+  }, [isSuccess, data, onPurchaseComplete]);
+  if (!sku.isActive) {
+    return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("div", { style: { color: "red", textAlign: "center", padding: "2rem" }, children: "This SKU is currently unavailable for purchase." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx("h3", { children: "Purchase SKU" }),
+    /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1.5rem", padding: "1rem", backgroundColor: "#f9f9f9", borderRadius: "0.5rem" }, children: [
+      /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 0.5rem 0" }, children: sku.name }),
+      sku.description && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 0.5rem 0", color: "#666" }, children: sku.description }),
+      /* @__PURE__ */ jsxs("div", { style: { fontSize: "1.2rem", fontWeight: "bold" }, children: [
+        "Price: ",
+        formatCurrency(sku.price, sku.currency)
+      ] })
+    ] }),
+    isError && error && /* @__PURE__ */ jsxs("div", { style: { color: "red", marginBottom: "1rem" }, children: [
+      "Error: ",
+      error.message
+    ] }),
+    isSuccess && data && /* @__PURE__ */ jsxs("div", { style: { color: "green", marginBottom: "1rem" }, children: [
+      "Purchase successful! Transaction: ",
+      data.transaction.transactionHash
+    ] }),
+    /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, children: [
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "chain", children: "Chain:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: "chain",
+            value: chain,
+            onChange: (e) => setChain(e.target.value),
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "STARKNET_MAINNET", children: "Starknet Mainnet" }),
+              /* @__PURE__ */ jsx("option", { value: "STARKNET_SEPOLIA", children: "Starknet Sepolia" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "chainToken", children: "Token:" }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            id: "chainToken",
+            value: chainToken,
+            onChange: (e) => setChainToken(e.target.value),
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" },
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "USDC", children: "USDC" }),
+              /* @__PURE__ */ jsx("option", { value: "USDT", children: "USDT" }),
+              /* @__PURE__ */ jsx("option", { value: "ETH", children: "ETH" }),
+              /* @__PURE__ */ jsx("option", { value: "STRK", children: "STRK" }),
+              /* @__PURE__ */ jsx("option", { value: "DAI", children: "DAI" })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "reference", children: "Reference:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "reference",
+            type: "text",
+            value: reference,
+            onChange: (e) => setReference(e.target.value),
+            placeholder: "Transaction reference",
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { marginBottom: "1rem" }, children: [
+        /* @__PURE__ */ jsx("label", { htmlFor: "transactionHash", children: "Transaction Hash:" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: "transactionHash",
+            type: "text",
+            value: transactionHash,
+            onChange: (e) => setTransactionHash(e.target.value),
+            placeholder: "0x...",
+            required: true,
+            style: { width: "100%", padding: "0.5rem", marginTop: "0.25rem" }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "submit",
+          disabled: isLoading || !reference || !transactionHash,
+          style: {
+            width: "100%",
+            padding: "0.75rem",
+            backgroundColor: isLoading ? "#ccc" : "#28a745",
+            color: "white",
+            border: "none",
+            borderRadius: "0.25rem",
+            fontSize: "1rem",
+            cursor: isLoading ? "not-allowed" : "pointer"
+          },
+          children: isLoading ? "Processing..." : `Purchase for ${formatCurrency(sku.price, sku.currency)}`
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ChipiProvider, SkuList, SkuPurchaseForm, TransactionForm, WalletBalance, WalletCreator, useApprove, useCallAnyContract, useChipiContext, useCreateWallet, useExecuteTransaction, usePurchaseSku, useSkuTransactions, useSkus, useStakeVesuUsdc, useTransfer, useWallets, useWithdrawVesuUsdc };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map