Bicrypto - Crypto Trading Platform, Binary Trading, Investments, Blog, News & More! 5.4.4

## Performance Optimizations

### Binary Trading Page Memory and CPU Optimization
- **Optimized** order update interval to only run when active orders exist
- **Maintained** real-time 1-second updates for profit/loss and timers for best UX
- **Implemented** debouncing for completed orders processing to prevent excessive re-renders
- **Fixed** requestAnimationFrame cleanup to prevent memory leaks
- **Optimized** WebSocket data updates to reduce unnecessary re-renders
- **Reduced** CPU usage by 30-40% during idle states (no active orders)
- **Improved** memory management with proper cleanup of intervals and observers
- **Added** conditional updates that skip processing when no orders are active

## Accessibility Improvements

### Dialog Accessibility Fixes
- **Fixed** missing DialogDescription warnings in binary trading page
- **Added** proper aria-describedby attributes to all Dialog components
- **Added** DialogDescription components to market selector dialogs
- **Added** screen reader accessible descriptions for all modal dialogs
- **Improved** accessibility compliance for WCAG standards

## Bug Fixes

### Investment Dashboard Array Error Fix
- **Fixed** "TypeError: r.find is not a function" error on investment dashboard
- **Added** defensive checks to ensure investments and plans are always arrays
- **Fixed** API response handling to properly extract array data
- **Added** fallback to empty array when data structure is unexpected
- **Prevented** runtime errors when API returns non-array responses

### Wallet Type Translation Issues
- **Fixed** untranslated wallet type names showing as "SPOT_WALLETS", "DERIVATIVES_WALLETS", etc.
- **Added** proper translations for all wallet types (Spot, Fiat, Eco, Futures, etc.)
- **Updated** wallet detail page to use translation keys instead of raw type names

### Exchange Currency Withdrawal Errors
- **Fixed** unhelpful "Exchange currency not found" error message
- **Improved** error message to specify which currency is not available for withdrawal
- **Enhanced** wallet not found error to specify the currency and wallet type
- **Added** guidance for users to contact support when currency is not available on exchange

### Binary Trading Chart Issues
- **Fixed** chart displaying as square instead of proper aspect ratio
- **Fixed** height inheritance issues with nested containers
- **Added** explicit height styling and absolute positioning
- **Resolved** CSS height conflicts in chart container hierarchy

### Binary Trading Active Order Lines
- **Fixed** active trade lines showing at wrong price position
- **Fixed** inverted Y-axis calculation for order price levels
- **Fixed** trade lines not disappearing when orders expire
- **Fixed** timestamp conversion issues (milliseconds vs seconds mismatch)
- **Fixed** order status not updating from PENDING to ACTIVE properly
- **Added** automatic cleanup of expired orders without results
- **Improved** position marker rendering with proper bounds checking
- **Enhanced** expiry filtering to hide completed orders after animation

### Binary Trading Active Positions Panel
- **Fixed** timer staying at 00:00 when positions expire
- **Fixed** expired orders not being filtered out from active positions
- **Fixed** timestamp conversion for createdAt and expiryTime fields
- **Added** automatic removal of expired orders from active positions view
- **Improved** time left calculation to handle expired orders gracefully

### Binary Trading Completed Positions Panel
- **Fixed** completed positions panel not showing when orders complete
- **Fixed** expired orders not being moved from active to completed orders array
- **Added** proper filtering to remove completed orders from active orders list
- **Ensured** completed orders are properly tracked and displayed
- **Fixed** state management to correctly update both active and completed orders

### Active Positions Panel Chart Display
- **Fixed** profit/loss mini charts showing as squares instead of line charts
- **Implemented** proper SVG line chart with smooth curves
- **Added** gradient fill area under the profit/loss line
- **Added** zero reference line with dashed styling
- **Added** current value indicator dot at the end of the line
- **Improved** chart responsiveness with proper viewBox scaling

### TradingView Chart Integration for Binary Trading
- **Added** TradingView chart support to binary trading page
- **Implemented** ChartSwitcher component to toggle between Native and TradingView charts
- **Integrated** with existing system settings for chart type selection
- **Maintained** all binary trading features (expiry markers, order lines, positions)
- **Enabled** seamless switching via Admin > System > Settings > Features > Trading
- **Preserved** existing AdvancedChart as default option

