Bbo/solo vs pool

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;
+}
+

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();
+            },
+            "←"
+        }
+    }
+}

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::*;

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();
-            },
-            "←"
-        }
-    }
-} 

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 {

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}
+                    }
+                }
+            }
+        }
+    }
+}

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::*;

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();
-            },
-            "←"
-        }
-    }
-}

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")]