@ic-reactor/react 1.0.4 → 1.0.5

package/dist/helpers/types.d.ts

@@ -1,24 +1,22 @@
 /// <reference types="react" />
-import type { AuthClientLoginOptions } from "@dfinity/auth-client";
-import type { ActorState, CanisterId, ActorMethodArgs, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthClient, AuthState, HttpAgent, AgentState } from "@ic-reactor/core/dist/types";
-export interface AgentHooks {
+import type { ActorState, CanisterId, AuthClientLoginOptions, ActorMethodParameters, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthClient, AuthState, HttpAgent, AgentState, BaseActor } from "@ic-reactor/core/dist/types";
+export interface AgentHooksReturnType {
     useAgent: () => HttpAgent | undefined;
     useAgentState: () => AgentState;
 }
-export interface AuthHooks {
+export interface AuthHooksReturnType {
     useUserPrincipal: () => Principal | undefined;
     useAuthState: () => AuthState;
-    useAuthClient: (events?: UseAuthClientArgs) => UseAuthClientReturn;
+    useAuthClient: (args?: UseAuthClientParameters) => UseAuthClientReturnType;
 }
-export interface ActorHooks<A> {
+export interface ActorHooksReturnType<A = BaseActor> {
     initialize: () => Promise<void>;
     useActorState: () => UseActorState;
     useQueryCall: UseQueryCall<A>;
     useUpdateCall: UseUpdateCall<A>;
-    useMethodCall: UseMethodCall<A>;
     useVisitMethod: <M extends FunctionName<A>>(functionName: M) => VisitService<A>[M];
 }
-export interface UseAuthClientArgs {
+export interface UseAuthClientParameters {
     onAuthentication?: (promise: () => Promise<Identity>) => void;
     onAuthenticationSuccess?: (identity: Identity) => void;
     onAuthenticationFailure?: (error: Error) => void;
@@ -27,14 +25,14 @@ export interface UseAuthClientArgs {
     onLogin?: (promise: () => Promise<Principal>) => void;
     onLoggedOut?: () => void;
 }
-export interface UseAuthClientReturn {
+export interface UseAuthClientReturnType {
     error: Error | undefined;
     authClient: AuthClient | null;
     authenticated: boolean;
     authenticating: boolean;
     identity: Identity | null;
-    login: (options?: LoginOptions) => Promise<void>;
-    logout: (options?: LogoutOptions) => Promise<void>;
+    login: (options?: LoginParameters) => Promise<void>;
+    logout: (options?: LogoutParameters) => Promise<void>;
     authenticate: () => Promise<Identity>;
     loginLoading: boolean;
     loginError: Error | null;
@@ -43,13 +41,13 @@ export type LoginState = {
     loading: boolean;
     error: Error | null;
 };
-export type LoginOptions = AuthClientLoginOptions;
-export type LogoutOptions = {
+export type LoginParameters = AuthClientLoginOptions;
+export type LogoutParameters = {
     returnTo?: string;
 };
-export type ReactorCallArgs<A, M extends FunctionName<A>> = {
+export type UseMethodCallParameters<A, M extends FunctionName<A>> = {
     functionName: M;
-    args?: ActorMethodArgs<A[M]>;
+    args?: ActorMethodParameters<A[M]>;
     onLoading?: (loading: boolean) => void;
     onError?: (error: Error | undefined) => void;
     onSuccess?: (data: ActorMethodReturnType<A[M]> | undefined) => void;
@@ -60,27 +58,19 @@ export type ActorCallState<A, M extends FunctionName<A>> = {
     error: Error | undefined;
     loading: boolean;
 };
-export interface UseQueryCallArgs<A, M extends FunctionName<A>> extends ReactorCallArgs<A, M> {
+export interface UseQueryCallParameters<A, M extends FunctionName<A>> extends UseMethodCallParameters<A, M> {
     refetchOnMount?: boolean;
     refetchInterval?: number | false;
 }
-export interface UseUpdateCallArgs<A, M extends FunctionName<A>> extends ReactorCallArgs<A, M> {
+export interface UseUpdateCallParameters<A, M extends FunctionName<A>> extends UseMethodCallParameters<A, M> {
 }
-export interface ReactorCallReturn<A, M extends FunctionName<A> = FunctionName<A>> extends ActorCallState<A, M> {
+export interface UseMethodCallReturnType<A, M extends FunctionName<A> = FunctionName<A>> extends ActorCallState<A, M> {
     reset: () => void;
-    call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodArgs<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
+    call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
 }
-export type ReactorCall<A> = <M extends FunctionName<A>>(args: ReactorCallArgs<A, M>) => ReactorCallReturn<A, M>;
-export type UseQueryCall<A> = <M extends FunctionName<A>>(args: UseQueryCallArgs<A, M>) => ReactorCallReturn<A, M>;
-export type UseUpdateCall<A> = <M extends FunctionName<A>>(args: UseUpdateCallArgs<A, M>) => ReactorCallReturn<A, M>;
-export type UseMethodCall<A> = <M extends FunctionName<A>>(args: UseMethodCallArg<A, M>) => UseMethodCallReturn<A, M>;
-export interface UseMethodCallReturn<A, M extends FunctionName<A> = FunctionName<A>> extends ReactorCallReturn<A, M> {
-    visit: VisitService<A>[M];
-    reset: () => void;
-    error: Error | undefined;
-    loading: boolean;
-}
-export type UseMethodCallArg<A, M extends FunctionName<A>> = ReactorCallArgs<A, M>;
+export type UseMethodCall<A> = <M extends FunctionName<A>>(args: UseMethodCallParameters<A, M>) => UseMethodCallReturnType<A, M>;
+export type UseQueryCall<A> = <M extends FunctionName<A>>(args: UseQueryCallParameters<A, M>) => UseMethodCallReturnType<A, M>;
+export type UseUpdateCall<A> = <M extends FunctionName<A>>(args: UseUpdateCallParameters<A, M>) => UseMethodCallReturnType<A, M>;
 export interface UseActorState extends Omit<ActorState, "methodState"> {
     canisterId: CanisterId;
 }

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./main";
-export * from "./hooks";
 export * from "./provider";
 export * as helpers from "./helpers";
 export * as types from "./types";

package/dist/index.js

@@ -28,7 +28,6 @@ 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("./hooks"), exports);
 __exportStar(require("./provider"), exports);
 exports.helpers = __importStar(require("./helpers"));
 exports.types = __importStar(require("./types"));

package/dist/main.d.ts

@@ -1,2 +1,38 @@
-import { BaseActor, CreateReactorReturn, CreateReactorOptions } from "./types";
-export declare const createReactor: <A = BaseActor>(options: CreateReactorOptions) => CreateReactorReturn<A>;
+import type { BaseActor, CreateReactorParameters, CreateReactorReturnType } from "./types";
+/**
+ * Initializes and configures the reactor environment for interacting with the Internet Computer (IC) blockchain within a React application.
+ * It encapsulates the creation of actors, authentication, and agent management, offering a streamlined interface for blockchain interactions.
+ *
+ * @param config Configuration config for the reactor, including:
+ *  - withProcessEnv (optional): Specifies whether to use process environment variables to determine if the environment is local or development. Defaults to false.
+ *  - isLocalEnv (optional): Indicates if the current environment is local or development, influencing the agent and actor behavior. Useful for testing or development.
+ *  - port (optional): Port number for the local or development environment.
+ *  Extends `CreateReactorStoreParameters` which includes HTTP agent config, actor manager config (excluding `agentManager`), and an optional custom agent manager.
+ *
+ * @returns An object containing various hooks and utilities:
+ *  - getAgent: Function to retrieve the configured IC agent.
+ *  - getVisitFunction: Function to access the visit function from the actor manager, used for visitor pattern implementations.
+ *  - Includes actor, auth, and agent hooks for state management, authentication, and agent operations.
+ *
+ * @example
+ * ```typescript
+ * import { createReactor } from "@ic-reactor/react";
+ * import type { CreateReactorCoreParameters } from "@ic-reactor/react/dist/types";
+ * import { canisterId, idlFactory, yourActor } from "./declaration/yourActor"
+ *
+ * const config: CreateReactorCoreParameters = {
+ *   canisterId,
+ *   idlFactory,
+ *   host: "https://localhost:8000", // IC network host         |
+ *   isLocalEnv: true, // Set true for local network            | one of these
+ *   withProcessEnv: true, // Use process.env to determine host |
+ *   port: 8000, // Port number for local network               |
+ * };
+ *
+ * export type YourActor = typeof yourActor;
+ *
+ * export const { useAuthClient, useQueryCall, useUpdateCall } = createReactor<YourActor>(config);
+ * // Now you can use the returned hooks in your React components
+ * ```
+ */
+export declare const createReactor: <A = BaseActor>(config: CreateReactorParameters) => CreateReactorReturnType<A>;

package/dist/main.js

@@ -1,35 +1,53 @@
 "use strict";
-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.createReactor = void 0;
 const core_1 = require("@ic-reactor/core");
-const actor_1 = require("./helpers/actor");
-const auth_1 = require("./helpers/auth");
-const tools_1 = require("@ic-reactor/core/dist/tools");
 const helpers_1 = require("./helpers");
-const createReactor = (options) => {
-    const { isLocalEnv, withVisitor, withProcessEnv } = options, args = __rest(options, ["isLocalEnv", "withVisitor", "withProcessEnv"]);
-    const actorManager = (0, core_1.createReactorStore)(Object.assign({ isLocalEnv: isLocalEnv || (withProcessEnv ? (0, tools_1.isInLocalOrDevelopment)() : false), withVisitor }, args));
+/**
+ * Initializes and configures the reactor environment for interacting with the Internet Computer (IC) blockchain within a React application.
+ * It encapsulates the creation of actors, authentication, and agent management, offering a streamlined interface for blockchain interactions.
+ *
+ * @param config Configuration config for the reactor, including:
+ *  - withProcessEnv (optional): Specifies whether to use process environment variables to determine if the environment is local or development. Defaults to false.
+ *  - isLocalEnv (optional): Indicates if the current environment is local or development, influencing the agent and actor behavior. Useful for testing or development.
+ *  - port (optional): Port number for the local or development environment.
+ *  Extends `CreateReactorStoreParameters` which includes HTTP agent config, actor manager config (excluding `agentManager`), and an optional custom agent manager.
+ *
+ * @returns An object containing various hooks and utilities:
+ *  - getAgent: Function to retrieve the configured IC agent.
+ *  - getVisitFunction: Function to access the visit function from the actor manager, used for visitor pattern implementations.
+ *  - Includes actor, auth, and agent hooks for state management, authentication, and agent operations.
+ *
+ * @example
+ * ```typescript
+ * import { createReactor } from "@ic-reactor/react";
+ * import type { CreateReactorCoreParameters } from "@ic-reactor/react/dist/types";
+ * import { canisterId, idlFactory, yourActor } from "./declaration/yourActor"
+ *
+ * const config: CreateReactorCoreParameters = {
+ *   canisterId,
+ *   idlFactory,
+ *   host: "https://localhost:8000", // IC network host         |
+ *   isLocalEnv: true, // Set true for local network            | one of these
+ *   withProcessEnv: true, // Use process.env to determine host |
+ *   port: 8000, // Port number for local network               |
+ * };
+ *
+ * export type YourActor = typeof yourActor;
+ *
+ * export const { useAuthClient, useQueryCall, useUpdateCall } = createReactor<YourActor>(config);
+ * // Now you can use the returned hooks in your React components
+ * ```
+ */
+const createReactor = (config) => {
+    const actorManager = (0, core_1.createReactorStore)(config);
     const getVisitFunction = () => {
         return actorManager.visitFunction;
     };
     const getAgent = () => {
         return actorManager.agentManager.getAgent();
     };
-    const actorHooks = (0, actor_1.getActorHooks)(actorManager);
-    const authHooks = (0, auth_1.getAuthHooks)(actorManager.agentManager);
-    const agentHooks = (0, helpers_1.getAgentHooks)(actorManager.agentManager);
     return Object.assign(Object.assign(Object.assign({ getAgent,
-        getVisitFunction }, agentHooks), actorHooks), authHooks);
+        getVisitFunction }, (0, helpers_1.actorHooks)(actorManager)), (0, helpers_1.authHooks)(actorManager.agentManager)), (0, helpers_1.agentHooks)(actorManager.agentManager));
 };
 exports.createReactor = createReactor;

package/dist/provider/ActorProvider.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const ActorHooks: import("./types").CreateActorContextReturnType<import("@ic-reactor/core/dist/types").BaseActor>;
+/**
+ * `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.
+ *
+ * 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.
+ *
+ * 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
+ * <ActorProvider canisterId="your-canister-id">
+ *   <YourComponent />
+ * </ActorProvider>
+ * ```
+ * 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 const ActorProvider: import("react").FC<import("./types").ActorProviderProps>;

package/dist/provider/ActorProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ActorProvider = exports.ActorHooks = void 0;
+const actor_1 = require("./actor");
+exports.ActorHooks = (0, actor_1.createActorContext)();
+/**
+ * `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.
+ *
+ * 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.
+ *
+ * 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
+ * <ActorProvider canisterId="your-canister-id">
+ *   <YourComponent />
+ * </ActorProvider>
+ * ```
+ * This setup ensures that `YourComponent` and any of its children can interact with the specified IC actor through the context provided by `ActorProvider`.
+ */
+exports.ActorProvider = exports.ActorHooks.ActorProvider;

package/dist/provider/AgentProvider.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const AgentHooks: import("./types").CreateAgentContextReturnType;
+/**
+ * `AgentProvider` is a React functional component that serves as a context provider for IC agent and authentication hooks.
+ * It enables any child components to access and use the agent and authentication functionalities seamlessly.
+ *
+ * The provider encapsulates the logic for initializing and managing an agent manager instance, which is then used to
+ * create various hooks related to agent operations and authentication processes. These hooks are made available to all
+ * child components through the context, facilitating a centralized and efficient way to interact with the Internet Computer (IC) blockchain.
+ *
+ * @param children - Child components that can consume the context.
+ * @param agentManager - An optional `AgentManager` instance to be used by the provider. If not provided, a new instance
+ *                       will be created based on the provided options combined with default configuration.
+ * @param options - Configuration options for the `AgentManager`. These options are merged with any default configurations
+ *                  specified during the context creation and can include custom settings for the agent, such as identity,
+ *                  host URL, etc.
+ *
+ * @example
+ * Wrap your component tree with `AgentProvider` to provide all child components access to IC agent and authentication hooks.
+ *
+ * ```jsx
+ * <AgentProvider>
+ *   <YourComponent />
+ * </AgentProvider>
+ * ```
+ *
+ * Inside `YourComponent` or any of its children, you can use the hooks provided through the context to interact with the IC,
+ * manage authentication, and perform other agent-related tasks.
+ */
+export declare const AgentProvider: import("react").FC<import("./types").AgentProviderProps>;

package/dist/provider/AgentProvider.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AgentProvider = exports.AgentHooks = void 0;
+const agent_1 = require("./agent");
+exports.AgentHooks = (0, agent_1.createAgentContext)();
+/**
+ * `AgentProvider` is a React functional component that serves as a context provider for IC agent and authentication hooks.
+ * It enables any child components to access and use the agent and authentication functionalities seamlessly.
+ *
+ * The provider encapsulates the logic for initializing and managing an agent manager instance, which is then used to
+ * create various hooks related to agent operations and authentication processes. These hooks are made available to all
+ * child components through the context, facilitating a centralized and efficient way to interact with the Internet Computer (IC) blockchain.
+ *
+ * @param children - Child components that can consume the context.
+ * @param agentManager - An optional `AgentManager` instance to be used by the provider. If not provided, a new instance
+ *                       will be created based on the provided options combined with default configuration.
+ * @param options - Configuration options for the `AgentManager`. These options are merged with any default configurations
+ *                  specified during the context creation and can include custom settings for the agent, such as identity,
+ *                  host URL, etc.
+ *
+ * @example
+ * Wrap your component tree with `AgentProvider` to provide all child components access to IC agent and authentication hooks.
+ *
+ * ```jsx
+ * <AgentProvider>
+ *   <YourComponent />
+ * </AgentProvider>
+ * ```
+ *
+ * Inside `YourComponent` or any of its children, you can use the hooks provided through the context to interact with the IC,
+ * manage authentication, and perform other agent-related tasks.
+ */
+exports.AgentProvider = exports.AgentHooks.AgentProvider;

package/dist/provider/actor.d.ts

@@ -0,0 +1,64 @@
+import { BaseActor } from "../types";
+import { CreateActorContextParameters, CreateActorContextReturnType } from "./types";
+/**
+ * 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.
+ *
+ * @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.
+ *
+ * @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.
+ *
+ * @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>
+ *   );
+ * };
+ * ```
+ *
+ * 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.
+ */
+export declare function createActorContext<A = BaseActor>(config?: CreateActorContextParameters): CreateActorContextReturnType<A>;

package/dist/provider/actor.js

@@ -0,0 +1,117 @@
+"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");
+/**
+ * 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.
+ *
+ * @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.
+ *
+ * @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.
+ *
+ * @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>
+ *   );
+ * };
+ * ```
+ *
+ * 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.
+ */
+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;

package/dist/provider/agent.d.ts

@@ -0,0 +1,71 @@
+import type { AgentManagerParameters } from "../types";
+import type { CreateAgentContextReturnType } from "./types";
+/**
+ * Creates a React context for managing IC agent and authentication states, providing hooks for interacting with the IC blockchain.
+ * This function initializes an `AgentContext` with a set of utilities and hooks based on the provided agent configuration.
+ *
+ * @param agentParameters A partial configuration object for the agent manager, allowing customization of the agent's behavior.
+ *
+ * @returns An object containing the `AgentProvider` component and various hooks for interacting with the agent and authentication state.
+ * The `AgentProvider` component is a React context provider that should wrap your app or components needing access to agent functionalities.
+ *
+ * Usage:
+ * - `AgentProvider`: React component to provide agent context to your application.
+ * - `useAgent`, `useAuthClient`, `useAuthState`, `useAgentState`, `useAgentManager`, `useUserPrincipal`: Hooks extracted from the created context for managing agent and authentication state within components.
+ *
+ * @example
+ * ```tsx
+ * // agent.ts
+ * import { createAgentContext } from "@ic-reactor/react";
+ * import { CreateAgentParameters } from "@ic-reactor/react/dist/types";
+ *
+ * // Optional: Define custom agent configuration
+ * const agentConfig: CreateAgentParameters = {
+ *   host: "https://localhost:8000",
+ *   // or
+ *   // isLocalEnv: true,
+ *   // port: 8000,
+ * };
+ *
+ * export const {
+ *   AgentProvider,
+ *   useAgent,
+ *   useAuthClient,
+ *   useAuthState,
+ *   useAgentState,
+ *   useAgentManager,
+ *   useUserPrincipal,
+ * } = createAgentContext(agentConfig);
+ *
+ * // Now you can use the returned hooks in your React components
+ *
+ * // App.tsx
+ * import React from 'react';
+ * import { AgentProvider } from './agent';
+ *
+ * const App = () => (
+ *   <AgentProvider>
+ *     <Login />
+ *     <YourActor />
+ *   </AgentProvider>
+ * );
+ *
+ * const Login = () => {
+ *  const { login } = useAuthClient()
+ *  const principal = useUserPrincipal()
+ *
+ *  return (
+ *    <div>
+ *      <button onClick={() => login()}>Login</button>
+ *      <p>User: {principal?.toText()}</p>
+ *    </div>
+ *  )
+ * };
+ *
+ * ```
+ *
+ * This setup allows you to use the agent and authentication hooks within
+ * the components wrapped by `AgentProvider`, facilitating interaction
+ * with the Internet Computer blockchain.
+ */
+export declare const createAgentContext: (config?: AgentManagerParameters) => CreateAgentContextReturnType;