Function createAgentContext

  • 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.

    Parameters

    Returns CreateAgentContextReturnType

    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:

    Example

    // agent.ts
    import { createAgentContext } from "@ic-reactor/react";
    import { CreateAgentCotextParameters } from "@ic-reactor/react/dist/types";

    // Optional: Define custom agent configuration
    const agentConfig: CreateAgentCotextParameters = {
    host: "https://localhost:8000",
    // or
    // withLocalEnv: true,
    // port: 8000,
    };

    export const {
    AgentProvider,
    useAgent,
    useAuth,
    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 } = useAuth()
    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.