@ic-reactor/react 1.0.3 → 1.0.4

package/dist/helpers/actor.d.ts

@@ -1,4 +1,21 @@
 import type { ActorHooks } from "../types";
 import type { BaseActor } from "@ic-reactor/core/dist/types";
 import { ActorManager } from "@ic-reactor/core";
+/**
+ * Provides a set of React hooks designed for interacting with actors in an Internet Computer (IC) project using the React framework and Zustand for state management.
+ *
+ * @param actorManager An instance of ActorManager containing methods and properties to manage actors, including the actorStore, canisterId, visitFunction, callMethod, and initialize function.
+ * @returns An object containing several hooks and utility functions for interacting with actors, managing state, and invoking actor methods.
+ *
+ * Hooks included:
+ * - initialize: Function to initialize actor management.
+ * - useActorState: Hook for accessing the actor's state including the canister ID.
+ * - useVisitMethod: Hook for memoizing a method visit service for a given actor method name.
+ * - 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.
+ *
+ * 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>;

package/dist/helpers/actor.js

@@ -28,6 +28,23 @@ const DEFAULT_STATE = {
     error: undefined,
     loading: false,
 };
+/**
+ * Provides a set of React hooks designed for interacting with actors in an Internet Computer (IC) project using the React framework and Zustand for state management.
+ *
+ * @param actorManager An instance of ActorManager containing methods and properties to manage actors, including the actorStore, canisterId, visitFunction, callMethod, and initialize function.
+ * @returns An object containing several hooks and utility functions for interacting with actors, managing state, and invoking actor methods.
+ *
+ * Hooks included:
+ * - initialize: Function to initialize actor management.
+ * - useActorState: Hook for accessing the actor's state including the canister ID.
+ * - useVisitMethod: Hook for memoizing a method visit service for a given actor method name.
+ * - 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.
+ *
+ * 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 { actorStore, canisterId, visitFunction, callMethod, initialize } = actorManager;
     const useActorState = () => (Object.assign(Object.assign({}, (0, zustand_1.useStore)(actorStore)), { canisterId }));
@@ -59,7 +76,7 @@ const getActorHooks = (actorManager) => {
                 if (throwOnError)
                     throw error;
             }
-        }), [args, functionName, events, callMethod]);
+        }), [args, functionName, events]);
         return Object.assign({ call, reset }, state);
     };
     const useQueryCall = (_a) => {
@@ -67,14 +84,14 @@ const getActorHooks = (actorManager) => {
         const _b = useReactorCall(rest), { call } = _b, state = __rest(_b, ["call"]);
         const intervalId = (0, react_1.useRef)();
         (0, react_1.useEffect)(() => {
-            if (refetchInterval)
+            if (refetchInterval) {
                 intervalId.current = setInterval(call, refetchInterval);
-            return () => clearInterval(intervalId.current);
-        }, [refetchInterval, call]);
-        (0, react_1.useLayoutEffect)(() => {
-            if (refetchOnMount)
+            }
+            if (refetchOnMount) {
                 call();
-        }, [call, refetchOnMount]);
+            }
+            return () => clearInterval(intervalId.current);
+        }, [refetchInterval, refetchOnMount]);
         return Object.assign({ call }, state);
     };
     const useUpdateCall = useReactorCall;

package/dist/helpers/agent.d.ts

@@ -1,6 +1,3 @@
 import type { AgentManager } from "@ic-reactor/core/dist/agent";
-import type { HttpAgent } from "@ic-reactor/core/dist/types";
-export declare const getAgentHooks: (agentManager: AgentManager) => {
-    useAgent: () => HttpAgent | undefined;
-    useAgentState: () => import("@ic-reactor/core/dist/types").AgentState;
-};
+import type { AgentHooks } from "./types";
+export declare const getAgentHooks: (agentManager: AgentManager) => AgentHooks;

package/dist/helpers/auth.d.ts

@@ -1,7 +1,3 @@
 import type { AgentManager } from "@ic-reactor/core/dist/agent";
-import type { UseAuthClientArgs, UseAuthClientReturn } from "../types";
-export declare const getAuthHooks: (agentManager: AgentManager) => {
-    useUserPrincipal: () => import("@dfinity/principal").Principal | undefined;
-    useAuthState: () => import("@ic-reactor/core/dist/agent/types").AuthState;
-    useAuthClient: (events?: UseAuthClientArgs) => UseAuthClientReturn;
-};
+import type { AuthHooks } from "../types";
+export declare const getAuthHooks: (agentManager: AgentManager) => AuthHooks;

package/dist/helpers/types.d.ts

@@ -1,10 +1,23 @@
 /// <reference types="react" />
 import type { AuthClientLoginOptions } from "@dfinity/auth-client";
-import type { getAgentHooks } from "./agent";
-import type { getAuthHooks } from "./auth";
-import type { ActorState, CanisterId, ActorMethodArgs, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthClient } from "@ic-reactor/core/dist/types";
-export type AgentHooks = ReturnType<typeof getAgentHooks>;
-export type AuthHooks = ReturnType<typeof getAuthHooks>;
+import type { ActorState, CanisterId, ActorMethodArgs, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthClient, AuthState, HttpAgent, AgentState } from "@ic-reactor/core/dist/types";
+export interface AgentHooks {
+    useAgent: () => HttpAgent | undefined;
+    useAgentState: () => AgentState;
+}
+export interface AuthHooks {
+    useUserPrincipal: () => Principal | undefined;
+    useAuthState: () => AuthState;
+    useAuthClient: (events?: UseAuthClientArgs) => UseAuthClientReturn;
+}
+export interface ActorHooks<A> {
+    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 {
     onAuthentication?: (promise: () => Promise<Identity>) => void;
     onAuthenticationSuccess?: (identity: Identity) => void;
@@ -71,11 +84,3 @@ export type UseMethodCallArg<A, M extends FunctionName<A>> = ReactorCallArgs<A,
 export interface UseActorState extends Omit<ActorState, "methodState"> {
     canisterId: CanisterId;
 }
-export interface ActorHooks<A> {
-    initialize: () => Promise<void>;
-    useActorState: () => UseActorState;
-    useQueryCall: UseQueryCall<A>;
-    useUpdateCall: UseUpdateCall<A>;
-    useMethodCall: UseMethodCall<A>;
-    useVisitMethod: <M extends FunctionName<A>>(functionName: M) => VisitService<A>[M];
-}

package/dist/hooks/index.d.ts

@@ -1,2 +1 @@
 export * from "./useReactor";
-export * from "./useCandid";

package/dist/hooks/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useReactor"), exports);
-__exportStar(require("./useCandid"), exports);

package/dist/hooks/types.d.ts

@@ -0,0 +1,19 @@
+import { IDL } from "@dfinity/candid";
+import { ActorManagerOptions, BaseActor } from "@ic-reactor/core/dist/types";
+import { ActorHooks, AgentContextType } from "../types";
+export interface UseReactorOptions extends Omit<ActorManagerOptions, "idlFactory" | "agentManager" | "canisterId"> {
+    canisterId: string;
+    idlFactory?: IDL.InterfaceFactory;
+    agentContext?: AgentContextType;
+    didjsCanisterId?: string;
+}
+export interface UseReactorState {
+    idlFactory?: IDL.InterfaceFactory;
+    fetching: boolean;
+    fetchError: string | null;
+}
+export interface UseReactorReturn<A = BaseActor> {
+    hooks: ActorHooks<A> | null;
+    fetching: boolean;
+    fetchError: string | null;
+}

package/dist/hooks/types.js

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

package/dist/hooks/useReactor.d.ts

@@ -1,19 +1,41 @@
-import { IDL } from "@dfinity/candid";
-import { ActorManagerOptions, BaseActor } from "@ic-reactor/core/dist/types";
-import { AgentContextType } from "../types";
-interface DynamicActorArgs extends Omit<ActorManagerOptions, "idlFactory" | "agentManager" | "canisterId"> {
-    canisterId: string;
-    idlFactory?: IDL.InterfaceFactory;
-    agentContext?: AgentContextType;
-    didjsCanisterId?: string;
-}
+import { BaseActor } from "../types";
+import { UseReactorOptions, UseReactorReturn } from "./types";
 /**
- * A hook to create an actor manager and fetch the actor's candid interface.
+ * A comprehensive hook that manages both the fetching of Candid interfaces
+ * and the initialization of actor stores for Internet Computer (IC) canisters.
+ * It simplifies the process of interacting with canisters by encapsulating
+ * the logic for Candid retrieval and actor store management.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { useReactor } from '@ic-reactor/react';
+ * import { IDL } from '@dfinity/candid';
+ *
+ * const App = () => {
+ *   const { actorManager, fetchCandid, candid, fetching, fetchError } = useReactor({
+ *     canisterId: 'ryjl3-tyaaa-aaaaa-aaaba-cai',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <h2>IC Canister Interaction</h2>
+ *       {fetching && <p>Loading Candid interface...</p>}
+ *       {fetchError && <p>Error: {fetchError}</p>}
+ *       {candid.idlFactory && (
+ *         <div>
+ *           <p>Candid interface fetched successfully.</p>
+ *           <pre>{JSON.stringify(candid.idlFactory({ IDL }), null, 2)}</pre>
+ *         </div>
+ *       )}
+ *       <button onClick={fetchCandid} disabled={fetching}>
+ *         {fetching ? 'Fetching...' : 'Fetch Candid'}
+ *       </button>
+ *     </div>
+ *   );
+ * };
+ *
+ * export default App;
+ * ```
  */
