@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

``bash
npm install @b3dotfun/react


or

Wrap your application with the B3Provider:

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

function App() {
return {/ Your app content /};
}
`

$3

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

function App() {
return (

strategies={["google"]}
partnerId="YOUR_PARTNER_ID"
onLoginSuccess={globalAccount => {
console.log("User authenticated with Global Account!", globalAccount);
}}
/>

);
}
`

$3

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

`tsx
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;
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(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

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

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

return

`tsx
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 (
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
}}
/>
);
}
`

$3

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

function App() {
return (




);
}
`

$3

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

$3

#### Page mode

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

function CrossChainSwapExample() {
return ;
}
`

#### Modal mode

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

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

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

return Cross-chain swap;
}
`

$3

`tsx
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 (


{nftContract.name}

{nftContract.description}

Price: {nftContract.price} {nftContract.currency.symbol}

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:

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

``