@ic-reactor/react 1.0.3 → 1.0.5

package/README.md

@@ -3,6 +3,7 @@
 ## Features
 
 - **React Hooks Integration**: Custom hooks for managing blockchain actor states and authentication within React applications.
+- **Type-Safe Actor Interactions**: Type-safe interaction with IC actors using the provided actor declaration file.
 - **Efficient State Management**: Utilize the power of Zustand for global state management in React components.
 - **Asynchronous Data Handling**: Easy handling of asynchronous operations related to IC actors.
 - **Authentication Support**: Integrated hooks for managing authentication with the IC blockchain.
@@ -29,7 +30,7 @@ Here's a simple example to get you started:
 First, create an actor declaration file:
 
 ```ts
-// store.ts
+// actor.ts
 import { canisterId, idlFactory, actor } from "declaration/actor"
 import { createReactor } from "@ic-reactor/react"
 
@@ -37,7 +38,7 @@ type Actor = typeof actor
 
 export const { useActorStore, useAuthClient, useQueryCall } =
   createReactor<Actor>({
-    canisterId: "rrkah-fqaaa-aaaaa-aaaaq-cai",
+    canisterId,
     idlFactory,
     host: "https://localhost:4943",
   })
@@ -47,7 +48,7 @@ Then, use the `useQueryCall` hook to call your canister method:
 
 ```jsx
 // Balance.tsx
