@ic-reactor/react 1.0.4 → 1.0.6

package/dist/provider/hooks/useActor.d.ts

@@ -0,0 +1,65 @@
+import type { BaseActor } from "../../types";
+import type { UseActorParameters, UseActorReturn } from "./types";
+/**
+ * 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.
+ *
+ * You can use react context to share the actor hooks across your application.
+ *
+ * @example
+ * ```tsx
+ * import { AgentProvider, extractActorHooks, useActor } from "@ic-reactor/react"
+ * import { createContext } from "react"
+ * import type { ActorHooks } from "@ic-reactor/react/dist/types"
+ * // With this import, you can have type safety for the actor's interface.
+ * // You can get it from the `.did.d.ts` file generated by the DFX tool.
+ * // or from dashboard https://dashboard.internetcomputer.org/canisters/<canister-id>
+ * import type { Ledger } from "../declarations/ledger"
+ *
+ * const ActorContext = createContext<ActorHooks<Ledger> | null>(null)
+ *
+ * export const { useQueryCall, useUpdateCall } = extractActorHooks(ActorContext)
+ *
+ * const LedgerActor = ({ children }) => {
+ *   const { hooks, fetching, fetchError } = useActor<Ledger>({
+ *     canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai", // ICP Ledger canister
+ *   })
+ *
+ *   return (
+ *     <ActorContext.Provider value={hooks}>
+ *       <h2>IC Canister Interaction</h2>
+ *       {fetching && <p>Loading Candid interface...</p>}
+ *       {fetchError && <p>Error: {fetchError}</p>}
+ *       {hooks && children}
+ *     </ActorContext.Provider>
+ *   )
+ * }
+ * // later in the code
+ * const CanisterName = () => {
+ *   const { data } = useQueryCall({
+ *     functionName: "name",
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <h3>Query Call</h3>
+ *       <p>Result: {JSON.stringify(data)}</p>
+ *     </div>
+ *   )
+ * }
+ *
+ * const App = () => (
+ *   <AgentProvider withDevtools>
+ *     <LedgerActor>
+ *       <CanisterName />
+ *     </LedgerActor>
+ *   </AgentProvider>
+ * )
+ *
+ * export default App
+ *
+ * ```
+ */
+export declare const useActor: <A = BaseActor>(config: UseActorParameters) => UseActorReturn<A>;

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

@@ -20,57 +20,81 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useReactor = void 0;
+exports.useActor = void 0;
 const core_1 = require("@ic-reactor/core");
 const react_1 = require("react");
-const agent_1 = require("../provider/agent");
-const helpers_1 = require("../helpers");
+const useAgentManager_1 = require("./agent/useAgentManager");
+const helpers_1 = require("../../helpers");
 /**
  * A comprehensive hook that manages both the fetching of Candid interfaces
  * and the initialization of actor stores for Internet Computer (IC) canisters.
  * It simplifies the process of interacting with canisters by encapsulating
  * the logic for Candid retrieval and actor store management.
  *
+ * You can use react context to share the actor hooks across your application.
+ *
  * @example
  * ```tsx
- * import React from 'react';
- * import { useReactor } from '@ic-reactor/react';
- * import { IDL } from '@dfinity/candid';
+ * import { AgentProvider, extractActorHooks, useActor } from "@ic-reactor/react"
+ * import { createContext } from "react"
+ * import type { ActorHooks } from "@ic-reactor/react/dist/types"
+ * // With this import, you can have type safety for the actor's interface.
+ * // You can get it from the `.did.d.ts` file generated by the DFX tool.
+ * // or from dashboard https://dashboard.internetcomputer.org/canisters/<canister-id>
+ * import type { Ledger } from "../declarations/ledger"
+ *
+ * const ActorContext = createContext<ActorHooks<Ledger> | null>(null)
+ *
+ * export const { useQueryCall, useUpdateCall } = extractActorHooks(ActorContext)
  *
- * const App = () => {
- *   const { actorManager, fetchCandid, candid, fetching, fetchError } = useReactor({
- *     canisterId: 'ryjl3-tyaaa-aaaaa-aaaba-cai',
- *   });
+ * const LedgerActor = ({ children }) => {
+ *   const { hooks, fetching, fetchError } = useActor<Ledger>({
+ *     canisterId: "ryjl3-tyaaa-aaaaa-aaaba-cai", // ICP Ledger canister
+ *   })
  *
  *   return (
- *     <div>
+ *     <ActorContext.Provider value={hooks}>
  *       <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>
+ *       {hooks && children}
+ *     </ActorContext.Provider>
+ *   )
+ * }
+ * // later in the code
+ * const CanisterName = () => {
+ *   const { data } = useQueryCall({
+ *     functionName: "name",
+ *   })
+ *
+ *   return (
+ *     <div>
+ *       <h3>Query Call</h3>
+ *       <p>Result: {JSON.stringify(data)}</p>
  *     </div>
- *   );
- * };
+ *   )
+ * }
+ *
+ * const App = () => (
+ *   <AgentProvider withDevtools>
+ *     <LedgerActor>
+ *       <CanisterName />
+ *     </LedgerActor>
+ *   </AgentProvider>
+ * )
+ *
+ * export default App
  *
- * export default App;
  * ```
  */
