From 67fb3a203e503b38658348699cb502f9c778c2a7 Mon Sep 17 00:00:00 2001 From: rizary Date: Mon, 23 Jun 2025 09:03:39 +0700 Subject: [PATCH] feat: implement CEX analysis cards and real-time token monitoring - Add TokenCard and CexAnalysisCard components for displaying token data - Implement real-time Redis event streaming for token updates - Add environment-based configuration system for dev/prod Redis servers - Create comprehensive hunting ground dashboard with card management - Add individual and bulk card removal functionality - Implement browser integration for token details viewing - Add timestamp utilities and proper type handling for Redis events - Create production-ready configuration with 154.38.185.112 Redis server - Add comprehensive documentation in README.md and CONTRIBUTORS.md - Restructure project architecture with proper Electron-Vue integration BREAKING CHANGE: Redis configuration now uses environment-based settings --- .config/nuxt.ts | 71 ++- .vscode/settings.json | 30 +- CONTRIBUTORS.md | 409 +++++++++++++ README.md | 320 +++++----- app.config.ts | 169 +++++ app.vue | 26 + app/app.vue | 38 +- app/assets/css/main.css | 13 +- app/components/AppNavbar.vue | 39 +- app/components/AppSidebar.vue | 4 +- app/components/CexAnalysisCard.vue | 538 ++++++++++++++++ app/components/ThemeSwitcher.vue | 56 +- app/components/TitleBar.vue | 3 +- app/components/TokenCard.vue | 395 ++++++++++++ app/composables/auth-guard.ts | 25 - app/composables/navigation.ts | 3 + app/composables/useRealTimeUpdate.ts | 57 ++ app/composables/useZiyaConfig.ts | 117 ++++ app/layouts/auth.vue | 4 + app/layouts/default.vue | 7 +- app/pages/dashboard.vue | 4 + app/pages/hunting-ground.vue | 712 +++++++++++---------- app/pages/index.vue | 70 ++- app/pages/login.vue | 73 ++- app/pages/profile.vue | 6 +- app/stores/app.ts | 92 +-- app/stores/theme.ts | 92 +-- app/utils/address.ts | 88 +++ app/utils/ipfs.ts | 235 +++++++ architecture/IPFS_RETRY_IMPLEMENTATION.md | 283 +++++++++ electron/config/environment.ts | 63 ++ electron/config/redis.ts | 50 ++ electron/handlers/index.ts | 4 + electron/handlers/ipc-handlers.ts | 28 + electron/handlers/redis-handlers.ts | 66 ++ electron/handlers/window-handlers.ts | 38 ++ electron/main.ts | 167 +---- electron/preload.ts | 12 +- electron/tsconfig.json | 47 ++ electron/utils/index.ts | 2 + electron/utils/redis.ts | 100 +++ electron/utils/window.ts | 124 ++++ eslint.config.mjs | 93 ++- package.json | 13 +- pnpm-lock.yaml | 715 +++++++++++++++++++++- test-ipfs.js | 18 + tsconfig.json | 9 +- types/electron.d.ts | 26 +- types/nuxt.d.ts | 3 + types/redis-events.ts | 75 +++ 50 files changed, 4672 insertions(+), 960 deletions(-) create mode 100644 CONTRIBUTORS.md create mode 100644 app.config.ts create mode 100644 app.vue create mode 100644 app/components/CexAnalysisCard.vue create mode 100644 app/components/TokenCard.vue delete mode 100644 app/composables/auth-guard.ts create mode 100644 app/composables/useRealTimeUpdate.ts create mode 100644 app/composables/useZiyaConfig.ts create mode 100644 app/utils/address.ts create mode 100644 app/utils/ipfs.ts create mode 100644 architecture/IPFS_RETRY_IMPLEMENTATION.md create mode 100644 electron/config/environment.ts create mode 100644 electron/config/redis.ts create mode 100644 electron/handlers/index.ts create mode 100644 electron/handlers/ipc-handlers.ts create mode 100644 electron/handlers/redis-handlers.ts create mode 100644 electron/handlers/window-handlers.ts create mode 100644 electron/tsconfig.json create mode 100644 electron/utils/index.ts create mode 100644 electron/utils/redis.ts create mode 100644 electron/utils/window.ts create mode 100644 test-ipfs.js create mode 100644 types/nuxt.d.ts create mode 100644 types/redis-events.ts diff --git a/.config/nuxt.ts b/.config/nuxt.ts index c433e28..d80a753 100644 --- a/.config/nuxt.ts +++ b/.config/nuxt.ts @@ -1,26 +1,65 @@ import tailwindcss from '@tailwindcss/vite' +import { defineNuxtConfig } from 'nuxt/config' +import { getConfig } from '../app.config' + +const config = getConfig() export default defineNuxtConfig({ modules: [ '@nuxt/eslint', '@pinia/nuxt', + '@nuxt/icon', ], ssr: false, devtools: { enabled: true }, + + devServer: { + port: config.development.nuxt.port, + host: config.development.nuxt.host, + }, + + runtimeConfig: { + // Private keys (only available on server-side) + redis: { + host: config.redis.host, + port: config.redis.port, + db: config.redis.db, + keyPrefix: config.redis.keyPrefix, + }, + + // Public keys (exposed to client-side) + public: { + app: { + name: config.app.name, + version: config.app.version, + description: config.app.description, + author: config.app.author, + }, + window: config.window, + theme: config.theme, + isDevelopment: process.env.NODE_ENV === 'development', + isElectron: process.env.IS_ELECTRON === 'true', + }, + }, + app: { baseURL: './', cdnURL: './', head: { - title: 'Ziya', + title: config.app.name, meta: [ - { 'http-equiv': 'content-security-policy', 'content': 'script-src \'self\' \'unsafe-inline\'' }, + { name: 'description', content: config.app.description }, + { + 'http-equiv': 'content-security-policy', + 'content': `script-src ${config.security.csp.scriptSrc.join(' ')}; style-src ${config.security.csp.styleSrc.join(' ')}; img-src ${config.security.csp.imgSrc.join(' ')}` + }, ], }, }, css: [ '~/assets/css/main.css', ], - + vite: { plugins: [ tailwindcss(), @@ -31,19 +70,31 @@ export default defineNuxtConfig({ }, }, }, - + postcss: { plugins: { '@tailwindcss/postcss': {}, }, }, - + router: { options: { hashMode: true, }, }, + typescript: { + typeCheck: false, + includeWorkspace: true, + }, + + imports: { + dirs: [ + 'composables/**', + 'stores/**' + ] + }, + future: { compatibilityVersion: 4 }, features: { inlineStyles: false, @@ -54,14 +105,4 @@ export default defineNuxtConfig({ renderJsonPayloads: false, }, compatibilityDate: '2025-05-26', - eslint: { - config: { - stylistic: true, - }, - checker: { - lintOnStart: false, - include: ['**/*.{js,ts,vue,mjs}'], - exclude: ['node_modules', '.nuxt', '.output', 'dist', 'coverage'], - }, - }, }) diff --git a/.vscode/settings.json b/.vscode/settings.json index b7143ff..e0f4d5c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -20,17 +20,29 @@ "**/dist": true, "**/build": true }, - "[javascript]": { - "editor.defaultFormatter": "vscode.typescript-language-features", + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, "javascript.preferences.quoteStyle": "single" }, "[typescript]": { - "editor.defaultFormatter": "vscode.typescript-language-features", - "typescript.preferences.quoteStyle": "single" + "editor.defaultFormatter": "dbaeumer.vscode-eslint", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + }, + "typescript.preferences.quoteStyle": "single", + "typescript.preferences.organizeImports": "off" }, "[vue]": { - "editor.defaultFormatter": "esbenp.prettier-vscode" + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": "explicit" + } }, "files.associations": { "*.css": "tailwindcss" @@ -44,5 +56,11 @@ "editor.defaultFormatter": "vscode.json-language-features", "editor.insertSpaces": true, "editor.tabSize": 2 - } + }, + "eslint.format.enable": true, + "editor.formatOnSave": true, + "typescript.preferences.includePackageJsonAutoImports": "auto", + "typescript.suggest.autoImports": true, + "typescript.updateImportsOnFileMove.enabled": "always", + "typescript.workspaceSymbols.scope": "allOpenProjects", } \ No newline at end of file diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md new file mode 100644 index 0000000..6b7de92 --- /dev/null +++ b/CONTRIBUTORS.md @@ -0,0 +1,409 @@ +# Contributors Guide + +Welcome to the Ziya Token Monitor development team! This guide will help you get up and running quickly with the project. + +## πŸš€ Quick Start for New Developers + +### Prerequisites +Make sure you have these installed: +- **Node.js** >= 18.0.0 +- **pnpm** >= 8.0.0 (package manager) +- **Redis** (for local development) +- **Git** for version control + +### Installation Steps + +1. **Clone the repository**: + ```bash + git clone + cd muhafidh/ziya + ``` + +2. **Install dependencies**: + ```bash + pnpm install + ``` + +3. **Set up Redis** (choose one): + + **Option A: Docker (Recommended)** + ```bash + # Run Redis in Docker container + docker run -d --name bismillahdao-redis -p 6379:6379 redis:alpine + ``` + + **Option B: Local Installation** + ```bash + # Install Redis locally (varies by OS) + # macOS: brew install redis + # Ubuntu: sudo apt install redis-server + # Windows: Use WSL or Redis for Windows + ``` + +4. **Start development**: + ```bash + pnpm run dev + ``` + +The application will start with: +- Nuxt dev server at `http://localhost:3000` +- Electron desktop app will launch automatically +- Hot reload enabled for both frontend and Electron + +## πŸ—οΈ Development Architecture + +### Tech Stack Overview +- **Frontend**: Vue 3 (Vapor Mode), Nuxt 3, TypeScript +- **Desktop**: Electron with secure IPC communication +- **Styling**: TailwindCSS + DaisyUI +- **State Management**: Pinia +- **Backend Integration**: Redis (ioredis) for real-time events +- **Build Tools**: Vite, Electron Forge + +### Project Structure Deep Dive +``` +ziya/ +β”œβ”€β”€ app/ # Nuxt 3 application +β”‚ β”œβ”€β”€ components/ # Vue components +β”‚ β”‚ β”œβ”€β”€ TokenCard.vue # Individual token display cards +β”‚ β”‚ β”œβ”€β”€ CexAnalysisCard.vue # CEX analysis results +β”‚ β”‚ └── ... +β”‚ β”œβ”€β”€ pages/ # Nuxt pages/routes +β”‚ β”‚ └── hunting-ground.vue # Main dashboard +β”‚ β”œβ”€β”€ stores/ # Pinia state management +β”‚ β”œβ”€β”€ utils/ # Utility functions +β”‚ β”‚ β”œβ”€β”€ address.ts # Solana address handling +β”‚ β”‚ β”œβ”€β”€ format.ts # Data formatting +β”‚ β”‚ └── ... +β”‚ └── types/ # TypeScript definitions +β”œβ”€β”€ electron/ # Electron main process +β”‚ β”œβ”€β”€ main.ts # Electron entry point +β”‚ β”œβ”€β”€ config/ # Configuration files +β”‚ β”‚ β”œβ”€β”€ environment.ts # Environment settings +β”‚ β”‚ └── redis.ts # Redis configuration +β”‚ β”œβ”€β”€ handlers/ # Event handlers +β”‚ β”œβ”€β”€ utils/ # Electron utilities +β”‚ β”‚ └── redis.ts # Redis connection logic +β”‚ └── preload.ts # Preload script for IPC +β”œβ”€β”€ types/ # Shared TypeScript types +β”‚ └── redis-events.ts # Redis event definitions +└── .config/ # Configuration files + └── nuxt.ts # Nuxt configuration +``` + +## πŸ”§ Development Workflow + +### Available Scripts +```bash +# Development +pnpm run dev # Start development with hot reload +pnpm run dev:nuxt # Start only Nuxt dev server +pnpm run dev:electron # Start only Electron (requires built Nuxt) + +# Building +pnpm run build # Production build +pnpm run build:dev # Development build +pnpm run build:prod # Production build (explicit) + +# Utilities +pnpm run lint # Run ESLint +pnpm run type-check # TypeScript type checking +``` + +### Environment Configuration + +The application automatically detects the environment and configures Redis accordingly: + +**Development Mode** (`NODE_ENV=development`): +- Redis: `localhost:6379` or `bismillahdao-redis:6379` (Docker) +- Hot reload enabled +- Debug logging active + +**Production Mode** (`NODE_ENV=production`): +- Redis: `154.38.185.112:6379` (production server) +- Optimized builds +- Minimal logging + +### Key Configuration Files +- `electron/config/environment.ts` - Environment-specific settings +- `electron/config/redis.ts` - Redis connection configuration +- `.config/nuxt.ts` - Nuxt configuration +- `package.json` - Build scripts and dependencies + +## 🎯 Core Features & Components + +### Real-time Token Dashboard +**Location**: `app/pages/hunting-ground.vue` +- Displays three columns of token events +- Real-time updates via Redis subscriptions +- Individual and bulk card management + +### Token Cards System +**Components**: +- `TokenCard.vue` - New token creation events +- `CexAnalysisCard.vue` - CEX analysis and max depth events + +**Features**: +- Duration calculation from timestamps +- Creator information display +- Graph visualization with hover tooltips +- Click-to-open in browser functionality +- Individual close buttons and "Clear All" actions + +### Redis Integration +**Location**: `electron/utils/redis.ts` +- Subscribes to channels: `new_token_created`, `token_cex_updated`, `max_depth_reached` +- Handles connection management and error recovery +- Forwards events to renderer process via IPC + +## πŸ› Common Development Issues & Solutions + +### Redis Connection Issues +**Problem**: `ECONNREFUSED` when connecting to Redis +**Solutions**: +1. Ensure Redis is running: `redis-cli ping` +2. Check Docker container: `docker ps | grep redis` +3. Verify port 6379 is not blocked + +### Build Errors +**Problem**: TypeScript compilation errors +**Solutions**: +1. Run type check: `pnpm run type-check` +2. Clear node_modules: `rm -rf node_modules && pnpm install` +3. Check for missing dependencies + +### Hot Reload Not Working +**Problem**: Changes not reflecting in development +**Solutions**: +1. Restart dev server: `Ctrl+C` then `pnpm run dev` +2. Clear Nuxt cache: `rm -rf .nuxt` +3. Check if both Nuxt and Electron processes are running + +## πŸ“ Code Style & Best Practices + +### TypeScript Guidelines +- Use strict type definitions for all Redis events +- Prefer interfaces over types for object shapes +- Use proper error handling with try-catch blocks + +### Vue Component Guidelines +- Use Composition API with ` diff --git a/app/app.vue b/app/app.vue index f299fb5..b08c564 100644 --- a/app/app.vue +++ b/app/app.vue @@ -1,45 +1,15 @@ +/// + \ No newline at end of file diff --git a/app/components/ThemeSwitcher.vue b/app/components/ThemeSwitcher.vue index fb2b2eb..c8de079 100644 --- a/app/components/ThemeSwitcher.vue +++ b/app/components/ThemeSwitcher.vue @@ -10,19 +10,31 @@ > - + - +
-
+
{{ themeStore.currentPaletteName }} P{{ themeStore.currentPalette }}
- - + +
-
+

Choose Color Palette

@@ -44,7 +69,7 @@
@@ -113,7 +146,8 @@ + \ No newline at end of file diff --git a/app/components/TokenCard.vue b/app/components/TokenCard.vue new file mode 100644 index 0000000..53faf71 --- /dev/null +++ b/app/components/TokenCard.vue @@ -0,0 +1,395 @@ + + + + + \ No newline at end of file diff --git a/app/composables/auth-guard.ts b/app/composables/auth-guard.ts deleted file mode 100644 index 057aeef..0000000 --- a/app/composables/auth-guard.ts +++ /dev/null @@ -1,25 +0,0 @@ -export const useAuthGuard = () => { - const appStore = useAppStore(); - const router = useRouter(); - - const requireAuth = () => { - onMounted(() => { - if (!appStore.isAuthenticated) { - router.push('/login'); - } - }); - }; - - const requireGuest = () => { - onMounted(() => { - if (appStore.isAuthenticated) { - router.push('/dashboard'); - } - }); - }; - - return { - requireAuth, - requireGuest, - }; -}; diff --git a/app/composables/navigation.ts b/app/composables/navigation.ts index 7ccd5bb..366f933 100644 --- a/app/composables/navigation.ts +++ b/app/composables/navigation.ts @@ -1,3 +1,6 @@ +import { useRouter } from 'vue-router'; +import { useAppStore } from '../stores/app'; + export const useNavigation = () => { const router = useRouter(); const appStore = useAppStore(); diff --git a/app/composables/useRealTimeUpdate.ts b/app/composables/useRealTimeUpdate.ts new file mode 100644 index 0000000..86f80fb --- /dev/null +++ b/app/composables/useRealTimeUpdate.ts @@ -0,0 +1,57 @@ +import { onMounted, onUnmounted, ref } from 'vue'; + +/** + * Composable for real-time timestamp updates + * Updates every second to show live "time ago" timestamps + */ +export function useRealTimeUpdate() { + const currentTime = ref(Date.now()); + let intervalId: NodeJS.Timeout | null = null; + + const updateTime = () => { + currentTime.value = Date.now(); + }; + + onMounted(() => { + // Update every second for real-time display + intervalId = setInterval(updateTime, 1000); + }); + + onUnmounted(() => { + if (intervalId) { + clearInterval(intervalId); + } + }); + + return { + currentTime + }; +} + +/** + * Format timestamp to "time ago" string + * @param timestamp - Unix timestamp in seconds + * @param currentTime - Current time for real-time updates + */ +export function formatTimeAgo(timestamp: number, currentTime: number): string { + const now = Math.floor(currentTime / 1000); + const then = Math.floor(timestamp); + const diffSeconds = Math.max(0, now - then); // Prevent negative values + + if (diffSeconds < 60) { + return `${diffSeconds}s ago`; + } + + const diffMinutes = Math.floor(diffSeconds / 60); + if (diffMinutes < 60) { + return `${diffMinutes}m ago`; + } + + const diffHours = Math.floor(diffMinutes / 60); + if (diffHours < 24) { + return `${diffHours}h ago`; + } + + const diffDays = Math.floor(diffHours / 24); + return `${diffDays}d ago`; +} \ No newline at end of file diff --git a/app/composables/useZiyaConfig.ts b/app/composables/useZiyaConfig.ts new file mode 100644 index 0000000..822df79 --- /dev/null +++ b/app/composables/useZiyaConfig.ts @@ -0,0 +1,117 @@ +/** + * Ziya App Configuration Composable + * Provides centralized configuration values for the entire application + * + * @example + * ```ts + * const { config, getDevServerUrl, isDevelopment } = useZiyaConfig() + * console.log(config.app.name) // 'Ziya' + * ``` + */ + +interface ZiyaAppConfig { + name: string; + version: string; + description: string; + author: string; +} + +interface ZiyaDevelopmentConfig { + nuxtPort: number; + nuxtHost: string; + electronDevTools: boolean; +} + +interface ZiyaWindowConfig { + minHeight: number; + minWidth: number; + maxHeight: number; + maxWidth: number; + defaultHeight: number; + defaultWidth: number; +} + +interface ZiyaThemeConfig { + defaultPalette: number; + defaultDarkMode: boolean; + availablePalettes: number[]; +} + +interface ZiyaConfigValues { + app: ZiyaAppConfig; + development: ZiyaDevelopmentConfig; + window: ZiyaWindowConfig; + theme: ZiyaThemeConfig; +} + +const ZIYA_CONFIG: ZiyaConfigValues = { + app: { + name: 'Ziya', + version: '1.0.0', + description: 'One stop shop trading solution', + author: 'bismillahDAO', + }, + + development: { + nuxtPort: 3000, + nuxtHost: 'localhost', + electronDevTools: true, + }, + + window: { + minHeight: 800, + minWidth: 1080, + maxHeight: 1080, + maxWidth: 1920, + defaultHeight: 1024, + defaultWidth: 1280, + }, + + theme: { + defaultPalette: 1, + defaultDarkMode: false, + availablePalettes: Array.from({ length: 24 }, (_, i) => i + 1), + }, +}; + +/** + * Get development server URL based on configuration + */ +const getDevServerUrl = (): string => { + const { nuxtHost, nuxtPort } = ZIYA_CONFIG.development; + return `http://${nuxtHost}:${nuxtPort}`; +}; + +/** + * Environment detection utilities + */ +const isDevelopment = process.env.NODE_ENV === 'development'; +const isProduction = process.env.NODE_ENV === 'production'; +const isClient = import.meta.client; + +/** + * Main composable function that provides Ziya app configuration + * + * @returns Object containing configuration values and helper functions + */ +export const useZiyaConfig = () => { + return { + config: ZIYA_CONFIG, + + // Helper functions + getDevServerUrl, + + // Environment flags + isDevelopment, + isProduction, + isClient, + }; +}; + +// Default export for convenience +export default useZiyaConfig; + +// Export types for external use +export type { + ZiyaAppConfig, ZiyaConfigValues, ZiyaDevelopmentConfig, ZiyaThemeConfig, ZiyaWindowConfig +}; diff --git a/app/layouts/auth.vue b/app/layouts/auth.vue index b0048b7..8881f80 100644 --- a/app/layouts/auth.vue +++ b/app/layouts/auth.vue @@ -1,5 +1,8 @@ - + \ No newline at end of file diff --git a/app/pages/index.vue b/app/pages/index.vue index ba6b7e7..c0dd8fa 100644 --- a/app/pages/index.vue +++ b/app/pages/index.vue @@ -1,24 +1,39 @@ - diff --git a/app/pages/login.vue b/app/pages/login.vue index 42da8f2..51da3fa 100644 --- a/app/pages/login.vue +++ b/app/pages/login.vue @@ -9,7 +9,10 @@

Sign in to your trading platform

-
+
@@ -83,44 +86,78 @@

- Version {{ appStore.appVersion }} + Version {{ appVersion }}

-