feat: wallet UI — WalletConnect component + ranked fight flow in pages

Add WalletConnect.vue with NWC/LN Address connection states. Add "FIGHT
FOR SATS" button to JoinBoutPage with entry fee payment flow. Show ranked
pot and winner payout in FightPage. Add sats stats and wallet section to
BotProfilePage. Extend BotData interface with satsWon/satsWagered/hasWallet.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/pages/BotProfilePage.vue

@@ -4,6 +4,7 @@ import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useNostr } from '../composables/useNostr'
 import SpritePreview from '../components/SpritePreview.vue'
 import HumanPreview from '../components/HumanPreview.vue'
+import WalletConnect from '../components/WalletConnect.vue'
 import type { SpriteCustomization } from '../game/sprites'
 
 const route = useRoute()
@@ -39,6 +40,9 @@ interface BotStats {
   totalFights: number
   rank: number
   totalBots: number
+  satsWon: number
+  satsWagered: number
+  hasWallet: boolean
   createdAt: string
   recentFights: {
     id: string
@@ -421,6 +425,23 @@ const tierClass = (t: number) => `tier-${t}`
               </div>
             </div>
 
+            <!-- Sats stats -->
+            <div v-if="stats.satsWon || stats.satsWagered" class="flex gap-2 mt-2">
+              <div class="flex-1 border border-neon-cyan/20 bg-neon-cyan/5 p-2.5 text-center">
+                <p class="font-display font-bold text-base text-neon-cyan">{{ stats.satsWon || 0 }}</p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">SATS WON</p>
+              </div>
+              <div class="flex-1 border border-neon-purple/20 bg-neon-purple/5 p-2.5 text-center">
+                <p class="font-display font-bold text-base text-neon-purple">{{ stats.satsWagered || 0 }}</p>
+                <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WAGERED</p>
+              </div>
+            </div>
+
+            <!-- Wallet connection (owner only) -->
+            <div v-if="isOwner" class="mt-3">
+              <WalletConnect />
+            </div>
+
             <!-- Fight actions -->
             <div class="flex gap-2 mt-4">
               <button

frontend/src/pages/FightPage.vue

@@ -579,6 +579,9 @@ async function handleFightEnd(data: any) {
     sfxApplause()
     sfxCrowdCheer()
     await showLiveOverlay(`${data.winnerName} WINS!`, '#00f0ff', 2000)
+    if (data.mode === 'ranked' && data.potSats) {
+      await showLiveOverlay(`WON ${data.potSats} SATS!`, '#00f0ff', 1500)
+    }
     liveScene.stopMusic()
   }
 
@@ -592,6 +595,11 @@ async function handleFightEnd(data: any) {
       { type: 'divider', round: 0, text: '', color: '' },
       { type: 'system', round: 0, text: myWon ? 'YOU WIN!' : 'YOU LOSE!', color: myWon ? 'neon-cyan' : 'neon-pink' },
     )
+    if (data.mode === 'ranked' && data.potSats && myWon) {
+      liveLogItems.value.push(
+        { type: 'system', round: 0, text: `YOU WON ${data.potSats} SATS!`, color: 'neon-cyan' },
+      )
+    }
     scrollLiveLog()
     disconnectSSE()
     stopHumanPolling()
@@ -949,7 +957,10 @@ function stopAutoBattle() {
             </div>
             <div class="flex items-center justify-between mt-0.5">
               <span class="font-pixel text-[9px]" :class="tierClass(liveFightData.botA.tier || 0)">{{ Math.round(liveFightData.botA.eloRating || 0) }}</span>
-              <span class="font-pixel text-[9px] text-text-muted">{{ liveFightData.arenaInfo?.name }} | R{{ liveCurrentRound }}</span>
+              <span class="font-pixel text-[9px] text-text-muted">
+                {{ liveFightData.arenaInfo?.name }} | R{{ liveCurrentRound }}
+                <span v-if="liveFightData.mode === 'ranked'" class="text-neon-cyan"> | ⚡{{ liveFightData.potSats || 42 }} SATS</span>
+              </span>
               <span class="font-pixel text-[9px]" :class="tierClass(liveFightData.botB.tier || 0)">{{ Math.round(liveFightData.botB.eloRating || 0) }}</span>
             </div>
           </div>

frontend/src/pages/JoinBoutPage.vue

@@ -2,11 +2,14 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useNostr } from '../composables/useNostr'
+import { useWallet } from '../composables/useWallet'
 import SpritePreview from '../components/SpritePreview.vue'
 import HumanPreview from '../components/HumanPreview.vue'
+import WalletConnect from '../components/WalletConnect.vue'
 
 const router = useRouter()
 const { pubkey, bot, profilePicUrl, isLoggedIn, hasExtension, isLoading, login, registerBot, registerHuman, logout } = useNostr()
+const { isWalletConnected, payEntryFee, paymentStatus } = useWallet()
 
 // Steps: 'login' | 'choose-mode' | 'pick-character' | 'name-bot' | 'bot-setup' | 'add-webhook' |
 //         'pick-human-avatar' | 'name-human' | 'human-guide' | 'ready'
@@ -15,6 +18,7 @@ const isHumanMode = ref(false)
 const selectedHumanSeed = ref('baby_fighter_1')
 const error = ref('')
 const isJoining = ref(false)
+const isJoiningRanked = ref(false)
 const queueCount = ref(0)
 let pollHandle: ReturnType<typeof setInterval> | null = null
 
@@ -243,6 +247,30 @@ async function fight() {
   isJoining.value = false
 }
 
+async function fightRanked() {
+  if (!bot.value || isJoiningRanked.value) return
+  isJoiningRanked.value = true
+  error.value = ''
+  try {
+    const paymentId = await payEntryFee(bot.value.id)
+    const res = await fetch(`/api/queue/join-ranked/${bot.value.id}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ paymentId }),
+    })
+    if (res.ok) {
+      const data = await res.json()
+      router.push(`/arena/${data.fightId}`)
+    } else {
+      const data = await res.json()
+      error.value = data.error || 'Ranked match failed.'
+    }
+  } catch (err) {
+    error.value = err instanceof Error ? err.message : 'Ranked fight error.'
+  }
+  isJoiningRanked.value = false
+}
+
 function handleSignOut() {
   logout()
   step.value = 'login'
@@ -787,6 +815,27 @@ function handleSignOut() {
             {{ (isHumanMode || bot.isHuman) ? 'Type your answers live against an AI' : 'Queue up against a real AI bot' }}
           </p>
 
+          <!-- Ranked fight button -->
+          <button
+            v-if="!isHumanMode && !bot.isHuman"
+            class="w-full py-4 bg-neon-cyan/10 border-2 border-neon-cyan text-neon-cyan
+                   font-display font-black text-xl tracking-[0.2em]
+                   hover:bg-neon-cyan/20 transition-all
+                   disabled:opacity-50 disabled:cursor-wait
+                   flex flex-col items-center justify-center gap-1"
+            :disabled="!isWalletConnected || isJoiningRanked"
+            @click="fightRanked"
+          >
+            <span class="flex items-center gap-2">
+              <span v-if="isJoiningRanked" class="w-4 h-4 border-2 border-neon-cyan/30 border-t-neon-cyan rounded-full animate-spin" />
+              {{ isJoiningRanked ? 'PAYING...' : '⚡ FIGHT FOR SATS' }}
+            </span>
+            <span class="text-[9px] font-mono tracking-normal font-normal text-neon-cyan/70">21 SATS — WINNER TAKES ALL</span>
+          </button>
+
+          <!-- Wallet connect (shown if no wallet) -->
+          <WalletConnect v-if="!isHumanMode && !bot.isHuman" />
+
         </div>
 
         <!-- Quick links -->