-const useReactor = (_a) => {
-    var { canisterId, agentContext, idlFactory: maybeIdlFactory, didjsCanisterId } = _a, config = __rest(_a, ["canisterId", "agentContext", "idlFactory", "didjsCanisterId"]);
+const useActor = (config) => {
+    const { canisterId, idlFactory: maybeIdlFactory, agentContext, didjsCanisterId } = config, actorConfig = __rest(config, ["canisterId", "idlFactory", "agentContext", "didjsCanisterId"]);
     const [{ idlFactory, fetching, fetchError }, setState] = (0, react_1.useState)({
         idlFactory: maybeIdlFactory,
         fetching: false,
         fetchError: null,
     });
-    const agentManager = (0, agent_1.useAgentManager)(agentContext);
+    const agentManager = (0, useAgentManager_1.useAgentManager)(agentContext);
     const fetchCandid = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
         if (!canisterId)
             return;
@@ -113,9 +137,9 @@ const useReactor = (_a) => {
             return null;
         const actorManager = (0, core_1.createActorManager)(Object.assign({ agentManager,
             idlFactory,
-            canisterId }, config));
-        return (0, helpers_1.getActorHooks)(actorManager);
+            canisterId }, actorConfig));
+        return (0, helpers_1.actorHooks)(actorManager);
     }, [idlFactory]);
     return { hooks, fetching, fetchError };
 };
-exports.useReactor = useReactor;
+exports.useActor = useActor;

package/dist/provider/index.d.ts

@@ -1,2 +1,5 @@
-export * from "./actor";
-export * from "./agent";
+export { createActorContext } from "./context/actor";
+export { createAgentContext } from "./context/agent";
+export * from "./hooks";
+export * from "./ActorProvider";
+export * from "./AgentProvider";

package/dist/provider/index.js

@@ -14,5 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./actor"), exports);
-__exportStar(require("./agent"), exports);
+exports.createAgentContext = exports.createActorContext = void 0;
+var actor_1 = require("./context/actor");
+Object.defineProperty(exports, "createActorContext", { enumerable: true, get: function () { return actor_1.createActorContext; } });
+var agent_1 = require("./context/agent");
+Object.defineProperty(exports, "createAgentContext", { enumerable: true, get: function () { return agent_1.createAgentContext; } });
+__exportStar(require("./hooks"), exports);
+__exportStar(require("./ActorProvider"), exports);
+__exportStar(require("./AgentProvider"), exports);

package/dist/provider/types.d.ts

