Skip to content
This repository was archived by the owner on Jul 15, 2025. It is now read-only.

Commit 50f6c91

Browse files
ahmadtaimoor-derivahmadtaimoor-deriv
authored
Merge pull request #57 from deriv-com/f_positon_fix
Removing border from contract Details desktop, add component readme files and renaming left-sidebar
2 parents 4d32cda + 24f91cc commit 50f6c91

File tree

19 files changed

+1396
-709
lines changed

19 files changed

+1396
-709
lines changed

‎llms.txt

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,24 @@ The following components are implemented but reserved for future use:
2929
- [Stake Component](src/components/Stake/README.md)
3030
- [SSE Integration](src/components/Stake/hooks/useStakeSSE.ts)
3131
- [Validation](src/components/Stake/utils/validation.ts)
32+
- [Positions Sidebar](src/components/PositionsSidebar/README.md)
33+
- Overview: A sidebar component that displays open and closed trading positions
34+
- Features:
35+
- Tab switching between open and closed positions
36+
- Filtering by trade types (for open positions)
37+
- Filtering by time periods (for closed positions)
38+
- Real-time position updates
39+
- Total profit/loss display
40+
- Components:
41+
- FilterDropdown: Reusable dropdown component for position filtering
42+
- Custom Hooks:
43+
- useFilteredPositions: Manages position filtering logic
44+
- Implementation:
45+
- Follows Atomic Design principles
46+
- Uses TypeScript for type safety
47+
- Implements TDD with comprehensive test coverage
48+
- Responsive layout with proper overflow handling
49+
- Modular and maintainable code structure
3250

3351
## Typography System
3452

‎src/components/AccountSwitcher/README.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
# AccountSwitcher Component
2+
3+
A component that enables users to view and switch between different trading accounts. It displays account information and provides a smooth switching mechanism.
4+
5+
## Features
6+
7+
- Account list display
8+
- Account switching functionality
9+
- Current account information display
10+
- Real-time balance updates
11+
- Smooth transitions
12+
13+
## Component Structure
14+
15+
```
16+
AccountSwitcher/
17+
├── AccountInfo.tsx # Account information display
18+
├── AccountSwitcher.tsx # Main switcher component
19+
├── index.ts # Exports
20+
└── README.md # This file
21+
```
22+
23+
## Usage
24+
25+
```tsx
26+
import { AccountSwitcher } from '@/components/AccountSwitcher';
27+
28+
function Header() {
29+
return (
30+
<div className="header">
31+
<AccountSwitcher />
32+
</div>
33+
);
34+
}
35+
```
36+
37+
## Components
38+
39+
### AccountSwitcher
40+
41+
Main component that handles the account switching functionality.
42+
43+
#### Props
44+
None - The component uses internal state management through stores.
45+
46+
### AccountInfo
47+
48+
Component that displays individual account information.
49+
50+
#### Props
51+
52+
| Prop | Type | Description |
53+
|------|------|-------------|
54+
| accountId | string | Unique identifier for the account |
55+
| balance | string | Account balance |
56+
| currency | string | Account currency code |
57+
| isActive | boolean | Whether this is the currently selected account |
58+
59+
## State Management
60+
61+
The component uses Zustand for state management:
62+
- Account list
63+
- Current account
64+
- Loading states
65+
- Error states
66+
67+
## Features
68+
69+
### Account Display
70+
- Account ID
71+
- Account type
72+
- Balance with currency
73+
- Active status indicator
74+
75+
### Switching Mechanism
76+
- Smooth transition animation
77+
- Loading state handling
78+
- Error handling
79+
- Success confirmation
80+
81+
## Styling
82+
83+
The component uses TailwindCSS for styling:
84+
- Responsive dropdown
85+
- Hover and active states
86+
- Proper spacing and alignment
87+
- Consistent typography
88+
89+
## Best Practices
90+
91+
1. Handle loading states appropriately
92+
2. Provide error feedback
93+
3. Maintain responsive design
94+
4. Clean up listeners on unmount
95+
5. Follow atomic design principles
96+
6. Maintain test coverage
97+
98+
## Related Components
99+
100+
- BalanceDisplay: Shows account balance
101+
- CurrencyIcon: Displays currency symbols
102+
- NotificationProvider: Shows switching notifications

‎src/components/BottomNav/README.md

Lines changed: 95 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,131 @@
1-
# Bottom Navigation Component
1+
# BottomNav Component
22

3-
A responsive bottom navigation bar component for the Champion Trader application that provides primary navigation on mobile devices.
3+
A mobile-first navigation component that provides easy access to primary application features through a bottom navigation bar.
44

5-
## Overview
5+
## Features
66

