@b3dotfun/sdk 0.0.1-alpha.18 → 0.0.1-alpha.2

package/README.md

@@ -1,30 +1,13 @@
 # @b3dotfun/sdk
 
-A comprehensive TypeScript SDK for AnySpend cross-chain operations and B3 Global Accounts authentication. Provides both React components for easy integration and headless TypeScript services for custom implementations.
+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.
 
-## Architecture
-
-The SDK is organized into focused modules:
-
-- **`anyspend/`** - Cross-chain execution engine functionality
-- **`global-account/`** - B3 Global Accounts authentication and user management
-- **`shared/`** - Common utilities, types, and components
-- **`others/`** - Additional features and utilities
-
-Each module contains:
-- `react/` - React components and hooks
-- `services/` - Headless TypeScript services
-- `types/` - TypeScript definitions
-- `utils/` - Utility functions
-- `constants/` - Constants and configuration
-
-## Platform Support
+## Current compatibility
 
 | Feature                | React Web | React Native |
 | ---------------------- | --------- | ------------ |
 | AnySpend               | ✅        | ❌           |
-| Global Accounts        | ✅        | ✅           |
-| Headless Services      | ✅        | ✅           |
+| Global Accounts (beta) | ✅        | ✅           |
 
 ## Installation
 
@@ -36,186 +19,45 @@ yarn add @b3dotfun/sdk
 pnpm add @b3dotfun/sdk
 ```
 
-## CSS Styles
+## Features
 
-```tsx
-import "@b3dotfun/sdk/index.css"; // Import default styles
-```
+- **[Anyspend](#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](#global-accounts)**: B3 Global Accounts allow for seamlessly authenticating and transaction in our ecosystem, using the same account throughout the entire experience.
 
 # AnySpend
 
-AnySpend enables cross-chain swaps, NFT minting, and other blockchain operations with a unified interface.
-
-## React Components
-
-### Basic Cross-Chain Swap
-
-```tsx
-import { AnySpend } from "@b3dotfun/sdk/anyspend/react";
+Documentation coming soon.
 
-function CrossChainSwapPage() {
-  return (
-    <AnySpend
-      isMainnet={true}
-      mode="page"
-    />
-  );
-}
-```
-
-### NFT Minting
-
-```tsx
-import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";
+# Global Accounts
 
-function NFTMinting() {
-  const nftContract = {
-    address: "0x9c275ff1634519E9B5449ec79cd939B5F900564d",
-    chainId: 8333,
-    name: "Example NFT Collection",
-    imageUrl: "https://example.com/nft-image.jpg",
-    description: "A beautiful NFT from our collection",
-    price: "1000000000000000000", // 1 ETH in wei
-    currency: {
-      symbol: "ETH",
-      decimals: 18
-    }
-  };
+## Usage
 
-  return (
-    <AnySpendNFTButton
-      nftContract={nftContract}
-      recipientAddress="0x..."
-    />
-  );
-}
-```
+### Basic Setup
 
-### Custom Integration with Provider
+Wrap your application with the `B3Provider`:
 
 ```tsx
