admin/OpenFin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamic market ticker watchlist (Markets page)

Browse Source 
Add ability to add/remove custom tickers (e.g. EURCHF=X) on the
Markets & Prices page without editing config. Tickers are validated
via yfinance, persisted in market_watchlist SQLite table, merged into
the quotes feed as a 'custom' group, and shown in a dedicated tab
with per-card remove buttons.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
OpenSquared
2026-06-22 21:54:58 +02:00
parent 78c60d5254
commit c3ea0b7f8c
5 changed files with 224 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/hooks/useApi.ts
View File

@@ -20,6 +20,34 @@ export type TickerValidation = { valid: boolean; symbol: string; name?: string;
export const validateTicker = (symbol: string): Promise<TickerValidation> =>
api.get('/market/validate', { params: { symbol } }).then(r => r.data)
export const useMarketCustomTickers = () =>
useQuery<{ ticker: string; name: string; added_at: string }[]>({
queryKey: ['market-custom-tickers'],
queryFn: () => api.get('/market/custom-tickers').then(r => r.data),
})
export const useAddMarketTicker = () => {
const qc = useQueryClient()
return useMutation({
mutationFn: (ticker: string) => api.post(`/market/custom-tickers/${encodeURIComponent(ticker)}`).then(r => r.data),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['market-custom-tickers'] })
qc.invalidateQueries({ queryKey: ['quotes'] })
},
})
}
export const useRemoveMarketTicker = () => {
const qc = useQueryClient()
return useMutation({
mutationFn: (ticker: string) => api.delete(`/market/custom-tickers/${encodeURIComponent(ticker)}`).then(r => r.data),
onSuccess: () => {
qc.invalidateQueries({ queryKey: ['market-custom-tickers'] })
qc.invalidateQueries({ queryKey: ['quotes'] })
},
})
}
export const useHistory = (symbol: string, period = '1y', interval = '1d') =>
useQuery<HistoricalCandle[]>({
queryKey: ['history', symbol, period, interval],

123
frontend/src/pages/Markets.tsx
View File

@@ -1,23 +1,24 @@
import { useState, useEffect, useMemo, useRef } from 'react'
import { useSearchParams } from 'react-router-dom'
import { useAllQuotes, useHistory } from '../hooks/useApi'
import { useAllQuotes, useHistory, useAddMarketTicker, useRemoveMarketTicker } from '../hooks/useApi'
import clsx from 'clsx'
import type { Quote, AssetClass } from '../types'
import { AreaChart, Area, XAxis, YAxis, Tooltip, ResponsiveContainer, CartesianGrid } from 'recharts'
import { TrendingUp, TrendingDown, BarChart2, RefreshCw, Search } from 'lucide-react'
import { TrendingUp, TrendingDown, BarChart2, RefreshCw, Search, Plus, X } from 'lucide-react'
type ExtAssetClass = AssetClass | 'custom'
const ASSET_CLASSES: { key: AssetClass; label: string; emoji: string }[] = [
{ key: 'energy', label: 'Energy', emoji: '⛽' },
{ key: 'metals', label: 'Metals', emoji: '🥇' },
const ASSET_CLASSES: { key: ExtAssetClass; label: string; emoji: string }[] = [
{ key: 'energy', label: 'Energy', emoji: '⛽' },
{ key: 'metals', label: 'Metals', emoji: '🥇' },
{ key: 'agriculture', label: 'Agriculture', emoji: '🌾' },
{ key: 'indices', label: 'Indices', emoji: '📊' },
{ key: 'etfs', label: 'ETFs', emoji: '🗂' },
{ key: 'equities', label: 'Equities', emoji: '📈' },
{ key: 'forex', label: 'Forex', emoji: '💱' },
{ key: 'indices', label: 'Indices', emoji: '📊' },
{ key: 'etfs', label: 'ETFs', emoji: '🗂' },
{ key: 'equities', label: 'Equities', emoji: '📈' },
{ key: 'forex', label: 'Forex', emoji: '💱' },
]
function QuoteCard({ q, selected, onClick }: { q: Quote; selected: boolean; onClick: () => void }) {
function QuoteCard({ q, selected, onClick, onRemove }: { q: Quote; selected: boolean; onClick: () => void; onRemove?: () => void }) {
if (!q.price) return null
const pos = q.change_pct >= 0
return (
@@ -33,11 +34,19 @@ function QuoteCard({ q, selected, onClick }: { q: Quote; selected: boolean; onCl
<div className="text-xs text-white font-semibold truncate">{q.name || q.symbol}</div>
<div className="text-xs text-slate-600">{q.symbol}</div>
</div>
{pos ? (
<TrendingUp className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
) : (
<TrendingDown className="w-3.5 h-3.5 text-red-400 shrink-0" />
)}
<div className="flex items-center gap-1.5">
{pos ? (
<TrendingUp className="w-3.5 h-3.5 text-emerald-400 shrink-0" />
) : (
<TrendingDown className="w-3.5 h-3.5 text-red-400 shrink-0" />
)}
{onRemove && (
<button onClick={e => { e.stopPropagation(); onRemove() }}
className="text-slate-700 hover:text-red-400 transition-colors" title="Remove">
<X className="w-3 h-3" />
</button>
)}
</div>
</div>
<div className="mt-2 flex justify-between items-end">
<span className="text-sm font-bold text-white font-mono">{q.price.toFixed(q.price > 100 ? 2 : 4)}</span>
@@ -150,10 +159,30 @@ function PriceChart({ symbol, name }: { symbol: string; name: string }) {
export default function Markets() {
const { data: allQuotes, isLoading, refetch } = useAllQuotes()
const [searchParams, setSearchParams] = useSearchParams()
const [activeClass, setActiveClass] = useState<AssetClass>('energy')
const [activeClass, setActiveClass] = useState<ExtAssetClass>('energy')
const [selectedSymbol, setSelectedSymbol] = useState<{ symbol: string; name: string } | null>(null)
const [searchQuery, setSearchQuery] = useState('')
const [addInput, setAddInput] = useState('')
const [addError, setAddError] = useState('')
const [showAddInput, setShowAddInput] = useState(false)
const initialSymbol = useRef(searchParams.get('symbol'))
const { mutateAsync: addTicker, isPending: adding } = useAddMarketTicker()
const { mutate: removeTicker } = useRemoveMarketTicker()
const handleAddTicker = async () => {
const sym = addInput.trim().toUpperCase()
if (!sym) return
setAddError('')
try {
await addTicker(sym)
setAddInput('')
setShowAddInput(false)
setActiveClass('custom')
} catch (e: unknown) {
const msg = (e as { message?: string })?.message ?? 'Ticker not found'
setAddError(msg)
}
}
// Auto-select symbol coming from another page (e.g. Portfolio ticker link)
useEffect(() => {
@@ -163,7 +192,7 @@ export default function Markets() {
for (const [cls, quotes] of Object.entries(allQuotes)) {
const match = (quotes as Quote[]).find(q => q.symbol.toUpperCase() === sym.toUpperCase())
if (match) {
setActiveClass(cls as AssetClass)
setActiveClass(cls as ExtAssetClass)
setSelectedSymbol({ symbol: match.symbol, name: match.name || match.symbol })
break
}
@@ -221,6 +250,60 @@ export default function Markets() {
<span>{emoji}</span> {label}
</button>
))}
{(allQuotes?.['custom']?.length ?? 0) > 0 && (
<button
onClick={() => { setActiveClass('custom'); setSelectedSymbol(null); setSearchQuery('') }}
className={clsx('flex items-center gap-1.5 px-3 py-1.5 rounded border text-sm transition-all', {
'bg-purple-600 border-purple-500 text-white': activeClass === 'custom',
'border-slate-700 text-slate-400 hover:border-slate-500 hover:text-slate-200': activeClass !== 'custom',
})}
>
<span>⭐</span> Custom
</button>
)}
{/* Add custom ticker button + inline input */}
<div className="flex items-center gap-2">
{showAddInput ? (
<div className="flex items-center gap-1.5">
<input
autoFocus
type="text"
value={addInput}
onChange={e => { setAddInput(e.target.value); setAddError('') }}
onKeyDown={e => {
if (e.key === 'Enter') handleAddTicker()
if (e.key === 'Escape') { setShowAddInput(false); setAddInput(''); setAddError('') }
}}
placeholder="e.g. EURCHF=X"
className="bg-dark-700 border border-slate-600 rounded px-2.5 py-1 text-sm text-white placeholder-slate-600 focus:outline-none focus:border-purple-500 w-36 font-mono uppercase"
/>
<button
onClick={handleAddTicker}
disabled={adding}
className="px-2.5 py-1 rounded bg-purple-600 hover:bg-purple-500 text-white text-xs disabled:opacity-50 transition-colors"
>
{adding ? <RefreshCw className="w-3 h-3 animate-spin" /> : 'Add'}
</button>
<button
onClick={() => { setShowAddInput(false); setAddInput(''); setAddError('') }}
className="text-slate-500 hover:text-slate-300 transition-colors"
>
<X className="w-4 h-4" />
</button>
{addError && <span className="text-red-400 text-xs max-w-48 truncate">{addError}</span>}
</div>
) : (
<button
onClick={() => setShowAddInput(true)}
className="flex items-center gap-1 px-2.5 py-1.5 rounded border border-dashed border-slate-600 text-slate-500 hover:border-purple-500 hover:text-purple-400 text-sm transition-all"
title="Add custom ticker"
>
<Plus className="w-3.5 h-3.5" /> Add ticker
</button>
)}
</div>
<div className="relative ml-auto">
<Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-slate-500 pointer-events-none" />
<input
@@ -267,8 +350,9 @@ export default function Markets() {
{/* Quote grid */}
<div className="col-span-1 space-y-2">
<div className="section-title">
{ASSET_CLASSES.find(c => c.key === activeClass)?.emoji}{' '}
{ASSET_CLASSES.find(c => c.key === activeClass)?.label}
{activeClass === 'custom'
? '⭐ Custom'
: `${ASSET_CLASSES.find(c => c.key === activeClass)?.emoji ?? ''} ${ASSET_CLASSES.find(c => c.key === activeClass)?.label ?? ''}`}
</div>
{isLoading ? (
[1,2,3,4].map(i => <div key={i} className="card-sm animate-pulse h-16 bg-dark-700"></div>)
@@ -279,6 +363,7 @@ export default function Markets() {
q={q}
selected={selectedSymbol?.symbol === q.symbol}
onClick={() => setSelectedSymbol({ symbol: q.symbol, name: q.name || q.symbol })}
onRemove={activeClass === 'custom' ? () => removeTicker(q.symbol) : undefined}
/>
))
) : (