{
// Only close if clicking the overlay itself, not its children
onDragDown?.();
@@ -92,7 +92,7 @@ export const BottomSheet = () => {
rounded-t-[16px]
animate-in fade-in-0 slide-in-from-bottom
duration-300
- z-50
+ z-[60]
transition-transform
overflow-hidden
`}
@@ -106,7 +106,7 @@ export const BottomSheet = () => {
{/* Content */}
- {
+ onDragDown?.();
+ setBottomSheet(false);
+ }}
+/>
```
### Height Processing
diff --git a/src/components/BottomSheet/__tests__/BottomSheet.test.tsx b/src/components/BottomSheet/__tests__/BottomSheet.test.tsx
index bef29a8..c3ee828 100644
--- a/src/components/BottomSheet/__tests__/BottomSheet.test.tsx
+++ b/src/components/BottomSheet/__tests__/BottomSheet.test.tsx
@@ -65,11 +65,13 @@ describe("BottomSheet", () => {
expect(bottomSheet).toHaveStyle({ height: '50vh' });
});
- it("handles drag to dismiss", () => {
+ it("handles drag to dismiss and calls onDragDown", () => {
+ const mockOnDragDown = jest.fn();
mockUseBottomSheetStore.mockReturnValue({
showBottomSheet: true,
key: 'test-key',
height: '380px',
+ onDragDown: mockOnDragDown,
setBottomSheet: mockSetBottomSheet
});
@@ -83,6 +85,45 @@ describe("BottomSheet", () => {
fireEvent.touchMove(document, { touches: [{ clientY: 150 }] });
fireEvent.touchEnd(document);
+ expect(mockOnDragDown).toHaveBeenCalled();
+ expect(mockSetBottomSheet).toHaveBeenCalledWith(false);
+ });
+
+ it("applies animation classes when shown", () => {
+ mockUseBottomSheetStore.mockReturnValue({
+ showBottomSheet: true,
+ key: 'test-key',
+ height: '380px',
+ setBottomSheet: mockSetBottomSheet
+ });
+
+ const { container } = render(
);
+
+ const overlay = container.querySelector('[class*="fixed inset-0"]');
+ const sheet = container.querySelector('[class*="fixed bottom-0"]');
+
+ expect(overlay?.className).toContain('animate-in fade-in-0');
+ expect(sheet?.className).toContain('animate-in fade-in-0 slide-in-from-bottom');
+ expect(sheet?.className).toContain('duration-300');
+ });
+
+ it("calls onDragDown when clicking overlay", () => {
+ const mockOnDragDown = jest.fn();
+ mockUseBottomSheetStore.mockReturnValue({
+ showBottomSheet: true,
+ key: 'test-key',
+ height: '380px',
+ onDragDown: mockOnDragDown,
+ setBottomSheet: mockSetBottomSheet
+ });
+
+ const { container } = render(
);
+
+ const overlay = container.querySelector('[class*="fixed inset-0"]');
+ expect(overlay).toBeInTheDocument();
+ fireEvent.click(overlay!);
+
+ expect(mockOnDragDown).toHaveBeenCalled();
expect(mockSetBottomSheet).toHaveBeenCalledWith(false);
});
diff --git a/src/components/Duration/DurationController.tsx b/src/components/Duration/DurationController.tsx
new file mode 100644
index 0000000..3e7b749
--- /dev/null
+++ b/src/components/Duration/DurationController.tsx
@@ -0,0 +1,96 @@
+import React from "react";
+import { DurationTabList } from "./components/DurationTabList";
+import { DurationValueList } from "./components/DurationValueList";
+import { HoursDurationValue } from "./components/HoursDurationValue";
+import { useTradeStore } from "@/stores/tradeStore";
+import { useBottomSheetStore } from "@/stores/bottomSheetStore";
+import { PrimaryButton } from "@/components/ui/primary-button";
+
+const getDurationValues = (type: string): number[] => {
+ switch (type) {
+ case "tick":
+ return [1, 2, 3, 4, 5];
+ case "second":
+ return [
+ 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,
+ ];
+ case "minute":
+ return [1, 2, 3, 5, 10, 15, 30];
+ case "hour":
+ return [1, 2, 3, 4, 6, 8, 12, 24];
+ case "day":
+ return [1];
+ default:
+ return [];
+ }
+};
+
+export const DurationController: React.FC = () => {
+ const { duration, setDuration } = useTradeStore();
+ const { setBottomSheet } = useBottomSheetStore();
+
+ // Initialize local state with store value
+ const [localDuration, setLocalDuration] = React.useState(duration);
+ const [value, type] = localDuration.split(" ");
+ const selectedType = type;
+ const selectedValue: string | number = type === "hour" ? value : parseInt(value, 10);
+
+ const handleTypeSelect = (type: string) => {
+ if (type === "hour") {
+ setLocalDuration("1:0 hour");
+ } else {
+ const values = getDurationValues(type);
+ const newValue = values[0];
+ setLocalDuration(`${newValue} ${type}`);
+ }
+ };
+
+ const handleValueSelect = (value: number) => {
+ setLocalDuration(`${value} ${selectedType}`);
+ };
+
+ const handleSave = () => {
+ setDuration(localDuration); // Update store with local state
+ setBottomSheet(false);
+ };
+
+ return (
+
+
+
+ Duration
+
+
+
+
+
+ {selectedType === "hour" ? (
+
setLocalDuration(`${value} hour`)}
+ />
+ ) : (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/components/Duration/README.md b/src/components/Duration/README.md
new file mode 100644
index 0000000..422be1e
--- /dev/null
+++ b/src/components/Duration/README.md
@@ -0,0 +1,76 @@
+# Duration Component
+
+## Overview
+The Duration component is a comprehensive solution for handling trade duration selection in the Champion Trader application. It provides an intuitive interface for users to select trade durations across different time units (ticks, seconds, minutes, hours, and days).
+
+## Architecture
+
+### Main Components
+- `DurationController`: The main controller component that orchestrates duration selection
+- `DurationTabList`: Handles the selection of duration types (tick, second, minute, hour, day)
+- `DurationValueList`: Displays and manages the selection of specific duration values
+- `HoursDurationValue`: Special component for handling hour-based durations with minute precision
+
+### State Management
+- Uses Zustand via `useTradeStore` for managing duration state
+- Integrates with `useBottomSheetStore` for modal behavior
+
+## Features
+- Supports multiple duration types:
+ - Ticks (1-5)
+ - Seconds (1-60)
+ - Minutes (1, 2, 3, 5, 10, 15, 30)
+ - Hours (1, 2, 3, 4, 6, 8, 12, 24)
+ - Days (1)
+- Real-time duration updates
+- Responsive and accessible UI
+- Integration with bottom sheet for mobile-friendly interaction
+
+## Usage
+
+```tsx
+import { DurationController } from '@/components/Duration';
+
+// Inside your component
+const YourComponent = () => {
+ return (
+
+ );
+};
+```
+
+## State Format
+The duration state follows the format: `"
"`, for example:
+- "5 tick"
+- "30 second"
+- "15 minute"
+- "2 hour"
+- "1 day"
+
+For hours, the format supports minute precision: "1:30 hour"
+
+## Test Coverage
+The component is thoroughly tested with Jest and React Testing Library, covering:
+- Component rendering
+- Duration type selection
+- Duration value selection
+- State management integration
+- UI interactions
+
+## Dependencies
+- React
+- Zustand (for state management)
+- TailwindCSS (for styling)
+- Primary Button component
+
+## Styling
+The component uses TailwindCSS for styling with a focus on:
+- Mobile-first design
+- Consistent spacing and typography
+- Clear visual hierarchy
+- Accessible color contrast
+
+## Integration Points
+- Integrates with the Trade Page for duration selection
+- Works within the Bottom Sheet component for mobile interactions
+- Connects with the global trade store for state management
diff --git a/src/components/Duration/__tests__/DurationController.test.tsx b/src/components/Duration/__tests__/DurationController.test.tsx
new file mode 100644
index 0000000..ad1d21b
--- /dev/null
+++ b/src/components/Duration/__tests__/DurationController.test.tsx
@@ -0,0 +1,276 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { DurationController } from '../DurationController';
+import { useTradeStore } from '@/stores/tradeStore';
+import { useBottomSheetStore } from '@/stores/bottomSheetStore';
+import type { TradeState } from '@/stores/tradeStore';
+import type { BottomSheetState } from '@/stores/bottomSheetStore';
+
+// Mock the stores
+jest.mock('@/stores/tradeStore', () => ({
+ useTradeStore: jest.fn(),
+}));
+
+jest.mock('@/stores/bottomSheetStore', () => ({
+ useBottomSheetStore: jest.fn(),
+}));
+
+// Mock scrollIntoView and IntersectionObserver
+window.HTMLElement.prototype.scrollIntoView = jest.fn();
+const mockIntersectionObserver = jest.fn();
+mockIntersectionObserver.mockReturnValue({
+ observe: () => null,
+ unobserve: () => null,
+ disconnect: () => null,
+});
+window.IntersectionObserver = mockIntersectionObserver;
+
+describe('DurationController', () => {
+ const mockSetDuration = jest.fn();
+ const mockSetBottomSheet = jest.fn();
+ const mockSetStake = jest.fn();
+ const mockToggleAllowEquals = jest.fn();
+
+ const setupMocks = (initialDuration = '1 tick') => {
+ // Setup store mocks with proper typing
+ (useTradeStore as jest.MockedFunction).mockReturnValue({
+ stake: '10 USD',
+ duration: initialDuration,
+ allowEquals: false,
+ setStake: mockSetStake,
+ setDuration: mockSetDuration,
+ toggleAllowEquals: mockToggleAllowEquals,
+ } as TradeState);
+
+ (useBottomSheetStore as jest.MockedFunction).mockReturnValue({
+ showBottomSheet: false,
+ key: null,
+ height: '380px',
+ setBottomSheet: mockSetBottomSheet,
+ } as BottomSheetState);
+ };
+
+ beforeEach(() => {
+ setupMocks();
+ // Clear mocks
+ mockSetDuration.mockClear();
+ mockSetBottomSheet.mockClear();
+ mockSetStake.mockClear();
+ mockToggleAllowEquals.mockClear();
+ mockIntersectionObserver.mockClear();
+ });
+
+ describe('Initial Render', () => {
+ it('renders duration types and initial value', () => {
+ render();
+
+ expect(screen.getByText('Duration')).toBeInTheDocument();
+ expect(screen.getByText('Ticks')).toBeInTheDocument();
+ expect(screen.getByText('Seconds')).toBeInTheDocument();
+ expect(screen.getByText('Minutes')).toBeInTheDocument();
+ expect(screen.getByText('Hours')).toBeInTheDocument();
+ expect(screen.getByText('End Time')).toBeInTheDocument();
+ });
+
+ it('syncs with store on mount', () => {
+ setupMocks('5 tick');
+ render();
+
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('5 tick');
+ });
+ });
+
+ describe('Ticks Duration', () => {
+ it('shows correct tick values', () => {
+ render();
+
+ const valueItems = screen.getAllByRole('radio');
+ const values = valueItems.map(item => item.getAttribute('value'));
+
+ expect(values).toEqual(['1', '2', '3', '4', '5']);
+ });
+
+ it('selects default tick value', () => {
+ render();
+
+ const selectedValue = screen.getByRole('radio', { checked: true });
+ expect(selectedValue.getAttribute('value')).toBe('1');
+ });
+
+ it('updates duration on tick selection', () => {
+ render();
+
+ const valueItems = screen.getAllByRole('radio');
+ const threeTicks = valueItems.find(item => item.getAttribute('value') === '3');
+
+ if (threeTicks) {
+ act(() => {
+ fireEvent.click(threeTicks);
+ });
+ }
+
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('3 tick');
+ });
+ });
+
+ describe('Minutes Duration', () => {
+ beforeEach(() => {
+ render();
+ act(() => {
+ fireEvent.click(screen.getByText('Minutes'));
+ });
+ });
+
+ it('shows correct minute values', () => {
+ const valueItems = screen.getAllByRole('radio');
+ const values = valueItems.map(item => item.getAttribute('value'));
+
+ expect(values).toEqual(['1', '2', '3', '5', '10', '15', '30']);
+ });
+
+ it('selects default minute value', () => {
+ const selectedValue = screen.getByRole('radio', { checked: true });
+ expect(selectedValue.getAttribute('value')).toBe('1');
+ });
+
+ it('updates duration on minute selection', () => {
+ const valueItems = screen.getAllByRole('radio');
+ const fiveMinutes = valueItems.find(item => item.getAttribute('value') === '5');
+
+ if (fiveMinutes) {
+ act(() => {
+ fireEvent.click(fiveMinutes);
+ });
+ }
+
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('5 minute');
+ });
+ });
+
+ describe('Hours Duration', () => {
+ beforeEach(() => {
+ render();
+ act(() => {
+ fireEvent.click(screen.getByText('Hours'));
+ });
+ });
+
+ it('handles hour:minute format correctly', () => {
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('1:0 hour');
+ });
+
+ it('preserves hour selection when switching tabs', () => {
+ // Switch to minutes
+ act(() => {
+ fireEvent.click(screen.getByText('Minutes'));
+ });
+
+ // Switch back to hours
+ act(() => {
+ fireEvent.click(screen.getByText('Hours'));
+ });
+
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('1:0 hour');
+ });
+ });
+
+ describe('End Time Duration', () => {
+ beforeEach(() => {
+ render();
+ act(() => {
+ fireEvent.click(screen.getByText('End Time'));
+ });
+ });
+
+ it('updates duration for end time selection', () => {
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('1 day');
+ });
+ });
+
+ describe('State Management', () => {
+ it('preserves local state until save', () => {
+ render();
+
+ // Change to minutes
+ act(() => {
+ fireEvent.click(screen.getByText('Minutes'));
+ });
+
+ // Select 5 minutes
+ const valueItems = screen.getAllByRole('radio');
+ const fiveMinutes = valueItems.find(item => item.getAttribute('value') === '5');
+
+ if (fiveMinutes) {
+ act(() => {
+ fireEvent.click(fiveMinutes);
+ });
+ }
+
+ // Verify store hasn't been updated yet
+ expect(mockSetDuration).not.toHaveBeenCalled();
+
+ // Save changes
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ // Verify store is updated with new value
+ expect(mockSetDuration).toHaveBeenCalledWith('5 minute');
+ expect(mockSetBottomSheet).toHaveBeenCalledWith(false);
+ });
+
+ it('handles rapid tab switching without losing state', () => {
+ render();
+
+ // Rapid switches between duration types
+ act(() => {
+ fireEvent.click(screen.getByText('Minutes'));
+ fireEvent.click(screen.getByText('Hours'));
+ fireEvent.click(screen.getByText('End Time'));
+ fireEvent.click(screen.getByText('Minutes'));
+ });
+
+ // Select and save a value
+ const valueItems = screen.getAllByRole('radio');
+ const threeMinutes = valueItems.find(item => item.getAttribute('value') === '3');
+
+ if (threeMinutes) {
+ act(() => {
+ fireEvent.click(threeMinutes);
+ });
+ }
+
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('3 minute');
+ });
+
+ it('handles invalid duration format gracefully', () => {
+ setupMocks('invalid duration');
+ render();
+
+ // Should use the provided invalid duration
+ const saveButton = screen.getByText('Save');
+ fireEvent.click(saveButton);
+
+ expect(mockSetDuration).toHaveBeenCalledWith('invalid duration');
+ });
+ });
+});
diff --git a/src/components/Duration/components/DurationTab.tsx b/src/components/Duration/components/DurationTab.tsx
new file mode 100644
index 0000000..33e0724
--- /dev/null
+++ b/src/components/Duration/components/DurationTab.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Chip } from '@/components/ui/chip';
+
+interface DurationTabProps {
+ label: string;
+ isSelected: boolean;
+ onSelect: () => void;
+}
+
+export const DurationTab: React.FC = ({
+ label,
+ isSelected,
+ onSelect
+}) => {
+ return (
+
+ {label}
+
+ );
+};
diff --git a/src/components/Duration/components/DurationTabList.tsx b/src/components/Duration/components/DurationTabList.tsx
new file mode 100644
index 0000000..5e9b017
--- /dev/null
+++ b/src/components/Duration/components/DurationTabList.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+import { DurationTab } from './DurationTab';
+
+interface DurationTabListProps {
+ selectedType: string;
+ onTypeSelect: (type: string) => void;
+}
+
+const DURATION_TYPES = [
+ { label: 'Ticks', value: 'tick' },
+ { label: 'Seconds', value: 'second' },
+ { label: 'Minutes', value: 'minute' },
+ { label: 'Hours', value: 'hour' },
+ { label: 'End Time', value: 'day' }
+];
+
+export const DurationTabList: React.FC = ({
+ selectedType,
+ onTypeSelect
+}) => {
+ return (
+
+
+ {DURATION_TYPES.map(({ label, value }) => (
+
+ onTypeSelect(value)}
+ />
+
+ ))}
+
+
+ {/* Selection zone with gradient background */}
+
+
+ {/* Scrollable content */}
+
+ {/* Top spacer */}
+
+
+ {values.map((value) => (
+
+ ))}
+
+ {/* Bottom spacer */}
+
+
+
+
+ Current value: {selectedValue}
+
+ ),
+}));
+
+describe('HoursDurationValue', () => {
+ const defaultProps = {
+ selectedValue: '2:30',
+ onValueSelect: jest.fn(),
+ };
+
+ beforeEach(() => {
+ defaultProps.onValueSelect.mockClear();
+ });
+
+ it('renders hours and minutes sections with proper ARIA labels', () => {
+ render();
+
+ const container = screen.getByRole('group');
+ expect(container).toHaveAttribute('aria-label', 'Duration in hours and minutes');
+
+ const hoursSection = screen.getByLabelText('Hours');
+ const minutesSection = screen.getByLabelText('Minutes');
+
+ expect(hoursSection).toBeInTheDocument();
+ expect(minutesSection).toBeInTheDocument();
+ });
+
+ it('initializes with correct hour and minute values', () => {
+ render();
+
+ expect(screen.getByTestId('duration-value-list-hour')).toHaveTextContent('Current value: 3');
+ expect(screen.getByTestId('duration-value-list-minute')).toHaveTextContent('Current value: 45');
+ });
+
+ it('handles hour selection', () => {
+ render();
+
+ fireEvent.click(screen.getByTestId('increment-hour'));
+
+ expect(defaultProps.onValueSelect).toHaveBeenCalledWith('3:30');
+ });
+
+ it('handles minute selection', () => {
+ render();
+
+ fireEvent.click(screen.getByTestId('increment-minute'));
+
+ expect(defaultProps.onValueSelect).toHaveBeenCalledWith('2:31');
+ });
+
+ it('maintains last valid values when selecting new values', () => {
+ const { rerender } = render();
+
+ // Change hours
+ fireEvent.click(screen.getByTestId('increment-hour'));
+ expect(defaultProps.onValueSelect).toHaveBeenCalledWith('3:30');
+
+ // Update component with new value
+ rerender();
+
+ // Change minutes
+ fireEvent.click(screen.getByTestId('increment-minute'));
+ expect(defaultProps.onValueSelect).toHaveBeenCalledWith('3:31');
+ });
+
+ it('renders with correct layout', () => {
+ const { container } = render();
+
+ const wrapper = container.firstChild as HTMLElement;
+ expect(wrapper).toHaveClass('flex w-full');
+
+ const [hoursDiv, minutesDiv] = wrapper.childNodes;
+ expect(hoursDiv).toHaveClass('flex-1');
+ expect(minutesDiv).toHaveClass('flex-1');
+ });
+
+ it('passes correct props to DurationValueList components', () => {
+ render();
+
+ const hoursList = screen.getByTestId('duration-value-list-hour');
+ const minutesList = screen.getByTestId('duration-value-list-minute');
+
+ expect(hoursList).toBeInTheDocument();
+ expect(minutesList).toBeInTheDocument();
+ });
+});
diff --git a/src/components/Duration/index.ts b/src/components/Duration/index.ts
new file mode 100644
index 0000000..3fe9f81
--- /dev/null
+++ b/src/components/Duration/index.ts
@@ -0,0 +1,3 @@
+export { DurationController } from './DurationController';
+export { DurationTabList } from './components/DurationTabList';
+export { DurationValueList } from './components/DurationValueList';
diff --git a/src/components/TradeButton/Button.tsx b/src/components/TradeButton/Button.tsx
index 3acbab0..4fd739f 100644
--- a/src/components/TradeButton/Button.tsx
+++ b/src/components/TradeButton/Button.tsx
@@ -6,6 +6,7 @@ interface TradeButtonProps {
label: string;
value: string;
title_position: "left" | "right";
+ onClick?: () => void;
}
export const TradeButton: React.FC = ({
@@ -14,13 +15,23 @@ export const TradeButton: React.FC = ({
label,
value,
title_position,
+ onClick,
}) => {
const isLeft = title_position === "left";
return (