✨ adds points component

Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "konnektoren-mini-app"
-version = "0.1.0"
+version = "0.1.1"
 edition = "2021"
 description = "Telegram Mini App for Konnektoren"
 

src/app.rs

@@ -1,5 +1,6 @@
 use crate::challenge::ChallengeComp;
 use crate::footer::Footer;
+use crate::points::PointsComp;
 use crate::telegram;
 use crate::version::VersionComp;
 use crate::wallet::WalletComp;
@@ -25,6 +26,7 @@ pub fn app() -> Html {
         <div>
             <h1>{"Konnektoren"}</h1>
             <VersionComp />
+            <PointsComp />
             <WalletComp {on_address} />
             <ChallengeComp id={"konnektoren-1"} address={(*address).clone()} />
             <Footer />

src/js/telegram.js

@@ -1,4 +1,5 @@
 export function tma_ready() {
+  console.log(Telegram.WebApp.version);
   return Telegram.WebApp.ready();
 }
 

src/lib.rs

@@ -3,6 +3,7 @@ pub mod challenge;
 pub mod claim;
 pub mod footer;
 pub mod is_correct;
+pub mod points;
 pub mod telegram;
 pub mod version;
 pub mod wallet;
@@ -11,6 +12,7 @@ pub mod prelude {
     pub use crate::app::App;
     pub use crate::challenge::{ChallengeComp, ChallengeCompProps};
     pub use crate::footer::Footer;
+    pub use crate::points::PointsComp;
     pub use crate::version::VersionComp;
     pub use crate::wallet::{WalletComp, WalletCompProps};
 }

src/points.rs

@@ -0,0 +1,32 @@
+use crate::telegram::get_item;
+use yew::prelude::*;
+
+#[function_component(PointsComp)]
+pub fn points() -> Html {
+    let points = use_state(|| 0);
+    {
+        let points = points.clone();
+        use_effect(move || {
+            let points = points.clone();
+            wasm_bindgen_futures::spawn_local(async move {
+                match get_item("points").await {
+                    Ok(result) => {
+                        let points_value = result.as_f64().unwrap_or(0.0) as i32;
+                        points.set(points_value);
+                    }
+                    Err(error) => {
+                        log::error!("Error getting points: {:?}", error);
+                    }
+                }
+            });
+            || ()
+        });
+    }
+
+    html! {
+        <div class="points">
+            <span class="symbol">{"★"}</span>
+            <span class="value">{*points}</span>
+        </div>
+    }
+}

styles/components/_index.scss

@@ -4,6 +4,7 @@
 @forward "claim";
 @forward "footer";
 @forward "multiple_choice_options";
+@forward "points";
 @forward "progress_bar";
 @forward "result_summary";
 @forward "version";

styles/components/_points.scss

@@ -0,0 +1,24 @@
+.points {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    background-color: rgba(240, 240, 240, 0.8);
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    display: vertical;
+
+    .value {
+        font-size: 1.5em;
+        font-weight: bold;
+        color: #333;
+        display: flex;
+        align-items: center;
+    }
+
+    .symbol {
+        margin-right: 5px;
+        color: gold;
+        font-size: 0.8em;
+    }
+}