5. Leptos Integration

Chapter 5: Leptos Integration

Complete guide to using telegram-webapp-sdk with Leptos framework.

Setup

[dependencies]
telegram-webapp-sdk = { version = "0.3", features = ["leptos"] }
leptos = { version = "0.8", features = ["csr"] }

Context Provider

use telegram_webapp_sdk::provide_telegram_context;
use leptos::prelude::*;

#[component]
fn App() -> impl IntoView {
    // Provide context to all child components
    provide_telegram_context();

    view! {
        <Router>
            <Routes>
                <Route path="/" view=Home />
                <Route path="/profile" view=Profile />
            </Routes>
        </Router>
    }
}

Accessing Context

use telegram_webapp_sdk::TelegramWebApp;
use leptos::prelude::*;

#[component]
fn Profile() -> impl IntoView {
    let webapp = TelegramWebApp::new();

    let user_name = move || {
        webapp.init_data_unsafe()
            .user
            .as_ref()
            .map(|u| u.first_name.clone())
            .unwrap_or_else(|| "Guest".to_string())
    };

    view! {
        <div>
            <h1>"Hello, " {user_name}</h1>
        </div>
    }
}

BottomButton Component

use telegram_webapp_sdk::leptos::BottomButton;
use leptos::prelude::*;

#[component]
fn Checkout() -> impl IntoView {
    let on_click = move |_| {
        web_sys::console::log_1(&"Checkout clicked".into());
    };

    view! {
        <div>
            <h1>"Cart"</h1>
            <BottomButton
                text="Checkout - $50.00"
                on:click=on_click
                color="#00CC00"
            />
        </div>
    }
}

Reactive State

use telegram_webapp_sdk::TelegramWebApp;
use leptos::prelude::*;

#[component]
fn Cart() -> impl IntoView {
    let webapp = TelegramWebApp::new();
    let (total, set_total) = create_signal(0.0);

    let checkout = move |_| {
        if total() > 0.0 {
            webapp.show_confirm(
                &format!("Confirm purchase of ${:.2}?", total()),
                move |confirmed| {
                    if confirmed {
                        // Process order
                    }
                }
            );
        }
    };

    view! {
        <div>
            <h1>"Total: $" {move || format!("{:.2}", total())}</h1>
            <button on:click=checkout>"Checkout"</button>
        </div>
    }
}

→ Next: Chapter 6 - API Reference