UNPKG

@nosana/kit

Version:

Nosana KIT

141 lines (109 loc) • 6.33 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
# Nosana SDK Browser Playground - Features This interactive documentation site provides a comprehensive testing environment for the Nosana SDK with the following features: ## 🎯 Core Features ### 1. **Interactive SDK Testing** - Test all major SDK functions through a user-friendly web interface - No need to write code - just click buttons and see results - Perfect for developers learning the SDK or testing specific functionality ### 2. **Network Management** - **Mainnet/Devnet Switching**: Easily switch between networks with a dropdown - **Connection Status**: Real-time connection indicator - **Automatic Reinitialization**: SDK automatically reinitializes when switching networks ### 3. **Job Operations** - **Individual Job Retrieval**: Get detailed information about specific jobs by address - **Bulk Job Fetching**: Retrieve multiple jobs with optional filtering - **State Filtering**: Filter jobs by state (Queued, Running, Stopped, Done) - **Limit Control**: Control how many jobs to fetch (1-100) ### 4. **Market Operations** - **Market Discovery**: Retrieve all available markets - **Market Details**: View pricing, timeouts, and configuration - **Market Monitoring**: Real-time updates for market changes ### 5. **Real-time Monitoring** - **WebSocket Subscriptions**: Live updates for account changes - **Multi-Account Types**: Monitor jobs, runs, and markets simultaneously - **Automatic Reconnection**: Handles connection failures gracefully - **Error Reporting**: Clear error messages and recovery ## 🖥️ User Interface Features ### 1. **Terminal-style Output** - **Color-coded Logs**: Different colors for info, success, error, and warning messages - **Timestamps**: Every log entry includes a timestamp - **Auto-scroll**: Optional automatic scrolling to latest entries - **Log Management**: Clear logs button for fresh starts ### 2. **Responsive Design** - **Mobile-friendly**: Works on phones, tablets, and desktops - **Grid Layout**: Adaptive layout that works on all screen sizes - **Modern UI**: Clean, professional interface using Tailwind CSS ### 3. **Interactive Controls** - **Form Validation**: Input validation and error handling - **Loading States**: Visual feedback during operations - **Disabled States**: Buttons disabled during loading to prevent conflicts - **Status Indicators**: Visual indicators for connection and monitoring status ## 🔧 Technical Features ### 1. **Modern Web Technologies** - **Nuxt 3**: Latest Vue.js framework for optimal performance - **Vue 3 Composition API**: Modern reactive programming - **TypeScript Support**: Full type safety and IntelliSense - **Hot Module Replacement**: Instant updates during development ### 2. **Blockchain Integration** - **Solana SDK Integration**: Full compatibility with Solana blockchain - **WASM Support**: WebAssembly support for cryptographic operations - **Address Validation**: Proper Solana address handling - **Error Handling**: Comprehensive blockchain error handling ### 3. **Development Experience** - **Fast Builds**: Optimized build process with Vite - **Development Server**: Hot reload for rapid development - **Dependency Optimization**: Pre-bundled dependencies for faster loading - **SSR Disabled**: Client-side rendering for better SDK compatibility ## 📊 Monitoring Capabilities ### 1. **Account Monitoring** - **Job Accounts**: Monitor job state changes, node assignments, and completion - **Run Accounts**: Track job execution and node performance - **Market Accounts**: Watch for pricing and configuration changes ### 2. **Real-time Updates** - **Live Data**: Updates appear immediately as they happen on-chain - **Detailed Information**: Full account data with formatted display - **Historical View**: All updates are logged and preserved during session ### 3. **Error Handling** - **Connection Recovery**: Automatic reconnection on WebSocket failures - **Error Classification**: Different error types with appropriate handling - **User Feedback**: Clear error messages and recovery suggestions ## 🎨 User Experience Features ### 1. **Intuitive Interface** - **Logical Grouping**: Related functions grouped in clear sections - **Progressive Disclosure**: Advanced options available but not overwhelming - **Visual Hierarchy**: Clear information hierarchy with proper typography ### 2. **Helpful Defaults** - **Example Data**: Pre-filled example job addresses for testing - **Sensible Limits**: Default limits that work well for most use cases - **Network Selection**: Starts with devnet for safer testing ### 3. **Documentation Integration** - **Inline Help**: Helpful descriptions and tooltips - **Example Usage**: Clear examples of how to use each feature - **Troubleshooting**: Built-in error handling and user guidance ## 🚀 Performance Features ### 1. **Optimized Loading** - **Dynamic Imports**: SDK loaded only when needed - **Code Splitting**: Efficient bundle splitting for faster initial load - **Dependency Optimization**: Pre-bundled common dependencies ### 2. **Efficient Updates** - **Reactive State**: Efficient state management with Vue 3 reactivity - **Minimal Re-renders**: Optimized component updates - **Memory Management**: Proper cleanup of WebSocket connections ### 3. **Browser Compatibility** - **Modern Browsers**: Optimized for Chrome, Firefox, Safari, Edge - **WebSocket Support**: Fallback handling for connection issues - **WASM Support**: WebAssembly for cryptographic operations ## 📱 Accessibility Features ### 1. **Keyboard Navigation** - **Tab Order**: Logical tab order through interface elements - **Keyboard Shortcuts**: Standard keyboard interactions - **Focus Management**: Clear focus indicators ### 2. **Screen Reader Support** - **Semantic HTML**: Proper HTML structure for screen readers - **ARIA Labels**: Appropriate ARIA labels for interactive elements - **Status Updates**: Screen reader announcements for status changes ### 3. **Visual Accessibility** - **Color Contrast**: High contrast colors for readability - **Font Sizes**: Readable font sizes across all devices - **Visual Indicators**: Multiple ways to convey information (not just color) This playground serves as both a learning tool for developers new to the Nosana SDK and a testing environment for experienced developers working with the platform.