virto-network · b-avb · Sep 12, 2024
diff --git a/public/styles/main.scss b/public/styles/main.scss
@@ -237,6 +237,7 @@ $fw-bold: 700;
 
 .bg--state-primary-active {
     background: var(--state-primary-active) !important;
+
     &:hover {
         background-color: var(--fill-400) !important;
     }
@@ -770,6 +771,7 @@ $fw-bold: 700;
     border: none;
     color: var(--fill-00);
     background: var(--state-primary-active);
+
     &:hover {
         background-color: var(--fill-400);
     }
@@ -779,6 +781,7 @@ $fw-bold: 700;
     border: none;
     color: var(--text-loud);
     background: var(--fill-100);
+
     &:hover {
         background-color: var(--fill-200);
     }
@@ -818,6 +821,7 @@ $fw-bold: 700;
     width: 60px;
     padding: 0;
     transition: background-color 0.2s ease-in;
+
     &:hover {
         background-color: var(--fill-600);
     }
@@ -841,14 +845,17 @@ $fw-bold: 700;
     background: var(--state-primary-active);
 }
 
+.button--edit,
 .button--drop {
-    max-width: 24px;
     height: 24px !important;
     width: fit-content !important;
     min-width: fit-content !important;
-    display: inline-block;
 }
 
