@b3dotfun/sdk 0.0.40-test.3 → 0.0.40

package/src/global-account/docs/client-selection.md

@@ -1,292 +0,0 @@
-# FeathersJS Client Selection
-
-The B3 SDK now supports both Socket.IO and REST clients for communicating with the B3 API. This document explains how to choose and configure the appropriate client type for your application.
-
-## Client Types
-
-### Socket Client (Default)
-- **Real-time communication** via WebSocket
-- **Lower latency** for frequent updates
-- **Automatic reconnection** on connection loss
-- **Best for**: Interactive applications, real-time features, frequent API calls
-
-### REST Client
-- **HTTP-based communication** via REST API
-- **Better for server-side rendering** and static generation
-- **Simpler debugging** and network inspection
-- **Best for**: Static sites, server-side rendering, simple integrations
-
-## Configuration
-
-### 1. Provider-Level Configuration (Recommended)
-
-Configure the client type at the provider level for your entire application:
-
-```tsx
-import { B3Provider } from "@b3dotfun/sdk/global-account/react";
-
-function App() {
-  return (
-    <B3Provider
-      environment="production"
-      clientType="rest" // or "socket"
-      // ... other props
-    >
-      <YourApp />
-    </B3Provider>
-  );
-}
-```
-
-### 2. Programmatic Configuration
-
-Change the client type at runtime:
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function MyComponent() {
-  const { switchClientType, clientType } = useClient();
-  
-  const handleSwitchToRest = () => {
-    switchClientType("rest");
-  };
-  
-  return (
-    <div>
-      <p>Current client: {clientType}</p>
-      <button onClick={handleSwitchToRest}>Switch to REST</button>
-    </div>
-  );
-}
-```
-
-### 3. Direct Client Access
-
-Access specific client types directly:
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function MyComponent() {
-  const { getCurrentClient, getClientByType } = useClient();
-  
-  // Get the currently active client
-  const currentClient = getCurrentClient();
-  
-  // Get a specific client type
-  const restClient = getClientByType("rest");
-  const socketClient = getClientByType("socket");
-  
-  // Use the clients directly
-  const data = await currentClient.service("users").find();
-}
-```
-
-## Authentication
-
-### Single Client Authentication
-
-Authenticate with the currently active client:
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function LoginComponent() {
-  const { getCurrentClient } = useClient();
-  
-  const handleLogin = async () => {
-    const client = getCurrentClient();
-    await client.authenticate({
-      strategy: "jwt",
-      accessToken: "your-token"
-    });
-  };
-}
-```
-
-### Multi-Client Authentication
-
-Authenticate with both clients simultaneously (useful for migration scenarios):
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function LoginComponent() {
-  const { authenticateWithBoth } = useClient();
-  
-  const handleLogin = async () => {
-    const result = await authenticateWithBoth("access-token", "identity-token");
-    
-    if (result.success) {
-      console.log("Socket auth:", result.socket);
-      console.log("REST auth:", result.rest);
-    }
-  };
-}
-```
-
-### Type-Specific Authentication
-
-Authenticate with a specific client type:
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function LoginComponent() {
-  const { authenticateWithType } = useClient();
-  
-  const handleRestLogin = async () => {
-    await authenticateWithType("rest", "access-token", "identity-token");
-  };
-  
-  const handleSocketLogin = async () => {
-    await authenticateWithType("socket", "access-token", "identity-token");
-  };
-}
-```
-
-## Migration Guide
-
-### From Socket-Only to Client Selection
-
-**Before:**
-```tsx
-import app from "@b3dotfun/sdk/global-account/app";
-
-// Always used socket client
-const data = await app.service("users").find();
-```
-
-**After (Backwards Compatible):**
-```tsx
-import app from "@b3dotfun/sdk/global-account/app";
-
-// Still works - defaults to socket client
-const data = await app.service("users").find();
-```
-
-**After (Explicit Client Selection):**
-```tsx
-import { B3Provider } from "@b3dotfun/sdk/global-account/react";
-
-// Configure at provider level
-<B3Provider clientType="rest">
-  <App />
-</B3Provider>
-```
-
-### From Direct REST Import
-
-**Before:**
-```tsx
-import app from "@b3dotfun/sdk/global-account/app.rest";
-
-// Always used REST client
-const data = await app.service("users").find();
-```
-
-**After:**
-```tsx
-import { B3Provider } from "@b3dotfun/sdk/global-account/react";
-
-// Configure at provider level
-<B3Provider clientType="rest">
-  <App />
-</B3Provider>
-```
-
-## Best Practices
-
-### 1. Choose the Right Client Type
-
-- **Use Socket** for: Real-time apps, frequent updates, interactive features
-- **Use REST** for: Static sites, SSR, simple integrations, debugging
-
-### 2. Consistent Client Usage
-
-- Set the client type once at the provider level
-- Avoid mixing client types within the same app unless necessary
-- Use the `useClient` hook for runtime client access
-
-### 3. Error Handling
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function MyComponent() {
-  const { getCurrentClient } = useClient();
-  
-  const fetchData = async () => {
-    try {
-      const client = getCurrentClient();
-      const data = await client.service("users").find();
-      return data;
-    } catch (error) {
-      console.error("API call failed:", error);
-      // Handle error appropriately
-    }
-  };
-}
-```
-
-### 4. Performance Considerations
-
-- Socket clients maintain persistent connections
-- REST clients make individual HTTP requests
-- Consider your app's communication patterns when choosing
-
-## Troubleshooting
-
-### Common Issues
-
-1. **Client Type Not Switching**
-   - Ensure you're calling `switchClientType` after the provider is mounted
-   - Check that the provider has the correct `clientType` prop
-
-2. **Authentication Failures**
-   - Verify the client type matches your authentication strategy
-   - Check that tokens are valid for the selected client type
-
-3. **Connection Issues**
-   - For socket clients: Check WebSocket connectivity
-   - For REST clients: Verify HTTP endpoints are accessible
-
-### Debug Information
-
-```tsx
-import { useClient } from "@b3dotfun/sdk/global-account/react";
-
-function DebugComponent() {
-  const { clientType, getCurrentClient } = useClient();
-  
-  console.log("Current client type:", clientType);
-  console.log("Current client:", getCurrentClient());
-}
-```
-
-## API Reference
-
-### B3Provider Props
-
-```tsx
-interface B3ProviderProps {
-  clientType?: "socket" | "rest"; // Default: "socket"
-  // ... other props
-}
-```
-
-### useClient Hook
-
-```tsx
-interface UseClientReturn {
-  clientType: "socket" | "rest";
-  getCurrentClient: () => ClientApplication;
-  getClientByType: (type: ClientType) => ClientApplication;
-  switchClientType: (type: ClientType) => void;
-  authenticateWithType: (type: ClientType, accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<any>;
-  authenticateWithBoth: (accessToken: string, identityToken: string, params?: Record<string, any>) => Promise<{socket: any, rest: any, success: boolean}>;
-}
-```
-
-

