+ {/* Progress bar */}
+
-
- {step.title}
-
-
- {step.content}
-
+
+ {/* Header */}
+
+
+
+ Step {stepIndex + 1} of {totalSteps}
+
+
+ {step.title}
+
+
+
+
+
+ {/* Content */}
+
+ {step.content}
+
+
+ {/* Interactive hint */}
+ {step.interactiveHint && (
+
+
+ ๐ก Pro Tip
+
+
+ {step.interactiveHint}
+
+
+ )}
+
+ {/* Action hint */}
+ {step.action && (
+
+
+ Try it now:
+
+
+ {step.action}
+
+
+ )}
- {/* Progress dots */}
-
- {Array.from({ length: totalSteps }).map((_, i) => (
-
- ))}
-
+ onMouseOver={(e) => {
+ e.currentTarget.style.borderColor = 'var(--accent, #6366f1)';
+ e.currentTarget.style.background = 'var(--accent, #6366f1)15';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.borderColor = 'var(--border, #334155)';
+ e.currentTarget.style.background = 'var(--bg-secondary, #0f172a)';
+ }}
+ >
+
+ Watch Video Tutorial
+
+
+ )}
- {/* Navigation */}
-
- {stepIndex > 0 && (
-
+
+
);
}
-
-function btnStyle(variant) {
- const base = {
- display: 'flex', alignItems: 'center', gap: '4px',
- padding: '6px 12px', borderRadius: '6px', fontSize: '13px',
- fontWeight: 600, cursor: 'pointer', border: 'none',
- };
- return variant === 'primary'
- ? { ...base, background: 'var(--accent, #6366f1)', color: '#fff' }
- : { ...base, background: 'var(--bg-secondary, #0f172a)', color: 'var(--text-secondary, #cbd5e1)' };
-}
diff --git a/src/components/tutorial/VideoTutorialLibrary.jsx b/src/components/tutorial/VideoTutorialLibrary.jsx
new file mode 100644
index 00000000..2ecbe73a
--- /dev/null
+++ b/src/components/tutorial/VideoTutorialLibrary.jsx
@@ -0,0 +1,359 @@
+import React, { useState } from 'react';
+import { PlayCircle, ExternalLink, Clock, Zap, BookOpen, Search, Filter } from 'lucide-react';
+import tutorialSystem from '../../lib/tutorialSystem';
+
+/**
+ * VideoTutorialLibrary โ Browse and watch video tutorials
+ * Provides a gallery view with filtering and search
+ */
+export default function VideoTutorialLibrary({ onClose }) {
+ const [searchQuery, setSearchQuery] = useState('');
+ const [selectedCategory, setSelectedCategory] = useState('all');
+ const [selectedDifficulty, setSelectedDifficulty] = useState('all');
+
+ const tours = tutorialSystem.getTours();
+ const categories = ['all', ...tutorialSystem.getCategories()];
+ const difficulties = ['all', 'beginner', 'intermediate', 'advanced'];
+
+ // Filter tours
+ const filteredTours = tours.filter(tour => {
+ const matchesSearch = searchQuery === '' ||
+ tour.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ tour.description.toLowerCase().includes(searchQuery.toLowerCase());
+
+ const matchesCategory = selectedCategory === 'all' || tour.category === selectedCategory;
+ const matchesDifficulty = selectedDifficulty === 'all' || tour.difficulty === selectedDifficulty;
+
+ return matchesSearch && matchesCategory && matchesDifficulty;
+ });
+
+ const difficultyColors = {
+ beginner: '#22c55e',
+ intermediate: '#f59e0b',
+ advanced: '#ef4444',
+ };
+
+ return (
+
+
+ {/* Header */}
+
+
+
+
+ ๐น Video Tutorial Library
+
+
+ Watch step-by-step guides for all dashboard features
+
+
+
+
+
+ {/* Search and filters */}
+
+ {/* Search */}
+
+
+ setSearchQuery(e.target.value)}
+ style={{
+ width: '100%',
+ padding: '8px 12px 8px 36px',
+ background: 'var(--bg-secondary, #0f172a)',
+ border: '1px solid var(--border, #334155)',
+ borderRadius: '8px',
+ color: 'var(--text-primary, #f1f5f9)',
+ fontSize: '13px',
+ }}
+ />
+
+
+ {/* Category filter */}
+
+
+ {/* Difficulty filter */}
+
+
+
+
+ {/* Video grid */}
+
+ {filteredTours.length === 0 ? (
+
+
+
No tutorials found matching your filters
+
+ ) : (
+
+ {filteredTours.map(tour => {
+ const isCompleted = tutorialSystem.isCompleted(tour.id);
+
+ return (
+
{
+ e.currentTarget.style.transform = 'translateY(-2px)';
+ e.currentTarget.style.boxShadow = '0 8px 24px rgba(0,0,0,0.4)';
+ }}
+ onMouseOut={(e) => {
+ e.currentTarget.style.transform = 'translateY(0)';
+ e.currentTarget.style.boxShadow = 'none';
+ }}
+ >
+ {/* Thumbnail */}
+
+
{tour.thumbnail}
+
+ {tour.estimatedTime}
+
+ {isCompleted && (
+
+ โ Completed
+
+ )}
+
e.currentTarget.style.opacity = '1'}
+ onMouseOut={(e) => e.currentTarget.style.opacity = '0'}
+ >
+
+
+
+
+ {/* Content */}
+
+
+ {tour.title}
+
+
+ {tour.description}
+
+
+ {/* Meta info */}
+
+
+
+ {tour.steps.length} steps
+
+
+ {tour.difficulty}
+
+
+
+ {/* Watch button */}
+
+
+ Watch Video
+
+
+
+
+ );
+ })}
+
+ )}
+
+
+ {/* Footer */}
+
+
+ Found {filteredTours.length} tutorial{filteredTours.length !== 1 ? 's' : ''}
+
+
+
+
+ );
+}
diff --git a/src/components/tutorial/index.js b/src/components/tutorial/index.js
index 0ee1418b..88d9b4fe 100644
--- a/src/components/tutorial/index.js
+++ b/src/components/tutorial/index.js
@@ -2,3 +2,5 @@ export { default as GuidedTour } from './GuidedTour';
export { default as TourTooltip } from './TourTooltip';
export { default as ContextualHelp } from './ContextualHelp';
export { default as TourLauncher } from './TourLauncher';
+export { default as VideoTutorialLibrary } from './VideoTutorialLibrary';
+export { default as ProgressDashboard } from './ProgressDashboard';
diff --git a/src/lib/tutorialSystem.js b/src/lib/tutorialSystem.js
index 7f788e59..fda799d2 100644
--- a/src/lib/tutorialSystem.js
+++ b/src/lib/tutorialSystem.js
@@ -1,5 +1,6 @@
/**
- * Tutorial System โ manages guided tours, step state, and contextual help
+ * Tutorial System โ manages guided tours, step state, contextual help, and video walkthroughs
+ * Enhanced with progress tracking, interactive elements, and multimedia support
*/
// โโโ Tour definitions โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
@@ -9,6 +10,12 @@ export const TOURS = {
id: 'welcome',
title: 'Welcome to Stellar Dashboard',
description: 'A quick tour of the main features',
+ category: 'Getting Started',
+ estimatedTime: '3 min',
+ difficulty: 'beginner',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-welcome',
+ thumbnail: '๐',
+ prerequisites: [],
steps: [
{
id: 'connect',
@@ -16,6 +23,8 @@ export const TOURS = {
title: 'Connect Your Wallet',
content: 'Start by entering a Stellar public key or connecting Freighter wallet to explore account data.',
placement: 'right',
+ action: 'Try clicking the Connect button to see it in action!',
+ interactiveHint: 'You can use the Testnet to experiment safely.',
},
{
id: 'network',
@@ -23,6 +32,8 @@ export const TOURS = {
title: 'Switch Networks',
content: 'Toggle between Testnet and Mainnet. Use Testnet for development โ it\'s free and safe.',
placement: 'bottom',
+ action: 'Click the network selector and choose Testnet',
+ interactiveHint: 'Testnet is perfect for learning without spending real XLM!',
},
{
id: 'sidebar',
@@ -30,6 +41,8 @@ export const TOURS = {
title: 'Navigation',
content: 'Access all dashboard sections here: account details, transactions, contracts, DEX, and more.',
placement: 'right',
+ action: 'Explore the different sections available',
+ interactiveHint: 'Each section is designed for specific Stellar operations.',
},
{
id: 'overview',
@@ -37,14 +50,22 @@ export const TOURS = {
title: 'Account Overview',
content: 'See your balances, recent activity, and portfolio value at a glance.',
placement: 'bottom',
+ action: 'Check out the overview to see account information',
+ interactiveHint: 'This is your dashboard home - bookmark it!',
},
],
},
transactions: {
id: 'transactions',
- title: 'Transaction Builder',
- description: 'Learn to build and sign transactions',
+ title: 'Building & Signing Transactions',
+ description: 'Learn to build and sign transactions on Stellar',
+ category: 'Core Features',
+ estimatedTime: '5 min',
+ difficulty: 'intermediate',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-transactions',
+ thumbnail: '๐ธ',
+ prerequisites: ['welcome'],
steps: [
{
id: 'tx-builder',
@@ -52,6 +73,8 @@ export const TOURS = {
title: 'Build Transactions',
content: 'Construct any Stellar operation โ payments, trustlines, offers โ with a visual builder.',
placement: 'top',
+ action: 'Try building a simple payment transaction',
+ interactiveHint: 'Start with payment operations - they\'re the most common!',
},
{
id: 'tx-signer',
@@ -59,6 +82,8 @@ export const TOURS = {
title: 'Sign & Submit',
content: 'Sign transactions with your secret key or hardware wallet, then submit to the network.',
placement: 'top',
+ action: 'Connect your wallet to enable signing',
+ interactiveHint: 'Always use Testnet for practice!',
},
{
id: 'tx-simulator',
@@ -66,6 +91,8 @@ export const TOURS = {
title: 'Simulate First',
content: 'Always simulate before submitting โ catch errors and preview fees without spending XLM.',
placement: 'top',
+ action: 'Click simulate to test your transaction',
+ interactiveHint: 'Simulation is free and helps prevent costly mistakes!',
},
],
},
@@ -73,7 +100,13 @@ export const TOURS = {
contracts: {
id: 'contracts',
title: 'Soroban Smart Contracts',
- description: 'Interact with Soroban contracts',
+ description: 'Interact with Soroban smart contracts',
+ category: 'Advanced',
+ estimatedTime: '7 min',
+ difficulty: 'advanced',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-contracts',
+ thumbnail: '๐',
+ prerequisites: ['welcome', 'transactions'],
steps: [
{
id: 'contract-id',
@@ -81,6 +114,8 @@ export const TOURS = {
title: 'Enter Contract ID',
content: 'Paste a Soroban contract address to inspect its ABI and invoke functions.',
placement: 'bottom',
+ action: 'Enter a contract address starting with C...',
+ interactiveHint: 'Contract addresses always start with C on Stellar',
},
{
id: 'contract-abi',
@@ -88,6 +123,8 @@ export const TOURS = {
title: 'Browse the ABI',
content: 'View all contract functions, their parameters, and return types.',
placement: 'right',
+ action: 'Explore the available contract functions',
+ interactiveHint: 'The ABI shows all available methods you can call',
},
{
id: 'contract-invoke',
@@ -95,6 +132,172 @@ export const TOURS = {
title: 'Invoke Functions',
content: 'Call contract functions directly from the dashboard with automatic XDR encoding.',
placement: 'top',
+ action: 'Try invoking a read-only function first',
+ interactiveHint: 'Read-only functions don\'t cost XLM!',
+ },
+ ],
+ },
+
+ dex: {
+ id: 'dex',
+ title: 'Decentralized Exchange (DEX)',
+ description: 'Trade assets on Stellar\'s built-in DEX',
+ category: 'Trading',
+ estimatedTime: '6 min',
+ difficulty: 'intermediate',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-dex',
+ thumbnail: '๐',
+ prerequisites: ['welcome'],
+ steps: [
+ {
+ id: 'dex-overview',
+ target: '[data-tour="dex-explorer"]',
+ title: 'DEX Explorer',
+ content: 'View order books, spreads, and recent trades for any asset pair on the Stellar DEX.',
+ placement: 'top',
+ action: 'Select an asset pair to view the order book',
+ interactiveHint: 'The DEX is built into Stellar - no third parties needed!',
+ },
+ {
+ id: 'order-book',
+ target: '[data-tour="order-book"]',
+ title: 'Order Book',
+ content: 'See all bids and asks with real-time depth visualization.',
+ placement: 'right',
+ action: 'Explore the order book depth chart',
+ interactiveHint: 'Green bars are bids, red bars are asks',
+ },
+ {
+ id: 'path-payments',
+ target: '[data-tour="path-explorer"]',
+ title: 'Path Payments',
+ content: 'Find the best exchange rates using Stellar\'s pathfinding algorithm.',
+ placement: 'bottom',
+ action: 'Try finding paths between two assets',
+ interactiveHint: 'Stellar finds the best rate automatically!',
+ },
+ ],
+ },
+
+ portfolio: {
+ id: 'portfolio',
+ title: 'Portfolio Analytics',
+ description: 'Track your portfolio value and performance',
+ category: 'Analytics',
+ estimatedTime: '4 min',
+ difficulty: 'beginner',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-portfolio',
+ thumbnail: '๐ฐ',
+ prerequisites: ['welcome'],
+ steps: [
+ {
+ id: 'portfolio-value',
+ target: '[data-tour="portfolio-value"]',
+ title: 'Portfolio Overview',
+ content: 'View your total portfolio value in USD with 24h change tracking.',
+ placement: 'top',
+ action: 'Connect an account to see portfolio value',
+ interactiveHint: 'Prices are fetched from CoinGecko in real-time',
+ },
+ {
+ id: 'asset-breakdown',
+ target: '[data-tour="asset-breakdown"]',
+ title: 'Asset Breakdown',
+ content: 'See per-asset values and allocations with price charts.',
+ placement: 'bottom',
+ action: 'Click on any asset for detailed information',
+ interactiveHint: 'Hover over assets to see more details',
+ },
+ {
+ id: 'comparison',
+ target: '[data-tour="account-comparison"]',
+ title: 'Compare Accounts',
+ content: 'Compare up to 5 accounts side-by-side to analyze portfolios.',
+ placement: 'right',
+ action: 'Add accounts to compare their holdings',
+ interactiveHint: 'Great for managing multiple accounts!',
+ },
+ ],
+ },
+
+ alerts: {
+ id: 'alerts',
+ title: 'Setting Up Alerts',
+ description: 'Configure notifications for account activity',
+ category: 'Monitoring',
+ estimatedTime: '5 min',
+ difficulty: 'intermediate',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-alerts',
+ thumbnail: '๐',
+ prerequisites: ['welcome'],
+ steps: [
+ {
+ id: 'alert-rules',
+ target: '[data-tour="alert-rules"]',
+ title: 'Alert Rules',
+ content: 'Create custom rules to monitor balance changes, transactions, and specific operations.',
+ placement: 'top',
+ action: 'Click "Create Rule" to start',
+ interactiveHint: 'You can create multiple rules per account',
+ },
+ {
+ id: 'rule-config',
+ target: '[data-tour="rule-config"]',
+ title: 'Configure Rules',
+ content: 'Set thresholds, operation types, and monitoring frequency.',
+ placement: 'right',
+ action: 'Try setting a balance threshold alert',
+ interactiveHint: 'Rules are evaluated in real-time!',
+ },
+ {
+ id: 'notifications',
+ target: '[data-tour="notification-center"]',
+ title: 'Notification Center',
+ content: 'View all triggered alerts and manage notification preferences.',
+ placement: 'bottom',
+ action: 'Enable browser notifications for real-time alerts',
+ interactiveHint: 'Notifications persist across browser sessions',
+ },
+ ],
+ },
+
+ wallet: {
+ id: 'wallet',
+ title: 'Wallet Integration',
+ description: 'Connect hardware wallets and Freighter',
+ category: 'Security',
+ estimatedTime: '4 min',
+ difficulty: 'beginner',
+ videoUrl: 'https://player.vimeo.com/video/placeholder-wallet',
+ thumbnail: '๐',
+ prerequisites: [],
+ steps: [
+ {
+ id: 'wallet-connect',
+ target: '[data-tour="wallet-connect"]',
+ title: 'Connect Wallet',
+ content: 'Link your Freighter extension or Ledger hardware wallet for secure signing.',
+ placement: 'right',
+ action: 'Click Connect and choose your wallet type',
+ interactiveHint: 'Hardware wallets offer the best security!',
+ },
+ {
+ id: 'wallet-freighter',
+ target: '[data-tour="freighter-option"]',
+ title: 'Freighter Wallet',
+ content: 'The official Stellar browser extension wallet - easy and secure.',
+ placement: 'bottom',
+ action: 'Install Freighter from the Chrome Web Store',
+ interactiveHint: 'Freighter is recommended for most users',
+ },
+ {
+ id: 'wallet-ledger',
+ target: '[data-tour="ledger-option"]',
+ title: 'Ledger Hardware Wallet',
+ content: 'Use your Ledger device for maximum security with cold storage.',
+ placement: 'top',
+ action: 'Connect your Ledger and open the Stellar app',
+ interactiveHint: 'Best for large amounts or long-term storage',
},
],
},
@@ -138,11 +341,63 @@ export const HELP_ENTRIES = {
content: 'Require multiple signers to authorize a transaction. Set thresholds for low, medium, and high operations.',
learnMore: 'https://developers.stellar.org/docs/learn/encyclopedia/security/signatures-multisig',
},
+ 'horizon': {
+ title: 'Horizon API',
+ content: 'Horizon is the REST API for interacting with the Stellar network. It provides endpoints for accounts, transactions, and operations.',
+ learnMore: 'https://developers.stellar.org/docs/data/horizon',
+ },
+ 'sdex': {
+ title: 'Stellar DEX',
+ content: 'The Stellar Decentralized Exchange (SDEX) is built into the protocol, allowing trustless peer-to-peer trading.',
+ learnMore: 'https://developers.stellar.org/docs/learn/encyclopedia/sdex',
+ },
+ 'claimable-balance': {
+ title: 'Claimable Balance',
+ content: 'A claimable balance allows you to send assets to an account that doesn\'t exist yet or doesn\'t have a trustline.',
+ learnMore: 'https://developers.stellar.org/docs/learn/encyclopedia/claimable-balances',
+ },
+};
+
+// โโโ Achievement and Progress Tracking โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
+
+export const ACHIEVEMENTS = {
+ 'first-tour': {
+ id: 'first-tour',
+ title: 'Getting Started',
+ description: 'Completed your first tutorial',
+ icon: '๐',
+ },
+ 'tour-master': {
+ id: 'tour-master',
+ title: 'Tour Master',
+ description: 'Completed all tutorials',
+ icon: '๐',
+ },
+ 'transaction-builder': {
+ id: 'transaction-builder',
+ title: 'Transaction Builder',
+ description: 'Learned to build transactions',
+ icon: 'โก',
+ },
+ 'contract-expert': {
+ id: 'contract-expert',
+ title: 'Contract Expert',
+ description: 'Mastered Soroban contracts',
+ icon: '๐',
+ },
+ 'dex-trader': {
+ id: 'dex-trader',
+ title: 'DEX Trader',
+ description: 'Explored the Stellar DEX',
+ icon: '๐',
+ },
};
// โโโ Storage helpers โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
const STORAGE_KEY = 'tutorial_state';
+const PROGRESS_KEY = 'tutorial_progress';
+const ACHIEVEMENTS_KEY = 'tutorial_achievements';
function loadState() {
try {
@@ -158,6 +413,34 @@ function saveState(state) {
} catch { /* ignore */ }
}
+function loadProgress() {
+ try {
+ return JSON.parse(localStorage.getItem(PROGRESS_KEY) || '{}');
+ } catch {
+ return {};
+ }
+}
+
+function saveProgress(progress) {
+ try {
+ localStorage.setItem(PROGRESS_KEY, JSON.stringify(progress));
+ } catch { /* ignore */ }
+}
+
+function loadAchievements() {
+ try {
+ return JSON.parse(localStorage.getItem(ACHIEVEMENTS_KEY) || '[]');
+ } catch {
+ return [];
+ }
+}
+
+function saveAchievements(achievements) {
+ try {
+ localStorage.setItem(ACHIEVEMENTS_KEY, JSON.stringify(achievements));
+ } catch { /* ignore */ }
+}
+
// โโโ Public API โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
export const tutorialSystem = {
@@ -171,6 +454,12 @@ export const tutorialSystem = {
const state = loadState();
state[`completed_${tourId}`] = Date.now();
saveState(state);
+
+ // Update progress
+ this.updateProgress(tourId, 100);
+
+ // Check for achievements
+ this.checkAchievements();
},
/** Reset a tour so it can be replayed */
@@ -178,11 +467,17 @@ export const tutorialSystem = {
const state = loadState();
delete state[`completed_${tourId}`];
saveState(state);
+
+ // Reset progress
+ const progress = loadProgress();
+ delete progress[tourId];
+ saveProgress(progress);
},
/** Reset all tours */
resetAll() {
saveState({});
+ saveProgress({});
},
/** Get saved step index for a tour */
@@ -195,6 +490,39 @@ export const tutorialSystem = {
const state = loadState();
state[`step_${tourId}`] = stepIndex;
saveState(state);
+
+ // Update progress percentage
+ const tour = this.getTour(tourId);
+ if (tour) {
+ const progress = Math.round((stepIndex / tour.steps.length) * 100);
+ this.updateProgress(tourId, progress);
+ }
+ },
+
+ /** Update tour progress */
+ updateProgress(tourId, percentage) {
+ const progress = loadProgress();
+ progress[tourId] = {
+ percentage,
+ lastUpdated: Date.now(),
+ };
+ saveProgress(progress);
+ },
+
+ /** Get progress for a tour */
+ getProgress(tourId) {
+ return loadProgress()[tourId] || { percentage: 0, lastUpdated: null };
+ },
+
+ /** Get overall progress across all tours */
+ getOverallProgress() {
+ const tours = this.getTours();
+ const completed = tours.filter(t => this.isCompleted(t.id)).length;
+ return {
+ completed,
+ total: tours.length,
+ percentage: Math.round((completed / tours.length) * 100),
+ };
},
/** Get all available tours */
@@ -202,6 +530,17 @@ export const tutorialSystem = {
return Object.values(TOURS);
},
+ /** Get tours by category */
+ getToursByCategory(category) {
+ return this.getTours().filter(t => t.category === category);
+ },
+
+ /** Get all categories */
+ getCategories() {
+ const categories = new Set(this.getTours().map(t => t.category));
+ return Array.from(categories);
+ },
+
/** Get a specific tour */
getTour(tourId) {
return TOURS[tourId] ?? null;
@@ -212,11 +551,95 @@ export const tutorialSystem = {
return HELP_ENTRIES[topic] ?? null;
},
+ /** Get all help entries */
+ getAllHelp() {
+ return Object.values(HELP_ENTRIES);
+ },
+
/** Check if this is a first-time user (no tours completed) */
isFirstVisit() {
const state = loadState();
return !Object.keys(state).some(k => k.startsWith('completed_'));
},
+
+ /** Check and award achievements */
+ checkAchievements() {
+ const achievements = loadAchievements();
+ const completedTours = this.getTours().filter(t => this.isCompleted(t.id));
+
+ // First tour achievement
+ if (completedTours.length === 1 && !achievements.includes('first-tour')) {
+ achievements.push('first-tour');
+ }
+
+ // All tours completed
+ if (completedTours.length === this.getTours().length && !achievements.includes('tour-master')) {
+ achievements.push('tour-master');
+ }
+
+ // Specific tour achievements
+ if (this.isCompleted('transactions') && !achievements.includes('transaction-builder')) {
+ achievements.push('transaction-builder');
+ }
+
+ if (this.isCompleted('contracts') && !achievements.includes('contract-expert')) {
+ achievements.push('contract-expert');
+ }
+
+ if (this.isCompleted('dex') && !achievements.includes('dex-trader')) {
+ achievements.push('dex-trader');
+ }
+
+ saveAchievements(achievements);
+ return achievements;
+ },
+
+ /** Get all earned achievements */
+ getAchievements() {
+ const earned = loadAchievements();
+ return earned.map(id => ACHIEVEMENTS[id]).filter(Boolean);
+ },
+
+ /** Get recommended next tour based on prerequisites and progress */
+ getRecommendedTour() {
+ const tours = this.getTours();
+ const completed = tours.filter(t => this.isCompleted(t.id)).map(t => t.id);
+
+ // Find tours where all prerequisites are met but tour is not completed
+ const available = tours.filter(tour => {
+ if (this.isCompleted(tour.id)) return false;
+ if (!tour.prerequisites || tour.prerequisites.length === 0) return true;
+ return tour.prerequisites.every(prereq => completed.includes(prereq));
+ });
+
+ // Return first available tour, prioritizing beginner difficulty
+ return available.sort((a, b) => {
+ const difficultyOrder = { beginner: 1, intermediate: 2, advanced: 3 };
+ return difficultyOrder[a.difficulty] - difficultyOrder[b.difficulty];
+ })[0] || null;
+ },
+
+ /** Track time spent on tutorials */
+ startTimer(tourId) {
+ const state = loadState();
+ state[`timer_${tourId}`] = Date.now();
+ saveState(state);
+ },
+
+ stopTimer(tourId) {
+ const state = loadState();
+ const startTime = state[`timer_${tourId}`];
+ if (startTime) {
+ const duration = Date.now() - startTime;
+ state[`duration_${tourId}`] = (state[`duration_${tourId}`] || 0) + duration;
+ delete state[`timer_${tourId}`];
+ saveState(state);
+ }
+ },
+
+ getDuration(tourId) {
+ return loadState()[`duration_${tourId}`] || 0;
+ },
};
export default tutorialSystem;