+.button--drop {
+    max-width: 24px;
+    display: inline-block;
+}
 
 .button--comming-soon {
     opacity: .7;
@@ -1265,6 +1272,7 @@ $fw-bold: 700;
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px 0px 0px rgba(26, 26, 26, .08), 0px 1px 3px 0px rgba(26, 26, 26, .08);
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
@@ -1582,6 +1590,7 @@ textarea::placeholder {
     background: var(--fill-00);
     border: none;
     box-shadow: 0px 0.5px var(--Blur-blur-0, 0px) 0px var(--Colors-alpha-dark-50, rgba(26, 26, 26, 0.08)), 0px 1px var(--Blur-blur-2, 3px) 0px rgba(26, 26, 26, 0.08);
+
     &:focus-within {
         border: 3px solid var(--state-primary-active);
     }
@@ -1738,6 +1747,7 @@ textarea::placeholder {
     gap: 4px;
     width: 100%;
     border-radius: 12px;
+
     &:focus-within {
         outline: 3px solid var(--state-primary-active);
     }
@@ -1910,7 +1920,7 @@ textarea::placeholder {
     height: fit-content;
 }
 
-.checkbox-card > .checkbox-card__header {
+.checkbox-card>.checkbox-card__header {
     display: flex;
     width: 100%;
     gap: 8px;
@@ -2637,7 +2647,8 @@ textarea::placeholder {
     right: 16px;
 }
 
-.wallet, .transfers {
+.wallet,
+.transfers {
     max-height: 100vh;
     width: 100%;
     display: flex;
@@ -3007,7 +3018,7 @@ small.summary__item__value {
     width: 100%;
 }
 
-.widthdraw__data > * {
+.widthdraw__data>* {
     width: 100%;
 }
 
@@ -3545,7 +3556,7 @@ small.summary__item__value {
     width: auto;
     min-width: 150px;
     height: 1.62em;
-    vertical-align:bottom;
+    vertical-align: bottom;
     overflow: hidden;
     text-align: start;
 }
@@ -3565,20 +3576,26 @@ small.summary__item__value {
 .animated-text span:nth-child(1) {
     animation-delay: 0s;
 }
+
 .animated-text span:nth-child(2) {
     animation-delay: 2s;
 }
+
 .animated-text span:nth-child(3) {
     animation-delay: 4s;
 }
 
 @keyframes roll {
-    0%, 33.33% {
+
+    0%,
+    33.33% {
         opacity: 0;
         transform: translateY(100%);
     }
-    5%, 28.33% {
+
+    5%,
+    28.33% {
         opacity: 1;
         transform: translateY(0);
     }
-}
+}
diff --git a/src/components/atoms/icons/dot.rs b/src/components/atoms/icons/dot.rs
@@ -0,0 +1,14 @@
+use dioxus::prelude::*;
+use super::icon::IconShape;
+#[derive(PartialEq, Clone)]
+pub struct Dot;
+impl IconShape for Dot {
+    fn view_box(&self) -> String {
+        String::from("0 0 24 24")
+    }
+    fn child_elements(&self) -> Element {
+        rsx!(
+            path { d: "M11.9902 0.121826C5.43481 0.121826 0.12207 5.43575 0.12207 11.9899C0.12207 17.0176 3.25007 21.3157 7.66587 23.0455C7.56133 22.107 7.46866 20.6623 7.70626 19.6383C7.92248 18.7116 9.0986 13.7387 9.0986 13.7387C9.0986 13.7387 8.74339 13.0271 8.74339 11.9757C8.74339 10.3267 9.69973 9.09479 10.8913 9.09479C11.9047 9.09479 12.3929 9.85511 12.3929 10.7663C12.3929 11.7856 11.7443 13.3074 11.4104 14.7188C11.1313 15.8997 12.0033 16.8631 13.1675 16.8631C15.2762 16.8631 16.899 14.6392 16.899 11.428C16.899 8.58633 14.8568 6.59999 11.9415 6.59999C8.564 6.59999 6.58123 9.13281 6.58123 11.75C6.58123 12.7693 6.97445 13.8634 7.4651 14.4586C7.50679 14.5034 7.53624 14.5582 7.55059 14.6178C7.56495 14.6773 7.56374 14.7395 7.54707 14.7984C7.45678 15.1726 7.25601 15.9793 7.21799 16.1444C7.16572 16.3618 7.04573 16.4081 6.82001 16.3036C5.33858 15.6133 4.41194 13.4464 4.41194 11.7048C4.41194 7.96144 7.13127 4.52337 12.2539 4.52337C16.3715 4.52337 19.5708 7.45654 19.5708 11.3781C19.5708 15.4696 16.9917 18.7592 13.4122 18.7592C12.2088 18.7592 11.079 18.1355 10.6917 17.3977L9.95158 20.218C9.68428 21.2492 8.96079 22.5418 8.47727 23.3306C9.61551 23.682 10.8001 23.8602 11.9914 23.8593C18.5456 23.8593 23.8595 18.5453 23.8595 11.9911C23.8595 5.43694 18.5444 0.121826 11.9902 0.121826Z" }
+        )
+    }
+}
diff --git a/src/components/atoms/icons/edith_line.rs b/src/components/atoms/icons/edith_line.rs
@@ -0,0 +1,16 @@
+use dioxus::prelude::*;
+
+use super::icon::IconShape;
+
+#[derive(PartialEq, Clone)]
+pub struct EditLine;
+impl IconShape for EditLine {
+    fn view_box(&self) -> String {
+        String::from("0 0 16 16")
+    }
+    fn child_elements(&self) -> Element {
+        rsx!(
+            path { d: "M4.276 10.6666L11.0373 3.90531L10.0947 2.96264L3.33333 9.72398V10.6666H4.276ZM4.82867 12H2V9.17131L9.62333 1.54797C9.74835 1.42299 9.91789 1.35278 10.0947 1.35278C10.2714 1.35278 10.441 1.42299 10.566 1.54797L12.452 3.43397C12.577 3.55899 12.6472 3.72853 12.6472 3.90531C12.6472 4.08208 12.577 4.25162 12.452 4.37664L4.82867 12ZM2 13.3333H14V14.6666H2V13.3333Z" }
+        )
+    }
+}
diff --git a/src/components/atoms/icons/mod.rs b/src/components/atoms/icons/mod.rs
@@ -12,6 +12,8 @@ pub mod circle_check;
 pub mod circle_shape;
 pub mod close;
 pub mod compass;
+pub mod dot;
+pub mod edith_line;
 pub mod filter;
 pub mod glyph;
 pub mod hamburguer;
@@ -58,6 +60,8 @@ pub use circle_check::CircleCheck;
 pub use circle_shape::CircleShape;
 pub use close::Close;
 pub use compass::Compass;
+pub use dot::Dot;
+pub use edith_line::EditLine;
 pub use filter::Filter;
 pub use glyph::Glyph;
 pub use hamburguer::Hamburguer;

diff --git a/src/components/molecules/onboarding/checkout.rs b/src/components/molecules/onboarding/checkout.rs
@@ -0,0 +1,126 @@
+use dioxus::prelude::*;
+use dioxus_std::{i18n::use_i18, translate};
+
+use crate::{
+    components::atoms::Title,
+    hooks::{
+        use_market_client::use_market_client,
+        use_onboard::use_onboard,
+    },
+    services::market::types::Tokens,
+};
+
+const COMMUNITY_VALUE: f64 = 0.51;
+const IDENTITY_VALUE: f64 = 0.11;
+const MEMBERSHIP_VALUE: f64 = 0.3;
+
+#[component]
+pub fn OnboardingCheckout() -> Element {
+    let i18 = use_i18();
+    let onboard = use_onboard();
+    let market_client = use_market_client();
+
+    let mut to_pay = consume_context::<Signal<f64>>();
+    let mut ksm_market_price = use_signal::<f64>(|| 0.0);
+
+    let members = onboard
+        .get_invitations()
+        .into_iter()
+        .filter_map(|invitation| {
+            if !invitation.account.is_empty() {
+                Some(invitation.account)
+            } else {
+                None
+            }
+        })
+        .collect::<Vec<String>>();
+
+    let membership_value = members.len() as f64 * MEMBERSHIP_VALUE;
+    let subtotal_ksm = COMMUNITY_VALUE + IDENTITY_VALUE + membership_value;
+
+    to_pay.set(subtotal_ksm);
+
+    use_coroutine(move |_: UnboundedReceiver<()>| async move {
+        let Ok(price) = market_client.get().get_price_by_token(Tokens::KSM).await else {
+            log::error!("Price not found for {}", Tokens::KSM.name());
+            return;
+        };
+
+        ksm_market_price.set(price);
+    });
+
+    rsx!(
+        div { class: "form__title",
+            span { class: "label",
+                {translate!(i18, "onboard.checkout.label")}
+            }
+            Title {
+                text: translate!(i18, "onboard.checkout.title")
+            }
+        }
+        div { class: "summary",
+            h4 { class: "summary__subtitle", {translate!(i18, "onboard.checkout.summary.subtitle")} }
+            article { class: "summary__details",
+                section { class: "summary__item",
+                    span { class: "summary__item__label", {translate!(i18, "onboard.checkout.summary.account.label")} }
+                    div { class: "summary__item__values",
+                        span { class: "summary__item__value", {format!("{:.2} KSM", COMMUNITY_VALUE)} }
+                        if ksm_market_price() > 0.0 {
+                            small { class: "summary__item__value", {format!("${:.2} USD", ksm_market_price() * COMMUNITY_VALUE)} }
+                        }
+                    }
+                }
+                section { class: "summary__item",
+                    span { class: "summary__item__label", {translate!(i18, "onboard.checkout.summary.verification.label")} }
+                    div { class: "summary__item__values",
+                        span { class: "summary__item__value", {format!("{:.2} KSM", IDENTITY_VALUE)} }
+                        if ksm_market_price() > 0.0 {
+                            small { class: "summary__item__value", {format!("${:.2} USD", ksm_market_price() * IDENTITY_VALUE)} }
+                        }
+                    }
+                }
+                section { class: "summary__item",
+                    span { class: "summary__item__label", {translate!(i18, "onboard.checkout.summary.membership.label")} }
+                    div { class: "summary__item__values",
+                        span { class: "summary__item__value", {format!("x{} ({:.2} KSM)", members.len(), MEMBERSHIP_VALUE)} }
+                        if ksm_market_price() > 0.0 {
+                            small { class: "summary__item__value", {format!("${:.2} USD", ksm_market_price() * MEMBERSHIP_VALUE)} }
+                        }
+                    }
+                    div { class: "summary__item__values",
+                        span { class: "summary__item__value", {format!("{:.2} KSM", membership_value)} }
+                        if ksm_market_price() > 0.0 {
+                            small { class: "summary__item__value", {format!("${:.2} USD", ksm_market_price() * membership_value)} }
+                        }
+                    }
+                }
+            }
+
+            hr { class: "divider" }
+
+            section { class: "summary__item",
+                span { class: "summary__item__label--subtitle", {translate!(i18, "onboard.checkout.summary.subtotal.label")} }
+                div { class: "summary__item__values",
+                    span { class: "summary__item__value", {format!("{:.2} KSM", subtotal_ksm)} }
+                    if ksm_market_price() > 0.0 {
+                        small { class: "summary__item__value",
+                            {
+                                format!("${:.2} USD",
+                                    round_price(ksm_market_price() * COMMUNITY_VALUE)
+                                    + round_price(ksm_market_price() * IDENTITY_VALUE)
+                                    + round_price(ksm_market_price() * membership_value)
+                                )
+                            }
+                        }
+                    }
+                }
+            }
+
+            p { class: "summary__disclaimer", {translate!(i18, "onboard.checkout.summary.disclaimer")} }
+        }
+    )
+}
+
+fn round_price(value: f64) -> f64 {
+    (value * 100.0).round() / 100.0
+}
diff --git a/src/components/molecules/onboarding/management.rs b/src/components/molecules/onboarding/management.rs
@@ -7,6 +7,7 @@ use crate::{
     },
     hooks::use_onboard::{use_onboard, ManagementOptions},
 };
+
 #[component]
 pub fn OnboardingManagement() -> Element {
     let i18 = use_i18();

diff --git a/src/components/molecules/onboarding/mod.rs b/src/components/molecules/onboarding/mod.rs
@@ -1,6 +1,8 @@
 pub mod basics;
+pub mod checkout;
 pub mod invite;
 pub mod management;
 pub use basics::OnboardingBasics;
+pub use checkout::OnboardingCheckout;
 pub use invite::OnboardingInvite;
 pub use management::OnboardingManagement;
diff --git a/src/hooks/use_startup.rs b/src/hooks/use_startup.rs
@@ -16,7 +16,8 @@ use super::{
     use_timestamp::{IsTimestampHandled, TimestampValue},
     use_tooltip::TooltipItem, use_withdraw::WithdrawForm,
 };
-const SPACES_CLIENT_URL: &str = "https://bot-api.virto.app";
+// const SPACES_CLIENT_URL: &str = "https://bot-api.virto.app";
+const SPACES_CLIENT_URL: &str = "http://localhost:8000";
 const MARKET_CLIENT_URL: &str = "https://sapi.coincarp.com/api/v1";
 
 pub fn use_startup() {

diff --git a/src/lib.rs b/src/lib.rs
@@ -8,6 +8,7 @@ pub mod pages {
     pub mod login;
     pub mod not_found;
     pub mod onboarding;
+    pub mod payment;
     pub mod route;
     pub mod vote;
     pub mod withdraw;