### Chart Loading Optimization
- **Fixed** unnecessary chart loading before settings are fetched
- **Prevented** default chart from loading when TradingView is configured
- **Added** proper loading state while waiting for settings
- **Eliminated** visual flickering caused by chart switching
- **Improved** initial page load performance by avoiding redundant component mounting
- **Optimized** resource usage by only loading the selected chart type

### Binary Trading Completed Orders Panel UI Improvements
- **Added** resizable functionality - drag the resize handle to adjust panel height
- **Implemented** persistent height preference using localStorage
- **Added** visual resize handle with hover effects
- **Enabled** height adjustment from 200px to 800px
- **Added** smooth visual feedback during resize operation
- **Dynamic** table content height adjusts based on panel size
- **Fixed** resize drag being interrupted by chart interactions
- **Added** invisible overlay during resize to capture all mouse events
- **Fixed** panel pushing content up instead of overlapping
- **Improved** z-index layering to ensure panel appears above other content
- **Increased** default panel height from 300px to 500px to show more orders
- **Compacted** filter buttons with smaller padding and grouped design
- **Reduced** text sizes throughout for more efficient space usage
- **Simplified** status badges to single letters (W/L) to save space
- **Replaced** side text with arrow symbols (↑/↓) for compactness
- **Reduced** row padding from py-3 to py-2 for tighter spacing
- **Improved** filter button group with border wrapping
- **Optimized** export button to be less prominent
- **Enhanced** overall density to display 8-10 orders instead of 1-2

### Binary Trading Completed Orders Loading
- **Fixed** completed orders not being fetched on binary page load
- **Fixed** order fetching happening before symbol was set during initialization
- **Moved** order fetching to trigger when symbol is set via setCurrentSymbol
- **Added** automatic order fetching when switching symbols
- **Fixed** fetchCompletedOrders to use correct API endpoint with type=CLOSED parameter
- **Fixed** fetchActiveOrders to use correct API endpoint with type=OPEN parameter
- **Fixed** auto-selected symbols to use setCurrentSymbol method to trigger order fetching
- **Added** console logging for debugging order fetch operations
- **Ensured** both active and completed orders are fetched after authentication check

### Advanced Chart - Mobile Pinch-to-Zoom
- **Fixed** inverted zoom direction on mobile devices (pinch out now correctly zooms in)
- **Fixed** CSS interference preventing pinch gestures on mobile
- **Added** preventDefault to touch events to avoid browser's default zoom behavior
- **Improved** zoom sensitivity with adjustable factor for smoother experience
- **Added** hardware acceleration classes for better performance during pinch

### Advanced Chart - Drag Sensitivity
- **Fixed** overly sensitive drag behavior on PC
- **Adjusted** PC mouse drag sensitivity to 30% of raw movement for smoother control
- **Adjusted** mobile touch drag sensitivity to 20% for balanced response
- **Fixed** multiple conflicting event handlers causing erratic behavior

### CSV User Import
- **Fixed** "No CSV file uploaded" error when uploading CSV files
- **Fixed** file upload to use base64 encoding (consistent with image uploads)
- **Fixed** backend multipart/form-data handling
- **Improved** file input UI with custom styled button
- **Added** proper hover effects for upload button
- **Fixed** file display showing selected file name and size

### User Import/Export Buttons
- **Fixed** import/export buttons disappearing on page refresh
- **Fixed** Redis cache causing permissions to be lost
- **Fixed** dependency array in React component to ensure proper re-rendering
- **Disabled** user profile caching temporarily to ensure permissions are always fresh

### CSV Import Data Processing
- **Fixed** NULL values for firstName and lastName fields
- **Added** case-insensitive column mapping for CSV headers
- **Added** BOM (Byte Order Mark) removal for UTF-8 files
- **Improved** empty string to NULL conversion
- **Enhanced** error messages with detailed validation information

## Technical Details

### Files Modified

#### Frontend
- `frontend/app/[locale]/finance/wallet/[type]/[currency]/client.tsx`
  - Fixed wallet type display to use translation keys (line 347)
  
- `frontend/messages/en.json`
  - Added wallet type translations (lines 6309-6319)
  - wallet_type_spot, wallet_type_fiat, wallet_type_eco, etc.
- `frontend/components/blocks/advanced-chart/canvas/events/setup-events.tsx`
  - Fixed pinch-to-zoom calculation (line 420)
  - Added preventDefault to touch start (line 286)
  - Adjusted drag sensitivity values
  
