Skip to main content

Prerequisites

Node.js

v20.15.0 or higher

React

Version 18 or 19

TypeScript

Recommended for better DX

Installation

Choose your preferred package manager:
  • npm
  • pnpm
npm install @b3dotfun/sdk

Basic Setup

1. Provider Setup

Wrap your app with the B3Provider and AnyspendProvider to enable AnySpend functionality:
App.tsx
import { AnyspendProvider } from "@b3dotfun/sdk/anyspend/react";
import { B3Provider } from "@b3dotfun/sdk/global-account/react";
import "@b3dotfun/sdk/index.css";

function App() {
  return (
    <B3Provider theme="light" environment="production">
      <AnyspendProvider>{/* Your app components */}</AnyspendProvider>
    </B3Provider>
  );
}

export default App;

2. Environment Configuration

  • Mainnet
  • Testnet
Endpoint: https://mainnet.anyspend.comUse this for production applications with real transactions.
If you’re using TypeScript, ensure your tsconfig.json includes these settings for optimal compatibility:
tsconfig.json
{
  "compilerOptions": {
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

Verification

Create a simple test component to verify your setup works correctly:
TestComponent.tsx
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";

function TestComponent() {
  return <AnySpend />;
}

Next Steps

Troubleshooting

Make sure you’ve installed the SDK correctly and imported the CSS file. The SDK requires React 18+ and may have compatibility issues with older versions.
Ensure you have B3Provider and AnyspendProvider placed high in your component tree, typically in your main App component.
If you’re seeing TypeScript errors, verify your tsconfig.json includes the recommended settings above.
I