💄 style claim

src/challenge.rs

@@ -1,4 +1,3 @@
-use std::ops::Div;
 use crate::{claim::ClaimComp, points::add_points};
 use gloo_timers::callback::Timeout;
 use konnektoren_core::{
@@ -8,6 +7,7 @@ use konnektoren_core::{
 use konnektoren_yew::components::challenge::{
     ChallengeComponent, ChallengeEvent, ResultSummaryComponent,
 };
+use std::ops::Div;
 use yew::prelude::*;
 
 #[derive(Properties, PartialEq)]

src/claim.rs

@@ -64,10 +64,23 @@ pub fn claim_comp(props: &ClaimCompProps) -> Html {
         })
     };
 
+    let address_comp = {
+        if address.is_empty() {
+            html! { <p>{ "No address, connect wallet" }</p> }
+        } else {
+            html! {
+                <span class="address">
+                    <span class="symbol">{"🦄"}</span>
+                    {format!("{}", address)}
+                </span>
+            }
+        }
+    };
+
     html! {
         <div class="claim">
             <h2>{ "Claim your rewards here" }</h2>
-            <p>{ format!("Address: {}", props.address) }</p>
+            { address_comp }
             {
                 match &*claim_state {
                     ClaimState::Initial => html! {

src/points.rs

@@ -6,24 +6,26 @@ pub fn add_points(points: i32) {
     wasm_bindgen_futures::spawn_local(async move {
         match get_item("points").await {
             Ok(result) => {
-                let points_value = result.as_string().unwrap_or("0".to_string()).parse::<i32>().unwrap_or(0);
+                let points_value = result
+                    .as_string()
+                    .unwrap_or("0".to_string())
+                    .parse::<i32>()
+                    .unwrap_or(0);
                 let new_points = points_value + points;
                 wasm_bindgen_futures::spawn_local(async move {
                     match set_item("points", &new_points.to_string()).await {
-                        Ok(result) => {
-                            match result.as_bool() {
-                                Some(value) => {
-                                    if value {
-                                        log::info!("Points set to: {}", new_points);
-                                    } else {
-                                        log::error!("Error setting points: {:?}", result);
-                                    }
-                                }
-                                None => {
+                        Ok(result) => match result.as_bool() {
+                            Some(value) => {
+                                if value {
+                                    log::info!("Points set to: {}", new_points);
+                                } else {
                                     log::error!("Error setting points: {:?}", result);
                                 }
                             }
-                        }
+                            None => {
+                                log::error!("Error setting points: {:?}", result);
+                            }
+                        },
                         Err(error) => {
                             log::error!("Error setting points: {:?}", error);
                         }
@@ -47,7 +49,11 @@ pub fn points_comp() -> Html {
             wasm_bindgen_futures::spawn_local(async move {
                 match get_item("points").await {
                     Ok(result) => {
-                        let points_value = result.as_string().unwrap_or("0".to_string()).parse::<u32>().unwrap_or(0);
+                        let points_value = result
+                            .as_string()
+                            .unwrap_or("0".to_string())
+                            .parse::<u32>()
+                            .unwrap_or(0);
                         points.set(points_value);
                     }
                     Err(error) => {

src/wallet.rs

@@ -53,13 +53,24 @@ pub fn wallet(props: &WalletCompProps) -> Html {
         });
     }
 
+    let balance_comp = {
+        let balance = balance.clone();
+        if *balance == "0" {
+            html! {}
+        } else {
+            html! {
+                <span class="balance">
+                    <span class="symbol">{"★"}</span>
+                    {format!("{}", *balance)}
+                </span>
+            }
+        }
+    };
+
     html! {
         <div class="wallet">
             <div id="wallet-button" />
-            <span class="balance">
-                <span class="symbol">{"★"}</span>
-                {format!("{}", *balance)}
-            </span>
+        {balance_comp}
         </div>
     }
 }

styles/components/_claim.scss

@@ -17,6 +17,11 @@
         color: #555;
     }
 
+    .address {
+        font-size: 0.9em;
+        color: #555;
+    }
+
     .claim-container {
         display: flex;
         align-items: center;
@@ -27,7 +32,7 @@
         background-color: #007bff;
         color: white;
         border: none;
-        padding: 10px 20px;
+        padding: 0.5rem 1rem;
         font-size: 1em;
         border-radius: 5px;
         cursor: pointer;

styles/components/_points.scss

@@ -1,12 +1,11 @@
 .points {
     position: fixed;
-    top: 10px;
-    right: 10px;
+    top: 1rem;
+    left: 1rem;
     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;
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 
     .value {
         font-size: 1.5em;

styles/components/_version.scss

@@ -1,15 +1,14 @@
 .version {
     position: fixed;
-    top: 10px;
+    bottom: 10px;
     left: 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-size: 1.1em;
         font-weight: bold;
         color: #333;
         display: flex;

styles/components/_wallet.scss

@@ -1,12 +1,11 @@
 .wallet {
     position: fixed;
-    top: 10px;
-    right: 10px;
+    top: 1rem;
+    right: 1rem;
     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;
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.1);
 }
 
 #wallet-button {