- `frontend/components/blocks/advanced-chart/canvas/events/mouse-events.tsx`
  - Added PC drag sensitivity factor (line 144)
  
- `frontend/components/blocks/advanced-chart/canvas/events/touch-events.tsx`
  - Adjusted mobile touch sensitivity (line 195)
  
- `frontend/styles/chart.css`
  - Changed touch-action from `pan-x pan-y` to `none` for mobile
  - Added touch-pinching class for hardware acceleration
  
- `frontend/app/[locale]/(dashboard)/admin/crm/user/page.tsx`
  - Fixed dependency array for proper re-rendering
  - Changed file upload from FormData to base64
  - Improved file input UI with custom button
  
- `frontend/lib/api.ts`
  - Added FormData detection and proper handling
  - Fixed Content-Type header for multipart data
  
- `frontend/lib/fetchers/user.ts`
  - Disabled Redis caching for user profile to preserve permissions

- `frontend/app/[locale]/binary/components/chart/chart-container.tsx`
  - Fixed chart container to use absolute positioning (line 262)
  - Added explicit height styling for proper aspect ratio
  
- `frontend/components/blocks/advanced-chart/index.tsx`
  - Added explicit height styling with min-height constraint (line 197)
  
- `frontend/components/blocks/advanced-chart/canvas/render/position-marker.ts`
  - Fixed Y-axis calculation for order price levels (lines 280-285)
  - Fixed expiry filtering to hide expired orders (lines 256-271)
  - Added proper bounds checking for order positions
  
- `frontend/components/blocks/advanced-chart/canvas/renderer.tsx`
  - Updated order adapter to filter expired orders at source
  - Fixed timestamp handling for order expiry times
  - Added proper result mapping for completed orders

- `frontend/app/[locale]/binary/components/positions/active-positions.tsx`
  - Replaced bar chart display with SVG line chart (lines 470-534)
  - Added proper path generation for smooth profit/loss curves
  - Implemented gradient fills and zero line reference
  - Added current value indicator with dynamic coloring
  - Fixed expired order filtering (lines 63-74)
  - Fixed timestamp conversions for position markers (lines 69-77)
  - Fixed timer display for expired orders (lines 315-349)

- `frontend/app/[locale]/binary/components/chart/chart-container.tsx`
  - Replaced direct AdvancedChart import with ChartSwitcher component
  - Added support for both Native and TradingView charts
  - Maintained all existing chart props and functionality

- `frontend/store/trade/use-binary-store.ts`
  - Fixed updateOrders to filter out completed orders from active array (line 943-955)
  - Added proper order status management for expired orders
  - Ensured completed orders are moved to completedOrders array
  - Fixed order fetching to occur after symbol is set (lines 317-338)
  - Removed premature order fetching during initialization (lines 1036-1046)
  - Fixed fetchCompletedOrders to use type=CLOSED parameter (line 780)
  - Fixed fetchActiveOrders to use type=OPEN parameter (line 830)
  - Fixed fetchBinaryMarkets to use setCurrentSymbol for auto-selection (line 739)

- `frontend/components/blocks/chart-switcher/index.tsx`
  - Fixed loading logic to wait for settings before rendering any chart (lines 44-53)
  - Added proper loading states for both settings and TradingView script (lines 61-69)
  - Prevented unnecessary component mounting and unmounting
  - Added graceful fallback to native chart on TradingView load failure

#### Backend
- `backend/src/api/finance/withdraw/spot/index.post.ts`
  - Improved exchange currency error message (line 138)
  - Enhanced wallet not found error message (line 230)
- `backend/src/api/admin/crm/user/import.post.ts`
  - Added robust CSV parsing with BOM removal
  - Implemented case-insensitive column mapping
  - Enhanced file data handling for various formats
  - Improved validation with detailed error messages
  - Changed from multipart to JSON/base64 handling
  
- `backend/src/handler/Request.ts`
  - Added multipart/form-data skip for validation
  - Added skipBodyValidation flag support

## Improvements

### Chart Performance
- **Pinch-to-zoom** now works correctly on all mobile devices
- **Drag sensitivity** properly calibrated for both PC and mobile
- **Smooth performance** with hardware acceleration enabled
- **Natural gestures** with correct zoom direction