package/src/global-account/examples/client-selection-example.tsx

@@ -1,197 +0,0 @@
-import { B3Provider, useB3, useClient } from "@b3dotfun/sdk/global-account/react";
-import { useState } from "react";
-import { ClientType } from "../client-manager";
-
-/**
- * Example component showing how to use the client selection system
- */
-function ClientSelectionExample() {
-  const { clientType, switchClientType, getCurrentClient, authenticateWithType } = useClient();
-  const { user } = useB3();
-  const [data, setData] = useState<any>(null);
-  const [loading, setLoading] = useState(false);
-
-  const handleSwitchClient = (type: ClientType) => {
-    switchClientType(type);
-  };
-
-  const handleFetchData = async () => {
-    setLoading(true);
-    try {
-      const client = getCurrentClient();
-      const result = await client.service("users").find();
-      setData(result);
-    } catch (error) {
-      console.error("Failed to fetch data:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleAuthenticateWithType = async (type: ClientType) => {
-    try {
-      const result = await authenticateWithType(
-        type,
-        "your-access-token",
-        "your-identity-token"
-      );
-      console.log(`Authenticated with ${type}:`, result);
-    } catch (error) {
-      console.error(`Authentication failed with ${type}:`, error);
-    }
-  };
-
-  return (
-    <div style={{ padding: "20px", fontFamily: "Arial, sans-serif" }}>
-      <h2>Client Selection Example</h2>
-      
-      <div style={{ marginBottom: "20px" }}>
-        <h3>Current Client Type: {clientType}</h3>
-        <div style={{ display: "flex", gap: "10px", marginBottom: "10px" }}>
-          <button 
-            onClick={() => handleSwitchClient("socket")}
-            style={{ 
-              padding: "8px 16px", 
-              backgroundColor: clientType === "socket" ? "#007bff" : "#f8f9fa",
-              color: clientType === "socket" ? "white" : "black",
-              border: "1px solid #007bff",
-              borderRadius: "4px",
-              cursor: "pointer"
-            }}
-          >
-            Switch to Socket
-          </button>
-          <button 
-            onClick={() => handleSwitchClient("rest")}
-            style={{ 
-              padding: "8px 16px", 
-              backgroundColor: clientType === "rest" ? "#007bff" : "#f8f9fa",
-              color: clientType === "rest" ? "white" : "black",
-              border: "1px solid #007bff",
-              borderRadius: "4px",
-              cursor: "pointer"
-            }}
-          >
-            Switch to REST
-          </button>
-        </div>
-      </div>
-
-      <div style={{ marginBottom: "20px" }}>
-        <h3>Test API Calls</h3>
-        <button 
-          onClick={handleFetchData}
-          disabled={loading}
-          style={{ 
-            padding: "8px 16px", 
-            backgroundColor: "#28a745",
-            color: "white",
-            border: "none",
-            borderRadius: "4px",
-            cursor: loading ? "not-allowed" : "pointer"
-          }}
-        >
-          {loading ? "Loading..." : "Fetch Data"}
-        </button>
-        
-        {data && (
-          <pre style={{ 
-            marginTop: "10px", 
-            padding: "10px", 
-            backgroundColor: "#f8f9fa", 
-            borderRadius: "4px",
-            overflow: "auto"
-          }}>
-            {JSON.stringify(data, null, 2)}
-          </pre>
-        )}
-      </div>
-
-      <div style={{ marginBottom: "20px" }}>
-        <h3>Authentication Tests</h3>
-        <div style={{ display: "flex", gap: "10px" }}>
-          <button 
-            onClick={() => handleAuthenticateWithType("socket")}
-            style={{ 
-              padding: "8px 16px", 
-              backgroundColor: "#17a2b8",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer"
-            }}
-          >
-            Auth with Socket
-          </button>
-          <button 
-            onClick={() => handleAuthenticateWithType("rest")}
-            style={{ 
-              padding: "8px 16px", 
-              backgroundColor: "#17a2b8",
-              color: "white",
-              border: "none",
-              borderRadius: "4px",
-              cursor: "pointer"
-            }}
-          >
-            Auth with REST
-          </button>
-        </div>
-      </div>
-
-      <div>
-        <h3>User Status</h3>
-        <p>Authenticated: {user ? "Yes" : "No"}</p>
-        {user && (
-          <pre style={{ 
-            padding: "10px", 
-            backgroundColor: "#f8f9fa", 
-            borderRadius: "4px",
-            overflow: "auto"
-          }}>
-            {JSON.stringify(user, null, 2)}
-          </pre>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/**
- * Example app showing different client configurations
- */
-export function ClientSelectionApp() {
-  const [clientType, setClientType] = useState<ClientType>("socket");
-
-  return (
-    <B3Provider
-      environment="development"
-      clientType={clientType}
-      automaticallySetFirstEoa={true}
-      theme="light"
-    >
-      <div>
-        <h1>B3 SDK Client Selection Demo</h1>
-        
-        <div style={{ marginBottom: "20px" }}>
-          <label>
-            <strong>Provider Client Type:</strong>
-            <select 
-              value={clientType} 
-              onChange={(e) => setClientType(e.target.value as ClientType)}
-              style={{ marginLeft: "10px", padding: "4px 8px" }}
-            >
-              <option value="socket">Socket (Default)</option>
-              <option value="rest">REST</option>
-            </select>
-          </label>
-        </div>
-
-        <ClientSelectionExample />
-      </div>
-    </B3Provider>
-  );
-}
-
-export default ClientSelectionApp;
-