From 6fc32d3fb36abdea9a8868aa476d1ba0e1a5053e Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 24 Feb 2025 15:55:01 +0800 Subject: [PATCH 1/4] border fix --- src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx b/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx index 0269704..c06c5cf 100644 --- a/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx +++ b/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx @@ -21,7 +21,7 @@ const DesktopContractDetailsPage: React.FC = () => {
-
+
From 04e47b5fae64b2f8c60bb41120c205b2ca6218b0 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Mon, 24 Feb 2025 15:55:54 +0800 Subject: [PATCH 2/4] remove border --- .../__tests__/DesktopContractDetailsPage.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx b/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx index 16359be..4b23f70 100644 --- a/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx +++ b/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx @@ -76,7 +76,7 @@ describe("DesktopContractDetailsPage", () => { // Check left panel const leftPanel = screen.getByTestId("left-panel"); - expect(leftPanel).toHaveClass("w-[320px] border-r bg-white flex flex-col"); + expect(leftPanel).toHaveClass("w-[320px] bg-white flex flex-col"); // Check content area const contentArea = screen.getByTestId("content-area"); From cc75e1002d73e64d5385449bb705a58bcc65b035 Mon Sep 17 00:00:00 2001 From: ahmadtaimoor-deriv <129935294+ahmadtaimoor-deriv@users.noreply.github.com> Date: Tue, 25 Feb 2025 11:17:41 +0800 Subject: [PATCH 3/4] add readme file --- llms.txt | 18 ++ src/components/AccountSwitcher/README.md | 102 +++++++ src/components/BottomNav/README.md | 154 ++++++---- src/components/BottomSheet/README.md | 275 +++++++----------- src/components/ContractDetailsChart/README.md | 104 +++++++ src/components/Currency/README.md | 54 ++++ src/components/HowToTrade/README.md | 134 +++++++++ src/components/MarketInfo/README.md | 105 +++++++ src/components/MarketSelector/README.md | 234 +++++++-------- src/components/NotificationProvider/README.md | 275 ++++++------------ src/components/PositionsSidebar/README.md | 179 +++++++++++- src/components/ServerTime/README.md | 106 +++++++ src/components/SideNav/README.md | 143 +++++++-- src/components/TradeButton/README.md | 202 ++++++------- 14 files changed, 1386 insertions(+), 699 deletions(-) create mode 100644 src/components/AccountSwitcher/README.md create mode 100644 src/components/ContractDetailsChart/README.md create mode 100644 src/components/Currency/README.md create mode 100644 src/components/HowToTrade/README.md create mode 100644 src/components/MarketInfo/README.md create mode 100644 src/components/ServerTime/README.md diff --git a/llms.txt b/llms.txt index a2ac2ed..c3a1f8c 100644 --- a/llms.txt +++ b/llms.txt @@ -29,6 +29,24 @@ The following components are implemented but reserved for future use: - [Stake Component](src/components/Stake/README.md) - [SSE Integration](src/components/Stake/hooks/useStakeSSE.ts) - [Validation](src/components/Stake/utils/validation.ts) +- [Positions Sidebar](src/components/PositionsSidebar/README.md) + - Overview: A sidebar component that displays open and closed trading positions + - Features: + - Tab switching between open and closed positions + - Filtering by trade types (for open positions) + - Filtering by time periods (for closed positions) + - Real-time position updates + - Total profit/loss display + - Components: + - FilterDropdown: Reusable dropdown component for position filtering + - Custom Hooks: + - useFilteredPositions: Manages position filtering logic + - Implementation: + - Follows Atomic Design principles + - Uses TypeScript for type safety + - Implements TDD with comprehensive test coverage + - Responsive layout with proper overflow handling + - Modular and maintainable code structure ## Typography System diff --git a/src/components/AccountSwitcher/README.md b/src/components/AccountSwitcher/README.md new file mode 100644 index 0000000..c671027 --- /dev/null +++ b/src/components/AccountSwitcher/README.md @@ -0,0 +1,102 @@ +# AccountSwitcher Component + +A component that enables users to view and switch between different trading accounts. It displays account information and provides a smooth switching mechanism. + +## Features + +- Account list display +- Account switching functionality +- Current account information display +- Real-time balance updates +- Smooth transitions + +## Component Structure + +``` +AccountSwitcher/ +├── AccountInfo.tsx # Account information display +├── AccountSwitcher.tsx # Main switcher component +├── index.ts # Exports +└── README.md # This file +``` + +## Usage + +```tsx +import { AccountSwitcher } from '@/components/AccountSwitcher'; + +function Header() { + return ( +
+ +
+ ); +} +``` + +## Components + +### AccountSwitcher + +Main component that handles the account switching functionality. + +#### Props +None - The component uses internal state management through stores. + +### AccountInfo + +Component that displays individual account information. + +#### Props + +| Prop | Type | Description | +|------|------|-------------| +| accountId | string | Unique identifier for the account | +| balance | string | Account balance | +| currency | string | Account currency code | +| isActive | boolean | Whether this is the currently selected account | + +## State Management + +The component uses Zustand for state management: +- Account list +- Current account +- Loading states +- Error states + +## Features + +### Account Display +- Account ID +- Account type +- Balance with currency +- Active status indicator + +### Switching Mechanism +- Smooth transition animation +- Loading state handling +- Error handling +- Success confirmation + +## Styling + +The component uses TailwindCSS for styling: +- Responsive dropdown +- Hover and active states +- Proper spacing and alignment +- Consistent typography + +## Best Practices + +1. Handle loading states appropriately +2. Provide error feedback +3. Maintain responsive design +4. Clean up listeners on unmount +5. Follow atomic design principles +6. Maintain test coverage + +## Related Components + +- BalanceDisplay: Shows account balance +- CurrencyIcon: Displays currency symbols +- NotificationProvider: Shows switching notifications diff --git a/src/components/BottomNav/README.md b/src/components/BottomNav/README.md index 626773b..70616ba 100644 --- a/src/components/BottomNav/README.md +++ b/src/components/BottomNav/README.md @@ -1,95 +1,131 @@ -# Bottom Navigation Component +# BottomNav Component -A responsive bottom navigation bar component for the Champion Trader application that provides primary navigation on mobile devices. +A mobile-first navigation component that provides easy access to primary application features through a bottom navigation bar. -## Overview +## Features -The Bottom Navigation component implements a mobile-first navigation interface that adapts based on the user's authentication status and device type. It follows atomic component design principles and is implemented using Test-Driven Development (TDD). +- Mobile-optimized navigation +- Icon and label display +- Active route indication +- Badge support +- Smooth transitions +- Touch-friendly design ## Component Structure ``` BottomNav/ ├── BottomNav.tsx # Main component -├── index.ts # Public exports -└── __tests__/ # Test suite - └── BottomNav.test.tsx +├── index.ts # Exports +└── README.md # This file ``` ## Usage -```typescript +```tsx import { BottomNav } from '@/components/BottomNav'; -function App() { +function MobileLayout() { return ( -
-
{/* Main content */}
+
+
{/* Content */}
); } ``` -## Features - -- Responsive mobile-first design -- Authentication-aware navigation -- Smooth transitions and animations -- Active route highlighting -- Device-type specific rendering +## Props -## Implementation Details +| Prop | Type | Description | +|------|------|-------------| +| className? | string | Optional CSS classes | +| items? | NavItem[] | Optional custom navigation items | -The component follows atomic design principles: -- Self-contained navigation logic -- Independent state management -- Clear prop interfaces -- Comprehensive test coverage - -### State Management - -The component manages: -- Authentication state via clientStore -- Active route state -- Device type detection -- Navigation state - -### Navigation Items - -Navigation items are conditionally rendered based on authentication status: +## Types ```typescript interface NavItem { label: string; - icon: React.ReactNode; + icon: IconComponent; path: string; - requiresAuth: boolean; + badge?: number | string; } ``` -## Testing +## Features -The component includes comprehensive tests following TDD methodology: -- Unit tests for navigation logic -- Authentication state tests -- Device type rendering tests -- Route handling tests -- Transition animation tests +### Navigation Items +- Icon representation +- Text labels +- Active state +- Optional badges +- Touch targets + +### Interactions +- Touch feedback +- Active highlighting +- Route transitions +- Badge updates + +### Responsive Behavior +- Portrait/Landscape handling +- Safe area support +- Keyboard awareness +- Gesture handling + +## Styling + +The component uses TailwindCSS for styling: +- Mobile-first design +- Touch-friendly sizing +- Active states +- Badge styling +- iOS/Android adaptations + +## State Management + +The component integrates with: +- Route management +- Badge updates +- Device orientation +- Keyboard visibility ## Best Practices -- Uses TailwindCSS for consistent styling -- Implements proper cleanup for event listeners -- Handles all authentication states -- Provides clear visual feedback -- Maintains accessibility standards -- Supports keyboard navigation - -## Responsive Design - -The component implements responsive behavior: -- Full-width on mobile devices -- Hidden on desktop (uses side navigation instead) -- Adapts to device orientation changes -- Handles safe area insets on mobile devices +1. Use clear, recognizable icons +2. Keep labels short and clear +3. Ensure adequate touch targets +4. Handle safe areas properly +5. Follow atomic design principles +6. Maintain test coverage + +## Accessibility + +The component implements: +- ARIA roles +- Touch targets +- Focus indicators +- Screen reader support +- High contrast modes + +## Platform Considerations + +### iOS +- Safe area insets +- Bottom sheet interaction +- Gesture handling +- Native-like feel + +### Android +- Material Design alignment +- Back button handling +- Navigation patterns +- System UI integration + +## Related Components + +- SideNav: Desktop navigation +- MenuSidebar: Expanded menu +- Header: Top navigation +- PositionsSidebar: Trading panel diff --git a/src/components/BottomSheet/README.md b/src/components/BottomSheet/README.md index d85d72a..dac2c27 100644 --- a/src/components/BottomSheet/README.md +++ b/src/components/BottomSheet/README.md @@ -1,194 +1,139 @@ # BottomSheet Component -## Overview -A reusable bottom sheet component that provides a mobile-friendly interface with smooth animations, drag-to-dismiss functionality, and theme-aware styling. +A mobile-first modal component that slides up from the bottom of the screen, providing a native-like sheet interface for content display and user interactions. ## Features -- Single instance pattern using Zustand store -- Dynamic height support (%, px, vh) -- Theme-aware using Tailwind CSS variables -- Smooth animations for enter/exit transitions -- Drag gesture support with callback -- Content management through configuration -- Responsive overlay with fade effect -- Text selection prevention during drag -- Performance-optimized animations -## Usage - -### Basic Usage -```tsx -const { setBottomSheet } = useBottomSheetStore(); +- Smooth animations +- Gesture support +- Backdrop interaction +- Multiple snap points +- Safe area handling +- Dynamic content -// Show bottom sheet -setBottomSheet(true, 'content-key', '50%'); +## Component Structure -// Hide bottom sheet -setBottomSheet(false); ``` +BottomSheet/ +├── BottomSheet.tsx # Main component +├── BottomSheet.example.tsx # Usage examples +├── index.ts # Exports +└── README.md # This file +``` + +## Usage -### With Drag Callback ```tsx -const handleDragDown = () => { - console.log('Bottom sheet is being dragged down'); - // Your drag down logic here -}; +import { BottomSheet } from '@/components/BottomSheet'; -setBottomSheet(true, 'content-key', '50%', handleDragDown); -``` +function App() { + const [isOpen, setIsOpen] = useState(false); -## State Management - -```typescript -interface BottomSheetState { - showBottomSheet: boolean; // Controls visibility - key: string | null; // Content identifier - height: string; // Sheet height - onDragDown?: () => void; // Optional drag callback - setBottomSheet: ( - show: boolean, - key?: string, - height?: string, - onDragDown?: () => void - ) => void; + return ( + setIsOpen(false)} + snapPoints={['25%', '50%', '90%']} + > +
+