-export declare const useReactor: <A = BaseActor>({ canisterId, agentContext, idlFactory: maybeIdlFactory, didjsCanisterId, ...config }: DynamicActorArgs) => {
-    fetchCandid: () => Promise<import("@ic-reactor/core/dist/types").CandidDefenition | undefined>;
-    fetching: boolean;
-    fetchError: string | null;
-    actorManager: import("@ic-reactor/core").ActorManager<A> | null;
-};
-export {};
+export declare const useReactor: <A = BaseActor>({ canisterId, agentContext, idlFactory: maybeIdlFactory, didjsCanisterId, ...config }: UseReactorOptions) => UseReactorReturn<A>;

package/dist/hooks/useReactor.js

@@ -1,4 +1,13 @@
 "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());
+    });
+};
 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)
@@ -15,32 +24,98 @@ exports.useReactor = void 0;
 const core_1 = require("@ic-reactor/core");
 const react_1 = require("react");
 const agent_1 = require("../provider/agent");
-const useCandid_1 = require("./useCandid");
+const helpers_1 = require("../helpers");
 /**
- * A hook to create an actor manager and fetch the actor's candid interface.
+ * A comprehensive hook that manages both the fetching of Candid interfaces
+ * and the initialization of actor stores for Internet Computer (IC) canisters.
+ * It simplifies the process of interacting with canisters by encapsulating
+ * the logic for Candid retrieval and actor store management.
+ *
+ * @example
+ * ```tsx
+ * import React from 'react';
+ * import { useReactor } from '@ic-reactor/react';
+ * import { IDL } from '@dfinity/candid';
+ *
+ * const App = () => {
+ *   const { actorManager, fetchCandid, candid, fetching, fetchError } = useReactor({
+ *     canisterId: 'ryjl3-tyaaa-aaaaa-aaaba-cai',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <h2>IC Canister Interaction</h2>
+ *       {fetching && <p>Loading Candid interface...</p>}
+ *       {fetchError && <p>Error: {fetchError}</p>}
+ *       {candid.idlFactory && (
+ *         <div>
+ *           <p>Candid interface fetched successfully.</p>
+ *           <pre>{JSON.stringify(candid.idlFactory({ IDL }), null, 2)}</pre>
+ *         </div>
+ *       )}
+ *       <button onClick={fetchCandid} disabled={fetching}>
+ *         {fetching ? 'Fetching...' : 'Fetch Candid'}
+ *       </button>
+ *     </div>
+ *   );
+ * };
+ *
+ * export default App;
+ * ```
  */
 const useReactor = (_a) => {
     var { canisterId, agentContext, idlFactory: maybeIdlFactory, didjsCanisterId } = _a, config = __rest(_a, ["canisterId", "agentContext", "idlFactory", "didjsCanisterId"]);
-    const agentManager = (0, agent_1.useAgentManager)(agentContext);
-    const _b = (0, useCandid_1.useCandid)({
-        canisterId,
-        didjsCanisterId,
+    const [{ idlFactory, fetching, fetchError }, setState] = (0, react_1.useState)({
         idlFactory: maybeIdlFactory,
-    }), { candid: { idlFactory } } = _b, rest = __rest(_b, ["candid"]);
-    const actorManager = (0, react_1.useMemo)(() => {
-        if (!idlFactory) {
-            return null;
-        }
-        else {
-            const manager = (0, core_1.createReactorStore)({
+        fetching: false,
+        fetchError: null,
+    });
+    const agentManager = (0, agent_1.useAgentManager)(agentContext);
+    const fetchCandid = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!canisterId)
+            return;
+        setState({
+            idlFactory: undefined,
+            fetching: true,
+            fetchError: null,
+        });
+        try {
+            const candidManager = (0, core_1.createCandidAdapter)({
                 agentManager,
+                didjsCanisterId,
+            });
+            const { idlFactory } = yield candidManager.getCandidDefinition(canisterId);
+            setState({
                 idlFactory,
-                canisterId,
-                withDevtools: config.withDevtools,
+                fetching: false,
+                fetchError: null,
+            });
+            return idlFactory;
+        }
+        catch (err) {
+            // eslint-disable-next-line no-console
+            console.error(err);
+            setState({
+                idlFactory: undefined,
+                fetchError: `Error fetching canister ${canisterId}`,
+                fetching: false,
             });
-            return manager;
         }
+    }), [canisterId, didjsCanisterId, agentManager]);
+    // Automatically fetch Candid if not already fetched or provided.
+    (0, react_1.useEffect)(() => {
+        if (!fetching && !idlFactory) {
+            fetchCandid();
+        }
+    }, [fetchCandid]);
+    const hooks = (0, react_1.useMemo)(() => {
+        if (!idlFactory)
+            return null;
+        const actorManager = (0, core_1.createActorManager)(Object.assign({ agentManager,
+            idlFactory,
+            canisterId }, config));
+        return (0, helpers_1.getActorHooks)(actorManager);
     }, [idlFactory]);
-    return Object.assign({ actorManager }, rest);
+    return { hooks, fetching, fetchError };
 };
 exports.useReactor = useReactor;

package/dist/provider/actor/context.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+import { BaseActor, FunctionName, UseMethodCallArg, UseQueryCallArgs, UseUpdateCallArgs } from "../../types";
+import { CreateActorOptions, ActorContextType, ActorProviderProps } from "./types";
+export declare function createReactorContext<A = BaseActor>({ canisterId: defaultCanisterId, ...defaultConfig }?: Partial<CreateActorOptions>): {
+    useActorState: () => import("../../types").UseActorState;
+    useQueryCall: <M extends FunctionName<A>>(args: UseQueryCallArgs<A, M>) => import("../../types").ReactorCallReturn<A, M>;
+    useUpdateCall: <M_1 extends FunctionName<A>>(args: UseUpdateCallArgs<A, M_1>) => import("../../types").ReactorCallReturn<A, M_1>;
+    useMethodCall: <M_2 extends FunctionName<A>>(args: UseMethodCallArg<A, M_2>) => import("../../types").UseMethodCallReturn<A, M_2>;
+    useVisitMethod: (functionName: FunctionName<A>) => import("@ic-reactor/core/dist/actor/types").VisitService<A>[FunctionName<A>];
+    initialize: () => Promise<void>;
+    ActorProvider: React.FC<ActorProviderProps>;
+};
+export declare function extractActorHooks<A = BaseActor>(ActorContext: React.Context<ActorContextType<A> | null>): {
+    useActorState: () => import("../../types").UseActorState;
+    useQueryCall: <M extends FunctionName<A>>(args: UseQueryCallArgs<A, M>) => import("../../types").ReactorCallReturn<A, M>;
+    useUpdateCall: <M_1 extends FunctionName<A>>(args: UseUpdateCallArgs<A, M_1>) => import("../../types").ReactorCallReturn<A, M_1>;
+    useMethodCall: <M_2 extends FunctionName<A>>(args: UseMethodCallArg<A, M_2>) => import("../../types").UseMethodCallReturn<A, M_2>;
+    useVisitMethod: (functionName: FunctionName<A>) => import("@ic-reactor/core/dist/actor/types").VisitService<A>[FunctionName<A>];
+    initialize: () => Promise<void>;
+};

package/dist/provider/actor/context.js

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

package/dist/provider/actor/index.d.ts

@@ -1,15 +1,3 @@
-import React from "react";
-import { BaseActor, FunctionName, UseMethodCallArg, UseQueryCallArgs, UseUpdateCallArgs } from "../../types";
-import { CreateActorOptions, ActorContextType, ActorProviderProps } from "./types";
-export declare const ActorContext: React.Context<ActorContextType<BaseActor> | null>, ActorProvider: React.FC<ActorProviderProps>, useActorContext: () => ActorContextType<BaseActor>, useActorState: () => import("../../types").UseActorState, useQueryCall: <M extends string>(args: UseQueryCallArgs<BaseActor, M>) => import("../../types").ReactorCallReturn<BaseActor, M>, useUpdateCall: <M extends string>(args: UseUpdateCallArgs<BaseActor, M>) => import("../../types").ReactorCallReturn<BaseActor, M>, useMethodCall: <M extends string>(args: UseMethodCallArg<BaseActor, M>) => import("../../types").UseMethodCallReturn<BaseActor, M>, useVisitMethod: (functionName: string) => <V extends import("@dfinity/candid/lib/cjs/idl").Visitor<unknown, unknown>>(extractorClass: V, data?: import("@ic-reactor/core/dist/actor/types").VisitorType<V>["data"] | undefined) => ReturnType<V["visitFunc"]>;
-export declare function createReactorContext<Actor = BaseActor>({ canisterId: defaultCanisterId, ...defaultConfig }?: Partial<CreateActorOptions>): {
-    ActorContext: React.Context<ActorContextType<BaseActor> | null>;
-    ActorProvider: React.FC<ActorProviderProps>;
-    useActorContext: () => ActorContextType<Actor>;
-    useActorState: () => import("../../types").UseActorState;
-    useQueryCall: <M extends FunctionName<Actor>>(args: UseQueryCallArgs<Actor, M>) => import("../../types").ReactorCallReturn<Actor, M>;
-    useUpdateCall: <M_1 extends FunctionName<Actor>>(args: UseUpdateCallArgs<Actor, M_1>) => import("../../types").ReactorCallReturn<Actor, M_1>;
-    useMethodCall: <M_2 extends FunctionName<Actor>>(args: UseMethodCallArg<Actor, M_2>) => import("../../types").UseMethodCallReturn<Actor, M_2>;
-    useVisitMethod: (functionName: FunctionName<Actor>) => import("@ic-reactor/core/dist/actor/types").VisitService<Actor>[FunctionName<Actor>];
-    initialize: () => Promise<void>;
-};
+/// <reference types="react" />
+export declare const ActorProvider: import("react").FC<import("./types").ActorProviderProps>, useActorState: () => import("../../types").UseActorState, useQueryCall: <M extends string>(args: import("../../types").UseQueryCallArgs<import("@ic-reactor/core/dist/types").BaseActor, M>) => import("../../types").ReactorCallReturn<import("@ic-reactor/core/dist/types").BaseActor, M>, useUpdateCall: <M extends string>(args: import("../../types").UseUpdateCallArgs<import("@ic-reactor/core/dist/types").BaseActor, M>) => import("../../types").ReactorCallReturn<import("@ic-reactor/core/dist/types").BaseActor, M>, useMethodCall: <M extends string>(args: import("../../types").UseMethodCallArg<import("@ic-reactor/core/dist/types").BaseActor, M>) => import("../../types").UseMethodCallReturn<import("@ic-reactor/core/dist/types").BaseActor, M>, useVisitMethod: (functionName: string) => <V extends import("@dfinity/candid/lib/cjs/idl").Visitor<unknown, unknown>>(extractorClass: V, data?: import("@ic-reactor/core/dist/types").VisitorType<V>["data"] | undefined) => ReturnType<V["visitFunc"]>;
+export { createReactorContext, extractActorHooks } from "./context";

package/dist/provider/actor/index.js

@@ -1,87 +1,9 @@
 "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;
-};
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createReactorContext = exports.useVisitMethod = exports.useMethodCall = exports.useUpdateCall = exports.useQueryCall = exports.useActorState = exports.useActorContext = exports.ActorProvider = exports.ActorContext = void 0;
-const react_1 = __importStar(require("react"));
-const actor_1 = require("../../helpers/actor");
-const useReactor_1 = require("../../hooks/useReactor");
-_a = createReactorContext(), exports.ActorContext = _a.ActorContext, exports.ActorProvider = _a.ActorProvider, exports.useActorContext = _a.useActorContext, exports.useActorState = _a.useActorState, exports.useQueryCall = _a.useQueryCall, exports.useUpdateCall = _a.useUpdateCall, exports.useMethodCall = _a.useMethodCall, exports.useVisitMethod = _a.useVisitMethod;
-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 { actorManager, fetchError, fetching } = (0, useReactor_1.useReactor)(Object.assign({ canisterId }, config));
-        const hooks = (0, react_1.useMemo)(() => {
-            if (actorManager) {
-                return (0, actor_1.getActorHooks)(actorManager);
-            }
-            return null;
-        }, [actorManager === null || actorManager === void 0 ? void 0 : actorManager.canisterId]);
-        return (react_1.default.createElement(ActorContext.Provider, { value: hooks }, fetching || hooks === null ? fetchError !== null && fetchError !== void 0 ? fetchError : loadingComponent : children));
-    };
-    ActorProvider.displayName = "ActorProvider";
-    const useActorContext = () => {
-        const context = (0, react_1.useContext)(ActorContext);
-        if (!context) {
-            throw new Error("useActor must be used within a ActorProvider");
-        }
-        return context;
-    };
-    const initialize = () => useActorContext().initialize();
-    const useActorState = () => useActorContext().useActorState();
-    const useQueryCall = (args) => useActorContext().useQueryCall(args);
-    const useUpdateCall = (args) => useActorContext().useUpdateCall(args);
-    const useMethodCall = (args) => useActorContext().useMethodCall(args);
-    const useVisitMethod = (functionName) => useActorContext().useVisitMethod(functionName);
-    return {
-        ActorContext,
-        ActorProvider,
-        useActorContext,
-        useActorState,
-        useQueryCall,
-        useUpdateCall,
-        useMethodCall,
-        useVisitMethod,
-        initialize,
-    };
-}
-exports.createReactorContext = createReactorContext;
+exports.extractActorHooks = exports.createReactorContext = exports.useVisitMethod = exports.useMethodCall = exports.useUpdateCall = exports.useQueryCall = exports.useActorState = exports.ActorProvider = void 0;
+const context_1 = require("./context");
+_a = (0, context_1.createReactorContext)(), exports.ActorProvider = _a.ActorProvider, exports.useActorState = _a.useActorState, exports.useQueryCall = _a.useQueryCall, exports.useUpdateCall = _a.useUpdateCall, exports.useMethodCall = _a.useMethodCall, exports.useVisitMethod = _a.useVisitMethod;
+var context_2 = require("./context");
+Object.defineProperty(exports, "createReactorContext", { enumerable: true, get: function () { return context_2.createReactorContext; } });
+Object.defineProperty(exports, "extractActorHooks", { enumerable: true, get: function () { return context_2.extractActorHooks; } });

