shogun-button-react 1.3.8 → 1.3.41

package/README.md

@@ -8,8 +8,7 @@ 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, Nostr, OAuth)
-- 🔑 Account backup and recovery (Gun pair export/import)
+- 🔌 Multiple authentication methods (Username/Password, MetaMask, WebAuthn)
 - 📱 Responsive design
 - 🌍 TypeScript support
 
@@ -21,8 +20,8 @@ import {
   ShogunButton,
   ShogunButtonProvider,
   shogunConnector,
-} from "shogun-button-react";
-import "shogun-button-react/styles.css";
+} from "@shogun/shogun-button-react";
+import "@shogun/shogun-button-react/styles.css";
 
 function App() {
   const { sdk, options, setProvider } = shogunConnector({
@@ -67,113 +66,62 @@ The provider component that supplies Shogun context to your application.
 
 | Name            | Type                     | Description                                    |
 | --------------- | ------------------------ | ---------------------------------------------- |
-| sdk             | ShogunCore               | Shogun SDK instance created by shogunConnector |
+| sdk             | ShogunSDK                | Shogun SDK instance created by shogunConnector |
 | options         | Object                   | 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            |
+| onLoginSuccess  | (data: AuthData) => void | Callback fired on successful login             |
+| onSignupSuccess | (data: AuthData) => 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. The component provides a complete authentication UI with modal dialogs for login and signup.
+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>
+```
 
 ### useShogun Hook
 
 A hook to access Shogun authentication state and functions.
 
 ```tsx
-import React, { useEffect } from "react";
-import { useShogun } from "shogun-button-react";
+import { useShogun } from "@shogun/shogun-button-react";
 
 function Profile() {
   const {
-    isLoggedIn,
-    userPub,
-    username,
+    isAuthenticated,
+    user,
     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');
   };
 
-  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 ? (
+  return isAuthenticated ? (
     <div>
-      <h2>Welcome, {username}!</h2>
-      <p>User Public Key: {userPub}</p>
+      <h2>Welcome, {user.username}!</h2>
       <button onClick={logout}>Logout</button>
       <button onClick={switchToCustomNetwork}>Switch Network</button>
-      <button onClick={handleExportPair}>Export Account</button>
     </div>
   ) : (
     <div>Please login to continue</div>
@@ -187,43 +135,17 @@ 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;
-    }>
-  }
 }
 ```
 
@@ -235,8 +157,6 @@ interface ShogunConnectorResult {
   options: ShogunConnectorOptions;
   setProvider: (provider: string | EthersProvider) => boolean;
   getCurrentProviderUrl: () => string | null;
-  registerPlugin: (plugin: any) => boolean;
-  hasPlugin: (name: string) => boolean;
 }
 ```
 

package/dist/components/ShogunButton.js

@@ -536,7 +536,11 @@ export const ShogunButton = (() => {
                 setError("WebAuthn is not supported in your browser");
                 return;
             }
-            setAuthView("webauthn-username");
+            if (!formUsername) {
+                setError("Username required for WebAuthn");
+                return;
+            }
+            handleAuth("webauthn", formUsername);
         };
         const handleNostrAuth = () => handleAuth("nostr");
         const handleOAuth = (provider) => handleAuth("oauth", provider);
@@ -649,7 +653,13 @@ export const ShogunButton = (() => {
                     React.createElement(WalletIcon, null),
                     formMode === "login" ? "Login with MetaMask" : "Signup with MetaMask"))),
             options.showWebauthn !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("webauthn")) && (React.createElement("div", { className: "shogun-auth-option-group" },
-                React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: handleWebAuthnAuth, disabled: loading },
+                React.createElement("button", { type: "button", className: "shogun-auth-option-button", onClick: () => {
+                        if (!formUsername) {
+                            setError("Username required for WebAuthn");
+                            return;
+                        }
+                        handleAuth("webauthn", formUsername);
+                    }, disabled: loading },
                     React.createElement(WebAuthnIcon, null),
                     formMode === "login" ? "Login with WebAuthn" : "Signup with WebAuthn"))),
             options.showNostr !== false && (sdk === null || sdk === void 0 ? void 0 : sdk.hasPlugin("nostr")) && (React.createElement("div", { className: "shogun-auth-option-group" },
@@ -710,22 +720,6 @@ export const ShogunButton = (() => {
                     ? "Don't have an account? Sign up"
                     : "Already have an account? Log in"),
                 formMode === "login" && (React.createElement("button", { type: "button", className: "shogun-toggle-mode", onClick: () => setAuthView("recover"), disabled: loading }, "Forgot password?")))));