7-
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).
7+
- Mobile-optimized navigation
8+
- Icon and label display
9+
- Active route indication
10+
- Badge support
11+
- Smooth transitions
12+
- Touch-friendly design
813

914
## Component Structure
1015

1116
```
1217
BottomNav/
1318
├── BottomNav.tsx # Main component
14-
├── index.ts # Public exports
15-
└── __tests__/ # Test suite
16-
└── BottomNav.test.tsx
19+
├── index.ts # Exports
20+
└── README.md # This file
1721
```
1822

1923
## Usage
2024

21-
```typescript
25+
```tsx
2226
import { BottomNav } from '@/components/BottomNav';
2327

24-
function App() {
28+
function MobileLayout() {
2529
return (
26-
<div>
27-
<main>{/* Main content */}</main>
30+
<div className="mobile-layout">
31+
<main>{/* Content */}</main>
2832
<BottomNav />
2933
</div>
3034
);
3135
}
3236
```
3337

34-
## Features
35-
36-
- Responsive mobile-first design
37-
- Authentication-aware navigation
38-
- Smooth transitions and animations
39-
- Active route highlighting
40-
- Device-type specific rendering
38+
## Props
4139

42-
## Implementation Details
40+
| Prop | Type | Description |
41+
|------|------|-------------|
42+
| className? | string | Optional CSS classes |
43+
| items? | NavItem[] | Optional custom navigation items |
4344

44-
The component follows atomic design principles:
45-
- Self-contained navigation logic
46-
- Independent state management
47-
- Clear prop interfaces
48-
- Comprehensive test coverage
49-
50-
### State Management
51-
52-
The component manages:
53-
- Authentication state via clientStore
54-
- Active route state
55-
- Device type detection
56-
- Navigation state
57-
58-
### Navigation Items
59-
60-
Navigation items are conditionally rendered based on authentication status:
45+
## Types
6146

6247
```typescript
6348
interface NavItem {
6449
label: string;
65-
icon: React.ReactNode;
50+
icon: IconComponent;
6651
path: string;
67-
requiresAuth: boolean;
52+
badge?: number | string;
6853
}
6954
```
7055

71-
## Testing
56+
## Features
7257

73-
The component includes comprehensive tests following TDD methodology:
74-
- Unit tests for navigation logic
75-
- Authentication state tests
76-
- Device type rendering tests
77-
- Route handling tests
78-
- Transition animation tests
58+
### Navigation Items
59+
- Icon representation
60+
- Text labels
61+
- Active state
62+
- Optional badges
63+
- Touch targets
64+
65+
### Interactions
66+
- Touch feedback
67+
- Active highlighting
68+
- Route transitions
69+
- Badge updates
70+
71+
### Responsive Behavior
72+
- Portrait/Landscape handling
73+
- Safe area support
74+
- Keyboard awareness
75+
- Gesture handling
76+
77+
## Styling
78+
79+
The component uses TailwindCSS for styling:
80+
- Mobile-first design
81+
- Touch-friendly sizing
82+
- Active states
83+
- Badge styling
84+
- iOS/Android adaptations
85+
86+
## State Management
87+
88+
The component integrates with:
89+
- Route management
90+
- Badge updates
91+
- Device orientation
92+
- Keyboard visibility
7993

8094
## Best Practices
8195

82-
- Uses TailwindCSS for consistent styling
83-
- Implements proper cleanup for event listeners
84-
- Handles all authentication states
85-
- Provides clear visual feedback
86-
- Maintains accessibility standards
87-
- Supports keyboard navigation
88-
89-
## Responsive Design
90-
91-
The component implements responsive behavior:
92-
- Full-width on mobile devices
93-
- Hidden on desktop (uses side navigation instead)
94-
- Adapts to device orientation changes
95-
- Handles safe area insets on mobile devices
96+
1. Use clear, recognizable icons
97+
2. Keep labels short and clear
98+
3. Ensure adequate touch targets
99+
4. Handle safe areas properly
100+
5. Follow atomic design principles
101+
6. Maintain test coverage
102+
103+
## Accessibility
104+
105+
The component implements:
106+
- ARIA roles
107+
- Touch targets
108+
- Focus indicators
109+
- Screen reader support
110+
- High contrast modes
111+
112+
## Platform Considerations
113+
114+
### iOS
115+
- Safe area insets
116+
- Bottom sheet interaction
117+
- Gesture handling
118+
- Native-like feel
119+
120+
### Android
121+
- Material Design alignment
122+
- Back button handling
123+
- Navigation patterns
124+
- System UI integration
125+
126+
## Related Components
127+
128+
- SideNav: Desktop navigation
129+
- MenuSidebar: Expanded menu
130+
- Header: Top navigation
131+
- PositionsSidebar: Trading panel

0 commit comments

Comments
 (0)