Custom Provider

This example demonstrates how to build a Token Viewer where the user can input any Canister ID, and the app dynamically connects to it. This requires creating a custom Context Provider that instantiates a Reactor based on props.

Features Demonstrated

• Dynamic Canister IDs: Connecting to canisters determined at runtime.
• Context API: Passing the reactor instance down to children.
• Reusability: Creating a generic ICRC1Provider that can wrap any part of the app.

Links

Open in StackBlitz Edit and run in your browser

View on GitHub Browse the source code

Live Preview

Implementation Details

The Dynamic Provider

export const ICRC1Context = createContext<ActorHooks | null>(null)

export const ICRC1Provider = ({ canisterId, children }) => {
  const [hooks, setHooks] = useState<ActorHooks | null>(null)

  useEffect(() => {
    // Create a new reactor when canisterId changes
    const reactor = new DisplayReactor({
      clientManager,
      canisterId,
      idlFactory,
    })

    // Generate hooks for this specific reactor
    setHooks(createActorHooks(reactor))
  }, [canisterId])

  if (!hooks) return <div>Initializing...</div>

  return (
    <ICRC1Context.Provider value={hooks}>
      {children}
    </ICRC1Context.Provider>
  )
}