@b3dotfun/sdk 0.0.1-alpha.1

package/README.md

@@ -0,0 +1,345 @@
+# @b3dotfun/sdk
+
+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/sdk
+# or
+yarn add @b3dotfun/sdk
+# or
+pnpm add @b3dotfun/sdk
+```
+
+## Features
+
+- **[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
+
+Documentation coming soon.
+
+# Global Accounts
+
+## Usage
+
+### Basic Setup
+
+Wrap your application with the `B3Provider`:
+
+```tsx
+import { B3Provider } from "@b3dotfun/sdk";
+import "@b3dotfun/sdk/styles"; // Import default styles
+
+function App() {
+  return <B3Provider environment="production">{/* Your app content */}</B3Provider>;
+}
+```
+
+### Authentication with SignInWithB3
+
+```tsx
+import { SignInWithB3, B3Provider } from "@b3dotfun/sdk";
+
+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:
+
+```tsx
+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",
+  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
+
+```tsx
+import { useB3 } from "@b3dotfun/sdk";
+
+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={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
+
+```tsx
+import { B3Provider } from "@b3dotfun/sdk";
+import B3DynamicModal from "@b3dotfun/sdk/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
+
+```tsx
+import { AnySpend } from "@b3dotfun/sdk";
+
+function CrossChainSwapExample() {
+  return <AnySpend isMainnet={true} mode="page" />;
+}
+```
+
+#### Modal mode
+
+```tsx
+import { AnySpend } from "@b3dotfun/sdk";
+
+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
+
+```tsx
+import { AnySpendNFTButton } from "@b3dotfun/sdk/anyspend/react/components/AnySpendNFTButton";
+import { useB3 } from "@b3dotfun/sdk";
+
+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:
+
+```tsx
+<B3Provider
+  environment="production" // or "development"
+  // Additional config options as needed
+>
+  {children}
+</B3Provider>
+```

package/constants/chains/b3Chain.js

@@ -0,0 +1,2 @@
+// hack for metro https://github.com/b3-fun/b3-mono/pull/50
+export * from "../../dist/esm/constants/chains/b3Chain";