shogun-button-react 1.5.20 → 1.5.22

package/README.md

@@ -13,6 +13,14 @@ A React component library for seamless integration of Shogun authentication into
 - 📱 Responsive design
 - 🌍 TypeScript support
 
+## Installation
+
+```bash
+npm install shogun-button-react
+# or
+yarn add shogun-button-react
+```
+
 ## Quick Start
 
 ```tsx
@@ -25,11 +33,27 @@ import {
 import "shogun-button-react/styles.css";
 
 function App() {
-  const { sdk, options, setProvider } = shogunConnector({
+  const { sdk, options } = shogunConnector({
     appName: "My App",
     appDescription: "An awesome app with Shogun authentication",
     appUrl: "https://myapp.com",
     appIcon: "https://myapp.com/icon.png",
+    // Enable authentication methods
+    showMetamask: true,
+    showWebauthn: true,
+    showNostr: true,
+    showOauth: true,
+    // Network configuration
+    peers: ["https://gun-manhattan.herokuapp.com/gun"],
+    // OAuth providers (optional)
+    oauth: {
+      providers: {
+        google: {
+          clientId: "YOUR_GOOGLE_CLIENT_ID",
+          redirectUri: "http://localhost:3000/auth/callback",
+        },
+      },
+    },
   });
 
   return (
@@ -45,6 +69,9 @@ function App() {
       onError={(error) => {
         console.error("An error occurred:", error);
       }}
+      onLogout={() => {
+        console.log("User logged out");
+      }}
     >
       <div>
         <h1>Welcome to My App</h1>
@@ -65,13 +92,14 @@ The provider component that supplies Shogun context to your application.
 
 #### Props
 
-| Name            | Type                     | Description                                    |
-| --------------- | ------------------------ | ---------------------------------------------- |
-| sdk             | ShogunCore               | Shogun SDK instance created by shogunConnector |
-| options         | Object                   | Configuration options                          |
+| Name            | Type                                                                                          | Description                                    |
+| --------------- | --------------------------------------------------------------------------------------------- | ---------------------------------------------- |
+| sdk             | ShogunCore                                                                                    | Shogun SDK instance created by shogunConnector |
+| options         | ShogunConnectorOptions                                                                        | Configuration options                          |
 | 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            |
+| onError         | (error: string) => void                                                                       | Callback fired when an error occurs            |
+| onLogout        | () => void                                                                                    | Callback fired when user logs out              |
 
 ### ShogunButton
 
@@ -93,7 +121,6 @@ function Profile() {
     login,
     signup,
     logout,
-    setProvider,
     hasPlugin,
     getPlugin,
     exportGunPair,
@@ -104,37 +131,35 @@ function Profile() {
   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 */ };
+    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');
-  };
-
   const handleExportPair = async () => {
     try {
       const pairData = await exportGunPair("optional-encryption-password");
@@ -159,10 +184,10 @@ function Profile() {
   // Observe reactive data changes
   useEffect(() => {
     if (isLoggedIn) {
-      const subscription = observe<any>('user/profile').subscribe(data => {
-        console.log('Profile data updated:', data);
+      const subscription = observe<any>("user/profile").subscribe((data) => {
+        console.log("Profile data updated:", data);
       });
-      
+
       return () => subscription.unsubscribe();
     }
   }, [isLoggedIn, observe]);
@@ -172,7 +197,6 @@ function Profile() {
       <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>
   ) : (
@@ -192,38 +216,37 @@ interface ShogunConnectorOptions {
   appDescription?: string;
   appUrl?: string;
   appIcon?: string;
-  
+
   // Feature toggles
   showMetamask?: boolean;
   showWebauthn?: boolean;
   showNostr?: boolean;
   showOauth?: boolean;
   darkMode?: boolean;
-  
+
   // Network configuration
   websocketSecure?: boolean;
   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;
-    }>
-  }
+    providers: Record<
+      string,
+      {
+        clientId: string;
+        clientSecret?: string;
+        redirectUri?: string;
+      }
+    >;
+  };
 }
 ```
 