package/dist/types.d.ts

@@ -3,6 +3,7 @@ import type { ActorHooks, AgentHooks, AuthHooks } from "./helpers/types";
 export * from "@ic-reactor/core/dist/types";
 export * from "./provider/agent/types";
 export * from "./provider/actor/types";
+export * from "./hooks/types";
 export * from "./helpers/types";
 export interface CreateReactorReturn<A> extends ActorHooks<A>, AuthHooks, AgentHooks {
     getAgent: () => HttpAgent;

package/dist/types.js

@@ -17,4 +17,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("@ic-reactor/core/dist/types"), exports);
 __exportStar(require("./provider/agent/types"), exports);
 __exportStar(require("./provider/actor/types"), exports);
+__exportStar(require("./hooks/types"), exports);
 __exportStar(require("./helpers/types"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A React library for interacting with Internet Computer canisters",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -48,5 +48,5 @@
     "react": ">=16.8",
     "zustand": "4.5"
   },
-  "gitHead": "acf8b5da61713482264c9eb5c227dc94a7e43cbc"
+  "gitHead": "031413fceeddbdac2fa281e1e07940182ac1e1ef"
 }

package/dist/hooks/useCandid.d.ts

@@ -1,18 +0,0 @@
-import type { IDL } from "@dfinity/candid";
-interface UseIDLFactoryArgs {
-    canisterId: string;
-    didjsCanisterId?: string;
-    idlFactory?: IDL.InterfaceFactory;
-}
-export declare const useCandid: ({ canisterId, didjsCanisterId, idlFactory, }: UseIDLFactoryArgs) => {
-    fetchCandid: () => Promise<import("@ic-reactor/core/dist/types").CandidDefenition | undefined>;
-    candid: {
-        idlFactory?: IDL.InterfaceFactory | undefined;
-        init: ({ idl }: {
-            idl: typeof IDL;
-        }) => never[];
-    };
-    fetching: boolean;
-    fetchError: string | null;
-};
-export {};