-import { AnyspendProvider } from "@b3dotfun/sdk/anyspend/react";
+import { B3Provider } from "@b3dotfun/sdk";
+import "@b3dotfun/sdk/styles"; // Import default styles
 
 function App() {
-  return (
-    <AnyspendProvider isMainnet={true}>
-      <YourAnySpendComponents />
-    </AnyspendProvider>
-  );
+  return <B3Provider environment="production">{/* Your app content */}</B3Provider>;
 }
 ```
 
-## Headless TypeScript Services
-
-### Token Operations
-
-```typescript
-import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-
-// Get available tokens for a chain
-const tokens = await anyspendService.getTokenList(
-  true, // isMainnet
-  1,    // chainId (Ethereum)
-  "usdc" // search query
-);
-
-// Get specific token details
-const token = await anyspendService.getToken(
-  true, // isMainnet
-  1,    // chainId
-  "0xA0b86a33E6c51c7C36c654d6C9e7b8F5d4a8b5c5" // token address
-);
-```
-
-### Quote and Order Management
-
-```typescript
-import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-import type { GetQuoteRequest } from "@b3dotfun/sdk/anyspend/types";
-
-// Get quote for cross-chain swap
-const quoteRequest: GetQuoteRequest = {
-  srcChain: 1,
-  dstChain: 8333,
-  srcTokenAddress: "0xA0b86a33E6c51c7C36c654d6C9e7b8F5d4a8b5c5",
-  dstTokenAddress: "0x...",
-  srcAmount: "1000000", // 1 USDC
-  recipientAddress: "0x...",
-  type: "swap"
-};
-
-const quote = await anyspendService.getQuote(true, quoteRequest);
-
-// Create order
-const order = await anyspendService.createOrder({
-  isMainnet: true,
-  recipientAddress: "0x...",
-  type: "swap",
-  srcChain: 1,
-  dstChain: 8333,
-  srcTokenAddress: "0x...",
-  dstTokenAddress: "0x...",
-  srcAmount: "1000000",
-  payload: {},
-  metadata: {}
-});
-```
-
-### Order Tracking
-
-```typescript
-import { anyspendService } from "@b3dotfun/sdk/anyspend/services/anyspend";
-
-// Get order details and transactions
-const orderDetails = await anyspendService.getOrderAndTransactions(
-  true, // isMainnet
-  "order-id"
-);
-
-// Get order history for an address
-const history = await anyspendService.getOrderHistory(
-  true, // isMainnet
-  "0x...", // creator address
-  50, // limit
-  0   // offset
-);
-```
-
-## Utility Functions
-
-```typescript
-import { isNativeToken, getNativeToken } from "@b3dotfun/sdk/anyspend/utils";
-import { formatAmount } from "@b3dotfun/sdk/anyspend/utils";
-
-// Check if token is native
-const isNative = isNativeToken("0x0000000000000000000000000000000000000000");
-
-// Get native token info
-const nativeToken = getNativeToken(1); // Ethereum
-
-// Format token amounts
-const formatted = formatAmount("1000000000000000000", 18); // "1.0"
-```
-
-# Global Accounts
-
-B3 Global Accounts provide seamless authentication and user management across the B3 ecosystem.
-
-## React Components
-
-### Basic Authentication
+### Authentication with SignInWithB3
 
 ```tsx