@@ -233,14 +256,86 @@ The `shogunConnector` returns an object with the following properties:
 interface ShogunConnectorResult {
   sdk: ShogunCore;
   options: ShogunConnectorOptions;
-  setProvider: (provider: string | EthersProvider) => boolean;
-  getCurrentProviderUrl: () => string | null;
   registerPlugin: (plugin: any) => boolean;
   hasPlugin: (name: string) => boolean;
 }
 ```
 
-> **Note**: The `setProvider` method attempts to update the RPC provider URL used by the SDK. This functionality depends on the specific version of Shogun Core you're using. If the SDK does not have a public `setRpcUrl` method available, the provider URL will still be saved but not applied to the SDK directly. In such cases, the setting will only be available through the `getCurrentProviderUrl` method.
+## Authentication Methods
+
+### Password Authentication
+
+```tsx
+// Login
+await login("password", "username", "password");
+
+// Sign up
+await signup("password", "username", "password");
+```
+
+### Web3 Authentication (MetaMask)
+
+```tsx
+// Login with MetaMask
+await login("web3");
+
+// Sign up with MetaMask
+await signup("web3");
+```
+
+### WebAuthn Authentication
+
+```tsx
+// Login with WebAuthn
+await login("webauthn", "username");
+
+// Sign up with WebAuthn
+await signup("webauthn", "username");
+```
+
+### Nostr Authentication
+
+```tsx
+// Login with Nostr
+await login("nostr");
+
+// Sign up with Nostr
+await signup("nostr");
+```
+
+### OAuth Authentication
+
+```tsx
+// Login with OAuth provider
+await login("oauth", "google");
+
+// Sign up with OAuth provider
+await signup("oauth", "google");
+```
+
+### Account Recovery (Gun Pair)
+
+```tsx
+// Login with exported pair
+await login("pair", pairData);
+
+// Sign up with pair
+await signup("pair", pairData);
+```
+
+## Plugin Management
+
+```tsx
+const { hasPlugin, getPlugin } = useShogun();
+
+// Check if a plugin is available
+if (hasPlugin("web3")) {
+  const web3Plugin = getPlugin("web3");
+  // Use the plugin
+}
+
+// Available plugins: "web3", "webauthn", "nostr", "oauth"
+```
 
 ## Styling
 
@@ -252,10 +347,25 @@ The component comes with default styling that you can override using CSS variabl
   --shogun-button-hover: #3f51b5;
   --shogun-text-primary: #333333;
   --shogun-background: #ffffff;
-  /* ... other variables */
+  --shogun-border-radius: 8px;
+  --shogun-font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --shogun-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shogun-transition: all 0.2s ease-in-out;
 }
 ```
 
+### Dark Mode
+
+Enable dark mode by setting the `darkMode` option to `true`:
+
+```tsx
+const { sdk, options } = shogunConnector({
+  appName: "My App",
+  darkMode: true, // Enable dark mode
+});
+```
+
 ## Browser Support
 
 - Chrome ≥ 60
@@ -263,6 +373,13 @@ The component comes with default styling that you can override using CSS variabl
 - Safari ≥ 12
 - Edge ≥ 79
 
+## Dependencies
+
+- React ≥ 18.0.0
+- shogun-core ≥ 1.5.19
+- ethers ≥ 6.13.5
+- rxjs ≥ 7.8.1
+
 ## Contributing
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shogun-button-react",
   "description": "Shogun connector button",
-  "version": "1.5.20",
+  "version": "1.5.22",
   "files": [
     "dist",
     "src/styles/index.css"
@@ -34,7 +34,7 @@
     "ethers": "^6.13.5",
     "prettier": "^3.5.3",
     "rxjs": "^7.8.1",
-    "shogun-core": "^1.5.19"
+    "shogun-core": "^1.6.12"
   },
   "peerDependencies": {
     "react": "^18.0.0",