def add_hooks(self) -> list[str | Var]:
        """Add the hooks for the connection toaster.

        Returns:
            The hooks for the connection toaster.
        """
        toast_id = "websocket-error"
        target_url = WebsocketTargetURL.create()
        props = ToastProps(
            description=LiteralVar.create(
                f"Check if server is reachable at {target_url}",
            ),
            close_button=True,
            duration=120000,
            id=toast_id,
        )  # pyright: ignore [reportCallIssue]

        if environment.REFLEX_DOES_BACKEND_COLD_START.get():
            loading_message = Var.create("Backend is starting.")
            backend_is_loading_toast_var = Var(
                f"toast?.loading({loading_message!s}, {{...toast_props, description: '', closeButton: false, onDismiss: () => setUserDismissed(true)}},)"
            )
            backend_is_not_responding = Var.create("Backend is not responding.")
            backend_is_down_toast_var = Var(
                f"toast?.error({backend_is_not_responding!s}, {{...toast_props, description: '', onDismiss: () => setUserDismissed(true)}},)"
            )
            toast_var = Var(
                f"""
if (waitedForBackend) {{
    {backend_is_down_toast_var!s}
}} else {{
    {backend_is_loading_toast_var!s};
}}
setTimeout(() => {{
    if ({has_too_many_connection_errors!s}) {{
        setWaitedForBackend(true);
    }}
}}, {environment.REFLEX_BACKEND_COLD_START_TIMEOUT.get() * 1000});
"""
            )
        else:
            loading_message = Var.create(
                f"Cannot connect to server: {connection_error}."
            )
            toast_var = Var(
                f"toast?.error({loading_message!s}, {{...toast_props, onDismiss: () => setUserDismissed(true)}},)"
            )

        individual_hooks = [
            Var(f"const toast = {toast_ref};"),
            f"const toast_props = {LiteralVar.create(props)!s};",
            "const [userDismissed, setUserDismissed] = useState(false);",
            "const [waitedForBackend, setWaitedForBackend] = useState(false);",
            FunctionStringVar(
                "useEffect",
                _var_data=VarData(
                    imports={
                        "react": ("useEffect", "useState"),
                        **(
                            dict(var_data.imports)
                            if (var_data := target_url._get_all_var_data()) is not None
                            else {}
                        ),
                    }
                ),
            ).call(
                # TODO: This breaks the assumption that Vars are JS expressions
                Var(
                    _js_expr=f"""
() => {{
    if ({has_too_many_connection_errors!s}) {{
        if (!userDismissed) {{
            {toast_var!s}
        }}
    }} else {{
        toast?.dismiss("{toast_id}");
        setUserDismissed(false);  // after reconnection reset dismissed state
    }}
}}
"""
                ),
                LiteralArrayVar.create([connect_errors, Var("waitedForBackend")]),
            ),
        ]

        return [
            Hooks.EVENTS,
            *individual_hooks,
        ]
Add the hooks for the connection toaster.

        Returns:
            The hooks for the connection toaster.
        
reflex/components/core/banner.py