From 16db140bb6a574edcc6787c93652929db97f4d0c Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 27 Jun 2025 23:31:56 +0200
Subject: [PATCH] Enhance milestone rewards display: Add new milestones for 5M,
 20M, and 100M sats with corresponding labels and icons. Update progress
 calculation to reflect these new thresholds in the dashboard.

---
 static/js/index.js                    | 14 ++++++++----
 templates/satmachineclient/index.html | 33 +++++++++++++++++++++++++++
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 42ee57c..2924342 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -195,9 +195,12 @@ window.app = Vue.createApp({
       if (!amount) return '0 sats'
       const formatted = new Intl.NumberFormat('en-US').format(amount)
       // Add some excitement for larger amounts
-      if (amount >= 1000000) return formatted + ' sats 💎'
-      if (amount >= 100000) return formatted + ' sats 🚀'
-      if (amount >= 10000) return formatted + ' sats ⚡'
+      if (amount >= 100000000) return formatted + ' sats 🏆' // Full coiner (1 BTC)
+      if (amount >= 20000000) return formatted + ' sats 👑' // Bitcoin royalty
+      if (amount >= 5000000) return formatted + ' sats 🌟' // Rising star
+      if (amount >= 1000000) return formatted + ' sats 💎' // Diamond hands
+      if (amount >= 100000) return formatted + ' sats 🚀' // Rocket fuel
+      if (amount >= 10000) return formatted + ' sats ⚡' // Lightning
       return formatted + ' sats'
     },
 
@@ -280,7 +283,10 @@ window.app = Vue.createApp({
       if (sats < 500000) return { target: 500000, name: '500k sats' }
       if (sats < 1000000) return { target: 1000000, name: '1M sats' }
       if (sats < 2100000) return { target: 2100000, name: '2.1M sats' }
-      return { target: 21000000, name: '21M sats' }
+      if (sats < 5000000) return { target: 5000000, name: '5M sats' }
+      if (sats < 20000000) return { target: 20000000, name: '20M sats' }
+      if (sats < 100000000) return { target: 100000000, name: '100M sats (1 BTC!)' }
+      return { target: 210000000, name: '210M sats (2.1 BTC)' }
     },
 
     getMilestoneProgress() {
diff --git a/templates/satmachineclient/index.html b/templates/satmachineclient/index.html
index 3334efb..19097e5 100644
--- a/templates/satmachineclient/index.html
+++ b/templates/satmachineclient/index.html
@@ -475,6 +475,39 @@
               <q-item-label caption>True HODLer 💎</q-item-label>
             </q-item-section>
           </q-item>
+          
+          <q-item>
+            <q-item-section avatar>
+              <div v-if="dashboardData.total_sats_accumulated >= 5000000" class="text-positive text-h6">✅</div>
+              <div v-else class="text-grey-5 text-h6">⭕</div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-body2">5,000,000 sats</q-item-label>
+              <q-item-label caption>Rising star 🌟</q-item-label>
+            </q-item-section>
+          </q-item>
+          
+          <q-item>
+            <q-item-section avatar>
+              <div v-if="dashboardData.total_sats_accumulated >= 20000000" class="text-positive text-h6">✅</div>
+              <div v-else class="text-grey-5 text-h6">⭕</div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-body2">20,000,000 sats</q-item-label>
+              <q-item-label caption>Bitcoin royalty 👑</q-item-label>
+            </q-item-section>
+          </q-item>
+          
+          <q-item>
+            <q-item-section avatar>
+              <div v-if="dashboardData.total_sats_accumulated >= 100000000" class="text-positive text-h6">✅</div>
+              <div v-else class="text-grey-5 text-h6">⭕</div>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label class="text-body2">100,000,000 sats</q-item-label>
+              <q-item-label caption>Full coiner! 🏆</q-item-label>
+            </q-item-section>
+          </q-item>
         </q-list>
       </q-card-section>
     </q-card>