@b3dotfun/anyspend-sdk NPM

AnySpend SDK

A React SDK for integrating with the Anyspend protocol, providing hooks and utilities for cross-chain swaps, NFT minting, and other blockchain operations.

Installation

npm install @b3dotfun/anyspend-sdk
# or
yarn add @b3dotfun/anyspend-sdk
# or
pnpm add @b3dotfun/anyspend-sdk

Requirements

React 19+
TanStack Query (React Query) v5+
Viem v2+
Zod v3+

Setup

The SDK uses TanStack Query for data fetching and caching. You need to wrap your application or the components using AnySpend hooks with the AnyspendProvider:

import { AnyspendProvider } from "@b3dotfun/anyspend-sdk";

// App-level setup (in your root layout)
function App() {
  return (
    <AnyspendProvider>
      <YourApp />
    </AnyspendProvider>
  );
}

// OR

// Component-level setup (for specific pages/components)
function YourComponent() {
  return (
    <AnyspendProvider>
      <YourAnyspendFeature />
    </AnyspendProvider>
  );
}

Important notes about the provider:

Must be mounted before any AnySpend hooks are used
Should be used on the client side (add 'use client' directive in Next.js)
Only one instance is needed in your component tree
When using with dynamic imports, ensure the provider wraps the dynamic component

Available Hooks

`useAnyspendCreateOrder`

Creates a new order in the Anyspend protocol. Handles address formatting and payload structure.

import { useAnyspendCreateOrder } from "@b3dotfun/anyspend-sdk";

function CreateOrder() {
  const { createOrder, isCreatingOrder } = useAnyspendCreateOrder({
    onSuccess: data => {
      console.log("Order created:", data);
    },
    onError: (error: Error | AnyspendApiError) => {
      // Handle API errors with proper typing
      if ("statusCode" in error) {
        console.error("API Error:", error.message, "Status:", error.statusCode);
      } else {
        console.error("Client Error:", error.message);
      }
    }
  });

  const handleCreateOrder = async () => {
    createOrder({
      isMainnet,
      recipientAddress,
      orderType,
      srcChain,
      dstChain,
      srcToken,
      srcAmount,
      dstToken,
      expectedDstAmount,
      creatorAddress
    });
  };

  return (
    <button onClick={handleCreateOrder} disabled={isCreatingOrder}>
      Create Order
    </button>
  );
}

The hook provides proper error typing through AnyspendApiError interface:

type AnyspendApiError = {
  message: string; // Error message from the API
  statusCode: number; // HTTP status code
  success: false; // Always false for errors
  data: null; // No data in error cases
};

Common API errors include:

400: Invalid input parameters
401: Unauthorized
404: Resource not found
500: Server error

`useAnyspendTokenList`

Fetches available tokens for a specific chain.

import { useAnyspendTokenList } from "@b3dotfun/anyspend-sdk";

function TokenList({ chainId }) {
  const { data: tokens, isLoading } = useAnyspendTokenList(isMainnet, chainId);
  // ...
}

`useAnyspendOrderAndTransactions`

Fetches and auto-refreshes order status and transaction details.

import { useAnyspendOrderAndTransactions } from "@b3dotfun/anyspend-sdk";

function OrderDetails({ orderId }) {
  const {
    orderAndTransactions,
    isLoadingOrderAndTransactions,
    getOrderAndTransactionsError,
    refetchOrderAndTransactions
  } = useAnyspendOrderAndTransactions(isMainnet, orderId);
  // ...
}

`useAnyspendOrderHistory`

Retrieves order history for order creator address. Orders are sorted by creation date (newest first).

import { useAnyspendOrderHistory } from "@b3dotfun/anyspend-sdk";

function OrderHistory({ creatorAddress }) {
  const { orderHistory, isLoadingOrderHistory, getOrderHistoryError, refetchOrderHistory } = useAnyspendOrderHistory(
    isMainnet,
    creatorAddress
  );
  // ...
}

`useAnyspendQuote`

Fetches price/rate information for token swaps or other order types.

import { useAnyspendQuote, OrderType, GetQuoteRequest } from "@b3dotfun/anyspend-sdk";

function PriceQuoteComponent(
  {
    /* relevant props for your component */
  }
) {
  // Example request, adjust according to your needs
  const quoteRequest: GetQuoteRequest = {
    srcChain: 1, // Example: Ethereum Mainnet
    dstChain: 137, // Example: Polygon Mainnet
    srcTokenAddress: "0x...", // Address of source token
    dstTokenAddress: "0x...", // Address of destination token
    type: OrderType.Swap,
    amount: "1000000000000000000" // Amount in smallest unit (e.g., wei for ETH)
    // Add other fields like 'price', 'fundAmount', or 'payload' as per OrderType
  };

  const isMainnet = true; // or false for testnet

  const { anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, refetchAnyspendQuote } = useAnyspendQuote(
    isMainnet,
    quoteRequest
  );

  if (isLoadingAnyspendQuote) {
    return <p>Loading quote...</p>;
  }

  if (getAnyspendQuoteError) {
    return <p>Error fetching quote: {getAnyspendQuoteError.message}</p>;
  }

  // Use anyspendQuote data
  // ...
}

`useCoinbaseOnrampOptions`

Fetches available Coinbase onramp options based on user's location.

import { useCoinbaseOnrampOptions } from "@b3dotfun/anyspend-sdk";

function CoinbaseOnramp({ country, subdivision }) {
  const { onrampOptions, isLoadingOnrampOptions, onrampOptionsError, refetchOnrampOptions } = useCoinbaseOnrampOptions(
    true,
    country,
    subdivision
  );
  // ...
}

`useStripeSupport`

Checks if Stripe payment is supported for the user's location.

import { useStripeSupport } from "@b3dotfun/anyspend-sdk";

function StripePayment({ ipAddress }) {
  const { isStripeSupported, isLoadingStripeSupport, stripeSupportError, refetchStripeSupport } = useStripeSupport(
    true,
    ipAddress
  );
  // ...
}

Utilities

`formatTokenAmount`

Formats token amounts with proper decimal places.

import { formatTokenAmount } from "@b3dotfun/anyspend-sdk";

const formattedAmount = formatTokenAmount(amount, decimals);

Address and Chain Utilities

The SDK provides various utilities for working with addresses and chains:

import {
  isValidEthereumAddress,
  isValidSolanaAddress,
  isEvmChain,
  isSolanaChain,
  chainIdToPublicClient
} from "@b3dotfun/anyspend-sdk";

// Check address validity
const isEthValid = isValidEthereumAddress(address);
const isSolValid = isValidSolanaAddress(address);

// Chain utilities
const isEvm = isEvmChain(chainId);
const isSol = isSolanaChain(chainId);

// Get viem public client for EVM chain
const publicClient = chainIdToPublicClient(chainId);