diff --git a/ssr/src/component/buttons.rs b/ssr/src/component/buttons.rs new file mode 100644 index 00000000..0798db76 --- /dev/null +++ b/ssr/src/component/buttons.rs @@ -0,0 +1,133 @@ +use leptos::*; + +#[component] +pub fn Button( + children: Children, + on_click: impl Fn() + 'static, + #[prop(optional)] classes: String, + #[prop(optional)] alt_style: Signal, + #[prop(optional)] disabled: Signal, +) -> impl IntoView { + let on_click = move |_| on_click(); + view! { + + } +} + +#[component] +pub fn LinkButton( + children: Children, + href: String, + #[prop(optional)] classes: String, + #[prop(optional)] alt_style: Signal, + #[prop(optional)] disabled: Signal, +) -> impl IntoView { + view! { + + {children()} + + } +} + +#[component] +pub fn SecondaryLinkButton( + children: Children, + href: String, + #[prop(optional)] classes: String, + #[prop(optional)] alt_style: Signal, +) -> impl IntoView { + view! { + + {children()} + + } +} + +#[component] +pub fn SecondaryButton( + children: Children, + disabled: Signal, + alt_style: Signal, + classes: String, + on_click: impl Fn() + 'static, +) -> impl IntoView { + let on_click = move |_| on_click(); + view! { + + } +} diff --git a/ssr/src/component/icons/arrow_down_icon.rs b/ssr/src/component/icons/arrow_down_icon.rs new file mode 100755 index 00000000..d66d611f --- /dev/null +++ b/ssr/src/component/icons/arrow_down_icon.rs @@ -0,0 +1,32 @@ +use leptos::*; + +#[component] +pub fn ArrowDownIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + + } +} diff --git a/ssr/src/component/icons/arrow_right_long_icon.rs b/ssr/src/component/icons/arrow_right_long_icon.rs new file mode 100755 index 00000000..f2be9be8 --- /dev/null +++ b/ssr/src/component/icons/arrow_right_long_icon.rs @@ -0,0 +1,32 @@ +use leptos::*; + +#[component] +pub fn ArrowRightLongIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + + } +} diff --git a/ssr/src/component/icons/chevron_left_icon.rs b/ssr/src/component/icons/chevron_left_icon.rs new file mode 100755 index 00000000..7e9c4f95 --- /dev/null +++ b/ssr/src/component/icons/chevron_left_icon.rs @@ -0,0 +1,22 @@ +use leptos::*; + +#[component] +pub fn ChevronLeftIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + } +} diff --git a/ssr/src/component/icons/chevron_right_icon.rs b/ssr/src/component/icons/chevron_right_icon.rs new file mode 100755 index 00000000..e045dc76 --- /dev/null +++ b/ssr/src/component/icons/chevron_right_icon.rs @@ -0,0 +1,20 @@ +use leptos::*; + +#[component] +pub fn ChevronRightIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + } +} diff --git a/ssr/src/component/icons/close_icon.rs b/ssr/src/component/icons/close_icon.rs new file mode 100755 index 00000000..6ac6fae7 --- /dev/null +++ b/ssr/src/component/icons/close_icon.rs @@ -0,0 +1,20 @@ +use leptos::*; + +#[component] +pub fn CloseIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + } +} diff --git a/ssr/src/component/icons/mod.rs b/ssr/src/component/icons/mod.rs new file mode 100755 index 00000000..000ca278 --- /dev/null +++ b/ssr/src/component/icons/mod.rs @@ -0,0 +1,6 @@ +pub mod arrow_down_icon; +pub mod arrow_right_long_icon; +pub mod chevron_left_icon; +pub mod chevron_right_icon; +pub mod close_icon; +pub mod wallet_icon; diff --git a/ssr/src/component/icons/wallet_icon.rs b/ssr/src/component/icons/wallet_icon.rs new file mode 100755 index 00000000..68762a6d --- /dev/null +++ b/ssr/src/component/icons/wallet_icon.rs @@ -0,0 +1,23 @@ +use leptos::*; + +#[component] +pub fn WalletIcon( + #[prop(optional, default = "w-full h-full".to_string())] classes: String, +) -> impl IntoView { + view! { + + + + } +} diff --git a/ssr/src/component/mod.rs b/ssr/src/component/mod.rs index 38bd66c1..61b72338 100644 --- a/ssr/src/component/mod.rs +++ b/ssr/src/component/mod.rs @@ -3,6 +3,7 @@ pub mod auth_providers; pub mod back_btn; pub mod base_route; pub mod bullet_loader; +pub mod buttons; pub mod canisters_prov; pub mod coming_soon; pub mod connect; @@ -11,6 +12,7 @@ pub mod dashbox; pub mod feed_popup; pub mod hn_icons; pub mod ic_symbol; +pub mod icons; pub mod infinite_scroller; pub mod loading; pub mod login_modal; diff --git a/ssr/src/page/wallet/swap.rs b/ssr/src/page/wallet/swap.rs new file mode 100644 index 00000000..54e24bcb --- /dev/null +++ b/ssr/src/page/wallet/swap.rs @@ -0,0 +1,347 @@ +#[derive(Clone)] +struct SwapToken { + name: String, + icon: String, + symbol: String, +} + +use html::Div; +use leptos::*; +use leptos_use::on_click_outside; +use rust_decimal::prelude::Signed; + +use crate::component::icons::chevron_left_icon::ChevronLeftIcon; +use crate::component::icons::arrow_down_icon::ArrowDownIcon; +use crate::component::icons::wallet_icon::WalletIcon; +use crate::component::icons::chevron_right_icon::ChevronRightIcon; +use crate::component::icons::arrow_right_long_icon::ArrowRightLongIcon; +use crate::component::icons::close_icon::CloseIcon; +use crate::component::buttons::Button; + +#[component] +pub fn SwapPage() -> impl IntoView { + + let (wallet_balance, set_wallet_balance) = create_signal(100.0); + + let swap_from = SwapToken { + name: "Hot".to_string(), + icon: "https://picsum.photos/200".to_string(), + symbol: "HOT".to_string(), + }; + + let profile_image = "https://picsum.photos/200"; + let profile_id = "mqxpy-vp4st-vhw6p-poxzk-i363n-y4fag-v37dn-22pu7"; + + + let (from_amount, set_from_amount) = create_signal(0); + let (to_amount, set_to_amount) = create_signal(0); + let (selected_token, set_selected_token) = create_signal(None); + let (selected_token_wallet_balance, set_selected_token_wallet_balance) = create_signal(0); + let (selected_token_multiplier, set_selected_token_multiplier) = create_signal(0.08); + + let (is_amount_invalid, set_is_amount_invalid) = create_signal(false); + + let request_swap = move || { + // Create swap request + }; + + let (show_select_coin_popup, set_show_select_coin_popup) = create_signal(false); + let (show_confirm_popup, set_show_confirm_popup) = create_signal(false); + + view! { + {move || { + if show_confirm_popup.get() { + view! { <> } + } else { + view! { <>