@b3dotfun/react

@b3dotfun/react

A React component library for Anyspend & B3 Global Accounts. Includes integration with web & mobile applications, providing easy-to-use components for Web3 transactions, Web3 authentication, wallet management, and blockchain interactions & more.

Current compatibility

Feature	React Web	React Native
AnySpend	✅	❌
Global Accounts (beta)	✅	✅

Installation

npm install @b3dotfun/react
# or
yarn add @b3dotfun/react
# or
pnpm add @b3dotfun/react

Features

• Anyspend: A React SDK for integrating with the Anyspend protocol, providing hooks and utilities for cross-chain swaps, NFT minting, and other blockchain operations.
• Global Accounts: B3 Global Accounts allow for seamlessly authenticating and transaction in our ecosystem, using the same account throughout the entire experience.

AnySpend

Documentation coming soon.

Global Accounts

Usage

Basic Setup

Wrap your application with the B3Provider:

import { B3Provider } from "@b3dotfun/react";
import "@b3dotfun/react/styles"; // Import default styles

function App() {
  return <B3Provider environment="production">{/* Your app content */}</B3Provider>;
}

Authentication with SignInWithB3

import { SignInWithB3, B3Provider } from "@b3dotfun/react";

function App() {
  return (
    <B3Provider environment="production">
      <SignInWithB3
        strategies={["google"]}
        partnerId="YOUR_PARTNER_ID"
        onLoginSuccess={globalAccount => {
          console.log("User authenticated with Global Account!", globalAccount);
        }}
      />
    </B3Provider>
  );
}

Using Session Keys

For enhanced security and user experience, you can use session keys with MetaMask:

import { B3Provider, SignInWithB3 } from "@b3dotfun/react";
import B3DynamicModal from "@b3dotfun/react/components/B3DynamicModal";
import { useEffect, useState } from "react";

// Add Ethereum provider type declarations
declare global {
  interface Window {
    ethereum: {
      request: (args: { method: string; params?: any[] }) => Promise<any>;
      on: (event: string, listener: (...args: any[]) => void) => void;
      removeListener: (event: string, listener: (...args: any[]) => void) => void;
    };
  }
}

// Define chain configuration
const b3Chain = {
  id: 8333,
  name: "B3",
  nativeCurrency: {
    name: "Ether",
    symbol: "ETH",
    decimals: 18
  },
  rpc: "https://mainnet-rpc.b3.fun",
  icon: {
    url: "https://cdn.b3.fun/b3-logo-white-circle.svg",
    width: 32,
    height: 32,
    format: "svg"
  },
  blockExplorers: [
    {
      name: "B3 Explorer",
      url: "https://explorer.b3.fun/"
    }
  ]
};

function App() {
  const [account, setAccount] = useState<string | null>(null);

  useEffect(() => {
    const connectToWallet = async () => {
      if (typeof window.ethereum !== "undefined") {
        try {
          // Request account access
          const accounts = await window.ethereum.request({ method: "eth_requestAccounts" });
          setAccount(accounts[0]);

          // Listen for account changes
          const handleAccountsChanged = (accounts: string[]) => {
            setAccount(accounts[0]);
          };

          window.ethereum.on("accountsChanged", handleAccountsChanged);

          return () => {
            // Clean up listeners when component unmounts
            if (window.ethereum) {
              window.ethereum.removeListener("accountsChanged", handleAccountsChanged);
            }
          };
        } catch (error) {
          console.error("Error connecting to wallet:", error);
        }
      } else {
        console.error("No Ethereum wallet detected in browser");
      }
    };

    connectToWallet();
  }, []);

  if (!account) {
    return <div>Please connect your wallet</div>;
  }

  return (
    <B3Provider environment="production">
      <B3DynamicModal />
      <div className="flex min-h-screen items-center justify-center bg-white">
        <div className="text-center">
          <h1 className="mb-6 text-3xl font-bold">B3 Authentication Example</h1>
          <SignInWithB3
            provider={{
              strategy: "google"
            }}
            chain={b3Chain}
            partnerId="YOUR_PARTNER_ID"
            sessionKeyAddress={account as `0x${string}`}
            onLoginSuccess={globalAccount => {
              console.log("User authenticated with Global Account!", globalAccount);
            }}
          />
        </div>
      </div>
    </B3Provider>
  );
}

