ICP Reactor Demo

This example provides a comprehensive overview of using the standard Reactor for complex canister interactions, combined with Authentication and TanStack Query.

Features Demonstrated

• Standard Reactor: Using direct Candid-to-TypeScript mappings.
• Authentication Hooks: Integration with Internet Identity for secure calls.
• Typed Methods: Fully typed query and mutation calls.
• Error Propagation: Robust handling of canister errors and network issues.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Implementation

const { login, logout, isAuthenticated } = useAuth()
const { data, call } = useActorMethod({ functionName: "greet" })

return (
  <div>
    {!isAuthenticated ? (
      <button onClick={() => login()}>Login</button>
    ) : (
      <>
        <button onClick={() => logout()}>Logout</button>
        <button onClick={() => call(["IC"])}>Greet</button>
        {data && <p>{data}</p>}
      </>
    )}
  </div>
)