package/dist/hooks/useCandid.js

@@ -1,54 +0,0 @@
-"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.useCandid = void 0;
-const react_1 = require("react");
-const core_1 = require("@ic-reactor/core");
-const agent_1 = require("../provider/agent");
-const DEFAULT_STATE = {
-    candid: { idlFactory: undefined, init: () => [] },
-    fetching: false,
-    fetchError: null,
-};
-const useCandid = ({ canisterId, didjsCanisterId, idlFactory, }) => {
-    const [{ candid, fetchError, fetching }, setCandid] = (0, react_1.useState)(Object.assign(Object.assign({}, DEFAULT_STATE), { candid: {
-            idlFactory,
-            init: () => [],
-        } }));
-    const agent = (0, agent_1.useAgent)();
-    const fetchCandid = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
-        if (!canisterId || !agent)
-            return;
-        setCandid((prevState) => (Object.assign(Object.assign({}, prevState), { candid: DEFAULT_STATE.candid, fetching: true, fetchError: null })));
-        try {
-            const candidManager = (0, core_1.createCandidAdapter)({ agent, didjsCanisterId });
-            const fetchedCandid = yield candidManager.getCandidDefinition(canisterId);
-            setCandid({
-                candid: fetchedCandid,
-                fetching: false,
-                fetchError: null,
-            });
-            return fetchedCandid;
-        }
-        catch (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-            setCandid((prevState) => (Object.assign(Object.assign({}, prevState), { fetchError: `Error fetching canister ${canisterId}`, fetching: false })));
-        }
-    }), [canisterId, didjsCanisterId, agent]);
-    (0, react_1.useEffect)(() => {
-        if (!fetching && !idlFactory) {
-            fetchCandid();
-        }
-    }, [fetchCandid]);
-    return { fetchCandid, candid, fetching, fetchError };
-};
-exports.useCandid = useCandid;