Accessing B3 Context

import { useB3 } from "@b3dotfun/react";

function MyComponent() {
  const { account } = useB3();

  return <div>{!!account ? "User is logged in" : "User is not logged in"}</div>;
}

Using the Request Permissions Button

After authenticating with a session key, you can request specific permissions for smart contract interactions:

import { RequestPermissionsButton } from "@b3dotfun/react";

// Define your chain configuration
const b3Chain = {
  id: 8333,
  name: "B3",
  rpc: "https://mainnet-rpc.b3.fun"
  // other chain properties
};

function RequestPermissionsExample({ sessionKeyAddress }) {
  return (
    <RequestPermissionsButton
      chain={b3Chain}
      sessionKeyAddress={sessionKeyAddress}
      onSuccess={() => {
        console.log("Successfully requested permissions!");
      }}
      onError={error => {
        console.error("Error requesting permissions:", error);
      }}
      permissions={{
        // Specify contract addresses that the session key can interact with
        approvedTargets: ["0x06012c8cf97BEaD5deAe237070F9587f8E7A266d", "0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
        // Set validity period for the permissions
        startDate: new Date(),
        endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
        nativeTokenLimitPerTransaction: 0.0001
      }}
    />
  );
}

Using the Modal System

import { B3Provider } from "@b3dotfun/react";
import B3DynamicModal from "@b3dotfun/react/components/B3DynamicModal";

function App() {
  return (
    <B3Provider environment="production">
      <YourApp />
      <B3DynamicModal />
    </B3Provider>
  );
}

Cross-chain swap, minting NFTs, and more with AnySpend

AnySpend components simplify cross-chain swaps, NFT minting, and other blockchain operations.

Cross-chain swap example

Page mode

import { AnySpend } from "@b3dotfun/react";

function CrossChainSwapExample() {
  return <AnySpend isMainnet={true} mode="page" />;
}

Modal mode

import { AnySpend } from "@b3dotfun/react";

function CrossChainSwapExample() {
  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();

  const handleClick = () => {
    setB3ModalOpen(true);
    setB3ModalContentType({
      type: "anySpend",
      isMainnet: true
    });
  };

  return <button onClick={handleClick}>Cross-chain swap</button>;
}

NFT minting example

import { AnySpendNFTButton } from "@b3dotfun/react/components/AnySpend/AnySpendNFTButton";
import { useB3 } from "@b3dotfun/react";

function NFTMintingExample() {
  const { account } = useB3();

  // Define your NFT contract details
  const nftContract = {
    address: "0x9c275ff1634519E9B5449ec79cd939B5F900564d", // NFT contract address
    chainId: 8333, // B3 chain ID
    name: "Example NFT Collection",
    imageUrl: "https://example.com/nft-image.jpg",
    description: "A beautiful NFT from our collection",
    price: "1000000000000000000", // Price in wei (1 ETH)
    currency: {
      symbol: "ETH",
      decimals: 18
    }
  };

  return (
    <div className="nft-card">
      <img src={nftContract.imageUrl} alt={nftContract.name} />
      <h3>{nftContract.name}</h3>
      <p>{nftContract.description}</p>
      <p>
        Price: {nftContract.price} {nftContract.currency.symbol}
      </p>

      <AnySpendNFTButton nftContract={nftContract} recipientAddress={account?.address} />
    </div>
  );
}

The AnySpendNFTButton component handles the entire minting process, including:

• Checking wallet connection
• Requesting necessary permissions
• Processing the transaction
• Handling success and error states

You can customize the appearance and behavior of the button using standard React props.

Components

• SignInWithB3: Authentication component with multiple provider options
• B3Provider: Context provider for B3 services
• B3DynamicModal: Dynamic modal system for B3 interactions
• RequestPermissionsButton: Component to request permissions for session keys
• AnySpend: Components for cryptocurrency transactions
• AnySpendNFT: NFT-specific transaction component

Advanced Configuration

The B3Provider accepts several configuration options:

<B3Provider
  environment="production" // or "development"
  // Additional config options as needed
>
  {children}
</B3Provider>