@futurekode/stablepay-react 0.1.0

package/README.md

@@ -0,0 +1,19 @@
+# @futurekode/stablepay-react
+
+A headless React wrapper for accepting USDC payments on Solana.
+
+## Why
+
+Crypto payments are often too complex or too opinionated.
+
+StablePay strips it down to the essentials:
+
+- one package
+- one provider
+- one wrapper
+
+## Install
+
+```bash
+npm install @futurekode/stablepay-react
+```

package/dist/index.d.mts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type StablePaySuccessPayload = {
+    signature: string;
+    amount: number;
+    to: string;
+};
+type StablePayPayArgs = {
+    amount: number;
+    to: string;
+};
+type StablePayProviderProps = {
+    children: React.ReactNode;
+    endpoint?: string;
+};
+type StablePayProps = {
+    amount: number;
+    to: string;
+    children: React.ReactElement;
+    onSuccess?: (payload: StablePaySuccessPayload) => void;
+    onError?: (error: Error) => void;
+};
+type UseStablePayResult = {
+    pay: (args: StablePayPayArgs) => Promise<string>;
+    loading: boolean;
+    error: Error | null;
+    signature: string | null;
+};
+
+declare function StablePayProvider({ children, endpoint, }: StablePayProviderProps): react_jsx_runtime.JSX.Element;
+
+type ClickableChildProps = {
+    onClick?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    "aria-busy"?: boolean;
+    "data-stablepay-loading"?: string;
+};
+declare function StablePay({ amount, to, children, onSuccess, onError, }: StablePayProps): React.ReactElement<ClickableChildProps, string | React.JSXElementConstructor<any>>;
+
+declare function useStablePay(): UseStablePayResult;
+
+export { StablePay, type StablePayPayArgs, type StablePayProps, StablePayProvider, type StablePayProviderProps, type StablePaySuccessPayload, type UseStablePayResult, useStablePay };

package/dist/index.d.ts

@@ -0,0 +1,43 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type StablePaySuccessPayload = {
+    signature: string;
+    amount: number;
+    to: string;
+};
+type StablePayPayArgs = {
+    amount: number;
+    to: string;
+};
+type StablePayProviderProps = {
+    children: React.ReactNode;
+    endpoint?: string;
+};
+type StablePayProps = {
+    amount: number;
+    to: string;
+    children: React.ReactElement;
+    onSuccess?: (payload: StablePaySuccessPayload) => void;
+    onError?: (error: Error) => void;
+};
+type UseStablePayResult = {
+    pay: (args: StablePayPayArgs) => Promise<string>;
+    loading: boolean;
+    error: Error | null;
+    signature: string | null;
+};
+
+declare function StablePayProvider({ children, endpoint, }: StablePayProviderProps): react_jsx_runtime.JSX.Element;
+
+type ClickableChildProps = {
+    onClick?: (event: React.MouseEvent) => void;
+    disabled?: boolean;
+    "aria-busy"?: boolean;
+    "data-stablepay-loading"?: string;
+};
+declare function StablePay({ amount, to, children, onSuccess, onError, }: StablePayProps): React.ReactElement<ClickableChildProps, string | React.JSXElementConstructor<any>>;
+
+declare function useStablePay(): UseStablePayResult;
+
+export { StablePay, type StablePayPayArgs, type StablePayProps, StablePayProvider, type StablePayProviderProps, type StablePaySuccessPayload, type UseStablePayResult, useStablePay };

package/dist/index.js

