shogun-button-react 1.3.5 → 1.3.9

package/README.md

@@ -8,7 +8,8 @@ A React component library for seamless integration of Shogun authentication into
 - 🎨 Customizable UI components
 - 🔒 Secure authentication flow
 - 🌓 Dark mode support
-- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn)
+- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn, Nostr, OAuth)
+- 🔑 Account backup and recovery (Gun pair export/import)
 - 📱 Responsive design
 - 🌍 TypeScript support
 
@@ -20,8 +21,8 @@ import {
   ShogunButton,
   ShogunButtonProvider,
   shogunConnector,
-} from "@shogun/shogun-button-react";
-import "@shogun/shogun-button-react/styles.css";
+} from "shogun-button-react";
+import "shogun-button-react/styles.css";
 
 function App() {
   const { sdk, options, setProvider } = shogunConnector({
@@ -66,62 +67,113 @@ The provider component that supplies Shogun context to your application.
 
 | Name            | Type                     | Description                                    |
 | --------------- | ------------------------ | ---------------------------------------------- |
-| sdk             | ShogunSDK                | Shogun SDK instance created by shogunConnector |
+| sdk             | ShogunCore               | Shogun SDK instance created by shogunConnector |
 | options         | Object                   | Configuration options                          |
-| onLoginSuccess  | (data: AuthData) => void | Callback fired on successful login             |
-| onSignupSuccess | (data: AuthData) => void | Callback fired on successful signup            |
+| onLoginSuccess  | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful login             |
+| onSignupSuccess | (data: { userPub: string; username: string; password?: string; authMethod?: string }) => void | Callback fired on successful signup            |
 | onError         | (error: Error) => void   | Callback fired when an error occurs            |
 
 ### ShogunButton
 
-The main button component for triggering Shogun authentication.
-
-#### Custom Button
-
-You can customize the button appearance using `ShogunButton.Custom`:
-
-```tsx
-<ShogunButton.Custom>
-  {({ ready, authenticate }) => (
-    <button
-      className="my-custom-button"
-      disabled={!ready}
-      onClick={authenticate}
-    >
-      Connect with Shogun
-    </button>
-  )}
-</ShogunButton.Custom>
-```
+The main button component for triggering Shogun authentication. The component provides a complete authentication UI with modal dialogs for login and signup.
 
 ### useShogun Hook
 
 A hook to access Shogun authentication state and functions.
 
 ```tsx
-import { useShogun } from "@shogun/shogun-button-react";
+import React, { useEffect } from "react";
+import { useShogun } from "shogun-button-react";
 
 function Profile() {
   const {
-    isAuthenticated,
-    user,
+    isLoggedIn,
+    userPub,
+    username,
     login,
     signup,
     logout,
-    connectWithMetaMask,
-    connectWithWebAuthn,
     setProvider,
+    hasPlugin,
+    getPlugin,
+    exportGunPair,
+    importGunPair,
+    observe,
   } = useShogun();
 
+  const handleLogin = async () => {
+    // Login with username/password
+    await login("password", "username", "password");
+    
+    // Or login with MetaMask
+    await login("web3");
+    
+    // Or login with WebAuthn
+    await login("webauthn", "username");
+    
+    // Or login with Nostr
+    await login("nostr");
+    
+    // Or login with OAuth
+    await login("oauth", "google");
+    
+    // Or login with Gun pair (for account recovery)
+    const pairData = { /* Gun pair object */ };
+    await login("pair", pairData);
+  };
+
+  const handleSignUp = async () => {
+    // Sign up with username/password
+    await signup("password", "newusername", "newpassword");
+    
+    // Or sign up with other methods (similar to login)
+    await signup("web3");
+    await signup("webauthn", "newusername");
+  };
+
   const switchToCustomNetwork = () => {
     setProvider('https://my-custom-rpc.example.com');
   };
 
-  return isAuthenticated ? (
+  const handleExportPair = async () => {
+    try {
+      const pairData = await exportGunPair("optional-encryption-password");
+      console.log("Exported pair:", pairData);
+      // Save this data securely for account recovery
+    } catch (error) {
+      console.error("Export failed:", error);
+    }
+  };
+
+  const handleImportPair = async () => {
+    try {
+      const success = await importGunPair(savedPairData, "optional-password");
+      if (success) {
+        console.log("Pair imported successfully");
+      }
+    } catch (error) {
+      console.error("Import failed:", error);
+    }
+  };
+
+  // Observe reactive data changes
+  useEffect(() => {
+    if (isLoggedIn) {
+      const subscription = observe<any>('user/profile').subscribe(data => {
+        console.log('Profile data updated:', data);
+      });
+      
+      return () => subscription.unsubscribe();
+    }
+  }, [isLoggedIn, observe]);
+
+  return isLoggedIn ? (
     <div>
-      <h2>Welcome, {user.username}!</h2>
+      <h2>Welcome, {username}!</h2>
+      <p>User Public Key: {userPub}</p>
       <button onClick={logout}>Logout</button>
       <button onClick={switchToCustomNetwork}>Switch Network</button>
+      <button onClick={handleExportPair}>Export Account</button>
     </div>
   ) : (
     <div>Please login to continue</div>
@@ -135,17 +187,43 @@ The `shogunConnector` accepts the following options:
 
 ```typescript
 interface ShogunConnectorOptions {
+  // App information
   appName: string;
   appDescription?: string;
   appUrl?: string;
   appIcon?: string;
+  
+  // Feature toggles
   showMetamask?: boolean;
   showWebauthn?: boolean;
+  showNostr?: boolean;
+  showOauth?: boolean;
   darkMode?: boolean;
+  
+  // Network configuration
   websocketSecure?: boolean;
-  didRegistryAddress?: string | null;
   providerUrl?: string | null;
   peers?: string[];
+  authToken?: string;
+  gunInstance?: IGunInstance<any>;
+  
+  // Advanced options
+  logging?: {
+    enabled: boolean;
+    level: "error" | "warning" | "info" | "debug";
+  };
+  timeouts?: {
+    login?: number;
+    signup?: number;
+    operation?: number;
+  };
+  oauth?: {
+    providers: Record<string, {
+      clientId: string;
+      clientSecret?: string;
+      redirectUri?: string;
+    }>
+  }
 }
 ```
 
@@ -157,6 +235,8 @@ interface ShogunConnectorResult {
   options: ShogunConnectorOptions;
   setProvider: (provider: string | EthersProvider) => boolean;
   getCurrentProviderUrl: () => string | null;
+  registerPlugin: (plugin: any) => boolean;
+  hasPlugin: (name: string) => boolean;
 }
 ```
 

package/dist/components/ShogunButton.d.ts

@@ -1,10 +1,11 @@
 import React from "react";
 import { ShogunCore } from "shogun-core";
 import { Observable } from "rxjs";
+import { GunAdvancedPlugin } from "../plugins/GunAdvancedPlugin";
 import "../types/index.js";
 import "../styles/index.css";
 type ShogunContextType = {
-    sdk: ShogunCore | null;
+    core: ShogunCore | null;
     options: any;
     isLoggedIn: boolean;
     userPub: string | null;
@@ -18,11 +19,27 @@ type ShogunContextType = {
     getPlugin: <T>(name: string) => T | undefined;
     exportGunPair: (password?: string) => Promise<string>;
     importGunPair: (pairData: string, password?: string) => Promise<boolean>;
+    gunPlugin: GunAdvancedPlugin | null;
+    useGunState: <T>(path: string, defaultValue?: T) => any;
+    useGunCollection: <T>(path: string, options?: any) => any;
+    useGunConnection: (path: string) => {
+        isConnected: boolean;
+        lastSeen: Date | null;
+        error: string | null;
+    };
+    useGunDebug: (path: string, enabled?: boolean) => void;
+    useGunRealtime: <T>(path: string, callback?: (data: T, key: string) => void) => {
+        data: T | null;
+        key: string | null;
+    };
+    put: (path: string, data: any) => Promise<void>;
+    get: (path: string) => any;
+    remove: (path: string) => Promise<void>;
 };
 export declare const useShogun: () => ShogunContextType;
 type ShogunButtonProviderProps = {
     children: React.ReactNode;
-    sdk: ShogunCore;
+    core: ShogunCore;
     options: any;
     onLoginSuccess?: (data: {
         userPub: string;
@@ -38,7 +55,7 @@ type ShogunButtonProviderProps = {
     }) => void;
     onError?: (error: string) => void;
 };
-export declare function ShogunButtonProvider({ children, sdk, options, onLoginSuccess, onSignupSuccess, onError, }: ShogunButtonProviderProps): React.JSX.Element;
+export declare function ShogunButtonProvider({ children, core, options, onLoginSuccess, onSignupSuccess, onError, }: ShogunButtonProviderProps): React.JSX.Element;
 type ShogunButtonComponent = React.FC & {
     Provider: typeof ShogunButtonProvider;
     useShogun: typeof useShogun;