@ic-reactor/react 1.1.4 → 1.1.6

package/dist/context/actor.d.ts

@@ -61,4 +61,4 @@ import { CreateActorContextParameters, CreateActorContextReturnType } from "./ty
  * 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>;
+export declare function createActorContext<A = BaseActor>(contextConfig?: CreateActorContextParameters): CreateActorContextReturnType<A>;

package/dist/context/actor.js

@@ -79,8 +79,8 @@ const extractActorContext_1 = require("../helpers/extractActorContext");
  * 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"]);
+function createActorContext(contextConfig = {}) {
+    const { canisterId: defaultCanisterId } = contextConfig, defaultConfig = __rest(contextConfig, ["canisterId"]);
     const ActorContext = react_1.default.createContext(null);
     const ActorProvider = (_a) => {
         var { children, canisterId = defaultCanisterId, loadingComponent = react_1.default.createElement("div", null, "Fetching canister..."), authenticatingComponent = react_1.default.createElement("div", null, "Authenticating...") } = _a, restConfig = __rest(_a, ["children", "canisterId", "loadingComponent", "authenticatingComponent"]);
@@ -88,7 +88,7 @@ function createActorContext(config = {}) {
             throw new Error("canisterId is required");
         }
         const config = react_1.default.useMemo(() => (Object.assign(Object.assign({}, defaultConfig), restConfig)), [defaultConfig, restConfig]);
-        const { fetchError, authenticating, hooks } = (0, useActor_1.useActor)(Object.assign({ canisterId, fetchOnMount: false }, config));
+        const { fetchError, authenticating, hooks } = (0, useActor_1.useActor)(Object.assign({ canisterId }, config));
         return (react_1.default.createElement(ActorContext.Provider, { value: hooks }, hooks === null
             ? (fetchError !== null && fetchError !== void 0 ? fetchError : authenticating)
                 ? authenticatingComponent

package/dist/helpers/actorHooks.js

@@ -47,26 +47,34 @@ const DEFAULT_STATE = {
  * Each hook is designed to simplify the process of interacting with actors in IC projects by abstracting away the complexity of state management, error handling, and method invocation.
  */
 const actorHooks = (actorManager) => {
-    const { actorStore, canisterId, visitFunction, callMethod, initialize } = actorManager;
+    const { actorStore, canisterId, visitFunction, extractInterface, callMethod, initialize, } = actorManager;
     const useActorState = () => (Object.assign(Object.assign({}, (0, zustand_1.useStore)(actorStore)), { canisterId }));
+    const useActorInterface = () => {
+        return extractInterface();
+    };
     const useVisitService = () => {
         return visitFunction;
     };
     const useVisitMethod = (functionName) => {
-        return react_1.default.useMemo(() => visitFunction[functionName], [functionName]);
+        return react_1.default.useMemo(() => {
+            if (!visitFunction[functionName]) {
+                throw new Error(`Method ${functionName} not found`);
+            }
+            return visitFunction[functionName];
+        }, [functionName]);
     };
-    const useMethodCall = (_a) => {
+    const useSharedCall = (_a) => {
         var { args = [], functionName, throwOnError = false } = _a, events = __rest(_a, ["args", "functionName", "throwOnError"]);
-        const [state, setState] = react_1.default.useState(DEFAULT_STATE);
-        const reset = react_1.default.useCallback(() => setState(DEFAULT_STATE), []);
+        const [sharedState, setSharedState] = react_1.default.useState(DEFAULT_STATE);
+        const reset = react_1.default.useCallback(() => setSharedState(DEFAULT_STATE), []);
         const call = react_1.default.useCallback((eventOrReplaceArgs) => __awaiter(void 0, void 0, void 0, function* () {
             var _b, _c, _d, _e, _f;
-            setState((prev) => (Object.assign(Object.assign({}, prev), { error: undefined, loading: true })));
+            setSharedState((prev) => (Object.assign(Object.assign({}, prev), { error: undefined, loading: true })));
             (_b = events === null || events === void 0 ? void 0 : events.onLoading) === null || _b === void 0 ? void 0 : _b.call(events, true);
             try {
                 const replaceArgs = eventOrReplaceArgs instanceof Array ? eventOrReplaceArgs : args;
                 const data = yield callMethod(functionName, ...replaceArgs);
-                setState({ data, error: undefined, loading: false });
+                setSharedState({ data, error: undefined, loading: false });
                 (_c = events === null || events === void 0 ? void 0 : events.onSuccess) === null || _c === void 0 ? void 0 : _c.call(events, data);
                 (_d = events === null || events === void 0 ? void 0 : events.onLoading) === null || _d === void 0 ? void 0 : _d.call(events, false);
                 return data;
@@ -74,18 +82,18 @@ const actorHooks = (actorManager) => {
             catch (error) {
                 // eslint-disable-next-line no-console
                 console.error("Error in call:", error);
-                setState((prevState) => (Object.assign(Object.assign({}, prevState), { error: error, loading: false })));
+                setSharedState((prevState) => (Object.assign(Object.assign({}, prevState), { error: error, loading: false })));
                 (_e = events === null || events === void 0 ? void 0 : events.onError) === null || _e === void 0 ? void 0 : _e.call(events, error);
                 (_f = events === null || events === void 0 ? void 0 : events.onLoading) === null || _f === void 0 ? void 0 : _f.call(events, false);
                 if (throwOnError)
                     throw error;
             }
         }), [args, functionName, events]);
-        return Object.assign({ call, reset }, state);
+        return Object.assign({ call, reset }, sharedState);
     };
     const useQueryCall = (_a) => {
         var { refetchOnMount = true, refetchInterval = false } = _a, rest = __rest(_a, ["refetchOnMount", "refetchInterval"]);
-        const _b = useMethodCall(rest), { call } = _b, state = __rest(_b, ["call"]);
+        const _b = useSharedCall(rest), { call } = _b, state = __rest(_b, ["call"]);
         const intervalId = react_1.default.useRef();
         react_1.default.useEffect(() => {
             if (refetchInterval) {
@@ -98,14 +106,22 @@ const actorHooks = (actorManager) => {
         }, [refetchInterval, refetchOnMount]);
         return Object.assign({ call }, state);
     };
-    const useUpdateCall = useMethodCall;
+    const useUpdateCall = useSharedCall;
+    const useMethod = (args) => {
+        const _a = useSharedCall(args), { call } = _a, state = __rest(_a, ["call"]);
+        const visit = useVisitMethod(args.functionName);
+        return Object.assign({ call,
+            visit }, state);
+    };
     return {
         initialize,
+        useMethod,
         useQueryCall,
         useUpdateCall,
         useActorState,
         useVisitMethod,
         useVisitService,
+        useActorInterface,
     };
 };
 exports.actorHooks = actorHooks;

package/dist/helpers/extractActorContext.js

@@ -40,16 +40,20 @@ function extractActorContext(actorContext) {
     };
     const initialize = () => useActorContext().initialize();
     const useActorState = () => useActorContext().useActorState();
+    const useMethod = (args) => useActorContext().useMethod(args);
     const useQueryCall = (args) => useActorContext().useQueryCall(args);
     const useUpdateCall = (args) => useActorContext().useUpdateCall(args);
     const useVisitMethod = (functionName) => useActorContext().useVisitMethod(functionName);
     const useVisitService = () => useActorContext().useVisitService();
+    const useActorInterface = () => useActorContext().useActorInterface();
     return {
         useActorState,
+        useMethod,
         useQueryCall,
         useUpdateCall,
         useVisitMethod,
         useVisitService,
+        useActorInterface,
         initialize,
     };
 }

package/dist/helpers/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { ServiceClass } from "@dfinity/candid/lib/cjs/idl";
 import type { ActorState, CanisterId, AuthClientLoginOptions, ActorMethodParameters, ActorMethodReturnType, Identity, Principal, FunctionName, VisitService, AuthState, HttpAgent, AgentState, BaseActor } from "@ic-reactor/core/dist/types";
 export interface AgentHooksReturnType {
     useAgent: () => HttpAgent | undefined;
@@ -40,7 +41,7 @@ export type LogoutParameters = {
 export interface UseActorState extends Omit<ActorState, "methodState"> {
     canisterId: CanisterId;
 }
-export type UseMethodCallParameters<A, M extends FunctionName<A>> = {
+export type UseSharedCallParameters<A, M extends FunctionName<A>> = {
     functionName: M;
     args?: ActorMethodParameters<A[M]>;
     onLoading?: (loading: boolean) => void;
@@ -48,29 +49,46 @@ export type UseMethodCallParameters<A, M extends FunctionName<A>> = {
     onSuccess?: (data: ActorMethodReturnType<A[M]> | undefined) => void;
     throwOnError?: boolean;
 };
-export type ActorCallState<A, M extends FunctionName<A>> = {
+export type UseSharedCallState<A, M extends FunctionName<A>> = {
     data: ActorMethodReturnType<A[M]> | undefined;
     error: Error | undefined;
     loading: boolean;
 };
-export interface UseQueryCallParameters<A, M extends FunctionName<A>> extends UseMethodCallParameters<A, M> {
+export interface UseSharedCallReturnType<A, M extends FunctionName<A> = FunctionName<A>> extends UseSharedCallState<A, M> {
+    reset: () => void;
+    call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
+}
+export type UseSharedCall<A> = <M extends FunctionName<A>>(args: UseSharedCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
+export interface UseQueryCallParameters<A, M extends FunctionName<A>> extends UseSharedCallParameters<A, M> {
     refetchOnMount?: boolean;
     refetchInterval?: number | false;
 }
-export interface UseUpdateCallParameters<A, M extends FunctionName<A>> extends UseMethodCallParameters<A, M> {
+export type UseQueryCall<A> = <M extends FunctionName<A>>(args: UseQueryCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
+export interface UseUpdateCallParameters<A, M extends FunctionName<A>> extends UseSharedCallParameters<A, M> {
+}
+export type UseUpdateCall<A> = <M extends FunctionName<A>>(args: UseUpdateCallParameters<A, M>) => UseSharedCallReturnType<A, M>;
+export interface DynamicDataArgs<V = unknown> {
+    label: string;
+    value: V;
 }
-export interface UseMethodCallReturnType<A, M extends FunctionName<A> = FunctionName<A>> extends ActorCallState<A, M> {
+export interface UseMethodParameters<A, M extends FunctionName<A>> extends UseSharedCallParameters<A, M> {
+}
+export interface UseMethodReturnType<A, M extends FunctionName<A> = FunctionName<A>> {
+    loading: boolean;
+    error: Error | undefined;
+    data: ActorMethodReturnType<A[M]> | undefined;
+    visit: VisitService<A>[M];
     reset: () => void;
     call: (eventOrReplaceArgs?: React.MouseEvent | ActorMethodParameters<A[M]>) => Promise<ActorMethodReturnType<A[M]> | undefined>;
 }
-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 type UseMethod<A> = <M extends FunctionName<A>>(args: UseMethodParameters<A, M>) => UseMethodReturnType<A, M>;
 export type UseVisitMethod<A> = <M extends FunctionName<A>>(functionName: M) => VisitService<A>[M];
 export type UseVisitService<A> = () => VisitService<A>;
 export interface ActorHooksReturnType<A = BaseActor> {
     initialize: () => Promise<void>;
     useActorState: () => UseActorState;
+    useActorInterface: () => ServiceClass;
+    useMethod: UseMethod<A>;
     useQueryCall: UseQueryCall<A>;
     useUpdateCall: UseUpdateCall<A>;
     useVisitMethod: UseVisitMethod<A>;

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

@@ -1,5 +1,7 @@
+export * from "./useMethod";
 export * from "./useActorState";
 export * from "./useQueryCall";
 export * from "./useUpdateCall";
 export * from "./useVisitMethod";
 export * from "./useVisitService";
+export * from "./useActorInterface";

package/dist/hooks/actor/index.js

@@ -14,8 +14,10 @@ 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("./useMethod"), exports);
 __exportStar(require("./useActorState"), exports);
 __exportStar(require("./useQueryCall"), exports);
 __exportStar(require("./useUpdateCall"), exports);
 __exportStar(require("./useVisitMethod"), exports);
 __exportStar(require("./useVisitService"), exports);
+__exportStar(require("./useActorInterface"), exports);

package/dist/hooks/actor/useActorInterface.d.ts

@@ -0,0 +1,4 @@
+/**
+ *
+ */
+export declare function useActorInterface(): import("@dfinity/candid/lib/cjs/idl").ServiceClass;

package/dist/hooks/actor/useActorInterface.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useActorInterface = void 0;
+const hooks_1 = require("./hooks");
+/**
+ *
+ */
+function useActorInterface() {
+    return hooks_1.ActorHooks.useActorInterface();
+}
+exports.useActorInterface = useActorInterface;

package/dist/hooks/actor/useMethod.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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>
+ *  );
+ * }
+ * ```
+ */
+export declare const useMethod: import("../../types").UseMethod<import("@ic-reactor/core/dist/types").BaseActor>;

package/dist/hooks/actor/useMethod.js

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

package/dist/hooks/actor/useQueryCall.d.ts

@@ -25,4 +25,4 @@ import { BaseActor, FunctionName, UseQueryCallParameters } from "../../types";
  * }
  * ```
  */
-export declare function useQueryCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseQueryCallParameters<A, M>): import("../../types").UseMethodCallReturnType<A, M>;
+export declare function useQueryCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseQueryCallParameters<A, M>): import("../../types").UseSharedCallReturnType<A, M>;

package/dist/hooks/actor/useUpdateCall.d.ts

@@ -26,4 +26,4 @@ import { BaseActor, FunctionName, UseUpdateCallParameters } from "../../types";
  * }
  * ```
  */
-export declare function useUpdateCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseUpdateCallParameters<A, M>): import("../../types").UseMethodCallReturnType<A, M>;
+export declare function useUpdateCall<A = BaseActor, M extends FunctionName<A> = FunctionName<A>>(args: UseUpdateCallParameters<A, M>): import("../../types").UseSharedCallReturnType<A, M>;

package/dist/hooks/types.d.ts

@@ -6,7 +6,6 @@ export interface UseActorParameters extends Omit<ActorManagerParameters, "idlFac
     canisterId: string;
     idlFactory?: IDL.InterfaceFactory;
     agentContext?: React.Context<AgentContext | null>;
-    fetchOnMount?: boolean;
     didjsCanisterId?: string;
 }
 export interface UseActorReturn<A = BaseActor> {

package/dist/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

package/dist/hooks/useActor.js

@@ -89,21 +89,25 @@ const agent_1 = require("./agent");
  * ```
  */
 const useActor = (config) => {
-    const { canisterId, idlFactory: maybeIdlFactory, agentContext, fetchOnMount = true, didjsCanisterId } = config, actorConfig = __rest(config, ["canisterId", "idlFactory", "agentContext", "fetchOnMount", "didjsCanisterId"]);
-    const [{ idlFactory, fetching, fetchError }, setState] = (0, react_1.useState)({
-        idlFactory: maybeIdlFactory,
+    const { canisterId, idlFactory: maybeIdlFactory, agentContext, didjsCanisterId } = config, actorConfig = __rest(config, ["canisterId", "idlFactory", "agentContext", "didjsCanisterId"]);
+    if (!canisterId) {
+        throw new Error("canisterId is required");
+    }
+    const [actorManager, setActorManager] = (0, react_1.useState)();
+    const [{ fetching, fetchError }, setState] = (0, react_1.useState)({
         fetching: false,
         fetchError: null,
     });
     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)
+    const authenticating = (0, agent_1.useAuthState)().authenticating;
+    const fetchCandid = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (fetching || authenticating)
             return;
         setState({
-            idlFactory: undefined,
             fetching: true,
             fetchError: null,
         });
+        const agent = agentManager.getAgent();
         try {
             const candidManager = (0, core_1.createCandidAdapter)({
                 agent,
@@ -111,7 +115,6 @@ const useActor = (config) => {
             });
             const { idlFactory } = yield candidManager.getCandidDefinition(canisterId);
             setState({
-                idlFactory,
                 fetching: false,
                 fetchError: null,
             });
@@ -121,35 +124,35 @@ const useActor = (config) => {
             // eslint-disable-next-line no-console
             console.error(err);
             setState({
-                idlFactory: undefined,
                 fetchError: `Error fetching canister ${canisterId}`,
                 fetching: false,
             });
         }
-    }), [canisterId, didjsCanisterId]);
+    }), [canisterId, authenticating, didjsCanisterId]);
     (0, react_1.useEffect)(() => {
         if (maybeIdlFactory) {
-            setState(() => ({
-                idlFactory: maybeIdlFactory,
-                fetching: false,
-                fetchError: null,
-            }));
-            return;
+            const actorManager = (0, core_1.createActorManager)(Object.assign({ agentManager, idlFactory: maybeIdlFactory, canisterId }, actorConfig));
+            setActorManager(() => actorManager);
         }
-        const unsubscribe = agentManager.subscribeAgent(fetchCandid, fetchOnMount);
-        return unsubscribe;
-    }, [agentManager, fetchOnMount]);
-    const authenticating = (0, agent_1.useAuthState)().authenticating;
+        else {
+            fetchCandid().then((idlFactory) => {
+                if (!idlFactory)
+                    return;
+                const actorManager = (0, core_1.createActorManager)(Object.assign({ agentManager,
+                    idlFactory,
+                    canisterId }, actorConfig));
+                setActorManager(() => actorManager);
+            });
+        }
+        return actorManager === null || actorManager === void 0 ? void 0 : actorManager.cleanup();
+    }, [fetchCandid, maybeIdlFactory, canisterId, agentManager]);
     const hooks = (0, react_1.useMemo)(() => {
-        if (!idlFactory)
+        if (fetching)
             return null;
-        if (authenticating)
+        if (!actorManager)
             return null;
-        const actorManager = (0, core_1.createActorManager)(Object.assign({ agentManager,
-            idlFactory,
-            canisterId }, actorConfig));
         return (0, helpers_1.actorHooks)(actorManager);
-    }, [canisterId, authenticating, idlFactory]);
+    }, [canisterId, authenticating, actorManager, fetching]);
     return { hooks, authenticating, fetching, fetchError };
 };
 exports.useActor = useActor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "A React library for interacting with Internet Computer canisters",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -35,7 +35,7 @@
     "node": ">=10"
   },
   "dependencies": {
-    "@ic-reactor/core": "^1.1.1",
+    "@ic-reactor/core": "^1.1.3",
     "zustand-utils": "^1.3"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
     "react": ">=16.8",
     "zustand": "4.5"
   },
-  "gitHead": "0055703885730f86a837f2e2f3f6b6f49bb3cc68"
+  "gitHead": "4181bc6228d5efb98f14c48b2855a37bcada97dd"
 }