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..d07e4db --- /dev/null +++ b/src/components/molecules/create_dao_button.rs @@ -0,0 +1,75 @@ +use dioxus::prelude::*; +use dioxus_i18n::t; +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}, +}; + +#[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 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(accounts.clone(), notification.clone())), + ], + "/onboarding", + ); + }; + + let handle_mouse_enter = move |_| { + let chain_available = is_chain_available(timestamp.clone(), notification.clone())(); + let is_owner = is_dao_owner(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 { "" }, + { t!("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/middlewares/is_dao_owner.rs b/src/middlewares/is_dao_owner.rs index 77c378a..1727e4e 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() { warn!("User is DAO owner"); - notification.handle_warning(&t!("warnings-title"), &t!("warnings-middleware-has_dao")); Err("User is DAO owner") } else { Ok(()) diff --git a/src/pages/dashboard.rs b/src/pages/dashboard.rs index 8f7793c..0e1bb31 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(timestamp, notification)), - Box::new(is_dao_owner(accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } div { class: "dashboard__communities", @@ -283,24 +261,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(timestamp, notification)), - Box::new(is_dao_owner(accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } } diff --git a/src/pages/explore.rs b/src/pages/explore.rs index 72f5cb9..88f77a2 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(timestamp, notification)), - Box::new(is_dao_owner(accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } div { class: "dashboard__communities", @@ -238,24 +216,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(timestamp, notification)), - Box::new(is_dao_owner(accounts, notification)), - ], - "/onboarding", - ); - } - } + CreateDaoButton {}, } } }