@@ -0,0 +1,27 @@
+import type { IDL, ActorHooksReturnType, AgentHooksReturnType, AuthHooksReturnType, BaseActor, AgentManager, ActorManagerParameters, AgentManagerParameters } from "../types";
+import type { PropsWithChildren } from "react";
+export * from "./hooks/types";
+export interface AgentContext extends AgentHooksReturnType, AuthHooksReturnType {
+    agentManager: AgentManager;
+}
+export interface CreateAgentContextReturnType extends AgentHooksReturnType, AuthHooksReturnType {
+    useAgentManager: (agentContext?: React.Context<AgentContext | null>) => AgentManager;
+    AgentProvider: React.FC<AgentProviderProps>;
+}
+export interface AgentProviderProps extends PropsWithChildren, AgentManagerParameters {
+    agentManager?: AgentManager;
+}
+export interface CreateActorContextReturnType<A = BaseActor> extends ActorHooksReturnType<A> {
+    ActorProvider: React.FC<ActorProviderProps>;
+}
+export interface ActorProviderProps extends CreateActorContextParameters {
+    children?: React.ReactNode | undefined;
+    loadingComponent?: React.ReactNode;
+}
+export interface CreateActorContextParameters extends Omit<ActorManagerParameters, "idlFactory" | "agentManager" | "canisterId"> {
+    didjsId?: string;
+    canisterId?: string;
+    agentContext?: React.Context<AgentContext | null>;
+    idlFactory?: IDL.InterfaceFactory;
+    loadingComponent?: React.ReactNode;
+}

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

@@ -14,4 +14,4 @@ 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("./useReactor"), exports);
+__exportStar(require("./hooks/types"), exports);

package/dist/types.d.ts

