@ic-reactor/react 1.0.4 → 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/{actor.d.ts → actorHooks.d.ts}

@@ -1,6 +1,5 @@
-import type { ActorHooks } from "../types";
-import type { BaseActor } from "@ic-reactor/core/dist/types";
-import { ActorManager } from "@ic-reactor/core";
+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.
  *
@@ -11,11 +10,9 @@ import { ActorManager } from "@ic-reactor/core";
  * - 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.
- * - useReactorCall: Hook for making calls to actor methods with support for loading states, errors, and custom event handlers.
  * - useQueryCall: Hook specifically designed for query calls to actors with features such as automatic refetching on mount and at specified intervals.
- * - useUpdateCall: Alias for useReactorCall, tailored for update calls to actors.
- * - useMethodCall: Combines useVisitMethod and useReactorCall for a streamlined experience when calling actor methods, including visitation and state management.
+ * - 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 getActorHooks: <A = BaseActor>(actorManager: ActorManager<A>) => ActorHooks<A>;
+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 = {
@@ -38,26 +38,24 @@ const DEFAULT_STATE = {
  * - 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.
- * - useReactorCall: Hook for making calls to actor methods with support for loading states, errors, and custom event handlers.
  * - useQueryCall: Hook specifically designed for query calls to actors with features such as automatic refetching on mount and at specified intervals.
- * - useUpdateCall: Alias for useReactorCall, tailored for update calls to actors.
- * - useMethodCall: Combines useVisitMethod and useReactorCall for a streamlined experience when calling actor methods, including visitation and state management.
+ * - 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 getActorHooks = (actorManager) => {
+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;
@@ -81,7 +79,7 @@ const getActorHooks = (actorManager) => {
     };
     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) {
@@ -94,18 +92,13 @@ const getActorHooks = (actorManager) => {
         }, [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/{provider/actor/context.js → helpers/extractActorContext.js}

@@ -1,59 +1,8 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractActorHooks = exports.createReactorContext = void 0;
-const react_1 = __importStar(require("react"));
-const useReactor_1 = require("../../hooks/useReactor");
-function createReactorContext(_a = {}) {
-    var { canisterId: defaultCanisterId } = _a, defaultConfig = __rest(_a, ["canisterId"]);
-    const ActorContext = (0, react_1.createContext)(null);
-    const ActorProvider = (_a) => {
-        var { children, canisterId = defaultCanisterId, loadingComponent = react_1.default.createElement("div", null, "Fetching canister...") } = _a, restConfig = __rest(_a, ["children", "canisterId", "loadingComponent"]);
-        if (!canisterId) {
-            throw new Error("canisterId is required");
-        }
-        const config = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, defaultConfig), restConfig)), [defaultConfig, restConfig]);
-        const { fetchError, fetching, hooks } = (0, useReactor_1.useReactor)(Object.assign({ canisterId }, config));
-        return (react_1.default.createElement(ActorContext.Provider, { value: hooks }, fetching || hooks === null ? fetchError !== null && fetchError !== void 0 ? fetchError : loadingComponent : children));
-    };
-    ActorProvider.displayName = "ActorProvider";
-    return Object.assign({ ActorProvider }, extractActorHooks(ActorContext));
-}
-exports.createReactorContext = createReactorContext;
-function extractActorHooks(ActorContext) {
+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.
@@ -69,12 +18,20 @@ function extractActorHooks(ActorContext) {
      *   </div>
      *  );
      * }
+     *
+     * function App() {
+     *  return (
+     *   <ActorProvider canisterId="rrkah-fqaaa-aaaaa-aaaaq-cai">
+     *     <ActorComponent />
+     *   </ActorProvider>
+     *  );
+     * }
      * ```
      */
     const useActorContext = () => {
-        const context = (0, react_1.useContext)(ActorContext);
+        const context = (0, react_1.useContext)(actorContext);
         if (!context) {
-            throw new Error("useActor must be used within a ActorProvider");
+            throw new Error("Actor hooks must be used within a ActorProvider");
         }
         return context;
     };
@@ -158,13 +115,6 @@ function extractActorHooks(ActorContext) {
      * ```
      */
     const useUpdateCall = (args) => useActorContext().useUpdateCall(args);
-    /**
-     * Hook that combines useVisitMethod and useReactorCall for calling actor methods. It provides both the visit service for the method and the ability to make actor calls with state management.
-     *
-     * @param args Configuration object including the function name and arguments for the actor method call.
-     * @returns An object containing the visit function for the method and the current call state (data, error, loading).
-     */
-    const useMethodCall = (args) => useActorContext().useMethodCall(args);
     /**
      * Memoizes and returns a visit service function for a specific actor method.
      *
@@ -176,9 +126,8 @@ function extractActorHooks(ActorContext) {
         useActorState,
         useQueryCall,
         useUpdateCall,
-        useMethodCall,
         useVisitMethod,
         initialize,
     };
 }
-exports.extractActorHooks = extractActorHooks;
+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);