+ {/* Desktop Sidebar */}
+
+
+
+
+ {/* Mobile Menu Button */}
+
+
+
+
+ {/* Mobile Sidebar Overlay */}
+ {isSidebarOpen && (
+
+
setIsSidebarOpen(false)}
+ onKeyDown={(e) => {
+ if (e.key === 'Escape') {
+ setIsSidebarOpen(false)
+ }
+ }}
+ role="button"
+ tabIndex={0}
+ aria-label="Close sidebar"
+ />
+
+
+
Símbolos
+
+
+
+
+
+
+
+ )}
+
+ {/* Main Content */}
+
+
+
+
+ )
+}
+
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
new file mode 100644
index 00000000..4979cbd3
--- /dev/null
+++ b/src/components/sidebar.tsx
@@ -0,0 +1,257 @@
+import { useState, useEffect, useRef } from 'react'
+import { useForm } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { z } from 'zod'
+import { Search } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Checkbox } from '@/components/ui/checkbox'
+import { useSymbolsSearch } from '@/hooks/use-symbols-search'
+import { useSymbolContext } from '@/contexts/symbol-context'
+import { cn } from '@/lib/utils'
+
+const searchSchema = z.object({
+ search: z.string().min(0)
+})
+
+type SearchForm = z.infer
+
+interface SymbolItemProps {
+ symbol: string
+ isSelected: boolean
+ onToggle: (symbol: string) => void
+}
+
+function SymbolItem({ symbol, isSelected, onToggle }: SymbolItemProps) {
+ return (
+
+ )
+}
+
+interface SelectAllItemProps {
+ isAllSelected: boolean
+ onToggleAll: () => void
+}
+
+function SelectAllItem({ isAllSelected, onToggleAll }: SelectAllItemProps) {
+ return (
+
+ )
+}
+
+interface SearchBarProps {
+ onClearSearch: React.MutableRefObject<(() => void) | null>
+ onSearchValueChange: (value: string) => void
+}
+
+function SearchBar({ onClearSearch, onSearchValueChange }: SearchBarProps) {
+ const [debouncedSearch, setDebouncedSearch] = useState('')
+ const { setAvailableSymbols } = useSymbolContext()
+
+ const { register, watch, reset } = useForm({
+ resolver: zodResolver(searchSchema),
+ defaultValues: { search: '' }
+ })
+
+ const searchValue = watch('search')
+
+ // Notify parent of search value changes
+ useEffect(() => {
+ onSearchValueChange(searchValue)
+ }, [searchValue, onSearchValueChange])
+
+ // Expose clear function to parent
+ useEffect(() => {
+ onClearSearch.current = () => {
+ reset({ search: '' })
+ setDebouncedSearch('')
+ setAvailableSymbols([])
+ }
+ }, [reset, setAvailableSymbols, onClearSearch])
+
+ // Debounce search term
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setDebouncedSearch(searchValue)
+ }, 500)
+
+ return () => clearTimeout(timer)
+ }, [searchValue])
+
+ const { data: symbols, isLoading } = useSymbolsSearch(debouncedSearch)
+
+ useEffect(() => {
+ if (symbols) {
+ setAvailableSymbols(symbols)
+ }
+ }, [symbols, setAvailableSymbols])
+
+ return (
+
+
+
+
+
+ {isLoading && (
+
+ )}
+
+ Digite para pesquisar símbolos
+
+ )
+ }
+
+ if (availableSymbols.length === 0) {
+ return (
+
+ Nenhum símbolo encontrado
+
+ )
+ }
+
+ const availableSymbolNames = availableSymbols.map(symbol => symbol.symbol)
+ const isAllSelected = availableSymbolNames.length > 0 &&
+ availableSymbolNames.every(symbol => selectedSymbols.includes(symbol))
+
+ return (
+
+
+
+ {availableSymbols.map((symbol) => (
+
+ ))}
+
+ )
+}
+
+export function Sidebar() {
+ const { selectedSymbols, addSymbolsToActiveList } = useSymbolContext()
+ const clearSearchRef = useRef<(() => void) | null>(null)
+ const [searchValue, setSearchValue] = useState('')
+
+ const handleAddToList = () => {
+ if (selectedSymbols.length > 0) {
+ addSymbolsToActiveList(selectedSymbols)
+
+ // Limpar o input de busca e a lista de símbolos disponíveis
+ if (clearSearchRef.current) {
+ clearSearchRef.current()
+ }
+ setSearchValue('')
+ }
+ }
+
+ const handleSearchValueChange = (value: string) => {
+ setSearchValue(value)
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
|
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+ HTMLTableCellElement,
+ React.ThHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+ HTMLTableCellElement,
+ React.TdHTMLAttributes
+>(({ className, ...props }, ref) => (
+ |
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+ HTMLTableCaptionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+ Table,
+ TableHeader,
+ TableBody,
+ TableFooter,
+ TableHead,
+ TableRow,
+ TableCell,
+ TableCaption,
+}
\ No newline at end of file
diff --git a/src/contexts/symbol-context.test.tsx b/src/contexts/symbol-context.test.tsx
new file mode 100644
index 00000000..89ea8f9c
--- /dev/null
+++ b/src/contexts/symbol-context.test.tsx
@@ -0,0 +1,210 @@
+import { renderHook, act } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import type { ReactNode } from 'react'
+import { SymbolProvider, useSymbolContext, type SymbolList } from './symbol-context'
+
+const wrapper = ({ children }: { children: ReactNode }) => (
+ {children}
+)
+
+describe('SymbolContext', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ localStorage.clear()
+ })
+
+ it('deve inicializar com lista padrão quando localStorage está vazio', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ expect(result.current.symbolLists).toHaveLength(1)
+ expect(result.current.symbolLists[0]).toEqual({
+ id: 'default',
+ name: 'Default',
+ symbols: []
+ })
+ expect(result.current.activeListId).toBe('default')
+ })
+
+ it('deve carregar listas do localStorage quando disponível', () => {
+ const savedLists: SymbolList[] = [
+ { id: '1', name: 'My List', symbols: ['BTCUSDT', 'ETHUSDT'] },
+ { id: '2', name: 'Another List', symbols: ['ADAUSDT'] }
+ ]
+
+ localStorage.setItem('symbol-lists', JSON.stringify(savedLists))
+ localStorage.setItem('active-list-id', '1')
+
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ expect(result.current.symbolLists).toEqual(savedLists)
+ expect(result.current.activeListId).toBe('1')
+ })
+
+ it('deve gerenciar símbolos disponíveis corretamente', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ const newSymbols = [
+ { symbol: 'BTCUSDT', baseAsset: 'BTC', quoteAsset: 'USDT' },
+ { symbol: 'ETHUSDT', baseAsset: 'ETH', quoteAsset: 'USDT' }
+ ]
+
+ act(() => {
+ result.current.setAvailableSymbols(newSymbols)
+ })
+
+ expect(result.current.availableSymbols).toEqual(newSymbols)
+ })
+
+ it('deve gerenciar símbolos selecionados corretamente', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.setSelectedSymbols(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ expect(result.current.selectedSymbols).toEqual(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ it('deve gerenciar preços de símbolos corretamente', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ const newPrices = {
+ BTCUSDT: {
+ symbol: 'BTCUSDT',
+ lastPrice: '50000.00',
+ bidPrice: '49999.00',
+ askPrice: '50001.00',
+ priceChange: '1000.00',
+ priceChangePercent: '2.04'
+ }
+ }
+
+ act(() => {
+ result.current.setSymbolPrices(newPrices)
+ })
+
+ expect(result.current.symbolPrices).toEqual(newPrices)
+ })
+
+ it('deve adicionar nova lista corretamente', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addNewList('Minha Nova Lista')
+ })
+
+ expect(result.current.symbolLists).toHaveLength(2)
+ const newList = result.current.symbolLists[1]
+ expect(newList.name).toBe('Minha Nova Lista')
+ expect(newList.symbols).toEqual([])
+ expect(result.current.activeListId).toBe(newList.id)
+ })
+
+ it('deve adicionar símbolos à lista ativa', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addSymbolsToActiveList(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ const activeList = result.current.symbolLists.find(
+ list => list.id === result.current.activeListId
+ )
+ expect(activeList?.symbols).toEqual(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ it('deve remover símbolos duplicados ao adicionar', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addSymbolsToActiveList(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ act(() => {
+ result.current.addSymbolsToActiveList(['BTCUSDT', 'ADAUSDT'])
+ })
+
+ const activeList = result.current.symbolLists.find(
+ list => list.id === result.current.activeListId
+ )
+ expect(activeList?.symbols).toEqual(['BTCUSDT', 'ETHUSDT', 'ADAUSDT'])
+ })
+
+ it('deve remover símbolo da lista ativa', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addSymbolsToActiveList(['BTCUSDT', 'ETHUSDT', 'ADAUSDT'])
+ })
+
+ act(() => {
+ result.current.removeSymbolFromActiveList('ETHUSDT')
+ })
+
+ const activeList = result.current.symbolLists.find(
+ list => list.id === result.current.activeListId
+ )
+ expect(activeList?.symbols).toEqual(['BTCUSDT', 'ADAUSDT'])
+ })
+
+ it('deve alterar lista ativa corretamente', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addNewList('Segunda Lista')
+ })
+
+ const secondListId = result.current.symbolLists[1].id
+
+ act(() => {
+ result.current.setActiveListId('default')
+ })
+
+ expect(result.current.activeListId).toBe('default')
+ })
+
+ it('deve salvar no localStorage ao modificar listas', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addNewList('Test List')
+ })
+
+ const savedLists = JSON.parse(localStorage.getItem('symbol-lists') || '[]')
+ expect(savedLists).toHaveLength(2)
+ expect(savedLists[1].name).toBe('Test List')
+ })
+
+ it('deve salvar activeListId no localStorage', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.addNewList('New List')
+ })
+
+ const newListId = result.current.symbolLists[1].id
+ expect(localStorage.getItem('active-list-id')).toBe(newListId)
+ })
+
+ it('deve limpar símbolos selecionados após adicionar à lista', () => {
+ const { result } = renderHook(() => useSymbolContext(), { wrapper })
+
+ act(() => {
+ result.current.setSelectedSymbols(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ expect(result.current.selectedSymbols).toEqual(['BTCUSDT', 'ETHUSDT'])
+
+ act(() => {
+ result.current.addSymbolsToActiveList(['BTCUSDT', 'ETHUSDT'])
+ })
+
+ expect(result.current.selectedSymbols).toEqual([])
+ })
+
+ it('deve lançar erro quando usado fora do Provider', () => {
+ expect(() => {
+ renderHook(() => useSymbolContext())
+ }).toThrow('useSymbolContext must be used within a SymbolProvider')
+ })
+})
\ No newline at end of file
diff --git a/src/contexts/symbol-context.tsx b/src/contexts/symbol-context.tsx
new file mode 100644
index 00000000..59278f87
--- /dev/null
+++ b/src/contexts/symbol-context.tsx
@@ -0,0 +1,187 @@
+import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
+
+export interface Symbol {
+ symbol: string
+ baseAsset: string
+ quoteAsset: string
+}
+
+export interface SymbolPrice {
+ symbol: string
+ lastPrice: string
+ bidPrice: string
+ askPrice: string
+ priceChange: string
+ priceChangePercent: string
+}
+
+export interface SymbolList {
+ id: string
+ name: string
+ symbols: string[]
+}
+
+interface SymbolContextValue {
+ // Available symbols from search
+ availableSymbols: Symbol[]
+ setAvailableSymbols: (symbols: Symbol[]) => void
+
+ // Selected symbols in sidebar
+ selectedSymbols: string[]
+ setSelectedSymbols: (symbols: string[]) => void
+
+ // Symbol prices from websocket
+ symbolPrices: Record
+ setSymbolPrices: (prices: Record | ((prev: Record) => Record)) => void
+
+ // Symbol lists
+ symbolLists: SymbolList[]
+ setSymbolLists: (lists: SymbolList[]) => void
+
+ // Current active list
+ activeListId: string | null
+ setActiveListId: (listId: string | null) => void
+
+ // Add symbols to active list
+ addSymbolsToActiveList: (symbols: string[]) => void
+
+ // Remove symbol from active list
+ removeSymbolFromActiveList: (symbol: string) => void
+
+ // Add new list
+ addNewList: (name: string) => void
+}
+
+const SymbolContext = createContext(undefined)
+
+interface SymbolProviderProps {
+ children: ReactNode
+}
+
+export function SymbolProvider({ children }: SymbolProviderProps) {
+ const [availableSymbols, setAvailableSymbols] = useState([])
+ const [selectedSymbols, setSelectedSymbols] = useState([])
+ const [symbolPrices, setSymbolPrices] = useState>({})
+ const [symbolLists, setSymbolLists] = useState(() => {
+ // Load from localStorage
+ const saved = localStorage.getItem('symbol-lists')
+ if (saved) {
+ try {
+ const parsed = JSON.parse(saved)
+ // Ensure we have at least one list and it's an array
+ if (Array.isArray(parsed) && parsed.length > 0) {
+ return parsed
+ }
+ } catch (error) {
+ console.error('Error parsing saved symbol lists:', error)
+ }
+ }
+ // Default list - empty but ensures select is not empty
+ return [{ id: 'default', name: 'Default', symbols: [] }]
+ })
+ const [activeListId, setActiveListId] = useState(() => {
+ const saved = localStorage.getItem('active-list-id')
+ return saved || 'default'
+ })
+
+ // Ensure we always have at least the Default list
+ useEffect(() => {
+ if (symbolLists.length === 0) {
+ const defaultList = [{ id: 'default', name: 'Default', symbols: [] }]
+ setSymbolLists(defaultList)
+ localStorage.setItem('symbol-lists', JSON.stringify(defaultList))
+ setActiveListId('default')
+ localStorage.setItem('active-list-id', 'default')
+ }
+ }, [symbolLists.length])
+
+ const addSymbolsToActiveList = (symbols: string[]) => {
+ if (!activeListId) return
+
+ setSymbolLists(prev => {
+ const newLists = prev.map(list => {
+ if (list.id === activeListId) {
+ const uniqueSymbols = [...new Set([...list.symbols, ...symbols])]
+ return { ...list, symbols: uniqueSymbols }
+ }
+ return list
+ })
+
+ // Save to localStorage
+ localStorage.setItem('symbol-lists', JSON.stringify(newLists))
+ return newLists
+ })
+
+ // Clear selected symbols after adding
+ setSelectedSymbols([])
+ }
+
+ const removeSymbolFromActiveList = (symbol: string) => {
+ if (!activeListId) return
+
+ setSymbolLists(prev => {
+ const newLists = prev.map(list => {
+ if (list.id === activeListId) {
+ return { ...list, symbols: list.symbols.filter(s => s !== symbol) }
+ }
+ return list
+ })
+
+ // Save to localStorage
+ localStorage.setItem('symbol-lists', JSON.stringify(newLists))
+ return newLists
+ })
+ }
+
+ const addNewList = (name: string) => {
+ const newList: SymbolList = {
+ id: Date.now().toString(),
+ name,
+ symbols: []
+ }
+
+ setSymbolLists(prev => {
+ const newLists = [...prev, newList]
+ localStorage.setItem('symbol-lists', JSON.stringify(newLists))
+ return newLists
+ })
+
+ setActiveListId(newList.id)
+ localStorage.setItem('active-list-id', newList.id)
+ }
+
+ const contextValue: SymbolContextValue = {
+ availableSymbols,
+ setAvailableSymbols,
+ selectedSymbols,
+ setSelectedSymbols,
+ symbolPrices,
+ setSymbolPrices,
+ symbolLists,
+ setSymbolLists,
+ activeListId,
+ setActiveListId: (listId) => {
+ setActiveListId(listId)
+ if (listId) {
+ localStorage.setItem('active-list-id', listId)
+ }
+ },
+ addSymbolsToActiveList,
+ removeSymbolFromActiveList,
+ addNewList
+ }
+
+ return (
+
+ {children}
+
+ )
+}
+
+export function useSymbolContext() {
+ const context = useContext(SymbolContext)
+ if (context === undefined) {
+ throw new Error('useSymbolContext must be used within a SymbolProvider')
+ }
+ return context
+}
\ No newline at end of file
diff --git a/src/hooks/use-symbols-search.test.tsx b/src/hooks/use-symbols-search.test.tsx
new file mode 100644
index 00000000..ed80ed05
--- /dev/null
+++ b/src/hooks/use-symbols-search.test.tsx
@@ -0,0 +1,199 @@
+import React from 'react'
+import { renderHook, waitFor } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import type { ReactNode } from 'react'
+import { useSymbolsSearch } from './use-symbols-search'
+
+const mockBinanceResponse = {
+ symbols: [
+ {
+ symbol: 'BTCUSDT',
+ baseAsset: 'BTC',
+ quoteAsset: 'USDT',
+ status: 'TRADING'
+ },
+ {
+ symbol: 'ETHUSDT',
+ baseAsset: 'ETH',
+ quoteAsset: 'USDT',
+ status: 'TRADING'
+ },
+ {
+ symbol: 'BTCEUR',
+ baseAsset: 'BTC',
+ quoteAsset: 'EUR',
+ status: 'TRADING'
+ },
+ {
+ symbol: 'ADAUSDT',
+ baseAsset: 'ADA',
+ quoteAsset: 'USDT',
+ status: 'BREAK' // Status não é TRADING
+ }
+ ]
+}
+
+describe('useSymbolsSearch', () => {
+ let queryClient: QueryClient
+
+ const wrapper = ({ children }: { children: ReactNode }) => (
+
+ {children}
+
+ )
+
+ beforeEach(() => {
+ queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+ })
+ vi.clearAllMocks()
+ })
+
+ it('deve retornar array vazio quando searchTerm está vazio', () => {
+ const { result } = renderHook(() => useSymbolsSearch(''), { wrapper })
+
+ expect(result.current.data).toBeUndefined()
+ expect(result.current.isFetching).toBe(false)
+ })
+
+ it('deve retornar array vazio quando searchTerm tem menos de 2 caracteres', () => {
+ const { result } = renderHook(() => useSymbolsSearch('B'), { wrapper })
+
+ expect(result.current.data).toBeUndefined()
+ expect(result.current.isFetching).toBe(false)
+ })
+
+ it('deve buscar símbolos quando searchTerm é válido', async () => {
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockBinanceResponse,
+ })
+
+ const { result } = renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true)
+ })
+
+ expect(result.current.data).toEqual([
+ { symbol: 'BTCUSDT', baseAsset: 'BTC', quoteAsset: 'USDT' },
+ { symbol: 'BTCEUR', baseAsset: 'BTC', quoteAsset: 'EUR' }
+ ])
+ })
+
+ it('deve filtrar apenas símbolos com status TRADING', async () => {
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockBinanceResponse,
+ })
+
+ const { result } = renderHook(() => useSymbolsSearch('USDT'), { wrapper })
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true)
+ })
+
+ // ADAUSDT não deve aparecer pois status é BREAK
+ expect(result.current.data).toEqual([
+ { symbol: 'BTCUSDT', baseAsset: 'BTC', quoteAsset: 'USDT' },
+ { symbol: 'ETHUSDT', baseAsset: 'ETH', quoteAsset: 'USDT' }
+ ])
+ })
+
+ it('deve lidar com erro de rede', async () => {
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: false,
+ status: 500,
+ })
+
+ const { result } = renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(result.current.isError).toBe(true)
+ })
+
+ expect(result.current.error).toBeDefined()
+ })
+
+ it('deve fazer busca case-insensitive', async () => {
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockBinanceResponse,
+ })
+
+ const { result } = renderHook(() => useSymbolsSearch('btc'), { wrapper })
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true)
+ })
+
+ expect(result.current.data).toEqual([
+ { symbol: 'BTCUSDT', baseAsset: 'BTC', quoteAsset: 'USDT' },
+ { symbol: 'BTCEUR', baseAsset: 'BTC', quoteAsset: 'EUR' }
+ ])
+ })
+
+ it('deve limitar resultados a 50 itens', async () => {
+ const manySymbols = Array.from({ length: 100 }, (_, i) => ({
+ symbol: `BTC${i}USDT`,
+ baseAsset: `BTC${i}`,
+ quoteAsset: 'USDT',
+ status: 'TRADING'
+ }))
+
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: async () => ({ symbols: manySymbols }),
+ })
+
+ const { result } = renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(result.current.isSuccess).toBe(true)
+ })
+
+ expect(result.current.data).toHaveLength(50)
+ })
+
+ it('deve usar cache para requisições repetidas', async () => {
+ global.fetch = vi.fn().mockResolvedValue({
+ ok: true,
+ json: async () => mockBinanceResponse,
+ })
+
+ // Primeira requisição
+ const { result: result1 } = renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(result1.current.isSuccess).toBe(true)
+ })
+
+ // Segunda requisição com o mesmo termo
+ const { result: result2 } = renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(result2.current.isSuccess).toBe(true)
+ })
+
+ // Fetch deve ter sido chamado apenas uma vez devido ao cache
+ expect(global.fetch).toHaveBeenCalledTimes(1)
+ })
+
+ it('deve chamar API com URL correta', async () => {
+ global.fetch = vi.fn().mockResolvedValueOnce({
+ ok: true,
+ json: async () => mockBinanceResponse,
+ })
+
+ renderHook(() => useSymbolsSearch('BTC'), { wrapper })
+
+ await waitFor(() => {
+ expect(global.fetch).toHaveBeenCalledWith('https://api.binance.com/api/v3/exchangeInfo')
+ })
+ })
+})
\ No newline at end of file
diff --git a/src/hooks/use-symbols-search.ts b/src/hooks/use-symbols-search.ts
new file mode 100644
index 00000000..8d479c0b
--- /dev/null
+++ b/src/hooks/use-symbols-search.ts
@@ -0,0 +1,53 @@
+import { useQuery } from "@tanstack/react-query"
+import type { Symbol as TradingSymbol } from "@/contexts/symbol-context"
+
+interface BinanceSymbol {
+ symbol: string
+ baseAsset: string
+ quoteAsset: string
+ status: string
+}
+
+interface BinanceExchangeInfo {
+ symbols: BinanceSymbol[]
+}
+
+const fetchSymbols = async (searchTerm?: string): Promise => {
+ if (!searchTerm || searchTerm.length < 2) {
+ return []
+ }
+
+ const response = await fetch("https://api.binance.com/api/v3/exchangeInfo")
+
+ if (!response.ok) {
+ throw new Error("Failed to fetch symbols")
+ }
+
+ const data: BinanceExchangeInfo = await response.json()
+
+ // Filter symbols by search term and only active ones
+ const filteredSymbols = data.symbols
+ .filter(
+ (symbol) =>
+ symbol.status === "TRADING" &&
+ symbol.symbol.toLowerCase().includes(searchTerm.toLowerCase())
+ )
+ .slice(0, 50) // Limit to 50 results
+ .map((symbol) => ({
+ symbol: symbol.symbol,
+ baseAsset: symbol.baseAsset,
+ quoteAsset: symbol.quoteAsset,
+ }))
+
+ return filteredSymbols
+}
+
+export function useSymbolsSearch(searchTerm?: string) {
+ return useQuery({
+ queryKey: ["symbols-search", searchTerm],
+ queryFn: () => fetchSymbols(searchTerm),
+ enabled: !!searchTerm && searchTerm.length >= 2,
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ gcTime: 10 * 60 * 1000, // 10 minutes
+ })
+}
diff --git a/src/hooks/use-websocket-prices.ts b/src/hooks/use-websocket-prices.ts
new file mode 100644
index 00000000..0bd215bb
--- /dev/null
+++ b/src/hooks/use-websocket-prices.ts
@@ -0,0 +1,150 @@
+import { useEffect, useRef } from "react"
+import { useSymbolContext, type SymbolPrice } from "@/contexts/symbol-context"
+
+interface BinanceWebSocketMessage {
+ stream: string
+ data: {
+ e: string // Event type
+ E: number // Event time
+ s: string // Symbol
+ p: string // Price change
+ P: string // Price change percent
+ w: string // Weighted average price
+ x: string // First trade(F)-1 price (first trade before the 24hr rolling window)
+ c: string // Last price
+ Q: string // Last quantity
+ b: string // Best bid price
+ B: string // Best bid quantity
+ a: string // Best ask price
+ A: string // Best ask quantity
+ o: string // Open price
+ h: string // High price
+ l: string // Low price
+ v: string // Total traded base asset volume
+ q: string // Total traded quote asset volume
+ O: number // Statistics open time
+ C: number // Statistics close time
+ F: number // First trade ID
+ L: number // Last trade Id
+ n: number // Total number of trades
+ }
+}
+
+export function useWebSocketPrices() {
+ const { symbolLists, activeListId, setSymbolPrices } = useSymbolContext()
+ const wsRef = useRef(null)
+ const reconnectTimeoutRef = useRef(null)
+
+ const connectWebSocket = (symbols: string[]) => {
+ if (symbols.length === 0) return
+
+ // Verificar limite de streams (máximo 1024 conforme documentação)
+ if (symbols.length > 1024) {
+ console.error("Too many symbols. Maximum 1024 streams allowed per connection.")
+ return
+ }
+
+ // Close existing connection
+ if (wsRef.current) {
+ wsRef.current.close()
+ }
+
+ // Build stream parameters for combined streams
+ // Format: symbol1@ticker/symbol2@ticker/symbol3@ticker
+ const streams = symbols.map((symbol) => `${symbol.toLowerCase()}@ticker`).join("/")
+ const wsUrl = `wss://stream.binance.com:9443/stream?streams=${streams}`
+
+ try {
+ const ws = new WebSocket(wsUrl)
+ wsRef.current = ws
+
+ ws.onopen = () => {
+ // WebSocket connected successfully
+ }
+
+ ws.onmessage = (event) => {
+ try {
+ const message: BinanceWebSocketMessage = JSON.parse(event.data)
+
+ // Verificar se é uma mensagem de ticker válida
+ if (message.data && message.data.e === "24hrTicker") {
+ setSymbolPrices((prev: Record) => {
+ const newPrices = {
+ ...prev,
+ [message.data.s]: {
+ symbol: message.data.s,
+ lastPrice: Number.parseFloat(message.data.c).toFixed(4),
+ bidPrice: Number.parseFloat(message.data.b).toFixed(4),
+ askPrice: Number.parseFloat(message.data.a).toFixed(4),
+ priceChange: message.data.p,
+ priceChangePercent: Number.parseFloat(message.data.P).toFixed(2),
+ },
+ }
+ return newPrices
+ })
+ }
+ } catch (error) {
+ console.error("❌ Error parsing WebSocket message:", error)
+ console.error("Raw data:", event.data)
+ }
+ }
+
+ ws.onerror = (error) => {
+ console.error("❌ WebSocket error:", error)
+ }
+
+ ws.onclose = (event) => {
+ // Attempt to reconnect after 3 seconds if not a clean close
+ if (!event.wasClean && event.code !== 1000) {
+ reconnectTimeoutRef.current = setTimeout(() => {
+ if (symbols.length > 0) {
+ connectWebSocket(symbols)
+ }
+ }, 3000)
+ }
+ }
+
+ // Ping/pong frames are handled automatically by the browser
+ } catch (error) {
+ console.error("❌ Error creating WebSocket:", error)
+ }
+ }
+
+ useEffect(() => {
+ if (!activeListId) return
+
+ const activeList = symbolLists.find((list) => list.id === activeListId)
+ if (!activeList || activeList.symbols.length === 0) {
+ // Close connection if no symbols
+ if (wsRef.current) {
+ wsRef.current.close()
+ wsRef.current = null
+ }
+ return
+ }
+
+ connectWebSocket(activeList.symbols)
+
+ return () => {
+ if (wsRef.current) {
+ wsRef.current.close()
+ wsRef.current = null
+ }
+ if (reconnectTimeoutRef.current) {
+ clearTimeout(reconnectTimeoutRef.current)
+ }
+ }
+ }, [activeListId, symbolLists, setSymbolPrices])
+
+ // Cleanup on unmount
+ useEffect(() => {
+ return () => {
+ if (wsRef.current) {
+ wsRef.current.close()
+ }
+ if (reconnectTimeoutRef.current) {
+ clearTimeout(reconnectTimeoutRef.current)
+ }
+ }
+ }, [])
+}
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 00000000..9ba05204
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,90 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+
+a:hover {
+ color: #535bf2;
+}
+
+html, body {
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+}
+
+body {
+ min-width: 320px;
+ min-height: 100vh;
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+#root {
+ width: 100%;
+ height: 100vh;
+ overflow: hidden;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ color: inherit;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+
+button:hover {
+ border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+
+ a:hover {
+ color: #747bff;
+ }
+
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
new file mode 100644
index 00000000..d084ccad
--- /dev/null
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs))
+}
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 00000000..dd3ed323
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,13 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import "./index.css"
+import { App } from "./App"
+
+const rootElement = document.getElementById("root")
+if (!rootElement) throw new Error("Root element not found")
+
+createRoot(rootElement).render(
+
+
+
+)
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
new file mode 100644
index 00000000..98df4fb1
--- /dev/null
+++ b/src/pages/home.tsx
@@ -0,0 +1,9 @@
+import { Layout } from "@/components/layout"
+
+export function Home() {
+
+ return (
+
+ )
+}
+
diff --git a/src/router/index.tsx b/src/router/index.tsx
new file mode 100644
index 00000000..473e270e
--- /dev/null
+++ b/src/router/index.tsx
@@ -0,0 +1,10 @@
+import { createBrowserRouter } from "react-router-dom"
+import { Home } from "@/pages/home"
+
+export const router = createBrowserRouter([
+ {
+ path: "/",
+ element: ,
+ },
+])
+
diff --git a/src/test/setup.ts b/src/test/setup.ts
new file mode 100644
index 00000000..52a258c2
--- /dev/null
+++ b/src/test/setup.ts
@@ -0,0 +1,39 @@
+import "@testing-library/jest-dom"
+import { vi, beforeEach } from "vitest"
+
+// Mock localStorage
+const localStorageMock = {
+ getItem: vi.fn(),
+ setItem: vi.fn(),
+ removeItem: vi.fn(),
+ clear: vi.fn(),
+}
+
+Object.defineProperty(window, "localStorage", {
+ value: localStorageMock,
+})
+
+// Mock WebSocket
+Object.defineProperty(global, "WebSocket", {
+ value: vi.fn().mockImplementation(() => ({
+ close: vi.fn(),
+ send: vi.fn(),
+ addEventListener: vi.fn(),
+ removeEventListener: vi.fn(),
+ onopen: null,
+ onclose: null,
+ onmessage: null,
+ onerror: null,
+ readyState: WebSocket.CONNECTING,
+ })),
+ writable: true,
+})
+
+// Mock fetch
+global.fetch = vi.fn()
+
+// Reset mocks before each test
+beforeEach(() => {
+ vi.clearAllMocks()
+ localStorageMock.getItem.mockReturnValue(null)
+})
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 00000000..e86f05c3
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,12 @@
+///
+
+declare module "*.svg" {
+ const content: string
+ export default content
+}
+
+declare module "*.svg?react" {
+ import type { FunctionComponent, SVGProps } from "react"
+ const content: FunctionComponent>
+ export default content
+}
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 00000000..38302b34
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+ content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 00000000..65c3bd8b
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,30 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+ "jsx": "react-jsx",
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+
+ /* Path Mapping */
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["src"]
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..ea9d0cd8
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "files": [],
+ "references": [
+ {
+ "path": "./tsconfig.app.json"
+ },
+ {
+ "path": "./tsconfig.node.json"
+ }
+ ]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..2a609166
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+ "compilerOptions": {
+ "target": "ES2022",
+ "lib": ["ES2023"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "isolatedModules": true,
+ "moduleDetection": "force",
+ "noEmit": true,
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["vite.config.ts"]
+}
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 00000000..7a4d9321
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,23 @@
+///
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import react from "@vitejs/plugin-react"
+import { defineConfig } from "vite"
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [react()],
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "./src"),
+ },
+ },
+ test: {
+ globals: true,
+ environment: "jsdom",
+ setupFiles: ["./src/test/setup.ts"],
+ include: ["src/**/*.{test,spec}.{ts,tsx}"],
+ },
+})