diff --git a/input.css b/input.css index 5e8d8c2..fd7ab89 100644 --- a/input.css +++ b/input.css @@ -108,3 +108,53 @@ font-weight: 700; font-style: normal; } + +/* Custom CSS */ + +.comparison-table { + position: relative; + display: flex; + flex-direction: column; + gap: 40px; +} + +.comparison-table h2 { + padding-bottom: 5px; + border-bottom: 1px solid white; +} + +.comparison-table p { + width: 60%; +} + +.comparison-table::before { + content: ""; + position: absolute; + height: 100%; + width: 2px; + background: white; + top: 0; + bottom: 0; + left: 50%; + transform: translateX(-50%); +} + +.comparison-table__header > div { + width: 50%; + display: flex; + justify-content: center; +} + +.comparison-table__row { + display: flex; +} + +.comparison-table__row > div { + width: 50%; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} + diff --git a/src/components/buttons.rs b/src/components/buttons.rs new file mode 100644 index 0000000..2f99e89 --- /dev/null +++ b/src/components/buttons.rs @@ -0,0 +1,14 @@ +use dioxus::prelude::*; + +pub fn BackButton() -> Element { + let navigator = use_navigator(); + rsx! { + button { + class: "w-10 h-10 -ml-2.5 rounded-full text-bold text-elements-midEmphasis hover:bg-controls-handle", + onclick: move |_| { + navigator.go_back(); + }, + "←" + } + } +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 9d5c183..c26e45c 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -1,5 +1,6 @@ mod balance; mod breadcrumbs; +mod buttons; mod common; mod heading; mod icons; @@ -13,6 +14,7 @@ mod wallet_adapter; pub use balance::*; pub use breadcrumbs::*; +pub use buttons::*; pub use common::*; pub use heading::*; pub use icons::*; diff --git a/src/pages/coming_soon.rs b/src/pages/coming_soon.rs index d3664f3..63f6e2f 100644 --- a/src/pages/coming_soon.rs +++ b/src/pages/coming_soon.rs @@ -1,5 +1,7 @@ use dioxus::prelude::*; +use crate::components::BackButton; + pub fn ComingSoon() -> Element { rsx! { div { @@ -18,16 +20,3 @@ pub fn ComingSoon() -> Element { } } } - -fn BackButton() -> Element { - let navigator = use_navigator(); - rsx! { - button { - class: "w-10 h-10 -ml-2.5 rounded-full text-bold text-elements-midEmphasis hover:bg-controls-handle", - onclick: move |_| { - navigator.go_back(); - }, - "←" - } - } -} \ No newline at end of file diff --git a/src/pages/mine.rs b/src/pages/mine.rs index 8934ad0..c87fb0b 100644 --- a/src/pages/mine.rs +++ b/src/pages/mine.rs @@ -1,8 +1,8 @@ use dioxus::prelude::*; use crate::{ - hooks::{POOLS, Pool}, components::*, + hooks::{Pool, POOLS}, route::Route, }; @@ -18,11 +18,31 @@ pub fn Mine() -> Element { Balance {} Yield{} } + PoolOrNotPool {} PoolTable {} } } } +fn PoolOrNotPool() -> Element { + rsx! { + Row { + class: "px-5", + Link { + to: Route::MineComparison {}, + class: "self-start h-10 controls-primary rounded-full px-4 gap-2 -mr-2", + InfoIcon { + class: "h-5 w-5 mx-auto my-auto" + } + span { + class: "my-auto", + "Solo VS Pool" + } + } + } + } +} + fn Header() -> Element { rsx! { Row { @@ -81,7 +101,7 @@ fn DownloadButton() -> Element { fn PoolTable() -> Element { rsx! { Col { - gap: 2, + gap: 2, Table { header: rsx! { TableHeader { diff --git a/src/pages/mine_comparison.rs b/src/pages/mine_comparison.rs new file mode 100644 index 0000000..6ce8401 --- /dev/null +++ b/src/pages/mine_comparison.rs @@ -0,0 +1,126 @@ +use dioxus::prelude::*; + +use crate::components::{BackButton, Col, InfoIcon, Row}; + +#[derive(Clone, PartialEq, Eq)] +struct ComparisonItem { + icon: &'static str, + title: &'static str, + text: &'static str, +} + +// in each pair, first item is for solo mining, second item is for pool mining +const COMPARISON_ROWS: [[ComparisonItem;2]; 2] = [ + [ + ComparisonItem { + icon: "🔒", + title: "High Hardware Requirements", + text: "Need significant hash power to be profitable.", + }, + ComparisonItem { + icon: "🔓", + title: "Flexible Entry Point", + text: "Start mining with any hash rate and still earn rewards.", + }, + ], + [ + ComparisonItem { + icon: "🔒", + title: "100% Rewards", + text: "Keep entire reward when you find a hash, but must pay transaction fees to submit to blockchain.", + }, + ComparisonItem { + icon: "🔓", + title: "Shared Rewards", + text: "Receive a percentage of pool rewards based on your contribution, with pool covering transaction fees.", + }, + ] +]; + +pub fn MineComparison() -> Element { + rsx! { + Col { + class: "pb-20 sm:pb-16 gap-8", + gap: 8, + Header {} + ComparisonTable {} + } + } +} + +fn Header() -> Element { + rsx! { + BackButton {} + Row { + class: "justify-center px-5 sm:px-8", + gap: 4, + h1 { + class: "font-wide text-3xl sm:text-3xl font-semibold align-text-bottom my-auto", + "Solo Mining VS Pool mining" + } + } + } +} + +#[component] +fn ComparisonTable() -> Element { + rsx! { + Col { + gap: 2, + div { + class: "comparison-table", + TableHeader { + left: "Solo Mining", + right: "Pool Mining", + } + for comparison in COMPARISON_ROWS.iter() { + TableRow { items: comparison.clone() } + } + } + } + } +} + +#[component] +pub fn TableHeader(left: String, right: String) -> Element { + rsx! { + Row { + class: "comparison-table__header", + div { + h2 { + class: "text-2xl text-center", + {left} + } + } + div { + h2 { + class: "text-2xl text-center", + {right} + } + } + } + } +} + +#[component] +fn TableRow(items: [ComparisonItem; 2]) -> Element { + rsx! { + div { + class: "comparison-table__row", + for item in items.iter() { + div { + // InfoIcon { + // class: "h-5 w-5 mx-auto my-auto" + // } + h3 { + class: "text-xl text-center", + {item.title} + } + p { + {item.text} + } + } + } + } + } +} diff --git a/src/pages/mod.rs b/src/pages/mod.rs index c74ca16..fd9d89e 100644 --- a/src/pages/mod.rs +++ b/src/pages/mod.rs @@ -6,6 +6,7 @@ mod download; mod landing; mod market; mod mine; +mod mine_comparison; mod not_found; mod pair; mod pay; @@ -22,6 +23,7 @@ pub use download::*; pub use landing::*; pub use market::*; pub use mine::*; +pub use mine_comparison::*; pub use not_found::*; pub use pair::*; pub use pay::*; diff --git a/src/pages/swap.rs b/src/pages/swap.rs index e53a10b..fe20cab 100644 --- a/src/pages/swap.rs +++ b/src/pages/swap.rs @@ -1,7 +1,7 @@ use dioxus::prelude::*; use solana_client_wasm::solana_sdk::pubkey::Pubkey; -use crate::components::{Col, SwapForm}; +use crate::components::{BackButton, Col, SwapForm}; pub fn Swap() -> Element { rsx! { @@ -30,16 +30,3 @@ pub fn Swap() -> Element { } } } - -fn BackButton() -> Element { - let navigator = use_navigator(); - rsx! { - button { - class: "w-10 h-10 -ml-2.5 rounded-full text-bold text-elements-midEmphasis hover:bg-controls-handle", - onclick: move |_| { - navigator.go_back(); - }, - "←" - } - } -} diff --git a/src/route.rs b/src/route.rs index 6ac3044..6f5db2e 100644 --- a/src/route.rs +++ b/src/route.rs @@ -16,6 +16,8 @@ pub enum Route { #[layout(AppNavigation)] #[route("/mine")] Mine {}, + #[route("/mine/comparison")] + MineComparison {}, #[route("/mine/:pool")] Pool { pool: String }, #[route("/stake")]