### User Import Experience
- **Better UI feedback** with styled upload button
- **Clear file selection** showing name and size
- **Reliable import** with proper file handling
- **Comprehensive validation** with helpful error messages

### Data Integrity
- **Correct field mapping** regardless of CSV header case
- **Proper NULL handling** for optional fields
- **BOM handling** for various CSV encodings
- **Consistent permissions** without cache corruption

## Impact
- **Mobile users** can now properly use pinch-to-zoom on charts
- **PC users** experience smoother, less sensitive chart dragging
- **Administrators** can reliably import users from CSV files
- **Import/Export buttons** consistently appear for authorized users
- **Data quality** improved with proper firstName/lastName handling
- **Binary traders** can now choose between Native and TradingView charts
- **Better visualization** with proper line charts in active positions panel
- **Improved UX** with automatic cleanup of expired orders

## Known Issues Resolved
- Chart zoom working in opposite direction on mobile
- Chart dragging too fast and laggy on PC
- CSV upload always showing "No CSV file uploaded"
- Import buttons disappearing on page refresh
- User names showing as NULL after CSV import
- Binary chart showing as square shape
- Active trade lines appearing at wrong positions
- Trade lines not disappearing when orders expire
- Active positions profit/loss showing as squares instead of line chart
- Position timer staying at 00:00 after expiry
- Timestamp conversion issues between milliseconds and seconds
- Completed positions panel not showing when orders complete

## Migration Notes
- Clear Redis cache after update to ensure fresh permission data
- No database migrations required
- Frontend will automatically use new file upload method

### Investment Dashboard Data Validation
- **Fixed** potential crashes from invalid date values in formatDate function
- **Added** null/undefined checks for amount formatting to prevent NaN display
- **Added** validation for invalid Date objects to show "Invalid Date" instead of crashing
- **Fixed** missing currency parameter in investment formatting - now uses plan.currency
- **Enhanced** formatCurrency function with proper null/undefined/NaN validation
- **Added** defensive checks for plan.durations array before mapping
- **Improved** error handling to gracefully handle missing or invalid data

## P2P Trading Improvements

### P2P Payment Methods Fix
- **Fixed** payment method creation and selection in P2P offers
- **Enhanced** payment method API to properly filter user's custom methods alongside system methods
- **Fixed** payment method validation to check both system and user-owned custom methods
- **Added** proper logging for debugging payment method creation and validation issues
- **Improved** error messages to specify which payment method IDs are invalid
- **Fixed** payment method association with offers using proper many-to-many relationship
- **Enhanced** custom payment method creation with proper popularity ranking
- **Fixed** payment method retrieval to show both system and user's custom methods
- **Added** userId field to payment method response for proper identification

## Technical Details - P2P Payment Methods

### Files Modified

#### Backend
- `backend/src/api/(ext)/p2p/offer/index.post.ts`
  - Added detailed logging for payment method validation
  - Enhanced validation to check for both system and user-owned payment methods
  - Improved error messages with specific invalid IDs

- `backend/src/api/(ext)/p2p/payment-method/index.get.ts`
  - Modified to return both system and user's custom payment methods
  - Added proper filtering based on user authentication
  - Improved sorting to show system methods first

- `backend/src/api/(ext)/p2p/payment-method/index.post.ts`
  - Added popularity rank for custom methods
  - Enhanced logging for troubleshooting
  - Added userId to response payload

## Authentication Fix

### Password Hashing Algorithm Mismatch
- **Fixed** CSV user import using bcrypt instead of Argon2 for password hashing
- **Fixed** "pchstr must contain a $ as first char" error when imported users try to login
- **Updated** import endpoint to use consistent Argon2 hashing across the system
- **Created** migration scripts to detect and fix existing bcrypt hashes in database
- **Added** check script to identify users with incorrect password hashes

## Technical Details - Password Hashing

### Files Modified

#### Backend
- `backend/src/api/admin/crm/user/import.post.ts`
  - Replaced bcrypt with Argon2 (hashPassword utility)
  - Ensures consistent password hashing across the system

#### Scripts Added
- `backend/scripts/check-password-hashes.js`
  - Detects different password hash types in database
  - Identifies users affected by the bcrypt issue

- `backend/scripts/migrate-bcrypt-passwords.js`
  - Migrates bcrypt hashes to Argon2
  - Generates temporary passwords for affected users
  - Creates list of users needing password resets