-import { useQueryCall } from "./store"
+import { useQueryCall } from "./actor"
 
 const Balance = ({ principal }) => {
   const { call, data, loading, error } = useQueryCall({
@@ -62,7 +63,7 @@ const Balance = ({ principal }) => {
 
   return (
     <div>
-      <button onClick={() => call()} disabled={loading}>
+      <button onClick={call} disabled={loading}>
         {loading ? "Loading..." : "Refresh"}
       </button>
       {loading && <p>Loading...</p>}
@@ -81,7 +82,7 @@ export default Balance
 
 ```jsx
 // Login.tsx
-import { useAuthClient } from "./store"
+import { useAuthClient } from "./actor"
 
 const Login = () => {
   const {
@@ -104,21 +105,11 @@ const Login = () => {
       </div>
       {authenticated ? (
         <div>
-          <button onClick={() => logout()}>Logout</button>
+          <button onClick={logout}>Logout</button>
         </div>
       ) : (
         <div>
-          <button
-            onClick={() =>
-              login({
-                identityProvider:
-                  process.env.DFX_NETWORK === "ic"
-                    ? "https://identity.ic0.app/#authorize"
-                    : "http://rdmx6-jaaaa-aaaaa-aaadq-cai.localhost:4943/#authorize",
-              })
-            }
-            disabled={authenticating}
-          >
+          <button onClick={login} disabled={authenticating}>
             Login
           </button>
         </div>

package/dist/helpers/actorHooks.d.ts

@@ -0,0 +1,18 @@
+import type { ActorHooksReturnType } from "../types";
+import type { ActorManager, BaseActor } from "@ic-reactor/core/dist/types";
+/**
+ * Provides a set of React hooks designed for interacting with actors in an Internet Computer (IC) project using the React framework and Zustand for state management.
+ *
+ * @param actorManager An instance of ActorManager containing methods and properties to manage actors, including the actorStore, canisterId, visitFunction, callMethod, and initialize function.
+ * @returns An object containing several hooks and utility functions for interacting with actors, managing state, and invoking actor methods.
+ *
+ * Hooks included:
+ * - initialize: Function to initialize actor management.
+ * - useActorState: Hook for accessing the actor's state including the canister ID.
+ * - useVisitMethod: Hook for memoizing a method visit service for a given actor method name.
+ * - useQueryCall: Hook specifically designed for query calls to actors with features such as automatic refetching on mount and at specified intervals.
+ * - useUpdateCall: Hook specifically designed for update calls to actors with features such as error handling and loading state management.
+ *
+ * Each hook is designed to simplify the process of interacting with actors in IC projects by abstracting away the complexity of state management, error handling, and method invocation.
+ */
+export declare const actorHooks: <A = BaseActor>(actorManager: ActorManager<A>) => ActorHooksReturnType<A>;

package/dist/helpers/{actor.js → actorHooks.js}

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getActorHooks = void 0;
+exports.actorHooks = void 0;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
 const DEFAULT_STATE = {
@@ -28,19 +28,34 @@ const DEFAULT_STATE = {
     error: undefined,
     loading: false,
 };
-const getActorHooks = (actorManager) => {
+/**
+ * Provides a set of React hooks designed for interacting with actors in an Internet Computer (IC) project using the React framework and Zustand for state management.
+ *
+ * @param actorManager An instance of ActorManager containing methods and properties to manage actors, including the actorStore, canisterId, visitFunction, callMethod, and initialize function.
+ * @returns An object containing several hooks and utility functions for interacting with actors, managing state, and invoking actor methods.
+ *
+ * Hooks included:
+ * - initialize: Function to initialize actor management.
+ * - useActorState: Hook for accessing the actor's state including the canister ID.
+ * - useVisitMethod: Hook for memoizing a method visit service for a given actor method name.
+ * - useQueryCall: Hook specifically designed for query calls to actors with features such as automatic refetching on mount and at specified intervals.
+ * - useUpdateCall: Hook specifically designed for update calls to actors with features such as error handling and loading state management.
+ *
+ * Each hook is designed to simplify the process of interacting with actors in IC projects by abstracting away the complexity of state management, error handling, and method invocation.
+ */
+const actorHooks = (actorManager) => {
     const { actorStore, canisterId, visitFunction, callMethod, initialize } = actorManager;
     const useActorState = () => (Object.assign(Object.assign({}, (0, zustand_1.useStore)(actorStore)), { canisterId }));
     const useVisitMethod = (functionName) => {
         return (0, react_1.useMemo)(() => visitFunction[functionName], [functionName]);
     };
-    const useReactorCall = (_a) => {
+    const useMethodCall = (_a) => {
         var { args = [], functionName, throwOnError = false } = _a, events = __rest(_a, ["args", "functionName", "throwOnError"]);
         const [state, setState] = (0, react_1.useState)(DEFAULT_STATE);
         const reset = (0, react_1.useCallback)(() => setState(DEFAULT_STATE), []);
         const call = (0, react_1.useCallback)((eventOrReplaceArgs) => __awaiter(void 0, void 0, void 0, function* () {
             var _b, _c, _d, _e, _f;
-            setState({ data: undefined, error: undefined, loading: true });
+            setState((prev) => (Object.assign(Object.assign({}, prev), { error: undefined, loading: true })));
             (_b = events === null || events === void 0 ? void 0 : events.onLoading) === null || _b === void 0 ? void 0 : _b.call(events, true);
             try {
                 const replaceArgs = eventOrReplaceArgs instanceof Array ? eventOrReplaceArgs : args;
@@ -59,36 +74,31 @@ const getActorHooks = (actorManager) => {
                 if (throwOnError)
                     throw error;
             }
-        }), [args, functionName, events, callMethod]);
+        }), [args, functionName, events]);
         return Object.assign({ call, reset }, state);
     };
     const useQueryCall = (_a) => {
         var { refetchOnMount = true, refetchInterval = false } = _a, rest = __rest(_a, ["refetchOnMount", "refetchInterval"]);
-        const _b = useReactorCall(rest), { call } = _b, state = __rest(_b, ["call"]);
+        const _b = useMethodCall(rest), { call } = _b, state = __rest(_b, ["call"]);
         const intervalId = (0, react_1.useRef)();
         (0, react_1.useEffect)(() => {
-            if (refetchInterval)
+            if (refetchInterval) {
                 intervalId.current = setInterval(call, refetchInterval);
-            return () => clearInterval(intervalId.current);
-        }, [refetchInterval, call]);
-        (0, react_1.useLayoutEffect)(() => {
-            if (refetchOnMount)
+            }
+            if (refetchOnMount) {
                 call();
-        }, [call, refetchOnMount]);
+            }
+            return () => clearInterval(intervalId.current);
+        }, [refetchInterval, refetchOnMount]);
         return Object.assign({ call }, state);
     };
-    const useUpdateCall = useReactorCall;
-    const useMethodCall = (args) => {
-        const visit = useVisitMethod(args.functionName);
-        return Object.assign({ visit }, useReactorCall(args));
-    };
+    const useUpdateCall = useMethodCall;
     return {
         initialize,
         useQueryCall,
         useUpdateCall,
         useActorState,
-        useMethodCall,
         useVisitMethod,
     };
 };
-exports.getActorHooks = getActorHooks;
+exports.actorHooks = actorHooks;

package/dist/helpers/agentHooks.d.ts

@@ -0,0 +1,3 @@
+import type { AgentManager } from "@ic-reactor/core/dist/types";
+import type { AgentHooksReturnType } from "./types";
+export declare const agentHooks: (agentManager: AgentManager) => AgentHooksReturnType;

package/dist/helpers/{agent.js → agentHooks.js}

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAgentHooks = void 0;
+exports.agentHooks = void 0;
 const react_1 = require("react");
 const zustand_1 = require("zustand");
-const getAgentHooks = (agentManager) => {
+const agentHooks = (agentManager) => {
     const { agentStore, getAgent, subscribeAgent } = agentManager;
     const useAgentState = () => (0, zustand_1.useStore)(agentStore);
     const useAgent = () => {
@@ -16,4 +16,4 @@ const getAgentHooks = (agentManager) => {
         useAgentState,
     };
 };
-exports.getAgentHooks = getAgentHooks;
+exports.agentHooks = agentHooks;

package/dist/helpers/authHooks.d.ts

@@ -0,0 +1,2 @@
+import type { AgentManager, AuthHooksReturnType } from "../types";
+export declare const authHooks: (agentManager: AgentManager) => AuthHooksReturnType;

package/dist/helpers/authHooks.js

@@ -0,0 +1,127 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.authHooks = void 0;
+const zustand_1 = require("zustand");
+const react_1 = require("react");
+const tools_1 = require("@ic-reactor/core/dist/tools");
+const authHooks = (agentManager) => {
+    const { authenticate: authenticator, authStore, isLocalEnv } = agentManager;
+    const useAuthState = () => (0, zustand_1.useStore)(authStore);
+    const useUserPrincipal = () => { var _a, _b; return (_b = (_a = useAuthState()) === null || _a === void 0 ? void 0 : _a.identity) === null || _b === void 0 ? void 0 : _b.getPrincipal(); };
+    const useAuthClient = ({ onAuthentication, onAuthenticationSuccess, onAuthenticationFailure, onLogin, onLoginSuccess, onLoginError, onLoggedOut, } = {}) => {
+        const [loginState, setLoginState] = (0, react_1.useState)({
+            loading: false,
+            error: null,
+        });
+        const { authClient, authenticated, authenticating, error, identity } = useAuthState();
+        const authenticate = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+            const authenticatePromise = new Promise((resolve, reject) => {
+                authenticator()
+                    .then((identity) => {
+                    onAuthenticationSuccess === null || onAuthenticationSuccess === void 0 ? void 0 : onAuthenticationSuccess(identity);
+                    resolve(identity);
+                })
+                    .catch((e) => {
+                    onAuthenticationFailure === null || onAuthenticationFailure === void 0 ? void 0 : onAuthenticationFailure(e);
+                    reject(e);
+                });
+            });
+            onAuthentication === null || onAuthentication === void 0 ? void 0 : onAuthentication(() => authenticatePromise);
+            return authenticatePromise;
+        }), [
+            authenticator,
+            onAuthentication,
+            onAuthenticationSuccess,
+            onAuthenticationFailure,
+        ]);
+        const login = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
+            setLoginState({ loading: true, error: null });
+            const loginPromise = new Promise((resolve, reject) => {
+                try {
+                    if (!authClient) {
+                        throw new Error("Auth client not initialized");
+                    }
+                    authClient.login(Object.assign(Object.assign({ identityProvider: isLocalEnv
+                            ? tools_1.IC_INTERNET_IDENTITY_PROVIDER
+                            : tools_1.LOCAL_INTERNET_IDENTITY_PROVIDER }, options), { onSuccess: () => {
+                            authenticate()
+                                .then((identity) => {
+                                var _a;
+                                const principal = identity.getPrincipal();
+                                (_a = options === null || options === void 0 ? void 0 : options.onSuccess) === null || _a === void 0 ? void 0 : _a.call(options);
+                                onLoginSuccess === null || onLoginSuccess === void 0 ? void 0 : onLoginSuccess(principal);
+                                resolve(principal);
+                            })
+                                .catch((e) => {
+                                const error = e;
+                                setLoginState({ loading: false, error });
+                                onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(error);
+                                reject(error);
+                            });
+                        }, onError: (e) => {
+                            var _a;
+                            (_a = options === null || options === void 0 ? void 0 : options.onError) === null || _a === void 0 ? void 0 : _a.call(options, e);
+                            const error = new Error("Login failed: " + e);
+                            setLoginState({ loading: false, error });
+                            onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(error);
+                            reject(error);
+                        } }));
+                }
+                catch (e) {
+                    const error = e;
+                    setLoginState({ loading: false, error });
+                    onLoginError === null || onLoginError === void 0 ? void 0 : onLoginError(error);
+                    reject(error);
+                }
+            });
+            onLogin === null || onLogin === void 0 ? void 0 : onLogin(() => loginPromise);
+        }), [
+            authClient,
+            onLogin,
+            onLoginSuccess,
+            onLoginError,
+            isLocalEnv,
+            authenticate,
+        ]);
+        const logout = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
+            if (!authClient) {
+                throw new Error("Auth client not initialized");
+            }
+            yield authClient.logout(options);
+            yield authenticate();
+            onLoggedOut === null || onLoggedOut === void 0 ? void 0 : onLoggedOut();
+        }), [authClient, onLoggedOut]);
+        (0, react_1.useEffect)(() => {
+            if (!authClient && !authenticating) {
+                authenticate();
+            }
+        }, [authClient, authenticating]);
+        return {
+            authClient,
+            authenticated,
+            authenticating,
+            identity,
+            error,
+            login,
+            logout,
+            authenticate,
+            loginLoading: loginState.loading,
+            loginError: loginState.error,
+        };
+    };
+    return {
+        useUserPrincipal,
+        useAuthState,
+        useAuthClient,
+    };
+};
+exports.authHooks = authHooks;

package/dist/helpers/extractActorContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ActorHooksReturnType, BaseActor, CreateActorContextReturnType } from "../types";
+export declare function extractActorContext<A = BaseActor>(actorContext: React.Context<ActorHooksReturnType<A> | null>): Omit<CreateActorContextReturnType<A>, "ActorProvider">;

package/dist/helpers/extractActorContext.js

@@ -0,0 +1,133 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractActorContext = void 0;
+const react_1 = require("react");
+function extractActorContext(actorContext) {
+    /**
+     * Hook for accessing the actor context, including the actor manager and state.
+     * @returns The actor context, including the actor manager and state.
+     * @example
+     * ```tsx
+     * function ActorComponent() {
+     *  const { initialize, useActorState, useQueryCall, useUpdateCall, useMethodCall, useVisitMethod } = useActorContext();
+     *  const { canisterId } = useActorState();
+     *
+     *  return (
+     *   <div>
+     *     <p>Canister ID: {canisterId}</p>
+     *   </div>
+     *  );
+     * }
+     *
+     * function App() {
+     *  return (
+     *   <ActorProvider canisterId="rrkah-fqaaa-aaaaa-aaaaq-cai">
+     *     <ActorComponent />
+     *   </ActorProvider>
+     *  );
+     * }
+     * ```
+     */
+    const useActorContext = () => {
+        const context = (0, react_1.useContext)(actorContext);
+        if (!context) {
+            throw new Error("Actor hooks must be used within a ActorProvider");
+        }
+        return context;
+    };
+    /**
+     * Initializes the actor manager, setting up the actor's state.
+     */
+    const initialize = () => useActorContext().initialize();
+    /**
+     * Hook for accessing the current state of the actor, including the canister ID.
+     *
+     * @returns An object containing the current state of the actor from Zustand's store and the canister ID.
+     * @example
+     * ```tsx
+     * function ActorStateComponent() {
+     *   const { canisterId, initializing, error, initialized } = useActorState();
+     *
+     *   return (
+     *    <div>
+     *     <p>Canister ID: {canisterId}</p>
+     *     <p>Initializing: {initializing.toString()}</p>
+     *     <p>Initialized: {initialized.toString()}</p>
+     *     <p>Error: {error?.message}</p>
+     *   </div>
+     *   );
+     * }
+     *```
+     */
+    const useActorState = () => useActorContext().useActorState();
+    /**
+     * Hook for making query calls to actors. It supports automatic refetching on component mount and at specified intervals.
+     *
+     * @param options Configuration object for the query call, including refetching options and other configurations passed to useReactorCall.
+     * @returns An object containing the query call function and the current call state (data, error, loading, call, reset).
+     * @example
+     * ```tsx
+     * function QueryCallComponent() {
+     *    const { call, data, loading } = useQueryCall({
+     *      functionName: 'getUserProfile',
+     *      args: ['123'],
+     *      refetchOnMount: true,
+     *      refetchInterval: 5000, // refetch every 5 seconds
+     *    });
+     *
+     *    if (loading) return <p>Loading profile...</p>;
+     *
+     *    return (
+     *      <div>
+     *        <p>User Profile: {JSON.stringify(data)}</p>
+     *        <button onClick={call}>Refetch</button>
+     *      </div>
+     *    );
+     * }
+     * ```
+     */
+    const useQueryCall = (args) => useActorContext().useQueryCall(args);
+    /**
+     * Hook for making update calls to actors, handling loading states, and managing errors. It supports custom event handlers for loading, success, and error events.
+     *
+     * @param options Configuration object for the actor method call, including the method name, arguments, and event handlers.
+     * @returns An object containing the method call function, a reset function to reset the call state to its default, and the current call state (data, error, loading, call, reset).
+     * @example
+     * ```tsx
+     * function UpdateCallComponent() {
+     *   const { call, data, loading } = useUpdateCall({
+     *      functionName: 'updateUserProfile',
+     *      args: ['123', { name: 'John Doe' }],
+     *      onLoading: (loading) => console.log('Loading:', loading),
+     *      onError: (error) => console.error('Error:', error),
+     *      onSuccess: (data) => console.log('Success:', data),
+     *   });
+     *
+     *  if (loading) return <p>Updating profile...</p>;
+     *
+     *  return (
+     *    <div>
+     *      <p>Updated Profile: {JSON.stringify(data)}</p>
+     *      <button onClick={call}>Update</button>
+     *    </div>
+     *  );
+     * }
+     * ```
+     */
+    const useUpdateCall = (args) => useActorContext().useUpdateCall(args);
+    /**
+     * Memoizes and returns a visit service function for a specific actor method.
+     *
+     * @param functionName The name of the actor method to visit.
+     * @returns The visit service function for the specified method.
+     */
+    const useVisitMethod = (functionName) => useActorContext().useVisitMethod(functionName);
+    return {
+        useActorState,
+        useQueryCall,
+        useUpdateCall,
+        useVisitMethod,
+        initialize,
+    };
+}
+exports.extractActorContext = extractActorContext;

package/dist/helpers/extractAgentContext.d.ts

@@ -0,0 +1,27 @@
+import type { AgentContext, CreateAgentContextReturnType } from "../types";
+/**
+ * This function facilitates the use of contextually provided agent functionalities,
+ * such as managing the agent's state, authentication state, and user principal.
+ *
+ * @param agentContext A React context object of type AgentContext or null,
+ * typically provided by an AgentProvider at a higher level in the component tree.
+ * @returns An object containing the following hooks:
+ *  - useAgent: Hook for accessing the current agent instance.
+ *  - useAuthState: Hook for accessing the current authentication state.
+ *  - useAgentState: Hook for accessing the current state of the agent.
+ *  - useAuthClient: Hook for accessing the authentication client, optionally accepting arguments for configuration.
+ *  - useAgentManager: Hook for accessing the AgentManager instance.
+ *  - useUserPrincipal: Hook for accessing the user's principal.
+ *
+ * Each hook is designed to be used within components that are descendants of an AgentProvider,
+ * ensuring access to the necessary agent-related context.
+ *
+ * Throws:
+ *  - Error if used outside of an AgentProvider context.
+ *
+ * ### Integration
+ *
+ * To use these hooks, ensure your components are wrapped in an `AgentProvider` that you've set up to supply the `AgentContext`.
+ * This context provides the necessary agent functionalities and state management capabilities required by the hooks.
+ */
+export declare const extractAgentContext: (agentContext: React.Context<AgentContext | null>) => Omit<CreateAgentContextReturnType, "AgentProvider">;

package/dist/helpers/extractAgentContext.js

@@ -0,0 +1,134 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.extractAgentContext = void 0;
+const react_1 = require("react");
+/**
+ * This function facilitates the use of contextually provided agent functionalities,
+ * such as managing the agent's state, authentication state, and user principal.
+ *
+ * @param agentContext A React context object of type AgentContext or null,
+ * typically provided by an AgentProvider at a higher level in the component tree.
+ * @returns An object containing the following hooks:
+ *  - useAgent: Hook for accessing the current agent instance.
+ *  - useAuthState: Hook for accessing the current authentication state.
+ *  - useAgentState: Hook for accessing the current state of the agent.
+ *  - useAuthClient: Hook for accessing the authentication client, optionally accepting arguments for configuration.
+ *  - useAgentManager: Hook for accessing the AgentManager instance.
+ *  - useUserPrincipal: Hook for accessing the user's principal.
+ *
+ * Each hook is designed to be used within components that are descendants of an AgentProvider,
+ * ensuring access to the necessary agent-related context.
+ *
+ * Throws:
+ *  - Error if used outside of an AgentProvider context.
+ *
+ * ### Integration
+ *
+ * To use these hooks, ensure your components are wrapped in an `AgentProvider` that you've set up to supply the `AgentContext`.
+ * This context provides the necessary agent functionalities and state management capabilities required by the hooks.
+ */
+const extractAgentContext = (agentContext) => {
+    const useAgentContext = (mybeAgentContext) => {
+        const context = (0, react_1.useContext)(mybeAgentContext || agentContext);
+        if (!context) {
+            throw new Error("Agent hooks must be used within a AgentProvider");
+        }
+        return context;
+    };
+    /**
+     * Accesses the `AgentManager` instance for managing agent configurations and state.
+     *
+     * @example
+     *```jsx
+     *  function AgentManagerComponent() {
+     *    const agentManager = useAgentManager();
+     *
+     *    // Use agentManager for managing agent configurations, etc.
+     *    return <div>Agent Manager ready.</div>;
+     *  }
+     *```
+     */
+    const useAgentManager = (agentContext) => {
+        const context = useAgentContext(agentContext);
+        return context.agentManager;
+    };
+    /**
+     * Accesses the current agent instance.
+     *
+     * @example
+     *```jsx
+     *  function AgentComponent() {
+     *    const agent = useAgent();
+     *
+     *    // Use agent for interacting with the Internet Computer.
+     *    return <div>Agent ready.</div>;
+     *  }
+     *```
+     */
+    const useAgent = () => useAgentContext().useAgent();
+    /**
+     * Accesses the current authentication state.
+     *
+     * @example
+     * ```jsx
+     * function AuthStateComponent() {
+     *   const { isAuthenticated, user } = useAuthState();
+     *
+     *   return (
+     *     <div>
+     *       {isAuthenticated ? `User ${user} is authenticated.` : 'User is not authenticated.'}
+     *     </div>
+     *   );
+     * }
+     * ```
+     */
+    const useAuthState = () => useAgentContext().useAuthState();
+    /**
+     * Accesses the current state of the agent.
+     *
+     * @example
+     * ```jsx
+     * function AgentStateComponent() {
+     *  const { initialized, initializing } = useAgentState();
+     *
+     *  return (
+     *   <div>
+     *    {initialized
+     *      ? 'Agent is initialized.'
+     *        : initializing
+     *        ? 'Agent is initializing...'
+     *        : 'Agent is not initialized.'}
+     *   </div>
+     *  );
+     * }
+     * ```
+     */
+    const useAgentState = () => useAgentContext().useAgentState();
+    const useAuthClient = (args) => useAgentContext().useAuthClient(args);
+    /**
+     * Accesses the user's principal.
+     *
+     * @example
+     * ```jsx
+     * function UserPrincipalComponent() {
+     *   const userPrincipal = useUserPrincipal();
+     *
+     *   return (
+     *     <div>
+     *       {userPrincipal ? `User principal: ${userPrincipal}` : 'User principal not found.'}
+     *     </div>
+     *   );
+     * }
+     * ```
+     */
+    const useUserPrincipal = () => useAgentContext().useUserPrincipal();
+    return {
+        useAgent,
+        useAuthState,
+        useAgentState,
+        useAuthClient,
+        useAgentManager,
+        useUserPrincipal,
+    };
+};
+exports.extractAgentContext = extractAgentContext;

package/dist/helpers/index.d.ts

@@ -1,3 +1,5 @@
-export * from "./agent";
-export * from "./actor";
-export * from "./auth";
+export * from "./agentHooks";
+export * from "./actorHooks";
+export * from "./authHooks";
+export * from "./extractActorContext";
+export * from "./extractAgentContext";

package/dist/helpers/index.js

@@ -14,6 +14,8 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./agent"), exports);
-__exportStar(require("./actor"), exports);
-__exportStar(require("./auth"), exports);
+__exportStar(require("./agentHooks"), exports);
+__exportStar(require("./actorHooks"), exports);
+__exportStar(require("./authHooks"), exports);
+__exportStar(require("./extractActorContext"), exports);
+__exportStar(require("./extractAgentContext"), exports);