Achievements System

Gamification and badge collection system for Staxiq users

Overview

Staxiq features a comprehensive achievements system that rewards users for exploring the platform, connecting their wallets, and growing their Bitcoin DeFi portfolios. Users can earn up to 12 unique badges by completing various activities.

How It Works

Achievements are automatically tracked based on user activity. Each badge has specific unlock conditions and is displayed with a unique icon, color, and description.

Badge Categories

Getting Started

Bitcoin Pioneer

Unlock: Connect your Stacks wallet for the first time
Icon: 🔗
Description: Welcome to Bitcoin DeFi!

AI Strategist

Unlock: Generate your first AI DeFi strategy
Icon: 🤖
Description: Let AI optimize your portfolio

On-Chain Activity

On-Chain Thinker

Unlock: Anchor a strategy on Bitcoin via Stacks
Icon: ⛓️
Description: Your strategies are secured by Bitcoin

Bitcoin Maximizer

Unlock: Hold sBTC in your wallet
Icon: ₿
Description: True Bitcoin DeFi with sBTC

Platform Exploration

DeFi Explorer

Unlock: Visit all 5 sections of Staxiq
Icon: 🧭

Yield Hunter

Unlock: Use the Yield Calculator
Icon: 📈

Stacker

Unlock: Check your Stacking Tracker
Icon: 🥩

Health Conscious

Unlock: Check your Wallet Health Score
Icon: 💊

DeFi Analyst

Unlock: Use the Protocol Comparison table
Icon: 🔬

Risk Management

Risk Manager

Unlock: Select Conservative risk profile
Icon: 🛡️
Description: Safety first approach to DeFi

Portfolio Milestones

Century Club

Unlock: Portfolio value exceeds $100
Icon: 💵
Description: Your DeFi journey begins!

Master Badge

Power User

Unlock: Earn 5 or more badges
Icon: ⚡
Description: True Staxiq power user

Complete Badge List

Here’s the full breakdown of all 12 achievements:

Badge	Icon	Condition	Color
Bitcoin Pioneer	🔗	Connected wallet	#F7931A
AI Strategist	🤖	Generated ≥1 strategy	#3B82F6
On-Chain Thinker	⛓️	Anchored ≥1 strategy	#F7931A
DeFi Explorer	🧭	Visited ≥5 pages	#22c55e
Bitcoin Maximizer	₿	Holding sBTC	#F7931A
Risk Manager	🛡️	Conservative profile	#22c55e
Yield Hunter	📈	Used calculator	#8b5cf6
Stacker	🥩	Used stacking tracker	#3B82F6
Health Conscious	💊	Checked health score	#22c55e
DeFi Analyst	🔬	Used comparison tool	#f59e0b
Century Club	💵	Portfolio ≥ $100	#22c55e
Power User	⚡	Earned ≥5 badges	#F7931A

User Interface

Progress Tracking

The Achievements page displays:

• Collection Progress: Visual progress bar showing X/12 badges earned
• Percentage Complete: Real-time completion percentage
• Earned Badges: Full-color cards with glowing effects
• Locked Badges: Grayscale cards showing what’s still available

Visual Design

Earned badges feature:

• ✨ Brand color theming with glow effects
• 🎨 Gradient borders matching badge color
• 🔆 Hover animations (scale up on mouse over)
• 📱 Responsive grid layout (2 cols mobile, 4 cols desktop)

Locked badges appear:

• ⚫ Grayscale with reduced opacity (50%)
• 🔒 Still visible to show what can be earned
• 💭 Description hints at how to unlock

Technical Implementation

Achievement Conditions

Each badge has a JavaScript condition function:

{
  id: 'bitcoin_maximizer',
  icon: '₿',
  title: 'Bitcoin Maximizer',
  description: 'Holding sBTC in your wallet',
  color: '#F7931A',
  condition: (data) => parseFloat(data.sbtcBalance) > 0,
}

Data Tracking

User activity is tracked via a userData object:

const userData = {
  connected: true,              // Wallet connection status
  strategyCount: 3,             // Number of strategies generated
  pagesVisited: 5,              // Unique pages visited
  sbtcBalance: '0.0000',        // sBTC balance in wallet
  riskProfile: 'Balanced',      // Selected risk level
  usedCalculator: true,         // Used yield calculator
  usedStacking: true,           // Used stacking tracker
  usedHealth: true,             // Checked wallet health
  usedCompare: true,            // Used comparison table
  totalUSD: 128.95,             // Total portfolio value
};

Badge Calculation

Achievements are calculated dynamically:

const earned = ALL_BADGES.filter(b => b.condition({
  ...userData,
  badgeCount: ALL_BADGES.filter(b2 => b2.condition(userData)).length,
}));

const locked = ALL_BADGES.filter(b => !b.condition({
  ...userData,
  badgeCount: earned.length,
}));

The badgeCount is recursively calculated to properly unlock the “Power User” badge when 5+ badges are earned.

Theme Support

The achievements page adapts to Staxiq’s light/dark theme:

Dark Theme

• Background: #0d1117
• Cards: #141c2e
• Borders: #1e2d4a
• Text: #f0f4ff

Light Theme

• Background: #ffffff
• Cards: #f8faff
• Borders: #dde5f5
• Text: #0a0e1a

Future Enhancements

Social Sharing

Share earned badges on Twitter/X with custom graphics

Leaderboards

Global and friend-based achievement leaderboards

Rare Badges

Limited-time or special event badges

NFT Integration

Mint achievement badges as Stacks NFTs

Related Features

Portfolio Dashboard

Track your DeFi positions and progress

AI Copilot

Generate strategies to earn AI Strategist badge