@ic-reactor/react 1.0.5 → 1.0.7

package/dist/hooks/agent/useAgentState.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAgentState = void 0;
+const hooks_1 = require("./hooks");
+/**
+ * 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>
+ *  );
+ * }
+ * ```
+ */
+exports.useAgentState = hooks_1.AgentHooks.useAgentState;

package/dist/hooks/agent/useAuth.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `useAuth` is a custom React hook designed to manage authentication processes in applications interacting with the Internet Computer (IC).
+ * It encapsulates the logic for logging in, logging out, and maintaining the authentication state, leveraging an authentication client.
+ *
+ * @param options - An optional object containing the following properties:
+ * - `onAuthentication`: Callback function triggered before authentication starts.
+ * - `onAuthenticationSuccess`: Callback function triggered on successful authentication, receives the authenticated `Identity`.
+ * - `onAuthenticationFailure`: Callback function triggered on authentication failure, receives the error.
+ * - `onLogin`: Callback function triggered before the login process starts.
+ * - `onLoginSuccess`: Callback function triggered on successful login, receives the user's `Principal`.
+ * - `onLoginError`: Callback function triggered on login error, receives the error.
+ * - `onLoggedOut`: Callback function triggered after logging out.
+ *
+ * @returns An object containing the following properties:
+ * - `authenticated`: Boolean indicating if the user is currently authenticated.
+ * - `authenticating`: Boolean indicating if an authentication process is currently underway.
+ * - `identity`: The authenticated user's `Identity`, if available.
+ * - `error`: Any error that occurred during the authentication process.
+ * - `login`: Function to initiate the login process, optionally accepting `LoginParameters`.
+ * - `logout`: Function to log the user out, optionally accepting `LogoutParameters`.
+ * - `authenticate`: Function to authenticate the user, internally used by `login` and `logout`.
+ * - `loginLoading`: Boolean indicating if a login operation is in progress.
+ * - `loginError`: Error object if an error occurred during the login process.
+ *
+ * Usage:
+ * This hook can be used to add authentication functionality to your IC application components, handling user login, logout, and authentication state management seamlessly.
+ *
+ * Example:
+ * ```jsx
+ * const YourComponent = () => {
+ *   const { login, logout, authenticated, identity, loginError } = useAuth({
+ *     onLoginSuccess: (principal) => console.log(`Logged in as ${principal}`),
+ *     onLoginError: (error) => console.error(`Login failed: ${error.message}`),
+ *   });
+ *
+ *   if (loginError) {
+ *     return <div>Error logging in: {loginError.message}</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {authenticated ? (
+ *         <>
+ *           <div>Authenticated as {identity.getPrincipal().toText()}</div>
+ *           <button onClick={() => logout()}>Logout</button>
+ *         </>
+ *       ) : (
+ *         <button onClick={() => login()}>Login</button>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * This hook simplifies integrating authentication flows into your IC application, providing hooks for various stages of the authentication process.
+ */
+export declare const useAuth: (options?: import("../../types").UseAuthParameters | undefined) => import("../../types").UseAuthReturnType;

package/dist/hooks/agent/useAuth.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuth = void 0;
+const hooks_1 = require("./hooks");
+/**
+ * `useAuth` is a custom React hook designed to manage authentication processes in applications interacting with the Internet Computer (IC).
+ * It encapsulates the logic for logging in, logging out, and maintaining the authentication state, leveraging an authentication client.
+ *
+ * @param options - An optional object containing the following properties:
+ * - `onAuthentication`: Callback function triggered before authentication starts.
+ * - `onAuthenticationSuccess`: Callback function triggered on successful authentication, receives the authenticated `Identity`.
+ * - `onAuthenticationFailure`: Callback function triggered on authentication failure, receives the error.
+ * - `onLogin`: Callback function triggered before the login process starts.
+ * - `onLoginSuccess`: Callback function triggered on successful login, receives the user's `Principal`.
+ * - `onLoginError`: Callback function triggered on login error, receives the error.
+ * - `onLoggedOut`: Callback function triggered after logging out.
+ *
+ * @returns An object containing the following properties:
+ * - `authenticated`: Boolean indicating if the user is currently authenticated.
+ * - `authenticating`: Boolean indicating if an authentication process is currently underway.
+ * - `identity`: The authenticated user's `Identity`, if available.
+ * - `error`: Any error that occurred during the authentication process.
+ * - `login`: Function to initiate the login process, optionally accepting `LoginParameters`.
+ * - `logout`: Function to log the user out, optionally accepting `LogoutParameters`.
+ * - `authenticate`: Function to authenticate the user, internally used by `login` and `logout`.
+ * - `loginLoading`: Boolean indicating if a login operation is in progress.
+ * - `loginError`: Error object if an error occurred during the login process.
+ *
+ * Usage:
+ * This hook can be used to add authentication functionality to your IC application components, handling user login, logout, and authentication state management seamlessly.
+ *
+ * Example:
+ * ```jsx
+ * const YourComponent = () => {
+ *   const { login, logout, authenticated, identity, loginError } = useAuth({
+ *     onLoginSuccess: (principal) => console.log(`Logged in as ${principal}`),
+ *     onLoginError: (error) => console.error(`Login failed: ${error.message}`),
+ *   });
+ *
+ *   if (loginError) {
+ *     return <div>Error logging in: {loginError.message}</div>;
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {authenticated ? (
+ *         <>
+ *           <div>Authenticated as {identity.getPrincipal().toText()}</div>
+ *           <button onClick={() => logout()}>Logout</button>
+ *         </>
+ *       ) : (
+ *         <button onClick={() => login()}>Login</button>
+ *       )}
+ *     </div>
+ *   );
+ * };
+ * ```
+ *
+ * This hook simplifies integrating authentication flows into your IC application, providing hooks for various stages of the authentication process.
+ */
+exports.useAuth = hooks_1.AgentHooks.useAuth;

package/dist/hooks/agent/useAuthState.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Accesses the current authentication state.
+ *
+ * @example
+ * ```jsx
+ * function AuthStateComponent() {
+ *   const { isAuthenticated, authenticating, identity, error } = useAuthState();
+ *
+ *   return (
+ *     <div>
+ *       {authenticating ? 'Authenticating...' : ''}
+ *       {error ? `Error: ${error.message}` : ''}
+ *       {isAuthenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useAuthState: () => import("@ic-reactor/core/dist/types").AuthState;

package/dist/hooks/agent/useAuthState.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAuthState = void 0;
+const hooks_1 = require("./hooks");
+/**
+ * Accesses the current authentication state.
+ *
+ * @example
+ * ```jsx
+ * function AuthStateComponent() {
+ *   const { isAuthenticated, authenticating, identity, error } = useAuthState();
+ *
+ *   return (
+ *     <div>
+ *       {authenticating ? 'Authenticating...' : ''}
+ *       {error ? `Error: ${error.message}` : ''}
+ *       {isAuthenticated ? `User ${identity?.getPrincipal()} is authenticated.` : 'User is not authenticated.'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+exports.useAuthState = hooks_1.AgentHooks.useAuthState;

package/dist/hooks/agent/useUserPrincipal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Accesses the user's principal.
+ *
+ * @example
+ * ```jsx
+ * function UserPrincipalComponent() {
+ *   const userPrincipal = useUserPrincipal();
+ *
+ *   return (
+ *     <div>
+ *       {userPrincipal ? `User principal: ${userPrincipal}` : 'User principal not found.'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare const useUserPrincipal: () => import("@dfinity/principal").Principal | undefined;

package/dist/hooks/agent/useUserPrincipal.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUserPrincipal = void 0;
+const hooks_1 = require("./hooks");
+/**
+ * Accesses the user's principal.
+ *
+ * @example
+ * ```jsx
+ * function UserPrincipalComponent() {
+ *   const userPrincipal = useUserPrincipal();
+ *
+ *   return (
+ *     <div>
+ *       {userPrincipal ? `User principal: ${userPrincipal}` : 'User principal not found.'}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+exports.useUserPrincipal = hooks_1.AgentHooks.useUserPrincipal;

package/dist/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./actor";
+export * from "./agent";
+export * from "./useActor";

package/dist/{provider/hooks → hooks}/index.js

@@ -14,4 +14,6 @@ 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("./actor"), exports);
+__exportStar(require("./agent"), exports);
 __exportStar(require("./useActor"), exports);

package/dist/{provider/hooks → hooks}/types.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { IDL } from "@dfinity/candid";
-import { AgentContext } from "../types";
-import { ActorHooksReturnType, ActorManagerParameters, BaseActor } from "../../types";
+import { AgentContext } from "../context/types";
+import { ActorHooksReturnType, ActorManagerParameters, BaseActor } from "../types";
 export interface UseActorParameters extends Omit<ActorManagerParameters, "idlFactory" | "agentManager" | "canisterId"> {
     canisterId: string;
     idlFactory?: IDL.InterfaceFactory;

package/dist/hooks/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/{provider/hooks → hooks}/useActor.d.ts

@@ -1,4 +1,4 @@
-import type { BaseActor } from "../../types";
+import type { BaseActor } from "../types";
 import type { UseActorParameters, UseActorReturn } from "./types";
 /**
  * A comprehensive hook that manages both the fetching of Candid interfaces
@@ -22,7 +22,7 @@ import type { UseActorParameters, UseActorReturn } from "./types";
  *
  * export const { useQueryCall, useUpdateCall } = extractActorHooks(ActorContext)
  *
- * const LedgerActor = () => {
+ * const LedgerActor = ({ children }) => {
  *   const { hooks, fetching, fetchError } = useActor<Ledger>({
  *     canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai", // ICP Ledger canister
  *   })
@@ -32,7 +32,7 @@ import type { UseActorParameters, UseActorReturn } from "./types";
  *       <h2>IC Canister Interaction</h2>
  *       {fetching && <p>Loading Candid interface...</p>}
  *       {fetchError && <p>Error: {fetchError}</p>}
- *       {hooks && <CanisterName />}
+ *       {hooks && children}
  *     </ActorContext.Provider>
  *   )
  * }
@@ -52,7 +52,9 @@ import type { UseActorParameters, UseActorReturn } from "./types";
  *
  * const App = () => (
  *   <AgentProvider withDevtools>
- *     <LedgerActor />
+ *     <LedgerActor>
+ *       <CanisterName />
+ *     </LedgerActor>
  *   </AgentProvider>
  * )
  *

package/dist/{provider/hooks → hooks}/useActor.js

@@ -23,8 +23,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useActor = void 0;
 const core_1 = require("@ic-reactor/core");
 const react_1 = require("react");
-const __1 = require("..");
-const helpers_1 = require("../../helpers");
+const useAgentManager_1 = require("./agent/useAgentManager");
+const helpers_1 = require("../helpers");
 /**
  * A comprehensive hook that manages both the fetching of Candid interfaces
  * and the initialization of actor stores for Internet Computer (IC) canisters.
@@ -47,7 +47,7 @@ const helpers_1 = require("../../helpers");
  *
  * export const { useQueryCall, useUpdateCall } = extractActorHooks(ActorContext)
  *
- * const LedgerActor = () => {
+ * const LedgerActor = ({ children }) => {
  *   const { hooks, fetching, fetchError } = useActor<Ledger>({
  *     canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai", // ICP Ledger canister
  *   })
@@ -57,7 +57,7 @@ const helpers_1 = require("../../helpers");
  *       <h2>IC Canister Interaction</h2>
  *       {fetching && <p>Loading Candid interface...</p>}
  *       {fetchError && <p>Error: {fetchError}</p>}
- *       {hooks && <CanisterName />}
+ *       {hooks && children}
  *     </ActorContext.Provider>
  *   )
  * }
@@ -77,7 +77,9 @@ const helpers_1 = require("../../helpers");
  *
  * const App = () => (
  *   <AgentProvider withDevtools>
- *     <LedgerActor />
+ *     <LedgerActor>
+ *       <CanisterName />
+ *     </LedgerActor>
  *   </AgentProvider>
  * )
  *
@@ -92,9 +94,9 @@ const useActor = (config) => {
         fetching: false,
         fetchError: null,
     });
-    const agentManager = (0, __1.useAgentManager)(agentContext);
-    const fetchCandid = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!canisterId)
+    const agentManager = (0, useAgentManager_1.useAgentManager)(agentContext);
+    const fetchCandid = (0, react_1.useCallback)((agent) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!canisterId || fetching)
             return;
         setState({
             idlFactory: undefined,
@@ -103,7 +105,7 @@ const useActor = (config) => {
         });
         try {
             const candidManager = (0, core_1.createCandidAdapter)({
-                agentManager,
+                agent,
                 didjsCanisterId,
             });
             const { idlFactory } = yield candidManager.getCandidDefinition(canisterId);
@@ -123,13 +125,9 @@ const useActor = (config) => {
                 fetching: false,
             });
         }
-    }), [canisterId, didjsCanisterId, agentManager]);
+    }), [canisterId, didjsCanisterId]);
     // Automatically fetch Candid if not already fetched or provided.
-    (0, react_1.useEffect)(() => {
-        if (!fetching && !idlFactory) {
-            fetchCandid();
-        }
-    }, [fetchCandid]);
+    (0, react_1.useEffect)(() => agentManager.subscribeAgent(fetchCandid, !maybeIdlFactory), [fetchCandid, agentManager]);
     const hooks = (0, react_1.useMemo)(() => {
         if (!idlFactory)
             return null;
@@ -137,7 +135,7 @@ const useActor = (config) => {
             idlFactory,
             canisterId }, actorConfig));
         return (0, helpers_1.actorHooks)(actorManager);
-    }, [idlFactory]);
+    }, [canisterId, idlFactory]);
     return { hooks, fetching, fetchError };
 };
 exports.useActor = useActor;

package/dist/index.d.ts

@@ -1,5 +1,9 @@
-export * from "./main";
-export * from "./provider";
+export * from "./createReactor";
+export * from "./context/actor";
+export * from "./context/agent";
+export * from "./provider/actor";
+export * from "./provider/agent";
+export * from "./hooks";
 export * as helpers from "./helpers";
 export * as types from "./types";
 export * as core from "./core";

package/dist/index.js

@@ -27,8 +27,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.core = exports.types = exports.helpers = void 0;
-__exportStar(require("./main"), exports);
-__exportStar(require("./provider"), exports);
+__exportStar(require("./createReactor"), exports);
+__exportStar(require("./context/actor"), exports);
+__exportStar(require("./context/agent"), exports);
+__exportStar(require("./provider/actor"), exports);
+__exportStar(require("./provider/agent"), exports);
+__exportStar(require("./hooks"), exports);
 exports.helpers = __importStar(require("./helpers"));
 exports.types = __importStar(require("./types"));
 exports.core = __importStar(require("./core"));

package/dist/provider/actor.d.ts

@@ -1,64 +1,26 @@
-import { BaseActor } from "../types";
-import { CreateActorContextParameters, CreateActorContextReturnType } from "./types";
+/// <reference types="react" />
 /**
- * Creates a React context specifically designed for managing the state and interactions with an actor on the Internet Computer (IC) blockchain.
- * This context facilitates the dynamic creation and management of IC actors within React applications, leveraging the provided configuration options.
+ * `ActorProvider` is a React functional component that serves as a context provider for IC actor interactions within a React application.
+ * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided canister ID and configuration.
  *
- * @param reactorParameters A partial configuration object for the actor context, allowing customization and specification of actor-related settings.
- * - `canisterId`: The default Canister ID to be used if not overridden in the `ActorProvider` component.
- * - Other configurations can include properties related to the actor's interaction, such as agent options or authentication requirements.
+ * Props:
+ * - `children`: React Node - The child components that will have access to the actor context.
+ * - `canisterId` (optional): string - The Canister ID for actor interactions. If not provided, the default from `createActorContext` is used.
+ * - `loadingComponent` (optional): React Node - A component displayed during the loading/fetching state. Defaults to a simple message.
+ * - `...restConfig`: Additional configuration options that will be merged with the default configuration provided during context creation.
  *
- * @returns An object containing the `ActorProvider` component and various hooks for interacting with the actor.
- * - `ActorProvider`: A context provider component that allows child components to access and interact with the configured actor.
- * - Hooks: Custom hooks derived from the actor context, facilitating interactions like querying or updating the actor's state.
+ * Behavior:
+ * - Validates the presence of a `canisterId`. Throws an error if it is missing, ensuring that a valid canister ID is always used for actor operations.
+ * - Utilizes `useMemo` to combine the default configuration with the props provided to the `ActorProvider`, optimizing for performance by avoiding unnecessary recalculations.
+ * - Employs the `useActor` hook to initiate actor interactions based on the combined configuration, managing states such as `fetching`, `fetchError`, and the actor `hooks`.
+ * - Conditionally renders the `loadingComponent` or `fetchError` based on the actor fetching state. Once the actor is ready and no errors are present, it renders the child components, effectively providing them access to the actor context.
  *
  * @example
  * ```jsx
- * import React from 'react';
- * import { createActorContext } from '@ic-reactor/react';
- * import { backend, canisterId, idlFactory } from './declarations/candid'; // Assuming 'declarations/candid' is where your actor interface is defined.
- *
- * // Initialize the actor context with configuration options
- * const { ActorProvider, useActorState, useQueryCall, useUpdateCall } = createActorContext<typeof backend>({
- *   canisterId,
- *   idlFactory, // Optional
- * });
- *
- * // A sample component that utilizes the actor context
- * const App = () => (
- *   <AgentProvider>
- *     <ActorProvider>
- *       <div>
- *         <h1>IC Actor Interaction Example</h1>
- *         <ActorComponent />
- *       </div>
- *     </ActorProvider>
- *   </AgentProvider>
- * );
- *
- * export default App;
- *
- * // A sample component that uses the actor hooks
- * const ActorComponent = () => {
- *   const { data, loading, error } = useQueryCall({
- *      functionName: 'backendMethodName',
- *      args: [],
- *      refetchInterval: 10000,
- *      refetchOnMount: true,
- *   });
-  
- *   return (
- *     <div>
- *        {loading && <p>Loading...</p>}
- *        {error && <p>Error: {error.message}</p>}
- *        {data && <p>Actor data: {data}</p>}
- *     </div>
- *   );
- * };
+ * <ActorProvider canisterId="your-canister-id">
+ *   <YourComponent />
+ * </ActorProvider>
  * ```
- *
- * This function streamlines the process of setting up a context for IC actor interactions within a React app, making it easier
- * to manage actor state and perform actions such as queries or updates. It abstracts away the complexities involved in directly
- * managing IC agents and actors, providing a simple, declarative API for developers.
+ * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor through the context provided by `ActorProvider`.
  */
-export declare function createActorContext<A = BaseActor>(config?: CreateActorContextParameters): CreateActorContextReturnType<A>;
+export declare const ActorProvider: import("react").FC<import("../types").ActorProviderProps>;

package/dist/provider/actor.js

@@ -1,117 +1,29 @@
 "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.createActorContext = void 0;
-const react_1 = __importStar(require("react"));
-const useActor_1 = require("./hooks/useActor");
-const extractActorContext_1 = require("../helpers/extractActorContext");
+exports.ActorProvider = void 0;
+const hooks_1 = require("../hooks/actor/hooks");
 /**
- * Creates a React context specifically designed for managing the state and interactions with an actor on the Internet Computer (IC) blockchain.
- * This context facilitates the dynamic creation and management of IC actors within React applications, leveraging the provided configuration options.
+ * `ActorProvider` is a React functional component that serves as a context provider for IC actor interactions within a React application.
+ * It wraps child components, providing them access to actor-specific hooks and functionalities based on the provided canister ID and configuration.
  *
- * @param reactorParameters A partial configuration object for the actor context, allowing customization and specification of actor-related settings.
- * - `canisterId`: The default Canister ID to be used if not overridden in the `ActorProvider` component.
- * - Other configurations can include properties related to the actor's interaction, such as agent options or authentication requirements.
+ * Props:
+ * - `children`: React Node - The child components that will have access to the actor context.
+ * - `canisterId` (optional): string - The Canister ID for actor interactions. If not provided, the default from `createActorContext` is used.
+ * - `loadingComponent` (optional): React Node - A component displayed during the loading/fetching state. Defaults to a simple message.
+ * - `...restConfig`: Additional configuration options that will be merged with the default configuration provided during context creation.
  *
- * @returns An object containing the `ActorProvider` component and various hooks for interacting with the actor.
- * - `ActorProvider`: A context provider component that allows child components to access and interact with the configured actor.
- * - Hooks: Custom hooks derived from the actor context, facilitating interactions like querying or updating the actor's state.
+ * Behavior:
+ * - Validates the presence of a `canisterId`. Throws an error if it is missing, ensuring that a valid canister ID is always used for actor operations.
+ * - Utilizes `useMemo` to combine the default configuration with the props provided to the `ActorProvider`, optimizing for performance by avoiding unnecessary recalculations.
+ * - Employs the `useActor` hook to initiate actor interactions based on the combined configuration, managing states such as `fetching`, `fetchError`, and the actor `hooks`.
+ * - Conditionally renders the `loadingComponent` or `fetchError` based on the actor fetching state. Once the actor is ready and no errors are present, it renders the child components, effectively providing them access to the actor context.
  *
  * @example
  * ```jsx
- * import React from 'react';
- * import { createActorContext } from '@ic-reactor/react';
- * import { backend, canisterId, idlFactory } from './declarations/candid'; // Assuming 'declarations/candid' is where your actor interface is defined.
- *
- * // Initialize the actor context with configuration options
- * const { ActorProvider, useActorState, useQueryCall, useUpdateCall } = createActorContext<typeof backend>({
- *   canisterId,
- *   idlFactory, // Optional
- * });
- *
- * // A sample component that utilizes the actor context
- * const App = () => (
- *   <AgentProvider>
- *     <ActorProvider>
- *       <div>
- *         <h1>IC Actor Interaction Example</h1>
- *         <ActorComponent />
- *       </div>
- *     </ActorProvider>
- *   </AgentProvider>
- * );
- *
- * export default App;
- *
- * // A sample component that uses the actor hooks
- * const ActorComponent = () => {
- *   const { data, loading, error } = useQueryCall({
- *      functionName: 'backendMethodName',
- *      args: [],
- *      refetchInterval: 10000,
- *      refetchOnMount: true,
- *   });
-  
- *   return (
- *     <div>
- *        {loading && <p>Loading...</p>}
- *        {error && <p>Error: {error.message}</p>}
- *        {data && <p>Actor data: {data}</p>}
- *     </div>
- *   );
- * };
+ * <ActorProvider canisterId="your-canister-id">
+ *   <YourComponent />
+ * </ActorProvider>
  * ```
- *
- * This function streamlines the process of setting up a context for IC actor interactions within a React app, making it easier
- * to manage actor state and perform actions such as queries or updates. It abstracts away the complexities involved in directly
- * managing IC agents and actors, providing a simple, declarative API for developers.
+ * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor through the context provided by `ActorProvider`.
  */
-function createActorContext(config = {}) {
-    const { canisterId: defaultCanisterId } = config, defaultConfig = __rest(config, ["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, useActor_1.useActor)(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 }, (0, extractActorContext_1.extractActorContext)(ActorContext));
-}
-exports.createActorContext = createActorContext;
+exports.ActorProvider = hooks_1.ActorHooks.ActorProvider;