Bottom Sheet Content

+ {/* Your content here */} +
+ + ); } ``` -## Height Support -- Percentage: '50%' (converted to vh) -- Pixels: '380px' -- Viewport height: '75vh' - -## Gesture Handling - -### Drag to Dismiss -- Drag down on handle bar to dismiss -- Threshold: 100px vertical distance -- Smooth animation on release -- Optional callback during drag - -### Text Selection Prevention -- Prevents text selection during drag operations -- Automatically re-enables text selection when: - - Drag ends - - Bottom sheet closes - - Component unmounts -- Ensures smooth user experience during interactions - -### Performance Optimizations -- Uses requestAnimationFrame for smooth drag animations -- Proper cleanup of styles and event listeners -- Handles edge cases like pointer leaving window -- Efficient event handling and state management -- Smooth transitions and transforms - -### Event Cleanup -- Event listeners added only when sheet is shown -- Proper cleanup on sheet close and unmount -- Style cleanup (transform, userSelect) on all exit paths - -## Testing -The component includes comprehensive test coverage for: -- Touch and mouse drag behaviors -- Text selection prevention -- Animation and style cleanup -- Desktop vs mobile interactions -- Edge cases and error states -- Event listener cleanup -- Performance optimization verification +## Props -## Styling -Uses Tailwind CSS for theme-aware styling and animations: -```tsx -// Theme colors -className="bg-background" // Theme background -className="bg-muted" // Theme muted color -className="bg-black/80" // Semi-transparent overlay - -// Animations -className="animate-in fade-in-0" // Fade in animation -className="slide-in-from-bottom" // Slide up animation -className="duration-300" // Animation duration -className="transition-transform" // Smooth transform transitions - -// Layout -className="rounded-t-[16px]" // Rounded top corners -className="max-w-[800px]" // Maximum width -className="overflow-hidden" // Content overflow handling -``` +| Prop | Type | Description | +|------|------|-------------| +| isOpen | boolean | Controls sheet visibility | +| onClose | () => void | Close handler | +| children | ReactNode | Sheet content | +| snapPoints? | string[] | Array of height snap points | +| initialSnap? | number | Initial snap point index | +| enableDrag? | boolean | Enable drag gesture (default: true) | +| enableBackdropPress? | boolean | Enable closing on backdrop press (default: true) | +| className? | string | Optional CSS classes | + +## Features -## Implementation Details +### Gestures +- Drag to expand/collapse +- Velocity-based animations +- Snap point detection +- Momentum scrolling +- Pull to refresh + +### Positioning +- Multiple snap points +- Safe area awareness +- Keyboard avoidance +- Dynamic height + +### Interactions +- Backdrop press +- Swipe to dismiss +- Content scrolling +- Nested scrolling -### Touch Event Handling -```typescript -const handleTouchMove = useCallback((e: TouchEvent) => { - if (!sheetRef.current || !isDragging.current) return; +## Styling - const touch = e.touches[0]; - const deltaY = touch.clientY - dragStartY.current; - currentY.current = deltaY; +The component uses TailwindCSS for styling: +- Smooth transitions +- Backdrop blur +- Border radius +- Shadow effects +- iOS/Android adaptations - if (deltaY > 0) { - sheetRef.current.style.transform = `translateY(${deltaY}px)`; - onDragDown?.(); - } -}, [onDragDown]); -``` +## Best Practices -### Mouse Event Handling -```typescript -const handleMouseMove = useCallback((e: MouseEvent) => { - if (!sheetRef.current || !isDragging.current) return; - - requestAnimationFrame(() => { - const deltaY = e.clientY - dragStartY.current; - currentY.current = deltaY; - - if (deltaY > 0) { - sheetRef.current!.style.transform = `translateY(${deltaY}px)`; - onDragDown?.(); - } - }); -}, [onDragDown]); -``` +1. Use appropriate snap points +2. Handle content overflow +3. Consider keyboard interaction +4. Implement loading states +5. Follow atomic design principles +6. Maintain test coverage -### Overlay Handling -```tsx -
{ - onDragDown?.(); - setBottomSheet(false); - }} -/> -``` +## Platform Considerations -### Height Processing -```typescript -const processedHeight = height.endsWith('%') - ? `${parseFloat(height)}vh` - : height; -``` +### iOS +- Bottom safe area +- Native-like bounce +- Momentum scrolling +- Sheet appearance -## Example +### Android +- Material Design +- System back button +- Touch feedback +- Sheet behavior -```tsx -import { useBottomSheetStore } from "@/stores/bottomSheetStore"; +## Examples -function MyComponent() { - const { setBottomSheet } = useBottomSheetStore(); +### Basic Usage +```tsx + +
Basic Content
+ +``` - const handleDragDown = () => { - // Handle drag down event - }; +### With Snap Points +```tsx + +
Snappable Content
+ +``` - const showSheet = () => { - setBottomSheet(true, 'my-content', '50%', handleDragDown); - }; +## Related Components - return ( - - ); -} +- Modal: Full-screen modal +- Drawer: Side drawer +- Dialog: Alert dialogs +- NotificationProvider: Notifications diff --git a/src/components/ContractDetailsChart/README.md b/src/components/ContractDetailsChart/README.md new file mode 100644 index 0000000..a92f0b7 --- /dev/null +++ b/src/components/ContractDetailsChart/README.md @@ -0,0 +1,104 @@ +# ContractDetailsChart Component + +A specialized chart component for displaying detailed contract information and price movements. This component extends the base Chart functionality with contract-specific features. + +## Features + +- Real-time price updates +- Contract entry and exit points visualization +- Profit/Loss indicators +- Contract barrier lines +- Responsive design +- Error boundary protection + +## Component Structure + +``` +ContractDetailsChart/ +├── ChartErrorBoundary.tsx # Error handling wrapper +├── ContractDetailsChart.tsx # Main chart component +├── index.tsx # Exports +└── README.md # This file +``` + +## Usage + +```tsx +import { ContractDetailsChart } from '@/components/ContractDetailsChart'; + +function ContractDetails() { + return ( + + ); +} +``` + +## Props + +| Prop | Type | Description | +|------|------|-------------| +| contractId | string | Unique identifier for the contract | +| symbol | string | Trading symbol (e.g., "frxEURUSD") | +| granularity | number | Chart time granularity in seconds | +| height? | number | Optional chart height (default: 300) | +| width? | number | Optional chart width (default: 100%) | + +## Error Handling + +The component includes a ChartErrorBoundary that: +- Catches and handles chart-related errors +- Displays user-friendly error messages +- Prevents app crashes +- Logs errors for debugging + +```tsx + + + +``` + +## Features + +### Price Updates +- Real-time price streaming +- Smooth chart updates +- Historical data loading + +### Contract Visualization +- Entry point marker +- Exit point (if contract closed) +- Barrier lines for relevant contract types +- Profit/Loss region shading + +### Interactivity +- Zoom controls +- Price tooltips +- Time period selection +- Chart type switching + +## Styling + +The component uses TailwindCSS for layout and styling: +- Responsive container sizing +- Proper spacing and padding +- Consistent colors for indicators +- Dark/Light theme support + +## Best Practices + +1. Always wrap with ChartErrorBoundary +2. Provide appropriate granularity for contract type +3. Handle loading and error states +4. Clean up subscriptions on unmount +5. Follow atomic design principles +6. Maintain test coverage + +## Related Components + +- Chart: Base chart component +- MarketInfo: Displays market information +- PositionsSidebar: Lists trading positions diff --git a/src/components/Currency/README.md b/src/components/Currency/README.md new file mode 100644 index 0000000..c460753 --- /dev/null +++ b/src/components/Currency/README.md @@ -0,0 +1,54 @@ +# Currency Component + +A component that provides currency-related functionality, primarily focused on displaying currency icons and formatting. + +## Components + +### CurrencyIcon + +A component that renders currency icons based on the provided currency code. + +## Usage + +```tsx +import { CurrencyIcon } from '@/components/Currency/CurrencyIcon'; + +function App() { + return ( +
+ + 1,000.00 USD +
+ ); +} +``` + +## Props + +### CurrencyIcon + +| Prop | Type | Description | +|------|------|-------------| +| currency | string | The currency code (e.g., "USD", "EUR") | +| className? | string | Optional CSS classes for styling | + +## Styling + +The component uses TailwindCSS for styling: +- Proper icon sizing +- Consistent alignment with text +- Responsive scaling + +## Best Practices + +1. Always provide a valid currency code +2. Use with appropriate text size and alignment +3. Consider accessibility for icon display +4. Follow atomic design principles +5. Maintain test coverage + +## Related Components + +- BalanceDisplay: Uses CurrencyIcon for balance display +- Stake: Uses CurrencyIcon in stake input +- TradeFields: Incorporates currency display in trade parameters diff --git a/src/components/HowToTrade/README.md b/src/components/HowToTrade/README.md new file mode 100644 index 0000000..e2c97fe --- /dev/null +++ b/src/components/HowToTrade/README.md @@ -0,0 +1,134 @@ +# HowToTrade Component + +A component that provides interactive guidance and tutorials for users on how to use the trading platform effectively. + +## Features + +- Step-by-step tutorials +- Interactive guides +- Modal presentation +- Progress tracking +- Responsive design +- Customizable content + +## Component Structure + +``` +HowToTrade/ +├── GuideModal.tsx # Modal component for guides +├── HowToTrade.tsx # Main component +├── index.ts # Exports +└── README.md # This file +``` + +## Usage + +```tsx +import { HowToTrade } from '@/components/HowToTrade'; + +function TradingView() { + return ( +
+ console.log('Tutorial completed')} + initialStep={0} + /> +
+ ); +} +``` + +## Props + +### HowToTrade + +| Prop | Type | Description | +|------|------|-------------| +| onComplete? | () => void | Callback when tutorial is completed | +| initialStep? | number | Starting step number | +| className? | string | Optional CSS classes | + +### GuideModal + +| Prop | Type | Description | +|------|------|-------------| +| isOpen | boolean | Modal visibility state | +| onClose | () => void | Close handler | +| step | number | Current tutorial step | +| onNext | () => void | Next step handler | +| onPrev | () => void | Previous step handler | + +## Features + +### Tutorial Steps +- Clear instructions +- Visual guides +- Interactive elements +- Progress indicators +- Skip option + +### Content Types +- Text explanations +- Image guides +- Video tutorials +- Interactive demos +- Practice exercises + +### User Progress +- Step tracking +- Completion status +- Resume capability +- History tracking + +## Styling + +The component uses TailwindCSS for styling: +- Modal design +- Step indicators +- Navigation buttons +- Content layout +- Responsive sizing + +## Tutorial Content + +Example structure: +```typescript +const tutorialSteps = [ + { + title: 'Select a Market', + content: 'Choose from a variety of markets...', + image: '/tutorial/market-selection.png', + }, + { + title: 'Set Trade Parameters', + content: 'Configure your trade settings...', + image: '/tutorial/trade-params.png', + }, + // ... +]; +``` + +## Best Practices + +1. Keep instructions clear +2. Use visual aids +3. Allow skipping/resuming +4. Track completion +5. Follow atomic design principles +6. Maintain test coverage + +## Accessibility + +The component implements: +- Keyboard navigation +- Screen reader support +- Focus management +- ARIA labels +- High contrast support + +## Related Components + +- MarketSelector: Market selection +- TradeButton: Trade execution +- Duration: Trade duration setting +- Stake: Trade amount setting diff --git a/src/components/MarketInfo/README.md b/src/components/MarketInfo/README.md new file mode 100644 index 0000000..5563342 --- /dev/null +++ b/src/components/MarketInfo/README.md @@ -0,0 +1,105 @@ +# MarketInfo Component + +A component that displays comprehensive market information including market name, current price, and other relevant market data. + +## Features + +- Market name and icon display +- Real-time price updates +- Market status indicator +- Price movement indicators +- Responsive design + +## Component Structure + +``` +MarketInfo/ +├── MarketInfo.tsx # Main component +├── index.ts # Exports +└── README.md # This file +``` + +## Usage + +```tsx +import { MarketInfo } from '@/components/MarketInfo'; + +function TradingView() { + return ( + + ); +} +``` + +## Props + +| Prop | Type | Description | +|------|------|-------------| +| symbol | string | Market symbol identifier | +| name | string | Display name of the market | +| price | string | Current market price | +| change | string | Price change value | +| isOpen | boolean | Market open/closed status | +| className? | string | Optional CSS classes | + +## Features + +### Price Display +- Current price with proper formatting +- Price change indicator (positive/negative) +- Price movement animation + +### Market Status +- Open/Closed indicator +- Trading hours (if applicable) +- Market restrictions + +### Real-time Updates +- Price updates +- Status changes +- Movement indicators + +## State Management + +The component integrates with market data stores: +- Price updates +- Market status +- Trading hours + +## Styling + +The component uses TailwindCSS for styling: +- Responsive layout +- Price movement animations +- Status indicators +- Proper spacing and alignment + +## Best Practices + +1. Handle loading states +2. Show proper error messages +3. Maintain responsive design +4. Clean up subscriptions +5. Follow atomic design principles +6. Maintain test coverage + +## Error States + +The component handles various error states: +- Connection issues +- Invalid market data +- Market closure +- Trading restrictions + +## Related Components + +- Chart: Displays market price chart +- MarketSelector: Market selection interface +- PositionsSidebar: Shows positions for the market +- TradeButton: Initiates trades for the market diff --git a/src/components/MarketSelector/README.md b/src/components/MarketSelector/README.md index 16a37bd..8a84eee 100644 --- a/src/components/MarketSelector/README.md +++ b/src/components/MarketSelector/README.md @@ -1,163 +1,129 @@ -# Market Selector Component +# MarketSelector Component -A responsive market selection interface that adapts between desktop and mobile views. +A component that enables users to browse, search, and select trading markets with comprehensive market information display. -## Components +## Features -### MarketSelector -The main controller component that manages the market selection interface. +- Market list display +- Market search +- Category filtering +- Market details preview +- Favorites management +- Real-time updates + +## Component Structure + +``` +MarketSelector/ +├── components/ +├── MarketSelector.tsx # Main component +├── MarketSelectorButton.tsx # Selection trigger +├── MarketSelectorList.tsx # Market list display +├── MarketIcon.tsx # Market icon component +├── data.ts # Market data types +├── marketIcons.ts # Icon mappings +├── marketSelectorStub.ts # Test data +├── index.ts # Exports +└── README.md # This file +``` + +## Usage -```typescript +```tsx import { MarketSelector } from '@/components/MarketSelector'; - setIsOpen(false)} -/> +function TradingView() { + const handleMarketSelect = (market: Market) => { + console.log('Selected market:', market); + }; + + return ( + + ); +} ``` -#### Props -- `isOpen`: boolean - Controls the visibility of the market selector -- `onClose`: () => void - Callback function when the selector is closed +## Props -#### Responsive Behavior -- **Desktop**: Renders as a LeftSidebar component -- **Mobile**: Uses BottomSheet component via bottomSheetStore +### MarketSelector -### MarketSelectorList -The main content component that displays the list of markets with search and filtering capabilities. +| Prop | Type | Description | +|------|------|-------------| +| onSelect | (market: Market) => void | Market selection handler | +| defaultMarket? | string | Initial selected market | +| className? | string | Optional CSS classes | -### MarketIcon -Custom SVG icons for different market types: -- Volatility indices with candlestick pattern -- Boom indices with upward trend -- Crash indices with downward trend -- Support for 1s badge on applicable markets +### MarketSelectorButton -## Features +| Prop | Type | Description | +|------|------|-------------| +| selected | Market | Currently selected market | +| onClick | () => void | Click handler | +| className? | string | Optional CSS classes | -### Market Categories -- All markets -- Favorites (persistent storage) -- Derived (Synthetic indices) -- Forex -- Crash/Boom indices -- Stocks & indices -- Commodities +## Features ### Market Display -- Custom icons per market type -- Market symbol and name -- Market status (open/closed) -- Favorite status -- Market grouping by type - -### Search and Filtering -- Real-time search across all markets -- Filter by market category -- Show/hide closed markets -- Favorites filtering - -### Responsive Design -```typescript -import { MarketSelector } from '@/components/MarketSelector'; -import { useState } from 'react'; - -const TradingPage = () => { - const [isMarketSelectorOpen, setIsMarketSelectorOpen] = useState(false); +- Market name and symbol +- Market category +- Trading hours +- Market status +- Price information + +### Filtering & Search +- Category filters +- Search by name/symbol +- Recent markets +- Favorite markets + +### Market Information +- Current price +- Price change +- Trading status +- Market restrictions - return ( -
- - - setIsMarketSelectorOpen(false)} - /> -
- ); -}; -``` +## Styling -## Market Data Structure - -```typescript -interface ProcessedInstrument { - symbol: string; // Market symbol (e.g., "R_100", "EURUSD") - displayName: string; // Formatted name (e.g., "Volatility 100 Index") - shortName: string; // Short identifier (e.g., "100", "EUR") - market_name: string; // Market category - isOneSecond: boolean; // Whether it's a 1-second market - isClosed?: boolean; // Market availability status - type: "volatility" | "boom" | "crash"; // Icon type -} -``` +The component uses TailwindCSS for styling: +- Responsive layout +- Search input styling +- List virtualization +- Market card design +- Status indicators ## State Management -The component integrates with several stores: -- `bottomSheetStore`: Manages mobile bottom sheet display -- `tradeStore`: Handles market selection -- Local state for: - - Active tab - - Search query - - Favorites list +The component manages: +- Selected market +- Search query +- Filter state +- Favorites list +- Recent selections ## Best Practices -1. **Market Selection**: - - Validate market availability before selection - - Prevent selection of closed markets - - Provide clear feedback on selection - -2. **Search Implementation**: - - Case-insensitive search - - Search across display names - - Clear search option - - "No results" feedback - -3. **Favorites Management**: - - Persistent storage in localStorage - - Immediate UI updates - - Clear favorite/unfavorite feedback - -4. **Performance**: - - Efficient filtering - - Smooth transitions - - Optimized re-renders - - Lazy loading where applicable - -5. **Responsive Behavior**: - - Use useDeviceDetection for viewport detection - - Smooth transitions between views - - Consistent behavior across devices - - Proper touch interaction on mobile +1. Implement search debouncing +2. Handle loading states +3. Show error messages +4. Cache market data +5. Follow atomic design principles +6. Maintain test coverage ## Error Handling -The component handles various states: -- Loading state with spinner -- Error state with message -- Empty search results -- Network errors +The component handles: - Invalid market data -- Fallback to stub data when API fails +- Search errors +- Network issues +- Market restrictions +- Invalid selections -## Accessibility - -- Keyboard navigation support -- ARIA labels -- Focus management -- Screen reader friendly structure -- Touch targets for mobile - -## Styling +## Related Components -The component uses Tailwind CSS for styling with: -- Responsive design -- Smooth transitions -- Custom market icons -- Consistent theming -- Mobile-first approach +- MarketInfo: Displays market details +- Chart: Shows market price chart +- TradeButton: Initiates trades +- PositionsSidebar: Shows market positions diff --git a/src/components/NotificationProvider/README.md b/src/components/NotificationProvider/README.md index c2e32cb..3341eb9 100644 --- a/src/components/NotificationProvider/README.md +++ b/src/components/NotificationProvider/README.md @@ -1,215 +1,116 @@ -# Notification System +# NotificationProvider Component -A flexible and configurable notification system built with Sonner toast and Zustand for state management. +A component that manages and displays various types of notifications across the application, providing consistent user feedback. ## Features -- 🎯 Multiple notification types (success, error, info, warning) -- 🔄 Promise-based notifications for async operations -- ⚙️ Global configuration -- 🎨 Customizable styling with TailwindCSS -- 📱 Responsive design -- 💾 Persistent configuration -- 🔍 TypeScript support +- Multiple notification types +- Customizable duration +- Animation effects +- Queue management +- Position control +- Auto-dismiss -## Installation +## Component Structure -The notification system is already integrated into the application. The `NotificationProvider` is wrapped around the app in `App.tsx`. - -## Usage - -### Basic Usage - -```typescript -import { useNotificationStore } from '@/stores/notificationStore'; - -const MyComponent = () => { - const { success, error, info, warning } = useNotificationStore(); - - const handleClick = () => { - success('Success!', 'Operation completed successfully'); - }; - - return ; -}; -``` - -### Notification Types - -1. **Success Notification** -```typescript -const { success } = useNotificationStore(); -success('Success!', 'Operation completed successfully'); -``` - -2. **Error Notification** -```typescript -const { error } = useNotificationStore(); -error('Error!', 'Something went wrong'); ``` - -3. **Info Notification** -```typescript -const { info } = useNotificationStore(); -info('Info', 'Here is some information'); -``` - -4. **Warning Notification** -```typescript -const { warning } = useNotificationStore(); -warning('Warning', 'Please be careful'); +NotificationProvider/ +├── NotificationProvider.tsx # Main component +├── index.ts # Exports +└── README.md # This file ``` -### Promise-Based Notifications - -Perfect for async operations with loading, success, and error states: - -```typescript -const { promise } = useNotificationStore(); - -const fetchData = async () => { - try { - await promise( - api.getData(), - { - loading: 'Fetching data...', - success: 'Data fetched successfully!', - error: 'Failed to fetch data', - } - ); - } catch (error) { - // Handle error - } -}; -``` - -### Configuration +## Usage -You can configure the notification system globally: +```tsx +import { NotificationProvider, useNotification } from '@/components/NotificationProvider'; -```typescript -const { setConfig } = useNotificationStore(); +// Wrap your app +function App() { + return ( + + + + ); +} + +// Use in components +function YourComponent() { + const { showNotification } = useNotification(); + + const handleAction = () => { + showNotification({ + type: 'success', + message: 'Action completed successfully', + duration: 3000 + }); + }; -setConfig({ - position: 'bottom-right', - duration: 5000, - closeButton: true, - className: 'custom-class', -}); + return ; +} ``` -#### Available Configuration Options +## Props -| Option | Type | Default | Description | -|--------|------|---------|-------------| -| position | ToastPosition | 'top-right' | Notification position | -| duration | number | 4000 | Display duration in ms | -| closeButton | boolean | true | Show close button | -| className | string | 'rounded-lg' | Custom CSS class | +### NotificationProvider -Type `ToastPosition` = 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' \| 'top-center' \| 'bottom-center' +| Prop | Type | Description | +|------|------|-------------| +| position? | 'top' \| 'bottom' | Notification position (default: 'top') | +| maxNotifications? | number | Maximum concurrent notifications (default: 3) | +| children | ReactNode | Application components | -## Implementation Details +### Notification Options -### Components +| Option | Type | Description | +|--------|------|-------------| +| type | 'success' \| 'error' \| 'warning' \| 'info' | Notification type | +| message | string | Notification message | +| duration? | number | Display duration in ms (default: 3000) | +| action? | { label: string; onClick: () => void } | Optional action button | -1. **NotificationProvider** -```typescript -import { NotificationProvider } from '@/components/NotificationProvider'; - -// Wrap your app - - - -``` - -2. **NotificationStore** -```typescript -import { useNotificationStore } from '@/stores/notificationStore'; - -// Access notification methods -const { success, error, info, warning, promise, setConfig } = useNotificationStore(); -``` - -### Styling - -The notification system uses TailwindCSS for styling: +## Features -- Success notifications: Green theme -- Error notifications: Red theme -- Info notifications: Blue theme (`bg-blue-50`) -- Warning notifications: Yellow theme (`bg-yellow-50`) +### Notification Types +- Success notifications +- Error notifications +- Warning notifications +- Info notifications + +### Queue Management +- Maximum notifications limit +- FIFO queue system +- Auto-dismiss older notifications +- Manual dismiss support + +## Styling + +The component uses TailwindCSS for styling: +- Type-based colors +- Smooth animations +- Responsive design +- Proper spacing +- Accessible contrast ## Best Practices -1. **Message Structure** - - Title: Short and clear (first parameter) - - Description: More detailed information (second parameter) - ```typescript - success('User Created', 'New user account was created successfully'); - ``` - -2. **Duration Guidelines** - - Errors: Longer duration (5000ms+) - - Success: Medium duration (3000-4000ms) - - Info/Warning: Standard duration (3000ms) - -3. **Promise Notifications** - - Always provide all three states (loading, success, error) - - Keep loading messages concise - - Provide meaningful error messages - -4. **Position Usage** - - Use top positions for important messages - - Use bottom positions for less critical information - - Consider user interaction areas when choosing position +1. Keep messages concise +2. Use appropriate type +3. Set reasonable duration +4. Handle queue properly +5. Follow atomic design principles +6. Maintain test coverage ## Error Handling -```typescript -const handleSubmit = async (data: FormData) => { - try { - await promise( - submitData(data), - { - loading: 'Submitting form...', - success: 'Form submitted successfully!', - error: 'Failed to submit form', - } - ); - } catch (err) { - error('Error', err instanceof Error ? err.message : 'An unknown error occurred'); - } -}; -``` - -## Testing - -The notification system includes comprehensive tests: - -- Store functionality tests -- Component rendering tests -- Configuration tests -- Integration tests - -Run tests: -```bash -npm test src/components/NotificationProvider/__tests__ -npm test src/stores/__tests__/notificationStore.test.ts -``` - -## Accessibility - -- Color contrast compliance -- Screen reader support -- Keyboard navigation -- ARIA attributes -- Focus management +The component handles: +- Invalid notification types +- Queue overflow +- Animation interruptions +- Component unmounting -## Performance +## Related Components -- Efficient re-renders -- Debounced updates -- Cleanup on unmount -- Memory leak prevention -- Optimized state updates +- ToastProvider: Alternative notification system +- ErrorBoundary: Error handling +- LoadingIndicator: Loading states diff --git a/src/components/PositionsSidebar/README.md b/src/components/PositionsSidebar/README.md index b84583d..9f39674 100644 --- a/src/components/PositionsSidebar/README.md +++ b/src/components/PositionsSidebar/README.md @@ -1,21 +1,168 @@ -# Positions Sidebar +# PositionsSidebar Component -## Overview -The `PositionsSidebar` component displays a list of open and closed positions. Users can interact with the sidebar to view their positions, close trades, and navigate to contract details. +A sidebar component that displays and manages trading positions, including both open and closed positions. It provides filtering capabilities and real-time updates of position statuses. -## Recent Updates -### 1. Close Button -- A close button has been added below each position card. -- Clicking the button will close the respective position. +## Features -### 2. Custom Dropdown for Trade Types -- The default `