-        const renderWebAuthnUsernameForm = () => (React.createElement("div", { className: "shogun-auth-form" },
-            React.createElement("h3", null, formMode === "login" ? "Login with WebAuthn" : "Sign Up with WebAuthn"),
-            React.createElement("div", { style: { backgroundColor: '#f0f9ff', padding: '12px', borderRadius: '8px', marginBottom: '16px', border: '1px solid #0ea5e9' } },
-                React.createElement("p", { style: { fontSize: '14px', color: '#0c4a6e', margin: '0', fontWeight: '500' } }, "\uD83D\uDD11 WebAuthn Authentication"),
-                React.createElement("p", { style: { fontSize: '13px', color: '#075985', margin: '4px 0 0 0' } },
-                    "Please enter your username to continue with WebAuthn ",
-                    formMode === "login" ? "login" : "registration",
-                    ".")),
-            React.createElement("div", { className: "shogun-form-group" },
-                React.createElement("label", { htmlFor: "username" },
-                    React.createElement(UserIcon, null),
-                    React.createElement("span", null, "Username")),
-                React.createElement("input", { type: "text", id: "username", value: formUsername, onChange: (e) => setFormUsername(e.target.value), disabled: loading, required: true, placeholder: "Enter your username", autoFocus: true })),
-            React.createElement("button", { type: "button", className: "shogun-submit-button", onClick: () => handleAuth("webauthn", formUsername), disabled: loading || !formUsername.trim() }, loading ? "Processing..." : `Continue with WebAuthn`),
-            React.createElement("div", { className: "shogun-form-footer" },
-                React.createElement("button", { type: "button", className: "shogun-back-button", onClick: () => setAuthView("options"), disabled: loading }, "\u2190 Back to Options"))));
         const renderRecoveryForm = () => (React.createElement("div", { className: "shogun-auth-form" },
             React.createElement("div", { className: "shogun-form-group" },
                 React.createElement("label", { htmlFor: "username" },
@@ -851,11 +845,9 @@ export const ShogunButton = (() => {
                                     ? "Export Gun Pair"
                                     : authView === "import"
                                         ? "Import Gun Pair"
-                                        : authView === "webauthn-username"
-                                            ? "WebAuthn"
-                                            : formMode === "login"
-                                                ? "Login"
-                                                : "Sign Up"),
+                                        : formMode === "login"
+                                            ? "Login"
+                                            : "Sign Up"),
                         React.createElement("button", { className: "shogun-close-button", onClick: closeModal, "aria-label": "Close" },
                             React.createElement(CloseIcon, null))),
                     React.createElement("div", { className: "shogun-modal-content" },
@@ -872,8 +864,7 @@ export const ShogunButton = (() => {
                         authView === "recover" && renderRecoveryForm(),
                         authView === "showHint" && renderHint(),
                         authView === "export" && renderExportForm(),
-                        authView === "import" && renderImportForm(),
-                        authView === "webauthn-username" && renderWebAuthnUsernameForm()))))));
+                        authView === "import" && renderImportForm()))))));
     };
     Button.displayName = "ShogunButton";
     return Object.assign(Button, {

package/dist/index.css

@@ -0,0 +1,756 @@
+/* Base styles */
+:root {
+  --shogun-primary: #3b82f6;
+  --shogun-primary-hover: #2563eb;
+  --shogun-secondary: #6b7280;
+  --shogun-success: #10b981;
+  --shogun-danger: #ef4444;
+  --shogun-warning: #f59e0b;
+  --shogun-text: #1f2937;
+  --shogun-text-secondary: #6b7280;
+  --shogun-bg: #ffffff;
+  --shogun-bg-secondary: #f3f4f6;
+  --shogun-border: #e5e7eb;
+  --shogun-border-radius: 12px;
+  --shogun-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shogun-transition: all 0.2s ease;
+  --shogun-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  :root {
+    --shogun-text: #f3f4f6;
+    --shogun-text-secondary: #9ca3af;
+    --shogun-bg: #1f2937;
+    --shogun-bg-secondary: #374151;
+    --shogun-border: #4b5563;
+  }
+}
+
+/* Connect Button */
+.shogun-connect-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background-color: var(--shogun-primary);
+  color: white;
+  border: none;
+  border-radius: var(--shogun-border-radius);
+  padding: 10px 16px;
+  font-family: var(--shogun-font);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--shogun-transition);
+  box-shadow: var(--shogun-shadow);
+}
+
+.shogun-connect-button:hover {
+  background-color: var(--shogun-primary-hover);
+}
+
+.shogun-connect-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+}
+
+/* Logged in state */
+.shogun-logged-in-container {
+  position: relative;
+}
+
+.shogun-dropdown {
+  position: relative;
+}
+
+.shogun-button.shogun-logged-in {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background-color: var(--shogun-bg-secondary);
+  color: var(--shogun-text);
+  border: 1px solid var(--shogun-border);
+  border-radius: var(--shogun-border-radius);
+  padding: 8px 12px;
+  font-family: var(--shogun-font);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--shogun-transition);
+}
+
+.shogun-button.shogun-logged-in:hover {
+  background-color: var(--shogun-bg);
+}
+
+.shogun-avatar {
+  width: 24px;
+  height: 24px;
+  background-color: var(--shogun-primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.shogun-username {
+  font-weight: 500;
+}
+
+.shogun-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  background-color: var(--shogun-bg);
+  border: 1px solid var(--shogun-border);
+  border-radius: var(--shogun-border-radius);
+  box-shadow: var(--shogun-shadow);
+  width: 240px;
+  z-index: 100;
+  overflow: hidden;
+  animation: shogun-dropdown-fade 0.2s ease;
+}
+
+@keyframes shogun-dropdown-fade {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.shogun-dropdown-header {
+  padding: 16px;
+  border-bottom: 1px solid var(--shogun-border);
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.shogun-avatar-large {
+  width: 40px;
+  height: 40px;
+  background-color: var(--shogun-primary);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 16px;
+}
+
+.shogun-user-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.shogun-username-full {
+  font-weight: 600;
+  color: var(--shogun-text);
+  font-size: 14px;
+}
+
+.shogun-dropdown-item {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--shogun-text);
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--shogun-transition);
+}
+
+.shogun-dropdown-item:hover {
+  background-color: var(--shogun-bg-secondary);
+}
+
+/* Modal */
+.shogun-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  animation: shogun-fade-in 0.2s ease;
+}
+
+@keyframes shogun-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.shogun-modal {
+  background-color: var(--shogun-bg);
+  border-radius: var(--shogun-border-radius);
+  box-shadow: var(--shogun-shadow);
+  width: 90%;
+  max-width: 400px;
+  max-height: 90vh;
+  overflow-y: auto;
+  animation: shogun-scale-in 0.2s ease;
+}
+
+@keyframes shogun-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.shogun-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--shogun-border);
+}
+
+.shogun-modal-header h2 {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: #111827;
+  text-align: center;
+  width: 100%;
+}
+
+.shogun-close-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--shogun-text-secondary);
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  transition: var(--shogun-transition);
+}
+
+.shogun-close-button:hover {
+  background-color: var(--shogun-bg-secondary);
+  color: var(--shogun-text);
+}
+
+.shogun-modal-content {
+  padding: 20px;
+}
+
+/* Auth options */
+.shogun-auth-options {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.shogun-auth-option-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background-color: var(--shogun-bg);
+  color: var(--shogun-text);
+  border: 1px solid var(--shogun-border);
+  border-radius: var(--shogun-border-radius);
+  padding: 12px 16px;
+  font-family: var(--shogun-font);
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--shogun-transition);
+  width: 100%;
+}
+
+.shogun-auth-option-button:hover {
+  background-color: var(--shogun-bg-secondary);
+}
+
+.shogun-auth-option-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.shogun-google-button {
+  border-color: #4285F4;
+}
+
+/* Divider */
+.shogun-divider {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  color: var(--shogun-text-secondary);
+  font-size: 14px;
+}
+
+.shogun-divider::before,
+.shogun-divider::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid var(--shogun-border);
+}
+
+.shogun-divider span {
+  padding: 0 10px;
+}
+
+/* Form */
+.shogun-auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.shogun-form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.shogun-form-group label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--shogun-text);
+}
+
+.shogun-form-group input {
+  padding: 12px;
+  border: 1px solid var(--shogun-border);
+  border-radius: var(--shogun-border-radius);
+  background-color: var(--shogun-bg);
+  color: var(--shogun-text);
+  font-size: 14px;
+  transition: var(--shogun-transition);
+}
+
+.shogun-form-group input:focus {
+  outline: none;
+  border-color: var(--shogun-primary);
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+}
+
+.shogun-submit-button {
+  background-color: var(--shogun-primary);
+  color: white;
+  border: none;
+  border-radius: var(--shogun-border-radius);
+  padding: 12px 16px;
+  font-family: var(--shogun-font);
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: var(--shogun-transition);
+  margin-top: 8px;
+}
+
+.shogun-submit-button:hover:not(:disabled) {
+  background-color: var(--shogun-primary-hover);
+}
+
+.shogun-submit-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Footer */
+.shogun-form-footer {
+  margin-top: 20px;
+  text-align: center;
+  font-size: 14px;
+  color: var(--shogun-text-secondary);
+}
+
+.shogun-toggle-mode {
+  background: none;
+  border: none;
+  color: var(--shogun-primary);
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 4px;
+  transition: var(--shogun-transition);
+}
+
+.shogun-toggle-mode:hover {
+  text-decoration: underline;
+}
+
+.shogun-toggle-mode:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Error message */
+.shogun-error-message {
+  background-color: rgba(239, 68, 68, 0.1);
+  color: var(--shogun-danger);
+  padding: 12px;
+  border-radius: var(--shogun-border-radius);
+  margin-bottom: 16px;
+  font-size: 14px;
+  border: 1px solid rgba(239, 68, 68, 0.2);
+}
+
+/* Shogun Button Styles */
+
+.shogun-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 12px 20px;
+  background-color: #3861fb;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-width: 150px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.shogun-button:hover {
+  background-color: #2d4fd6;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+.shogun-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.shogun-button.shogun-logged-in {
+  background-color: #4CAF50;
+}
+
+.shogun-button.shogun-logged-in:hover {
+  background-color: #43a047;
+}
+
+.shogun-button-custom {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Tema scuro */
+[data-shogun-theme="dark"] .shogun-button {
+  background-color: #4a5568;
+  color: white;
+}
+
+[data-shogun-theme="dark"] .shogun-button:hover {
+  background-color: #2d3748;
+}
+
+[data-shogun-theme="dark"] .shogun-button.shogun-logged-in {
+  background-color: #38a169;
+}
+
+[data-shogun-theme="dark"] .shogun-button.shogun-logged-in:hover {
+  background-color: #2f855a;
+}
+
+/* Stili per il modale di login/registrazione */
+.shogun-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.shogun-modal {
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  max-width: 420px;
+  overflow: hidden;
+}
+
+.shogun-modal-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.shogun-modal-header h2 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.shogun-close-button {
+  background: none;
+  border: none;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+}
+
+.shogun-modal-content {
+  padding: 20px;
+}
+
+.shogun-error-message {
+  background-color: #ffebee;
+  color: #d32f2f;
+  border-radius: 4px;
+  padding: 10px;
+  margin-bottom: 16px;
+  font-size: 14px;
+}
+
+.shogun-form-group {
+  margin-bottom: 16px;
+}
+
+.shogun-form-group label {
+  display: block;
+  margin-bottom: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.shogun-form-group input {
+  width: 100%;
+  padding: 10px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.shogun-submit-button {
+  width: 100%;
+  background-color: #4a2afd;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-top: 8px;
+}
+
+.shogun-submit-button:hover {
+  background-color: #3115d6;
+}
+
+.shogun-submit-button:disabled {
+  background-color: #a9a9a9;
+  cursor: not-allowed;
+}
+
+.shogun-divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 16px 0;
+  color: #666;
+  font-size: 14px;
+}
+
+.shogun-divider::before,
+.shogun-divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.shogun-divider::before {
+  margin-right: 10px;
+}
+
+.shogun-divider::after {
+  margin-left: 10px;
+}
+
+.shogun-metamask-button,
+.shogun-webauthn-button,
+.shogun-nostr-button,
+.shogun-oauth-button {
+  width: 100%;
+  background-color: #fff;
+  color: #333;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 12px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.shogun-metamask-button:hover,
+.shogun-webauthn-button:hover,
+.shogun-nostr-button:hover,
+.shogun-oauth-button:hover {
+  background-color: #f5f5f5;
+}
+
+.shogun-metamask-button:disabled,
+.shogun-webauthn-button:disabled,
+.shogun-nostr-button:disabled,
+.shogun-oauth-button:disabled {
+  background-color: #f5f5f5;
+  color: #a9a9a9;
+  cursor: not-allowed;
+}
+
+.shogun-form-footer {
+  text-align: center;
+  margin-top: 16px;
+  font-size: 14px;
+  color: #666;
+}
+
+.shogun-toggle-mode {
+  background: none;
+  border: none;
+  color: #4a2afd;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 4px;
+}
+
+.shogun-toggle-mode:disabled {
+  color: #a9a9a9;
+  cursor: not-allowed;
+}
+
+/* Stili per i container DID */
+.shogun-logged-in-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+}
+
+.shogun-did-container {
+  max-width: 100%;
+  padding: 10px;
+  background-color: #f5f5f5;
+  border-radius: 5px;
+  margin-top: 5px;
+  word-break: break-all;
+  text-align: center;
+}
+
+.shogun-did-text {
+  font-size: 12px;
+  color: #555;
+  margin: 0 0 10px 0;
+  word-break: break-all;
+}
+
+.shogun-register-did-button {
+  padding: 6px 12px;
+  background-color: #4a56e2;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  transition: background-color 0.3s;
+}
+
+.shogun-register-did-button:hover {
+  background-color: #3a46c2;
+}
+
+.shogun-register-did-button:disabled {
+  background-color: #a0a0a0;
+  cursor: not-allowed;
+}
+
+.shogun-logout-button {
+  padding: 6px 12px;
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 13px;
+  margin-top: 5px;
+  transition: background-color 0.3s;
+}
+
+.shogun-logout-button:hover {
+  background-color: #c0392b;
+}
+
+.shogun-prominent-toggle {
+  font-weight: 600;
+  color: #3b82f6;
+  padding: 8px 16px;
+  margin-top: 16px;
+  border: 1px solid #e5e7eb;
+  border-radius: 6px;
+  background-color: #f9fafb;
+  transition: all 0.2s ease;
+}
+
+.shogun-prominent-toggle:hover {
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle {
+  background-color: #1f2937;
+  border-color: #374151;
+  color: #60a5fa;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
+  background-color: #111827;
+  border-color: #4b5563;
+}
+
+[data-shogun-theme="dark"] .shogun-modal-header h2 {
+  color: #f9fafb;
+} 

package/dist/index.d.ts

@@ -1,7 +1,5 @@
 import { ShogunButton, ShogunButtonProvider, useShogun } from './components/ShogunButton.js';
 import { ShogunConnectorOptions, ShogunConnectorResult } from './types/connector-options.js';
-import { shogunConnector } from './connector.js';
 export { ShogunButton, ShogunButtonProvider, useShogun };
-export { shogunConnector };
 export * from './types/index.js';
 export { ShogunConnectorOptions, ShogunConnectorResult };

package/dist/index.js

@@ -1,8 +1,5 @@
 import { ShogunButton, ShogunButtonProvider, useShogun } from './components/ShogunButton.js';
-import { shogunConnector } from './connector.js';
 // Export components
 export { ShogunButton, ShogunButtonProvider, useShogun };
-// Export connector function
-export { shogunConnector };
 // Export all types
 export * from './types/index.js';

package/dist/styles/index.css

@@ -231,7 +231,7 @@
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
-  color: var(--shogun-text);
+  color: #111827;
   text-align: center;
   width: 100%;
 }
@@ -438,17 +438,31 @@
 
 .shogun-prominent-toggle {
   font-weight: 600;
-  color: var(--shogun-primary);
+  color: #3b82f6;
   padding: 8px 16px;
   margin-top: 16px;
-  border: none;
+  border: 1px solid #e5e7eb;
   border-radius: 6px;
-  background-color: transparent;
+  background-color: #f9fafb;
   transition: all 0.2s ease;
 }
 
 .shogun-prominent-toggle:hover {
-  text-decoration: underline;
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle {
+  background-color: #1f2937;
+  border-color: #374151;
+  color: #60a5fa;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
+  background-color: #111827;
+  border-color: #4b5563;
 }
 
-/* Redundant dark theme styles removed */ 
+[data-shogun-theme="dark"] .shogun-modal-header h2 {
+  color: #f9fafb;
+} 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shogun-button-react",
   "description": "Shogun connector button",
-  "version": "1.3.8",
+  "version": "1.3.41",
   "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.3.8"
+    "shogun-core": "latest"
   },
   "peerDependencies": {
     "react": "^18.0.0",

package/src/styles/index.css

@@ -231,7 +231,7 @@
   margin: 0;
   font-size: 1.5rem;
   font-weight: 600;
-  color: var(--shogun-text);
+  color: #111827;
   text-align: center;
   width: 100%;
 }
@@ -438,17 +438,31 @@
 
 .shogun-prominent-toggle {
   font-weight: 600;
-  color: var(--shogun-primary);
+  color: #3b82f6;
   padding: 8px 16px;
   margin-top: 16px;
-  border: none;
+  border: 1px solid #e5e7eb;
   border-radius: 6px;
-  background-color: transparent;
+  background-color: #f9fafb;
   transition: all 0.2s ease;
 }
 
 .shogun-prominent-toggle:hover {
-  text-decoration: underline;
+  background-color: #f3f4f6;
+  border-color: #d1d5db;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle {
+  background-color: #1f2937;
+  border-color: #374151;
+  color: #60a5fa;
+}
+
+[data-shogun-theme="dark"] .shogun-prominent-toggle:hover {
+  background-color: #111827;
+  border-color: #4b5563;
 }
 
-/* Redundant dark theme styles removed */ 
+[data-shogun-theme="dark"] .shogun-modal-header h2 {
+  color: #f9fafb;
+} 

package/CHANGELOG.md

@@ -1,54 +0,0 @@
-# Changelog
-
-## Version 1.3.4 (Latest)
-
-### 🐛 Bug Fixes
-- **Export Gun Pair Fix**: Fixed issue where "Export Pair" option was not accessible from user dropdown - now works correctly without requiring disconnect
-- **Modal Logic Improvement**: Enhanced modal rendering logic to allow export functionality when user is already authenticated
-- **UX Enhancement**: Improved back button behavior in export modal - now properly closes modal when user is logged in instead of showing unnecessary auth options
-
-### 🔧 Technical Changes
-- Modified component render logic to show modal even when user is logged in
-- Improved export form navigation for better user experience
-- Reordered dropdown menu items for better flow (Export Pair before Disconnect)
-
-## Version 1.3.3
-
-### ✨ New Features
-- **Import Gun Pair Login**: Aggiunta possibilità di effettuare login tramite importazione di un Gun pair esistente
-- **Export Gun Pair**: Funzionalità per esportare il proprio Gun pair con opzione di crittografia tramite password
-- **Improved UX**: Migliorata l'interfaccia utente con feedback visivi e messaggi informativi
-
-### 🔧 Improvements
-- **Navigation Fix**: Il toggle "Don't have account? Sign up" ora porta alla selezione dei metodi di autenticazione invece che direttamente al form password
-- **Visual Feedback**: Sostituiti gli alert con feedback visivi eleganti per export/import
-- **Better Icons**: Aggiunte icone SVG personalizzate per import/export
-- **Auto-copy**: L'export del pair viene automaticamente copiato negli appunti (quando supportato dal browser)
-- **Enhanced Security**: Messaggi informativi per guidare l'utente nell'uso sicuro delle funzionalità
-
-### 🛠 Technical Changes
-- Rimosso l'uso del metodo `on` non disponibile in ShogunCore
-- Definiti tipi locali per `AuthResult` per compatibilità
-- Migliorata gestione degli stati nel provider
-- Aggiunto reset completo degli stati quando si chiude il modal
-
-### 🎨 UI/UX Enhancements
-- Box informativi colorati per import/export
-- Feedback di successo con timer automatico
-- Indicatori di caricamento migliorati
-- Messaggi di fallback per browser senza supporto clipboard
-
-## Version 1.3.2
-
-### Features
-- Basic Gun pair export/import functionality
-- Multi-authentication support (Password, MetaMask, WebAuthn, Nostr, OAuth)
-- Dark mode support
-- Responsive design
-
-## Version 1.3.1
-
-### Features
-- Initial release
-- Basic authentication flow
-- Provider integration