@@ -1,11 +1,11 @@
-import type { HttpAgent, VisitService } from "@ic-reactor/core/dist/types";
-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 {
+import type { HttpAgent, CreateReactorCoreParameters, VisitService } from "@ic-reactor/core/dist/types";
+import type { ActorHooksReturnType, AgentHooksReturnType, AuthHooksReturnType } from "./helpers/types";
+export interface CreateReactorParameters extends CreateReactorCoreParameters {
+}
+export interface CreateReactorReturnType<A> extends ActorHooksReturnType<A>, AuthHooksReturnType, AgentHooksReturnType {
     getAgent: () => HttpAgent;
     getVisitFunction: () => VisitService<A>;
 }
+export * from "./provider/types";
+export * from "./helpers/types";
+export * from "@ic-reactor/core/dist/types";

package/dist/types.js

@@ -14,8 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("@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("./provider/types"), exports);
 __exportStar(require("./helpers/types"), exports);
+__exportStar(require("@ic-reactor/core/dist/types"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ic-reactor/react",
-  "version": "1.0.4",
+  "version": "1.0.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.0.3",
+    "@ic-reactor/core": "^1.0.5",
     "zustand-utils": "^1.3"
   },
   "peerDependencies": {
@@ -48,5 +48,5 @@
     "react": ">=16.8",
     "zustand": "4.5"
   },
-  "gitHead": "031413fceeddbdac2fa281e1e07940182ac1e1ef"
+  "gitHead": "c52ec12bc91d5a0e2c5fc7c6e163530a1aa5e47f"
 }

package/dist/helpers/agent.d.ts

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

package/dist/helpers/auth.d.ts

@@ -1,3 +0,0 @@
-import type { AgentManager } from "@ic-reactor/core/dist/agent";
-import type { AuthHooks } from "../types";
-export declare const getAuthHooks: (agentManager: AgentManager) => AuthHooks;

package/dist/helpers/auth.js

@@ -1,108 +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.getAuthHooks = void 0;
-const zustand_1 = require("zustand");
-const react_1 = require("react");
-const tools_1 = require("@ic-reactor/core/dist/tools");
-const getAuthHooks = (agentManager) => {
-    const { authenticate: authenticator, authStore, isLocalEnv } = agentManager;
-    const useAuthState = () => (0, zustand_1.useStore)(authStore);
-    const useUserPrincipal = () => { var _a, _b; return (_b = (_a = useAuthState()) === null || _a === void 0 ? void 0 : _a.identity) === null || _b === void 0 ? void 0 : _b.getPrincipal(); };
-    const useAuthClient = (events) => {
-        const [loginState, setLoginState] = (0, react_1.useState)({
-            loading: false,
-            error: null,
-        });
-        const { authClient, authenticated, authenticating, identity, error } = useAuthState();
-        const authenticate = (0, react_1.useCallback)(() => __awaiter(void 0, void 0, void 0, function* () {
-            var _a, _b;
-            try {
-                const identity = yield authenticator();
-                (_a = events === null || events === void 0 ? void 0 : events.onAuthenticationSuccess) === null || _a === void 0 ? void 0 : _a.call(events, identity);
-                return identity;
-            }
-            catch (e) {
-                (_b = events === null || events === void 0 ? void 0 : events.onAuthenticationFailure) === null || _b === void 0 ? void 0 : _b.call(events, e);
-                throw e;
-            }
-        }), [authenticator, events]);
-        const login = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
-            var _c;
-            if (!authClient) {
-                throw new Error("Auth client not initialized");
-            }
-            try {
-                setLoginState({ loading: true, error: null });
-                yield authClient.login(Object.assign(Object.assign({ identityProvider: isLocalEnv
-                        ? tools_1.LOCAL_INTERNET_IDENTITY_PROVIDER
-                        : tools_1.IC_INTERNET_IDENTITY_PROVIDER }, options), { onSuccess: () => __awaiter(void 0, void 0, void 0, function* () {
-                        var _d, _e, _f;
-                        try {
-                            const identity = yield authenticate();
-                            const principal = identity.getPrincipal();
-                            (_d = options === null || options === void 0 ? void 0 : options.onSuccess) === null || _d === void 0 ? void 0 : _d.call(options);
-                            (_e = events === null || events === void 0 ? void 0 : events.onLoginSuccess) === null || _e === void 0 ? void 0 : _e.call(events, principal);
-                            setLoginState({ loading: false, error: null });
-                        }
-                        catch (e) {
-                            const error = e;
-                            setLoginState({ loading: false, error });
-                            (_f = events === null || events === void 0 ? void 0 : events.onLoginError) === null || _f === void 0 ? void 0 : _f.call(events, error);
-                        }
-                    }), onError: (e) => {
-                        var _a;
-                        const error = new Error(`Login failed: ${e}`);
-                        setLoginState({ loading: false, error });
-                        (_a = events === null || events === void 0 ? void 0 : events.onLoginError) === null || _a === void 0 ? void 0 : _a.call(events, error);
-                    } }));
-            }
-            catch (e) {
-                const error = e;
-                setLoginState({ loading: false, error });
-                (_c = events === null || events === void 0 ? void 0 : events.onLoginError) === null || _c === void 0 ? void 0 : _c.call(events, error);
-            }
-        }), [authClient, authenticate, isLocalEnv, events]);
-        const logout = (0, react_1.useCallback)((options) => __awaiter(void 0, void 0, void 0, function* () {
-            var _g;
-            if (!authClient) {
-                throw new Error("Auth client not initialized");
-            }
-            yield authClient.logout(options);
-            yield authenticate();
-            (_g = events === null || events === void 0 ? void 0 : events.onLoggedOut) === null || _g === void 0 ? void 0 : _g.call(events);
-        }), [authClient, authenticate, events]);
-        (0, react_1.useEffect)(() => {
-            if (!authClient && !authenticating) {
-                // eslint-disable-next-line no-console
-                authenticate().catch(console.error);
-            }
-        }, [authClient, authenticating, authenticate]);
-        return {
-            error,
-            authClient,
-            authenticated,
-            authenticating,
-            identity,
-            login,
-            logout,
-            authenticate,
-            loginLoading: loginState.loading,
-            loginError: loginState.error,
-        };
-    };
-    return {
-        useUserPrincipal,
-        useAuthState,
-        useAuthClient,
-    };
-};
-exports.getAuthHooks = getAuthHooks;

package/dist/hooks/index.d.ts

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

package/dist/hooks/types.d.ts

@@ -1,19 +0,0 @@
-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/useReactor.d.ts

@@ -1,41 +0,0 @@
-import { BaseActor } from "../types";
-import { UseReactorOptions, UseReactorReturn } from "./types";
-/**
- * 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 }: UseReactorOptions) => UseReactorReturn<A>;

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

@@ -1,20 +0,0 @@
-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>;
-};