-import { B3Provider, SignInWithB3 } from "@b3dotfun/sdk/global-account/react";
+import { SignInWithB3, B3Provider } from "@b3dotfun/sdk";
 
 function App() {
   return (
     <B3Provider environment="production">
       <SignInWithB3
-        provider={{ strategy: "google" }}
-        partnerId="your-partner-id"
-        onLoginSuccess={(globalAccount) => {
-          console.log("Authenticated:", globalAccount);
+        strategies={["google"]}
+        partnerId="YOUR_PARTNER_ID"
+        onLoginSuccess={globalAccount => {
+          console.log("User authenticated with Global Account!", globalAccount);
         }}
       />
     </B3Provider>
@@ -223,221 +65,281 @@ function App() {
 }
 ```
 
-### Session Key Authentication
+### Using Session Keys
+
+For enhanced security and user experience, you can use session keys with MetaMask:
 
 ```tsx
-import { B3Provider, SignInWithB3 } from "@b3dotfun/sdk/global-account/react";
+import { B3Provider, SignInWithB3 } from "@b3dotfun/sdk";
+import B3DynamicModal from "@b3dotfun/sdk/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"
+  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 SessionKeyAuth() {
+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">
-      <SignInWithB3
-        provider={{ strategy: "google" }}
-        chain={b3Chain}
-        partnerId="your-partner-id"
-        sessionKeyAddress="0x..." // MetaMask address
-        onLoginSuccess={(globalAccount) => {
-          console.log("Session key authenticated:", globalAccount);
-        }}
-      />
+      <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>
   );
 }
 ```
 
-### Permission Management
+### Accessing B3 Context
 
 ```tsx
-import { RequestPermissionsButton } from "@b3dotfun/sdk/global-account/react";
+import { useB3 } from "@b3dotfun/sdk";
 
-function PermissionsExample() {
+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:
+
+```tsx
+import { RequestPermissionsButton } from "@b3dotfun/sdk";
+
+// 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="0x..."
+      sessionKeyAddress={sessionKeyAddress}
+      onSuccess={() => {
+        console.log("Successfully requested permissions!");
+      }}
+      onError={error => {
+        console.error("Error requesting permissions:", error);
+      }}
       permissions={{
-        approvedTargets: ["0x..."], // Contract addresses
+        // 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() + 30 * 24 * 60 * 60 * 1000), // 30 days
+        endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 30), // 30 days
         nativeTokenLimitPerTransaction: 0.0001
       }}
-      onSuccess={() => console.log("Permissions granted")}
-      onError={(error) => console.error("Permission error:", error)}
     />
   );
 }
 ```
 
-### Account Management
+### Using the Modal System
 
 ```tsx
-import { useB3 } from "@b3dotfun/sdk/global-account/react";
-
-function AccountStatus() {
-  const { account, isAuthenticated } = useB3();
+import { B3Provider } from "@b3dotfun/sdk";
+import B3DynamicModal from "@b3dotfun/sdk/components/B3DynamicModal";
 
+function App() {
   return (
-    <div>
-      {isAuthenticated ? (
-        <p>Welcome, {account?.displayName}!</p>
-      ) : (
-        <p>Please sign in</p>
-      )}
-    </div>
+    <B3Provider environment="production">
+      <YourApp />
+      <B3DynamicModal />
+    </B3Provider>
   );
 }
 ```
 
-## Headless TypeScript Services
-
-### Authentication Service
-
-```typescript
-import { authenticate, resetSocket } from "@b3dotfun/sdk/global-account/app";
-
-// Authenticate with B3 Global Account
-const authResult = await authenticate(
-  "access-token",
-  "identity-token",
-  { /* additional params */ }
-);
-
-if (authResult) {
-  console.log("Authentication successful:", authResult);
-} else {
-  console.log("Authentication failed");
-}
-
-// Reset socket connection
-resetSocket();
-```
-
-### Basement Integration
+### Cross-chain swap, minting NFTs, and more with AnySpend
 
-```typescript
-import { authenticate as bsmntAuthenticate } from "@b3dotfun/sdk/global-account/bsmnt";
+AnySpend components simplify cross-chain swaps, NFT minting, and other blockchain operations.
 
-// Authenticate with Basement services
-const bsmntAuth = await bsmntAuthenticate(
-  "access-token",
-  "identity-token"
-);
-```
+### Cross-chain swap example
 
-### React Native Support
+#### Page mode
 
-```typescript
-// For React Native applications
-import { authenticate } from "@b3dotfun/sdk/global-account/app";
-
-// Authentication works the same way
-const result = await authenticate("access-token", "identity-token");
-```
-
-## Server-Side Usage
-
-```typescript
-import { serverFunction } from "@b3dotfun/sdk/global-account/server";
+```tsx
+import { AnySpend } from "@b3dotfun/sdk";
 
-// Server-side Global Account operations
-// (Implementation depends on your specific needs)
+function CrossChainSwapExample() {
+  return <AnySpend isMainnet={true} mode="page" />;
+}
 ```
 
-# Shared Utilities
+#### Modal mode
 
-## Chain Management
-
-```typescript
-import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
-import { b3Chain } from "@b3dotfun/sdk/shared/constants/chains/b3Chain";
-
-// Get supported chains
-console.log(supportedChains);
-
-// Use B3 chain configuration
-console.log(b3Chain);
-```
+```tsx
+import { AnySpend } from "@b3dotfun/sdk";
 
-## Utility Functions
+function CrossChainSwapExample() {
+  const { setB3ModalOpen, setB3ModalContentType } = useModalStore();
 
-```typescript
-import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+  const handleClick = () => {
+    setB3ModalOpen(true);
+    setB3ModalContentType({
+      type: "anySpend",
+      isMainnet: true
+    });
+  };
 
-// Tailwind class name utility
-const classes = cn("base-class", "conditional-class", {
-  "active": isActive
-});
+  return <button onClick={handleClick}>Cross-chain swap</button>;
+}
 ```
 
-## Thirdweb Integration
-
-```typescript
-import { thirdwebClient } from "@b3dotfun/sdk/shared/thirdweb/client";
-
-// Pre-configured Thirdweb client
-const client = thirdwebClient;
-```
+### NFT minting example
 
-# Advanced Usage
+```tsx
+import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react";
+import { useB3 } from "@b3dotfun/sdk";
 
-## Modal System
+function NFTMintingExample() {
+  const { account } = useB3();
 
-```tsx
-import { B3Provider } from "@b3dotfun/sdk/global-account/react";
-import B3DynamicModal from "@b3dotfun/sdk/global-account/react/components/B3DynamicModal";
+  // 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
+    }
+  };
 
-function App() {
   return (
-    <B3Provider environment="production">
-      <YourApp />
-      <B3DynamicModal />
-    </B3Provider>
+    <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>
   );
 }
 ```
 
-## Custom Styling
-
-The SDK components support custom styling through CSS classes and CSS-in-JS solutions. All components are built with accessibility and customization in mind.
+The `AnySpendNFTButton` component handles the entire minting process, including:
 
-## TypeScript Support
+- Checking wallet connection
+- Requesting necessary permissions
+- Processing the transaction
+- Handling success and error states
 
-All modules provide full TypeScript support with comprehensive type definitions:
+You can customize the appearance and behavior of the button using standard React props.
 
-```typescript
-import type { Token } from "@b3dotfun/sdk/anyspend/types";
-import type { GlobalAccount } from "@b3dotfun/sdk/global-account/types";
-```
+## Components
 
-## Environment Configuration
-
-```typescript
-// Set environment variables
-process.env.NEXT_PUBLIC_B3_API = "https://api.b3.fun";
-process.env.NEXT_PUBLIC_BSMNT_API = "https://api.basement.fun";
-```
+- **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
 
-## Error Handling
+## Advanced Configuration
 
-All services include proper error handling and type-safe responses:
+The `B3Provider` accepts several configuration options:
 
-```typescript
-try {
-  const result = await anyspendService.getQuote(true, quoteRequest);
-  // Handle success
-} catch (error) {
-  // Handle error
-  console.error("Quote failed:", error);
-}
+```tsx
+<B3Provider
+  environment="production" // or "development"
+  // Additional config options as needed
+>
+  {children}
+</B3Provider>
 ```
-
----
-
-For more detailed examples and advanced usage patterns, refer to the individual module documentation and type definitions.

package/dist/cjs/anyspend/react/components/AnySpend.d.ts

@@ -11,7 +11,7 @@ export declare enum PanelView {
     LOADING = 3,
     FIAT_PAYMENT = 4
 }
-export declare function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet, mode, defaultActiveTab, loadOrder, hideTransactionHistoryButton, recipientAddress: recipientAddressFromProps }: {
+export declare function AnySpend({ destinationTokenAddress, destinationTokenChainId, isMainnet, mode, defaultActiveTab, loadOrder, hideTransactionHistoryButton }: {
     destinationTokenAddress?: string;
     destinationTokenChainId?: number;
     isMainnet?: boolean;
@@ -19,5 +19,4 @@ export declare function AnySpend({ destinationTokenAddress, destinationTokenChai
     defaultActiveTab?: "crypto" | "fiat";
     loadOrder?: string;
     hideTransactionHistoryButton?: boolean;
-    recipientAddress?: string;
 }): import("react/jsx-runtime").JSX.Element;