Button text reactive

Author: maxgttph

hyle-wallet/src/components/HyleWallet.tsx

@@ -56,7 +56,15 @@ export const HyleWallet = ({
   const [selectedProvider, setSelectedProvider] = useState<ProviderOption | null>(null);
   const [showLogin, setShowLogin] = useState(true); // true = login (default), false = create/sign-up
   const { isLoading: isLoadingConfig, error: configError } = useConfig();
-  const { wallet } = useWallet();
+  const { wallet, logout } = useWallet();
+
+  const handleButtonClick = () => {
+    if (wallet) {
+      logout();
+    } else {
+      setIsOpen(true);
+    }
+  };
 
   // Get available providers dynamically
   const availableProviders = authProviderManager.getAvailableProviders() as ProviderOption[];
@@ -68,8 +76,6 @@ export const HyleWallet = ({
     }
   }, [wallet, isOpen]);
 
-  const openModal = () => setIsOpen(true);
-
   const closeModal = () => {
     setIsOpen(false);
     setSelectedProvider(null);
@@ -83,7 +89,6 @@ export const HyleWallet = ({
   if (configError) {
     return <div>Error loading configuration: {configError}</div>;
   }
-  
 
   const renderProviderButton = (providerType: ProviderOption) => {
     const provider = authProviderManager.getProvider(providerType);
@@ -120,10 +125,10 @@ export const HyleWallet = ({
   return (
     <>
       {button ? (
-        button({ onClick: openModal })
+        button({ onClick: handleButtonClick })
       ) : (
-        <button className="hyle-wallet-btn" onClick={openModal}>
-          Connect Wallet
+        <button className="hyle-wallet-btn" onClick={handleButtonClick}>
+          {wallet ? "Log Out" : "Connect Wallet"}
         </button>
       )}
 

hyle-wallet/src/hooks/useWallet.tsx

@@ -35,13 +35,6 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
     }
   }, [wallet]);
 
-  const clear = () => {
-    setWallet(null);
-    setError(null);
-    setStage('idle');
-    localStorage.removeItem('wallet');
-  };
-
   const login = useCallback(async (provider: ProviderOption, credentials: AuthCredentials) => {
     const authProvider = authProviderManager.getProvider(provider);
     if (!authProvider) {
@@ -117,7 +110,10 @@ export const WalletProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }, []);
 
   const logout = useCallback(() => {
-    clear();
+    localStorage.removeItem('wallet');
+    setWallet(null);
+    setError(null);
+    setStage('idle');
   }, []);
 
   return (

hyle-wallet/src/index.ts

@@ -21,6 +21,7 @@ export {
 export type { ProviderOption };
 export { WalletProvider, useWallet } from './hooks/useWallet';
 export { useSessionKey } from './hooks/useSessionKey';
+export { sessionKeyService } from './services/SessionKeyService';
 
 // Register the Web Component
 class HyleWalletElement extends HTMLElement {

hyle-wallet/src/services/SessionKeyService.ts

@@ -4,7 +4,7 @@ import { Secp256k1Blob, serializeIdentityAction, serializeSecp256k1Blob, WalletA
 import { Buffer } from 'buffer';
 import { Blob } from "hyle";
 
-class SessionKeyService {
+export class SessionKeyService {
   private ec: EC.ec;
 
   constructor() {