diff --git a/public/styles/main.scss b/public/styles/main.scss index fbffb1e..6ba8b56 100644 --- a/public/styles/main.scss +++ b/public/styles/main.scss @@ -4060,4 +4060,53 @@ small.summary__item__value { 100% { background-color: var(--fill-100); } -} \ No newline at end of file +} + +.create-dao-button-wrapper { + position: relative; +} + +.create-dao-tooltip-container { + position: absolute; + top: 100%; + left: 40%; + transform: translateX(-50%); + z-index: 1; + pointer-events: none; +} + +.create-dao-tooltip { + visibility: hidden; + opacity: 0; + width: fit-content; + background-color: var(--background-modal); + color: var(--text-white); + text-align: center; + border-radius: 6px; + padding: 8px; + transition: opacity 0.3s, visibility 0.3s; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); + position: relative; + margin-top: 10px; +} + +.create-dao-tooltip--visible { + visibility: visible; + opacity: 1; +} + +.create-dao-tooltip::after { + content: ""; + position: absolute; + bottom: 100%; + left: 50%; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent var(--background-modal) transparent; +} + +.create-dao-tooltip, +.create-dao-tooltip--visible { + @extend %text-xs-font-regular; +} diff --git a/src/components/molecules/create_dao_button.rs b/src/components/molecules/create_dao_button.rs new file mode 100644 index 0000000..a043442 --- /dev/null +++ b/src/components/molecules/create_dao_button.rs @@ -0,0 +1,76 @@ +use dioxus::prelude::*; +use crate::{ + components::atoms::{dropdown::ElementSize, IconButton, Icon, AddPlus}, + hooks::{use_notification::use_notification, use_our_navigator::use_our_navigator, use_timestamp::use_timestamp, use_accounts::use_accounts}, + middlewares::{is_chain_available::is_chain_available, is_dao_owner::is_dao_owner}, +}; +use dioxus_std::{i18n::use_i18, translate}; + +#[derive(PartialEq, Props, Clone)] +pub struct CreateDaoButtonProps { + #[props(default = "button--avatar desktop".to_string())] + pub class: String, +} + +#[component] +pub fn CreateDaoButton(props: CreateDaoButtonProps) -> Element { + let i18 = use_i18(); + let nav = use_our_navigator(); + let notification = use_notification(); + let timestamp = use_timestamp(); + let accounts = use_accounts(); + let mut show_tooltip = use_signal(|| false); + + let handle_click = move |_| { + nav.push( + vec![ + Box::new(is_dao_owner(i18.clone(), accounts.clone(), notification.clone())), + ], + "/onboarding", + ); + }; + + let handle_mouse_enter = move |_| { + let chain_available = is_chain_available(i18.clone(), timestamp.clone(), notification.clone())(); + let is_owner = is_dao_owner(i18.clone(), accounts.clone(), notification.clone())(); + + if chain_available.is_ok() && is_owner.is_err() { + show_tooltip.set(true); + } + }; + + let handle_mouse_leave = move |_| { + show_tooltip.set(false); + }; + + rsx! { + div { + class: "create-dao-button-wrapper", + onmouseenter: handle_mouse_enter, + onmouseleave: handle_mouse_leave, + IconButton { + class: "{props.class}", + size: ElementSize::Medium, + on_click: handle_click, + body: rsx! { + Icon { + icon: AddPlus, + height: 26, + width: 26, + stroke_width: 1.5, + fill: "var(--fill-00)" + } + } + } + div { + class: "create-dao-tooltip-container", + div { + class: "create-dao-tooltip", + class: if (*show_tooltip)() { "create-dao-tooltip--visible" } else { "" }, + { translate!(i18, "warnings.middleware.has_dao") }, + } + } + } + } +} + diff --git a/src/components/molecules/mod.rs b/src/components/molecules/mod.rs index 24a13be..9582ecf 100644 --- a/src/components/molecules/mod.rs +++ b/src/components/molecules/mod.rs @@ -1,5 +1,6 @@ pub mod action_request_list; pub mod actions; +pub mod create_dao_button; pub mod initiative; pub mod onboarding; pub mod paginator; @@ -9,6 +10,7 @@ pub use action_request_list::ActionRequestList; pub use actions::*; pub use initiative::*; pub use onboarding::*; +pub use create_dao_button::CreateDaoButton; pub use paginator::Paginator; pub use sidebar::Sidebar; pub use tabs::Tabs; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 0786d16..aa0cb53 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -503,7 +503,7 @@ "warnings": { "title": "⚠️Attention: This information is for you", "middleware": { - "has_dao": "We're sorry! 😞 You cannot create more organizations associated with this account.", + "has_dao": "By now, you can only have one organization", "chain_unavailable": "At this time, it is not possible to complete this action.", "signer_not_found": "We're sorry! 😞 You cannot perform this action, you must authenticate first.", "not_account": "You are not connected to an account. Connect to access more features and easily manage your assets." diff --git a/src/locales/es-ES.json b/src/locales/es-ES.json index 3729fbc..330829e 100644 --- a/src/locales/es-ES.json +++ b/src/locales/es-ES.json @@ -517,7 +517,7 @@ "warnings": { "title": "⚠️Atención: Está información es para ti", "middleware": { - "has_dao": "¡Lo sentimos! 😞 No puedes crear más organizaciones asociadas a esta cuenta.", + "has_dao": "Por ahora, solo puedes tener una organización", "chain_unavailable": "En este momento no es posible completar está acción.", "signer_not_found": "¡Lo sentimos! 😞 No puedes realizar esta acción, primero debes autenticarte.", "not_account": "No estás conectado a una cuenta. Conéctate para acceder a más funciones y gestionar tus activos de manera sencilla." diff --git a/src/middlewares/is_dao_owner.rs b/src/middlewares/is_dao_owner.rs index 4fc98cd..3839176 100644 --- a/src/middlewares/is_dao_owner.rs +++ b/src/middlewares/is_dao_owner.rs @@ -8,7 +8,6 @@ pub fn is_dao_owner( move || { if accounts.is_active_account_an_admin() { log::warn!("User is DAO owner"); - notification.handle_warning(&translate!(i18, "warnings.title"), &translate!(i18, "warnings.middleware.has_dao")); Err("User is DAO owner") } else { Ok(()) diff --git a/src/pages/dashboard.rs b/src/pages/dashboard.rs index 40a1887..0c79d93 100644 --- a/src/pages/dashboard.rs +++ b/src/pages/dashboard.rs @@ -10,7 +10,7 @@ use crate::{ ArrowRight, Avatar, Badge, CardSkeleton, Compass, DynamicText, Icon, IconButton, SearchInput, Star, Tab, UserAdd, UserGroup, }, - molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator}, + molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator, create_dao_button::CreateDaoButton}, }, hooks::{ use_accounts::use_accounts, use_communities::{use_communities, CommunitiesError}, @@ -105,29 +105,7 @@ pub fn Dashboard() -> Element { on_keypress: move |_| {}, on_click: move |_| {} } - IconButton { - class: "button--avatar desktop", - size: ElementSize::Medium, - body: rsx! { - Icon { - icon: AddPlus, - height: 26, - width: 26, - stroke_width: 1.5, - fill: "var(--fill-00)" - } - }, - on_click: move |_| { - tooltip.hide(); - nav.push( - vec![ - Box::new(is_chain_available(i18, timestamp, notification)), - Box::new(is_dao_owner(i18, accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } div { class: "dashboard__communities", @@ -285,24 +263,7 @@ pub fn Dashboard() -> Element { } } div { class: "card__cta", - IconButton { - class: "button--avatar", - size: ElementSize::Big, - body: rsx!( - Icon { icon : AddPlus, height : 32, width : 32, stroke_width : 1.5, fill : - "var(--fill-00)" } - ), - on_click: move |_| { - tooltip.hide(); - nav.push( - vec![ - Box::new(is_chain_available(i18, timestamp, notification)), - Box::new(is_dao_owner(i18, accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } } diff --git a/src/pages/explore.rs b/src/pages/explore.rs index 5aacab3..38fd820 100644 --- a/src/pages/explore.rs +++ b/src/pages/explore.rs @@ -5,7 +5,7 @@ use crate::{ ArrowRight, Avatar, Badge, CardSkeleton, DynamicText, Icon, IconButton, SearchInput, Star, Tab, UserAdd, UserGroup, }, - molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator}, + molecules::{paginator::PaginatorValue, tabs::TabItem, Paginator, create_dao_button::CreateDaoButton}, }, hooks::{ @@ -90,29 +90,7 @@ pub fn Explore() -> Element { on_keypress: move |_| {}, on_click: move |_| {} } - IconButton { - class: "button--avatar desktop", - size: ElementSize::Medium, - body: rsx! { - Icon { - icon: AddPlus, - height: 26, - width: 26, - stroke_width: 1.5, - fill: "var(--fill-00)" - } - }, - on_click: move |_| { - tooltip.hide(); - nav.push( - vec![ - Box::new(is_chain_available(i18, timestamp, notification)), - Box::new(is_dao_owner(i18, accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } div { class: "dashboard__communities", @@ -239,24 +217,7 @@ pub fn Explore() -> Element { } } div { class: "card__cta", - IconButton { - class: "button--avatar", - size: ElementSize::Big, - body: rsx!( - Icon { icon : AddPlus, height : 32, width : 32, stroke_width : 1.5, fill : - "var(--fill-00)" } - ), - on_click: move |_| { - tooltip.hide(); - nav.push( - vec![ - Box::new(is_chain_available(i18, timestamp, notification)), - Box::new(is_dao_owner(i18, accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } }