top up styling

regolith-labs · Mar 4, 2025 · eb6e0e1 · eb6e0e1
1 parent 80cb3f8
commit eb6e0e1
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 21 deletions.
diff --git a/input.css b/input.css
@@ -13,6 +13,7 @@
     --color-elements-disabled: #585661;
     --color-elements-gold: #ECC771;
     --color-elements-purple: #5949B7;
+    --color-elements-green: #49B759;
     --color-elements-contrast: #0F0E11;
     --color-surface-elevated: #131216;
     --color-surface-elevatedHover: #151419;
@@ -41,12 +42,23 @@
 
     /* Keyframes */
     @keyframes marquee {
-        0% { transform: translateX(0%); }
-        100% { transform: translateX(-100%); }
+        0% {
+            transform: translateX(0%);
+        }
+
+        100% {
+            transform: translateX(-100%);
+        }
     }
+
     @keyframes marquee2 {
-        0% { transform: translateX(100%); }
-        100% { transform: translateX(0%); }
+        0% {
+            transform: translateX(100%);
+        }
+
+        100% {
+            transform: translateX(0%);
+        }
     }
 }
 
@@ -70,7 +82,7 @@ body {
     .elevated-border {
         @apply border border-gray-800;
     }
-  
+
     .top-safe {
         top: 0;
         padding-top: env(safe-area-inset-top);
@@ -100,24 +112,28 @@ body {
     font-weight: 300;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Pilat';
     src: url('/assets/fonts/Pilat/Pilat-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Pilat';
     src: url('/assets/fonts/Pilat/Pilat-Book.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Pilat';
     src: url('/assets/fonts/Pilat/Pilat-Demi.otf') format('opentype');
     font-weight: 600;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'Pilat';
     src: url('/assets/fonts/Pilat/Pilat-Bold.otf') format('opentype');
@@ -132,24 +148,28 @@ body {
     font-weight: 300;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatWide';
     src: url('/assets/fonts/PilatWide/PilatWide-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatWide';
     src: url('/assets/fonts/PilatWide/PilatWide-Book.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatWide';
     src: url('/assets/fonts/PilatWide/PilatWide-Demi.otf') format('opentype');
     font-weight: 600;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatWide';
     src: url('/assets/fonts/PilatWide/PilatWide-Bold.otf') format('opentype');
@@ -164,27 +184,31 @@ body {
     font-weight: 300;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatExtended';
     src: url('/assets/fonts/PilatExtended/PilatExtended-Regular.otf') format('opentype');
     font-weight: 400;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatExtended';
     src: url('/assets/fonts/PilatExtended/PilatExtended-Book.otf') format('opentype');
     font-weight: 500;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatExtended';
     src: url('/assets/fonts/PilatExtended/PilatExtended-Demi.otf') format('opentype');
     font-weight: 600;
     font-style: normal;
 }
+
 @font-face {
     font-family: 'PilatExtended';
     src: url('/assets/fonts/PilatExtended/PilatExtended-Bold.otf') format('opentype');
     font-weight: 700;
     font-style: normal;
-}
+}
diff --git a/public/tailwind.css b/public/tailwind.css
@@ -384,6 +384,7 @@
     --color-elements-disabled: #585661;
     --color-elements-gold: #ECC771;
     --color-elements-purple: #5949B7;
+    --color-elements-green: #49B759;
     --color-elements-contrast: #0F0E11;
     --color-surface-elevated: #131216;
     --color-surface-elevatedHover: #151419;
@@ -783,6 +784,9 @@
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
   .h-32 {
     height: calc(var(--spacing) * 32);
   }
@@ -828,6 +832,9 @@
   .w-5 {
     width: calc(var(--spacing) * 5);
   }
+  .w-5xl {
+    width: var(--container-5xl);
+  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -858,9 +865,6 @@
   .w-56 {
     width: calc(var(--spacing) * 56);
   }
-  .w-5xl {
-    width: var(--container-5xl);
-  }
   .w-96 {
     width: calc(var(--spacing) * 96);
   }
@@ -1350,6 +1354,9 @@
   .text-elements-gold {
     color: var(--color-elements-gold);
   }
+  .text-elements-green {
+    color: var(--color-elements-green);
+  }
   .text-elements-highEmphasis {
     color: var(--color-elements-highEmphasis);
   }

diff --git a/src/pages/topup.rs b/src/pages/topup.rs
@@ -1,13 +1,17 @@
 use dioxus::prelude::*;
 
-use crate::{components::*, config::Token, hooks::use_token_balance, route::Route};
-
-// TODO Web top up form
-// TODO Destop modal that links to web form
+use crate::{components::*, config::Token, hooks::use_token_balance};
 
 #[cfg(feature = "web")]
 #[component]
 pub fn Topup(address: String) -> Element {
+    use std::str::FromStr;
+
+    use ore_types::request::TransactionType;
+    use steel::Pubkey;
+
+    use crate::hooks::{on_transaction_done, use_topup_transaction};
+
     enum TopupStatus {
         Editing,
         Success,
@@ -19,7 +23,7 @@ pub fn Topup(address: String) -> Element {
     let priority_fee = use_signal(|| 0);
     let err = use_signal::<Option<TokenInputError>>(|| None);
     let tx = use_topup_transaction(destination, amount, sol_balance, err, priority_fee);
-    let mut status = use_signal(|| TopupStatus::Editing);
+    let mut status = use_signal(|| TopupStatus::Success);
 
     on_transaction_done(move |_| {
         status.set(TopupStatus::Success);
@@ -32,7 +36,7 @@ pub fn Topup(address: String) -> Element {
             Heading {
                 class: "mx-auto w-full",
                 title: "Top up",
-                subtitle: "Transfer SOL to your desktop wallet."
+                subtitle: "Send some SOL to your desktop wallet."
             }
 
             match *status.read() {
@@ -114,16 +118,26 @@ pub fn Topup(address: String) -> Element {
                         Col {
                             class: "mx-auto w-full",
                             gap: 8,
-                            span {
-                                class: "text-elements-highEmphasis font-semibold text-2xl mx-auto",
-                                "Success!"
+                            CheckCircleIcon {
+                                class: "mx-auto w-24 h-24 text-elements-green mt-8"
+                            }
+                            Col {
+                                gap: 2,
+                                span {
+                                    class: "text-elements-highEmphasis font-semibold text-2xl mx-auto",
+                                    "Success!"
+                                }
+                                span {
+                                    class: "text-elements-lowEmphasis font-medium mx-auto",
+                                    "Your desktop wallet has been topped up."
+                                }
                             }
                             a {
-                                class: "flex controls-primary w-full h-12 rounded-full hover:cursor-pointer",
+                                class: "flex controls-primary w-full h-12 rounded-full hover:cursor-pointer mt-8",
                                 href: "ore://",
                                 span {
                                     class: "mx-auto my-auto",
-                                    "Return to app"
+                                    "Return to app →"
                                 }
                             }
                         }
@@ -137,7 +151,10 @@ pub fn Topup(address: String) -> Element {
 #[cfg(not(feature = "web"))]
 #[component]
 pub fn Topup(address: String) -> Element {
-    use crate::hooks::{use_wallet, Wallet};
+    use crate::{
+        hooks::{use_wallet, Wallet},
+        route::Route,
+    };
 
     let wallet = use_wallet();
     let navigator = use_navigator();