@@ -0,0 +1,198 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  StablePay: () => StablePay,
+  StablePayProvider: () => StablePayProvider,
+  useStablePay: () => useStablePay
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider/StablePayProvider.tsx
+var import_react = require("react");
+var import_wallet_adapter_react = require("@solana/wallet-adapter-react");
+var import_wallet_adapter_react_ui = require("@solana/wallet-adapter-react-ui");
+var import_wallet_adapter_wallets = require("@solana/wallet-adapter-wallets");
+var import_styles = require("@solana/wallet-adapter-react-ui/styles.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+function StablePayProvider({
+  children,
+  endpoint = "https://api.mainnet-beta.solana.com"
+}) {
+  const wallets = (0, import_react.useMemo)(
+    () => [new import_wallet_adapter_wallets.PhantomWalletAdapter(), new import_wallet_adapter_wallets.SolflareWalletAdapter()],
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.ConnectionProvider, { endpoint, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react.WalletProvider, { wallets, autoConnect: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_wallet_adapter_react_ui.WalletModalProvider, { children }) }) });
+}
+
+// src/components/StablePay.tsx
+var import_react3 = __toESM(require("react"));
+
+// src/hooks/useStablePay.ts
+var import_react2 = require("react");
+var import_web32 = require("@solana/web3.js");
+var import_wallet_adapter_react2 = require("@solana/wallet-adapter-react");
+var import_wallet_adapter_react_ui2 = require("@solana/wallet-adapter-react-ui");
+
+// src/solana/buildUsdcTransfer.ts
+var import_web3 = require("@solana/web3.js");
+var import_spl_token = require("@solana/spl-token");
+
+// src/solana/constants.ts
+var USDC_MINT = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+var USDC_DECIMALS = 6;
+
+// src/solana/amount.ts
+function toTokenBaseUnits(amount) {
+  if (!Number.isFinite(amount) || amount <= 0) {
+    throw new Error("Amount must be a positive number");
+  }
+  const multiplier = 10 ** USDC_DECIMALS;
+  return BigInt(Math.round(amount * multiplier));
+}
+
+// src/solana/buildUsdcTransfer.ts
+async function buildUsdcTransfer({
+  connection,
+  fromWallet,
+  toWallet,
+  amount
+}) {
+  const mint = new import_web3.PublicKey(USDC_MINT);
+  const fromAta = await (0, import_spl_token.getAssociatedTokenAddress)(mint, fromWallet);
+  const toAta = await (0, import_spl_token.getAssociatedTokenAddress)(mint, toWallet);
+  const tx = new import_web3.Transaction();
+  const toAtaInfo = await connection.getAccountInfo(toAta);
+  if (!toAtaInfo) {
+    tx.add(
+      (0, import_spl_token.createAssociatedTokenAccountInstruction)(fromWallet, toAta, toWallet, mint)
+    );
+  }
+  tx.add(
+    (0, import_spl_token.createTransferCheckedInstruction)(
+      fromAta,
+      mint,
+      toAta,
+      fromWallet,
+      Number(toTokenBaseUnits(amount)),
+      USDC_DECIMALS,
+      [],
+      import_spl_token.TOKEN_PROGRAM_ID
+    )
+  );
+  const latestBlockhash = await connection.getLatestBlockhash();
+  tx.feePayer = fromWallet;
+  tx.recentBlockhash = latestBlockhash.blockhash;
+  return tx;
+}
+
+// src/hooks/useStablePay.ts
+function useStablePay() {
+  const { connection } = (0, import_wallet_adapter_react2.useConnection)();
+  const { connected, publicKey, sendTransaction, connect } = (0, import_wallet_adapter_react2.useWallet)();
+  const { setVisible } = (0, import_wallet_adapter_react_ui2.useWalletModal)();
+  const [loading, setLoading] = (0, import_react2.useState)(false);
+  const [signature, setSignature] = (0, import_react2.useState)(null);
+  const [error, setError] = (0, import_react2.useState)(null);
+  const pay = (0, import_react2.useCallback)(
+    async ({ amount, to }) => {
+      setLoading(true);
+      setSignature(null);
+      setError(null);
+      try {
+        if (!connected) {
+          setVisible(true);
+          await connect();
+        }
+        if (!publicKey) {
+          throw new Error("Wallet not connected");
+        }
+        const recipient = new import_web32.PublicKey(to);
+        const transaction = await buildUsdcTransfer({
+          connection,
+          fromWallet: publicKey,
+          toWallet: recipient,
+          amount
+        });
+        const sig = await sendTransaction(transaction, connection);
+        await connection.confirmTransaction(sig, "confirmed");
+        setSignature(sig);
+        return sig;
+      } catch (err) {
+        const normalized = err instanceof Error ? err : new Error("Payment failed");
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [connected, publicKey, sendTransaction, connection, connect, setVisible]
+  );
+  return { pay, loading, error, signature };
+}
+
+// src/components/StablePay.tsx
+function StablePay({
+  amount,
+  to,
+  children,
+  onSuccess,
+  onError
+}) {
+  const { pay, loading } = useStablePay();
+  if (!import_react3.default.isValidElement(children)) {
+    throw new Error("StablePay expects a single React element child.");
+  }
+  async function handleClick(event) {
+    try {
+      children.props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const signature = await pay({ amount, to });
+      onSuccess?.({ signature, amount, to });
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error("Payment failed"));
+    }
+  }
+  return import_react3.default.cloneElement(children, {
+    onClick: handleClick,
+    disabled: Boolean(children.props.disabled) || loading,
+    "aria-busy": loading,
+    "data-stablepay-loading": loading ? "true" : "false"
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StablePay,
+  StablePayProvider,
+  useStablePay
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/provider/StablePayProvider.tsx","../src/components/StablePay.tsx","../src/hooks/useStablePay.ts","../src/solana/buildUsdcTransfer.ts","../src/solana/constants.ts","../src/solana/amount.ts"],"sourcesContent":["export { StablePayProvider } from \"./provider/StablePayProvider\";\nexport { StablePay } from \"./components/StablePay\";\nexport { useStablePay } from \"./hooks/useStablePay\";\nexport type {\n  StablePayProps,\n  StablePayProviderProps,\n  StablePaySuccessPayload,\n  StablePayPayArgs,\n  UseStablePayResult,\n} from \"./types\";\n","import React, { useMemo } from \"react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from \"@solana/wallet-adapter-wallets\";\nimport type { StablePayProviderProps } from \"../types\";\n\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\n\nexport function StablePayProvider({\n  children,\n  endpoint = \"https://api.mainnet-beta.solana.com\",\n}: StablePayProviderProps) {\n  const wallets = useMemo(\n    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],\n    []\n  );\n\n  return (\n    <ConnectionProvider endpoint={endpoint}>\n      <WalletProvider wallets={wallets} autoConnect>\n        <WalletModalProvider>{children}</WalletModalProvider>\n      </WalletProvider>\n    </ConnectionProvider>\n  );\n}\n","import React from \"react\";\nimport { useStablePay } from \"../hooks/useStablePay\";\nimport type { StablePayProps } from \"../types\";\n\ntype ClickableChildProps = {\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n  \"aria-busy\"?: boolean;\n  \"data-stablepay-loading\"?: string;\n};\n\nexport function StablePay({\n  amount,\n  to,\n  children,\n  onSuccess,\n  onError,\n}: StablePayProps) {\n  const { pay, loading } = useStablePay();\n\n  if (!React.isValidElement<ClickableChildProps>(children)) {\n    throw new Error(\"StablePay expects a single React element child.\");\n  }\n\n  async function handleClick(event: React.MouseEvent) {\n    try {\n      children.props.onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      const signature = await pay({ amount, to });\n      onSuccess?.({ signature, amount, to });\n    } catch (err) {\n      onError?.(err instanceof Error ? err : new Error(\"Payment failed\"));\n    }\n  }\n\n  return React.cloneElement(children, {\n    onClick: handleClick,\n    disabled: Boolean(children.props.disabled) || loading,\n    \"aria-busy\": loading,\n    \"data-stablepay-loading\": loading ? \"true\" : \"false\",\n  });\n}\n","import { useCallback, useState } from \"react\";\nimport { PublicKey } from \"@solana/web3.js\";\nimport { useConnection, useWallet } from \"@solana/wallet-adapter-react\";\nimport { useWalletModal } from \"@solana/wallet-adapter-react-ui\";\nimport { buildUsdcTransfer } from \"../solana/buildUsdcTransfer\";\nimport type { StablePayPayArgs, UseStablePayResult } from \"../types\";\n\nexport function useStablePay(): UseStablePayResult {\n  const { connection } = useConnection();\n  const { connected, publicKey, sendTransaction, connect } = useWallet();\n  const { setVisible } = useWalletModal();\n\n  const [loading, setLoading] = useState(false);\n  const [signature, setSignature] = useState<string | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  const pay = useCallback(\n    async ({ amount, to }: StablePayPayArgs) => {\n      setLoading(true);\n      setSignature(null);\n      setError(null);\n\n      try {\n        if (!connected) {\n          setVisible(true);\n          await connect();\n        }\n\n        if (!publicKey) {\n          throw new Error(\"Wallet not connected\");\n        }\n\n        const recipient = new PublicKey(to);\n        const transaction = await buildUsdcTransfer({\n          connection,\n          fromWallet: publicKey,\n          toWallet: recipient,\n          amount,\n        });\n\n        const sig = await sendTransaction(transaction, connection);\n        await connection.confirmTransaction(sig, \"confirmed\");\n\n        setSignature(sig);\n        return sig;\n      } catch (err) {\n        const normalized =\n          err instanceof Error ? err : new Error(\"Payment failed\");\n        setError(normalized);\n        throw normalized;\n      } finally {\n        setLoading(false);\n      }\n    },\n    [connected, publicKey, sendTransaction, connection, connect, setVisible],\n  );\n\n  return { pay, loading, error, signature };\n}\n","import { Connection, PublicKey, Transaction } from \"@solana/web3.js\";\nimport {\n  TOKEN_PROGRAM_ID,\n  createAssociatedTokenAccountInstruction,\n  createTransferCheckedInstruction,\n  getAssociatedTokenAddress,\n} from \"@solana/spl-token\";\nimport { toTokenBaseUnits } from \"./amount\";\nimport { USDC_DECIMALS, USDC_MINT } from \"./constants\";\n\ntype BuildUsdcTransferParams = {\n  connection: Connection;\n  fromWallet: PublicKey;\n  toWallet: PublicKey;\n  amount: number;\n};\n\nexport async function buildUsdcTransfer({\n  connection,\n  fromWallet,\n  toWallet,\n  amount,\n}: BuildUsdcTransferParams) {\n  const mint = new PublicKey(USDC_MINT);\n  const fromAta = await getAssociatedTokenAddress(mint, fromWallet);\n  const toAta = await getAssociatedTokenAddress(mint, toWallet);\n\n  const tx = new Transaction();\n  const toAtaInfo = await connection.getAccountInfo(toAta);\n\n  if (!toAtaInfo) {\n    tx.add(\n      createAssociatedTokenAccountInstruction(fromWallet, toAta, toWallet, mint)\n    );\n  }\n\n  tx.add(\n    createTransferCheckedInstruction(\n      fromAta,\n      mint,\n      toAta,\n      fromWallet,\n      Number(toTokenBaseUnits(amount)),\n      USDC_DECIMALS,\n      [],\n      TOKEN_PROGRAM_ID\n    )\n  );\n\n  const latestBlockhash = await connection.getLatestBlockhash();\n  tx.feePayer = fromWallet;\n  tx.recentBlockhash = latestBlockhash.blockhash;\n\n  return tx;\n}\n","export const USDC_MINT = \"EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v\";\nexport const USDC_DECIMALS = 6;\n","import { USDC_DECIMALS } from \"./constants\";\n\nexport function toTokenBaseUnits(amount: number): bigint {\n  if (!Number.isFinite(amount) || amount <= 0) {\n    throw new Error(\"Amount must be a positive number\");\n  }\n\n  const multiplier = 10 ** USDC_DECIMALS;\n  return BigInt(Math.round(amount * multiplier));\n}\n"],"mappings":"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","names":["import_react","import_react","import_web3","import_wallet_adapter_react","import_wallet_adapter_react_ui","React"]}

package/dist/index.mjs

@@ -0,0 +1,164 @@
+// src/provider/StablePayProvider.tsx
+import { useMemo } from "react";
+import { ConnectionProvider, WalletProvider } from "@solana/wallet-adapter-react";
+import { WalletModalProvider } from "@solana/wallet-adapter-react-ui";
+import { PhantomWalletAdapter, SolflareWalletAdapter } from "@solana/wallet-adapter-wallets";
+import "@solana/wallet-adapter-react-ui/styles.css";
+import { jsx } from "react/jsx-runtime";
+function StablePayProvider({
+  children,
+  endpoint = "https://api.mainnet-beta.solana.com"
+}) {
+  const wallets = useMemo(
+    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
+    []
+  );
+  return /* @__PURE__ */ jsx(ConnectionProvider, { endpoint, children: /* @__PURE__ */ jsx(WalletProvider, { wallets, autoConnect: true, children: /* @__PURE__ */ jsx(WalletModalProvider, { children }) }) });
+}
+
+// src/components/StablePay.tsx
+import React2 from "react";
+
+// src/hooks/useStablePay.ts
+import { useCallback, useState } from "react";
+import { PublicKey as PublicKey2 } from "@solana/web3.js";
+import { useConnection, useWallet } from "@solana/wallet-adapter-react";
+import { useWalletModal } from "@solana/wallet-adapter-react-ui";
+
+// src/solana/buildUsdcTransfer.ts
+import { PublicKey, Transaction } from "@solana/web3.js";
+import {
+  TOKEN_PROGRAM_ID,
+  createAssociatedTokenAccountInstruction,
+  createTransferCheckedInstruction,
+  getAssociatedTokenAddress
+} from "@solana/spl-token";
+
+// src/solana/constants.ts
+var USDC_MINT = "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v";
+var USDC_DECIMALS = 6;
+
+// src/solana/amount.ts
+function toTokenBaseUnits(amount) {
+  if (!Number.isFinite(amount) || amount <= 0) {
+    throw new Error("Amount must be a positive number");
+  }
+  const multiplier = 10 ** USDC_DECIMALS;
+  return BigInt(Math.round(amount * multiplier));
+}
+
+// src/solana/buildUsdcTransfer.ts
+async function buildUsdcTransfer({
+  connection,
+  fromWallet,
+  toWallet,
+  amount
+}) {
+  const mint = new PublicKey(USDC_MINT);
+  const fromAta = await getAssociatedTokenAddress(mint, fromWallet);
+  const toAta = await getAssociatedTokenAddress(mint, toWallet);
+  const tx = new Transaction();
+  const toAtaInfo = await connection.getAccountInfo(toAta);
+  if (!toAtaInfo) {
+    tx.add(
+      createAssociatedTokenAccountInstruction(fromWallet, toAta, toWallet, mint)
+    );
+  }
+  tx.add(
+    createTransferCheckedInstruction(
+      fromAta,
+      mint,
+      toAta,
+      fromWallet,
+      Number(toTokenBaseUnits(amount)),
+      USDC_DECIMALS,
+      [],
+      TOKEN_PROGRAM_ID
+    )
+  );
+  const latestBlockhash = await connection.getLatestBlockhash();
+  tx.feePayer = fromWallet;
+  tx.recentBlockhash = latestBlockhash.blockhash;
+  return tx;
+}
+
+// src/hooks/useStablePay.ts
+function useStablePay() {
+  const { connection } = useConnection();
+  const { connected, publicKey, sendTransaction, connect } = useWallet();
+  const { setVisible } = useWalletModal();
+  const [loading, setLoading] = useState(false);
+  const [signature, setSignature] = useState(null);
+  const [error, setError] = useState(null);
+  const pay = useCallback(
+    async ({ amount, to }) => {
+      setLoading(true);
+      setSignature(null);
+      setError(null);
+      try {
+        if (!connected) {
+          setVisible(true);
+          await connect();
+        }
+        if (!publicKey) {
+          throw new Error("Wallet not connected");
+        }
+        const recipient = new PublicKey2(to);
+        const transaction = await buildUsdcTransfer({
+          connection,
+          fromWallet: publicKey,
+          toWallet: recipient,
+          amount
+        });
+        const sig = await sendTransaction(transaction, connection);
+        await connection.confirmTransaction(sig, "confirmed");
+        setSignature(sig);
+        return sig;
+      } catch (err) {
+        const normalized = err instanceof Error ? err : new Error("Payment failed");
+        setError(normalized);
+        throw normalized;
+      } finally {
+        setLoading(false);
+      }
+    },
+    [connected, publicKey, sendTransaction, connection, connect, setVisible]
+  );
+  return { pay, loading, error, signature };
+}
+
+// src/components/StablePay.tsx
+function StablePay({
+  amount,
+  to,
+  children,
+  onSuccess,
+  onError
+}) {
+  const { pay, loading } = useStablePay();
+  if (!React2.isValidElement(children)) {
+    throw new Error("StablePay expects a single React element child.");
+  }
+  async function handleClick(event) {
+    try {
+      children.props.onClick?.(event);
+      if (event.defaultPrevented) return;
+      const signature = await pay({ amount, to });
+      onSuccess?.({ signature, amount, to });
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error("Payment failed"));
+    }
+  }
+  return React2.cloneElement(children, {
+    onClick: handleClick,
+    disabled: Boolean(children.props.disabled) || loading,
+    "aria-busy": loading,
+    "data-stablepay-loading": loading ? "true" : "false"
+  });
+}
+export {
+  StablePay,
+  StablePayProvider,
+  useStablePay
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/provider/StablePayProvider.tsx","../src/components/StablePay.tsx","../src/hooks/useStablePay.ts","../src/solana/buildUsdcTransfer.ts","../src/solana/constants.ts","../src/solana/amount.ts"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { ConnectionProvider, WalletProvider } from \"@solana/wallet-adapter-react\";\nimport { WalletModalProvider } from \"@solana/wallet-adapter-react-ui\";\nimport { PhantomWalletAdapter, SolflareWalletAdapter } from \"@solana/wallet-adapter-wallets\";\nimport type { StablePayProviderProps } from \"../types\";\n\nimport \"@solana/wallet-adapter-react-ui/styles.css\";\n\nexport function StablePayProvider({\n  children,\n  endpoint = \"https://api.mainnet-beta.solana.com\",\n}: StablePayProviderProps) {\n  const wallets = useMemo(\n    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],\n    []\n  );\n\n  return (\n    <ConnectionProvider endpoint={endpoint}>\n      <WalletProvider wallets={wallets} autoConnect>\n        <WalletModalProvider>{children}</WalletModalProvider>\n      </WalletProvider>\n    </ConnectionProvider>\n  );\n}\n","import React from \"react\";\nimport { useStablePay } from \"../hooks/useStablePay\";\nimport type { StablePayProps } from \"../types\";\n\ntype ClickableChildProps = {\n  onClick?: (event: React.MouseEvent) => void;\n  disabled?: boolean;\n  \"aria-busy\"?: boolean;\n  \"data-stablepay-loading\"?: string;\n};\n\nexport function StablePay({\n  amount,\n  to,\n  children,\n  onSuccess,\n  onError,\n}: StablePayProps) {\n  const { pay, loading } = useStablePay();\n\n  if (!React.isValidElement<ClickableChildProps>(children)) {\n    throw new Error(\"StablePay expects a single React element child.\");\n  }\n\n  async function handleClick(event: React.MouseEvent) {\n    try {\n      children.props.onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      const signature = await pay({ amount, to });\n      onSuccess?.({ signature, amount, to });\n    } catch (err) {\n      onError?.(err instanceof Error ? err : new Error(\"Payment failed\"));\n    }\n  }\n\n  return React.cloneElement(children, {\n    onClick: handleClick,\n    disabled: Boolean(children.props.disabled) || loading,\n    \"aria-busy\": loading,\n    \"data-stablepay-loading\": loading ? \"true\" : \"false\",\n  });\n}\n","import { useCallback, useState } from \"react\";\nimport { PublicKey } from \"@solana/web3.js\";\nimport { useConnection, useWallet } from \"@solana/wallet-adapter-react\";\nimport { useWalletModal } from \"@solana/wallet-adapter-react-ui\";\nimport { buildUsdcTransfer } from \"../solana/buildUsdcTransfer\";\nimport type { StablePayPayArgs, UseStablePayResult } from \"../types\";\n\nexport function useStablePay(): UseStablePayResult {\n  const { connection } = useConnection();\n  const { connected, publicKey, sendTransaction, connect } = useWallet();\n  const { setVisible } = useWalletModal();\n\n  const [loading, setLoading] = useState(false);\n  const [signature, setSignature] = useState<string | null>(null);\n  const [error, setError] = useState<Error | null>(null);\n\n  const pay = useCallback(\n    async ({ amount, to }: StablePayPayArgs) => {\n      setLoading(true);\n      setSignature(null);\n      setError(null);\n\n      try {\n        if (!connected) {\n          setVisible(true);\n          await connect();\n        }\n\n        if (!publicKey) {\n          throw new Error(\"Wallet not connected\");\n        }\n\n        const recipient = new PublicKey(to);\n        const transaction = await buildUsdcTransfer({\n          connection,\n          fromWallet: publicKey,\n          toWallet: recipient,\n          amount,\n        });\n\n        const sig = await sendTransaction(transaction, connection);\n        await connection.confirmTransaction(sig, \"confirmed\");\n\n        setSignature(sig);\n        return sig;\n      } catch (err) {\n        const normalized =\n          err instanceof Error ? err : new Error(\"Payment failed\");\n        setError(normalized);\n        throw normalized;\n      } finally {\n        setLoading(false);\n      }\n    },\n    [connected, publicKey, sendTransaction, connection, connect, setVisible],\n  );\n\n  return { pay, loading, error, signature };\n}\n","import { Connection, PublicKey, Transaction } from \"@solana/web3.js\";\nimport {\n  TOKEN_PROGRAM_ID,\n  createAssociatedTokenAccountInstruction,\n  createTransferCheckedInstruction,\n  getAssociatedTokenAddress,\n} from \"@solana/spl-token\";\nimport { toTokenBaseUnits } from \"./amount\";\nimport { USDC_DECIMALS, USDC_MINT } from \"./constants\";\n\ntype BuildUsdcTransferParams = {\n  connection: Connection;\n  fromWallet: PublicKey;\n  toWallet: PublicKey;\n  amount: number;\n};\n\nexport async function buildUsdcTransfer({\n  connection,\n  fromWallet,\n  toWallet,\n  amount,\n}: BuildUsdcTransferParams) {\n  const mint = new PublicKey(USDC_MINT);\n  const fromAta = await getAssociatedTokenAddress(mint, fromWallet);\n  const toAta = await getAssociatedTokenAddress(mint, toWallet);\n\n  const tx = new Transaction();\n  const toAtaInfo = await connection.getAccountInfo(toAta);\n\n  if (!toAtaInfo) {\n    tx.add(\n      createAssociatedTokenAccountInstruction(fromWallet, toAta, toWallet, mint)\n    );\n  }\n\n  tx.add(\n    createTransferCheckedInstruction(\n      fromAta,\n      mint,\n      toAta,\n      fromWallet,\n      Number(toTokenBaseUnits(amount)),\n      USDC_DECIMALS,\n      [],\n      TOKEN_PROGRAM_ID\n    )\n  );\n\n  const latestBlockhash = await connection.getLatestBlockhash();\n  tx.feePayer = fromWallet;\n  tx.recentBlockhash = latestBlockhash.blockhash;\n\n  return tx;\n}\n","export const USDC_MINT = \"EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v\";\nexport const USDC_DECIMALS = 6;\n","import { USDC_DECIMALS } from \"./constants\";\n\nexport function toTokenBaseUnits(amount: number): bigint {\n  if (!Number.isFinite(amount) || amount <= 0) {\n    throw new Error(\"Amount must be a positive number\");\n  }\n\n  const multiplier = 10 ** USDC_DECIMALS;\n  return BigInt(Math.round(amount * multiplier));\n}\n"],"mappings":"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","names":["React","PublicKey","PublicKey","React"]}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@futurekode/stablepay-react",
+  "version": "0.1.0",
+  "description": "Headless React wrapper for USDC payments on Solana",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@solana/spl-token": "^0.4.14",
+    "@solana/wallet-adapter-base": "^0.9.27",
+    "@solana/wallet-adapter-react": "^0.15.39",
+    "@solana/wallet-adapter-react-ui": "^0.9.39",
+    "@solana/wallet-adapter-wallets": "^0.19.37",
+    "@solana/web3.js": "^1.98.4"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3"
+  }
+}