feat(web): add simple trade trigger tab
This commit is contained in:
root
parent
0db2693a20
commit
00c117321d
@ -28,6 +28,10 @@ vi.mock('../../views/ResearchView', () => ({
|
||||
ResearchView: () => <div>Research view</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../../views/SimpleView', () => ({
|
||||
SimpleView: () => <div>Simple view</div>,
|
||||
}));
|
||||
|
||||
vi.mock('../../views/MarketsView', () => ({
|
||||
MarketsView: () => <div>Markets view</div>,
|
||||
}));
|
||||
|
||||
@ -5,6 +5,7 @@ import { RightPanel } from './RightPanel';
|
||||
import { HomeView } from '../../views/HomeView';
|
||||
import { PortfolioView } from '../../views/PortfolioView';
|
||||
import { ResearchView } from '../../views/ResearchView';
|
||||
import { SimpleView } from '../../views/SimpleView';
|
||||
import { MarketsView } from '../../views/MarketsView';
|
||||
import { ScreenerView } from '../../views/ScreenerView';
|
||||
import { WatchlistView } from '../../views/WatchlistView';
|
||||
@ -78,6 +79,7 @@ export function AppShell() {
|
||||
<Route path="/" element={<HomeView />} />
|
||||
<Route path="/portfolio" element={<PortfolioView />} />
|
||||
<Route path="/research" element={<ResearchView />} />
|
||||
<Route path="/simple" element={<SimpleView />} />
|
||||
<Route path="/markets" element={<MarketsView />} />
|
||||
<Route path="/screener" element={<ScreenerView />} />
|
||||
<Route path="/watchlist" element={<WatchlistView />} />
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import {
|
||||
Home, Briefcase, FlaskConical, TrendingUp,
|
||||
Home, Briefcase, FlaskConical, Target, TrendingUp,
|
||||
SlidersHorizontal, Star, Bell, Settings,
|
||||
} from 'lucide-react';
|
||||
import { useAppContext } from '../../context/AppContext';
|
||||
@ -9,6 +9,7 @@ const NAV = [
|
||||
{ to: '/', icon: Home, label: 'Home', end: true },
|
||||
{ to: '/portfolio', icon: Briefcase, label: 'Portfolio', end: false },
|
||||
{ to: '/research', icon: FlaskConical, label: 'Research', end: false },
|
||||
{ to: '/simple', icon: Target, label: 'Simple', end: false },
|
||||
{ to: '/markets', icon: TrendingUp, label: 'Markets', end: false },
|
||||
{ to: '/screener', icon: SlidersHorizontal, label: 'Screener', end: false },
|
||||
{ to: '/watchlist', icon: Star, label: 'Watchlist', end: false },
|
||||
|
||||
59
web/src/views/SimpleView.test.ts
Normal file
59
web/src/views/SimpleView.test.ts
Normal file
@ -0,0 +1,59 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { buildSimpleEntryPayload, computeSimpleTriggerPrice } from './SimpleView';
|
||||
|
||||
describe('SimpleView helpers', () => {
|
||||
it('computes a buy trigger from current market drop percent', () => {
|
||||
expect(
|
||||
computeSimpleTriggerPrice({
|
||||
triggerMode: 'drop_percent',
|
||||
targetPrice: '',
|
||||
purchasePrice: '',
|
||||
currentMarketPrice: '100',
|
||||
percentValue: '7.5',
|
||||
}),
|
||||
).toBe(92.5);
|
||||
});
|
||||
|
||||
it('builds a sell profit rule payload from purchase price', () => {
|
||||
const payload = buildSimpleEntryPayload('user-1', {
|
||||
symbol: 'aapl',
|
||||
side: 'sell',
|
||||
triggerMode: 'profit_percent',
|
||||
quantity: '5',
|
||||
targetPrice: '',
|
||||
purchasePrice: '200',
|
||||
currentMarketPrice: '',
|
||||
percentValue: '10',
|
||||
isCrypto: false,
|
||||
notes: 'Trim on strength',
|
||||
});
|
||||
|
||||
expect(payload.symbol).toBe('AAPL');
|
||||
expect(payload.sell_price).toBe(220);
|
||||
expect(payload.buy_price).toBe(200);
|
||||
expect(payload.gain_threshold_for_sell).toBe(10);
|
||||
expect(payload.label).toBe('SIMPLE SELL');
|
||||
expect(payload.notes).toContain('SELL AAPL at 10.00% profit');
|
||||
});
|
||||
|
||||
it('builds a buy target price payload', () => {
|
||||
const payload = buildSimpleEntryPayload('user-1', {
|
||||
symbol: 'btc/usd',
|
||||
side: 'buy',
|
||||
triggerMode: 'target_price',
|
||||
quantity: '',
|
||||
targetPrice: '64000',
|
||||
purchasePrice: '',
|
||||
currentMarketPrice: '',
|
||||
percentValue: '',
|
||||
isCrypto: true,
|
||||
notes: '',
|
||||
});
|
||||
|
||||
expect(payload.symbol).toBe('BTC/USD');
|
||||
expect(payload.buy_price).toBe(64000);
|
||||
expect(payload.sell_price).toBeNull();
|
||||
expect(payload.label).toBe('SIMPLE BUY');
|
||||
expect(payload.is_crypto).toBe(true);
|
||||
});
|
||||
});
|
||||
598
web/src/views/SimpleView.tsx
Normal file
598
web/src/views/SimpleView.tsx
Normal file
@ -0,0 +1,598 @@
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { RefreshCw, Target, Trash2 } from 'lucide-react';
|
||||
import { useAuth } from '../components/AuthContext';
|
||||
import { useAppContext } from '../context/AppContext';
|
||||
import { fetchChartBars } from '../lib/marketApi';
|
||||
import {
|
||||
createManualEntry,
|
||||
deleteManualEntry,
|
||||
fetchManualEntries,
|
||||
type ManualEntryPayload,
|
||||
} from '../lib/manualEntriesApi';
|
||||
|
||||
type SimpleSide = 'buy' | 'sell';
|
||||
type SimpleTriggerMode = 'target_price' | 'profit_percent' | 'drop_percent';
|
||||
|
||||
type SimpleRuleDraft = {
|
||||
symbol: string;
|
||||
side: SimpleSide;
|
||||
triggerMode: SimpleTriggerMode;
|
||||
quantity: string;
|
||||
targetPrice: string;
|
||||
purchasePrice: string;
|
||||
currentMarketPrice: string;
|
||||
percentValue: string;
|
||||
isCrypto: boolean;
|
||||
notes: string;
|
||||
};
|
||||
|
||||
type SimpleRuleEntry = ManualEntryPayload & {
|
||||
stock_instance_id?: string;
|
||||
label?: string | null;
|
||||
notes?: string | null;
|
||||
};
|
||||
|
||||
const SIMPLE_LABEL_PREFIX = 'SIMPLE ';
|
||||
|
||||
const DEFAULT_DRAFT: SimpleRuleDraft = {
|
||||
symbol: '',
|
||||
side: 'buy',
|
||||
triggerMode: 'target_price',
|
||||
quantity: '',
|
||||
targetPrice: '',
|
||||
purchasePrice: '',
|
||||
currentMarketPrice: '',
|
||||
percentValue: '',
|
||||
isCrypto: false,
|
||||
notes: '',
|
||||
};
|
||||
|
||||
function parsePositiveNumber(value: string): number | null {
|
||||
const trimmed = value.trim();
|
||||
if (!trimmed) return null;
|
||||
const parsed = Number(trimmed);
|
||||
return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
|
||||
}
|
||||
|
||||
function roundPrice(value: number): number {
|
||||
return Number(value.toFixed(4));
|
||||
}
|
||||
|
||||
export function computeSimpleTriggerPrice(draft: Pick<SimpleRuleDraft, 'triggerMode' | 'targetPrice' | 'purchasePrice' | 'currentMarketPrice' | 'percentValue'>): number | null {
|
||||
if (draft.triggerMode === 'target_price') {
|
||||
return parsePositiveNumber(draft.targetPrice);
|
||||
}
|
||||
|
||||
const percentValue = parsePositiveNumber(draft.percentValue);
|
||||
if (percentValue === null) return null;
|
||||
|
||||
if (draft.triggerMode === 'profit_percent') {
|
||||
const purchasePrice = parsePositiveNumber(draft.purchasePrice);
|
||||
if (purchasePrice === null) return null;
|
||||
return roundPrice(purchasePrice * (1 + percentValue / 100));
|
||||
}
|
||||
|
||||
const currentMarketPrice = parsePositiveNumber(draft.currentMarketPrice);
|
||||
if (currentMarketPrice === null) return null;
|
||||
return roundPrice(currentMarketPrice * (1 - percentValue / 100));
|
||||
}
|
||||
|
||||
function buildSimpleRuleNote(symbol: string, side: SimpleSide, triggerMode: SimpleTriggerMode, triggerPrice: number, percentValue: number | null): string {
|
||||
if (triggerMode === 'target_price') {
|
||||
return `${side.toUpperCase()} ${symbol} when price hits ${triggerPrice.toFixed(4)}`;
|
||||
}
|
||||
if (triggerMode === 'profit_percent') {
|
||||
return `SELL ${symbol} at ${percentValue?.toFixed(2)}% profit (${triggerPrice.toFixed(4)}) from purchase price`;
|
||||
}
|
||||
return `BUY ${symbol} after ${percentValue?.toFixed(2)}% drop from current market (${triggerPrice.toFixed(4)})`;
|
||||
}
|
||||
|
||||
export function buildSimpleEntryPayload(userId: string, draft: SimpleRuleDraft): ManualEntryPayload {
|
||||
const symbol = draft.symbol.trim().toUpperCase();
|
||||
if (!symbol) {
|
||||
throw new Error('Symbol is required');
|
||||
}
|
||||
|
||||
const triggerPrice = computeSimpleTriggerPrice(draft);
|
||||
if (triggerPrice === null) {
|
||||
throw new Error('A valid trigger price could not be calculated');
|
||||
}
|
||||
|
||||
const quantity = parsePositiveNumber(draft.quantity);
|
||||
const purchasePrice = parsePositiveNumber(draft.purchasePrice);
|
||||
const percentValue = parsePositiveNumber(draft.percentValue);
|
||||
const notePrefix = buildSimpleRuleNote(symbol, draft.side, draft.triggerMode, triggerPrice, percentValue);
|
||||
const notes = draft.notes.trim() ? `${notePrefix}. ${draft.notes.trim()}` : notePrefix;
|
||||
|
||||
return {
|
||||
symbol,
|
||||
active: true,
|
||||
status: 'active',
|
||||
user_id: userId,
|
||||
quantity,
|
||||
is_crypto: draft.isCrypto,
|
||||
is_real_trade: false,
|
||||
label: `${SIMPLE_LABEL_PREFIX}${draft.side.toUpperCase()}`,
|
||||
notes,
|
||||
entry_price: purchasePrice,
|
||||
buy_price: draft.side === 'buy' ? triggerPrice : purchasePrice,
|
||||
sell_price: draft.side === 'sell' ? triggerPrice : null,
|
||||
gain_threshold_for_sell: draft.triggerMode === 'profit_percent' ? percentValue : null,
|
||||
drop_threshold_for_buy: draft.triggerMode === 'drop_percent' ? percentValue : null,
|
||||
};
|
||||
}
|
||||
|
||||
function isSimpleRule(entry: SimpleRuleEntry): boolean {
|
||||
return String(entry.label || '').toUpperCase().startsWith(SIMPLE_LABEL_PREFIX);
|
||||
}
|
||||
|
||||
export function SimpleView() {
|
||||
const { user } = useAuth();
|
||||
const { botState } = useAppContext();
|
||||
const [draft, setDraft] = useState<SimpleRuleDraft>(DEFAULT_DRAFT);
|
||||
const [savedRules, setSavedRules] = useState<SimpleRuleEntry[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [loadingPrice, setLoadingPrice] = useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const normalizedSymbol = draft.symbol.trim().toUpperCase();
|
||||
const livePrice = normalizedSymbol ? Number(botState.symbols?.[normalizedSymbol]?.price || 0) : 0;
|
||||
const computedTriggerPrice = computeSimpleTriggerPrice(draft);
|
||||
|
||||
const triggerOptions = draft.side === 'buy'
|
||||
? [
|
||||
{ value: 'target_price' as const, label: 'Buy when price hits target' },
|
||||
{ value: 'drop_percent' as const, label: 'Buy after % drop from current market' },
|
||||
]
|
||||
: [
|
||||
{ value: 'target_price' as const, label: 'Sell when price hits target' },
|
||||
{ value: 'profit_percent' as const, label: 'Sell at % profit from purchase' },
|
||||
];
|
||||
|
||||
async function loadSavedRules() {
|
||||
try {
|
||||
const rows = await fetchManualEntries();
|
||||
setSavedRules(rows.filter(isSimpleRule));
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? 'Failed to load simple rules');
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (user) {
|
||||
loadSavedRules();
|
||||
}
|
||||
}, [user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draft.side === 'buy' && draft.triggerMode === 'profit_percent') {
|
||||
setDraft(prev => ({ ...prev, triggerMode: 'target_price' }));
|
||||
}
|
||||
if (draft.side === 'sell' && draft.triggerMode === 'drop_percent') {
|
||||
setDraft(prev => ({ ...prev, triggerMode: 'target_price' }));
|
||||
}
|
||||
}, [draft.side, draft.triggerMode]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draft.triggerMode !== 'drop_percent' || !livePrice || draft.currentMarketPrice.trim()) {
|
||||
return;
|
||||
}
|
||||
setDraft(prev => ({ ...prev, currentMarketPrice: livePrice.toFixed(4) }));
|
||||
}, [draft.triggerMode, draft.currentMarketPrice, livePrice]);
|
||||
|
||||
const rulePreview = useMemo(() => {
|
||||
if (!normalizedSymbol || computedTriggerPrice === null) return null;
|
||||
return buildSimpleRuleNote(normalizedSymbol, draft.side, draft.triggerMode, computedTriggerPrice, parsePositiveNumber(draft.percentValue));
|
||||
}, [normalizedSymbol, computedTriggerPrice, draft.side, draft.triggerMode, draft.percentValue]);
|
||||
|
||||
function updateDraft<K extends keyof SimpleRuleDraft>(key: K, value: SimpleRuleDraft[K]) {
|
||||
setDraft(prev => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
async function handleLoadMarketPrice() {
|
||||
if (!normalizedSymbol) {
|
||||
setError('Enter a symbol first');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingPrice(true);
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
try {
|
||||
const bars = await fetchChartBars(normalizedSymbol, '1D');
|
||||
const latestClose = Number(bars[bars.length - 1]?.close || 0);
|
||||
if (!Number.isFinite(latestClose) || latestClose <= 0) {
|
||||
throw new Error(`No recent market price found for ${normalizedSymbol}`);
|
||||
}
|
||||
updateDraft('currentMarketPrice', latestClose.toFixed(4));
|
||||
setMessage(`Loaded current market price for ${normalizedSymbol}`);
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? 'Failed to load current market price');
|
||||
} finally {
|
||||
setLoadingPrice(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
|
||||
event.preventDefault();
|
||||
if (!user?.id) {
|
||||
setError('Not authenticated');
|
||||
return;
|
||||
}
|
||||
|
||||
setSubmitting(true);
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
try {
|
||||
const payload = buildSimpleEntryPayload(user.id, draft);
|
||||
await createManualEntry(payload);
|
||||
setDraft(DEFAULT_DRAFT);
|
||||
setMessage('Simple rule saved to your watchlist');
|
||||
await loadSavedRules();
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? 'Failed to save simple rule');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(ruleId: string) {
|
||||
if (!confirm('Delete this simple rule?')) return;
|
||||
try {
|
||||
await deleteManualEntry(ruleId);
|
||||
await loadSavedRules();
|
||||
setMessage('Simple rule deleted');
|
||||
setError(null);
|
||||
} catch (err: any) {
|
||||
setError(err?.message ?? 'Failed to delete simple rule');
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h2 style={{ fontSize: 22, fontWeight: 800, color: '#111827', margin: '0 0 20px' }}>Simple</h2>
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
border: '1px solid #E5E7EB',
|
||||
background: 'linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%)',
|
||||
padding: 24,
|
||||
marginBottom: 20,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 18 }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 12, fontWeight: 900, letterSpacing: '0.12em', textTransform: 'uppercase', color: '#2563EB', marginBottom: 8 }}>
|
||||
Simple Triggers
|
||||
</div>
|
||||
<div style={{ fontSize: 24, fontWeight: 900, color: '#111827', marginBottom: 6 }}>
|
||||
Save a buy or sell rule without the full strategy builder
|
||||
</div>
|
||||
<div style={{ color: '#4B5563', fontSize: 14, lineHeight: 1.6, maxWidth: 760 }}>
|
||||
This creates a tracked rule in your watchlist using the existing manual-entry system. It does not place a broker-native conditional order by itself.
|
||||
</div>
|
||||
</div>
|
||||
<Link
|
||||
to="/watchlist"
|
||||
style={{
|
||||
whiteSpace: 'nowrap',
|
||||
padding: '10px 14px',
|
||||
borderRadius: 999,
|
||||
border: '1px solid #D1D5DB',
|
||||
color: '#111827',
|
||||
textDecoration: 'none',
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
}}
|
||||
>
|
||||
Open Watchlist
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14, marginBottom: 16 }}>
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Symbol</span>
|
||||
<input
|
||||
value={draft.symbol}
|
||||
onChange={e => updateDraft('symbol', e.target.value.toUpperCase())}
|
||||
placeholder="AAPL or BTC/USD"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Action</span>
|
||||
<select
|
||||
value={draft.side}
|
||||
onChange={e => updateDraft('side', e.target.value as SimpleSide)}
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14, background: '#fff' }}
|
||||
>
|
||||
<option value="buy">Buy</option>
|
||||
<option value="sell">Sell</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Trigger</span>
|
||||
<select
|
||||
value={draft.triggerMode}
|
||||
onChange={e => updateDraft('triggerMode', e.target.value as SimpleTriggerMode)}
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14, background: '#fff' }}
|
||||
>
|
||||
{triggerOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>{option.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Quantity</span>
|
||||
<input
|
||||
value={draft.quantity}
|
||||
onChange={e => updateDraft('quantity', e.target.value)}
|
||||
placeholder="Optional"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 14, marginBottom: 16 }}>
|
||||
{draft.triggerMode === 'target_price' && (
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Target price</span>
|
||||
<input
|
||||
value={draft.targetPrice}
|
||||
onChange={e => updateDraft('targetPrice', e.target.value)}
|
||||
placeholder="e.g. 210.50"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{draft.triggerMode === 'profit_percent' && (
|
||||
<>
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Purchase price</span>
|
||||
<input
|
||||
value={draft.purchasePrice}
|
||||
onChange={e => updateDraft('purchasePrice', e.target.value)}
|
||||
placeholder="e.g. 182.10"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Profit percent</span>
|
||||
<input
|
||||
value={draft.percentValue}
|
||||
onChange={e => updateDraft('percentValue', e.target.value)}
|
||||
placeholder="e.g. 8"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
|
||||
{draft.triggerMode === 'drop_percent' && (
|
||||
<>
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Current market price</span>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<input
|
||||
value={draft.currentMarketPrice}
|
||||
onChange={e => updateDraft('currentMarketPrice', e.target.value)}
|
||||
placeholder="e.g. 212.42"
|
||||
inputMode="decimal"
|
||||
style={{ flex: 1, border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleLoadMarketPrice}
|
||||
disabled={loadingPrice}
|
||||
style={{
|
||||
border: '1px solid #D1D5DB',
|
||||
borderRadius: 10,
|
||||
background: '#fff',
|
||||
padding: '0 12px',
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
color: '#374151',
|
||||
cursor: loadingPrice ? 'wait' : 'pointer',
|
||||
}}
|
||||
>
|
||||
<RefreshCw size={14} style={{ animation: loadingPrice ? 'spin 1s linear infinite' : 'none' }} />
|
||||
</button>
|
||||
</div>
|
||||
{livePrice > 0 && (
|
||||
<small style={{ color: '#6B7280' }}>Live feed price in app state: {livePrice.toFixed(4)}</small>
|
||||
)}
|
||||
</label>
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Drop percent</span>
|
||||
<input
|
||||
value={draft.percentValue}
|
||||
onChange={e => updateDraft('percentValue', e.target.value)}
|
||||
placeholder="e.g. 5"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
|
||||
{draft.side === 'sell' && draft.triggerMode === 'target_price' && (
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Purchase price</span>
|
||||
<input
|
||||
value={draft.purchasePrice}
|
||||
onChange={e => updateDraft('purchasePrice', e.target.value)}
|
||||
placeholder="Optional, for context"
|
||||
inputMode="decimal"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#374151' }}>Extra note</span>
|
||||
<input
|
||||
value={draft.notes}
|
||||
onChange={e => updateDraft('notes', e.target.value)}
|
||||
placeholder="Optional note"
|
||||
style={{ border: '1px solid #D1D5DB', borderRadius: 10, padding: '10px 12px', fontSize: 14 }}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
|
||||
<label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, fontWeight: 700, color: '#374151' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={draft.isCrypto}
|
||||
onChange={e => updateDraft('isCrypto', e.target.checked)}
|
||||
/>
|
||||
Crypto pair
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 16,
|
||||
background: '#F8FAFC',
|
||||
border: '1px solid #E5E7EB',
|
||||
padding: 16,
|
||||
marginBottom: 18,
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
|
||||
<Target size={16} color="#2563EB" />
|
||||
<span style={{ fontSize: 12, fontWeight: 900, color: '#1F2937', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
|
||||
Rule Preview
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ color: '#111827', fontSize: 14, fontWeight: 700 }}>
|
||||
{rulePreview ?? 'Complete the fields to preview the simple rule.'}
|
||||
</div>
|
||||
{computedTriggerPrice !== null && (
|
||||
<div style={{ color: '#2563EB', fontSize: 24, fontWeight: 900, marginTop: 8 }}>
|
||||
Trigger Price: {computedTriggerPrice.toFixed(4)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{(error || message) && (
|
||||
<div
|
||||
style={{
|
||||
marginBottom: 16,
|
||||
borderRadius: 12,
|
||||
padding: '12px 14px',
|
||||
fontSize: 13,
|
||||
fontWeight: 700,
|
||||
color: error ? '#B91C1C' : '#065F46',
|
||||
background: error ? '#FEF2F2' : '#ECFDF5',
|
||||
border: `1px solid ${error ? '#FCA5A5' : '#A7F3D0'}`,
|
||||
}}
|
||||
>
|
||||
{error || message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={submitting}
|
||||
style={{
|
||||
border: 'none',
|
||||
borderRadius: 999,
|
||||
background: '#111827',
|
||||
color: '#fff',
|
||||
padding: '12px 18px',
|
||||
fontSize: 13,
|
||||
fontWeight: 800,
|
||||
cursor: submitting ? 'wait' : 'pointer',
|
||||
}}
|
||||
>
|
||||
{submitting ? 'Saving…' : 'Save Simple Rule'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
borderRadius: 20,
|
||||
border: '1px solid #E5E7EB',
|
||||
background: '#fff',
|
||||
padding: 24,
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: 16, fontWeight: 800, color: '#111827', marginBottom: 16 }}>
|
||||
Saved Simple Rules
|
||||
</div>
|
||||
|
||||
{savedRules.length === 0 ? (
|
||||
<div style={{ color: '#6B7280', fontSize: 14 }}>
|
||||
No saved simple rules yet.
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'grid', gap: 12 }}>
|
||||
{savedRules.map(rule => (
|
||||
<div
|
||||
key={rule.stock_instance_id}
|
||||
style={{
|
||||
border: '1px solid #E5E7EB',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
gap: 16,
|
||||
alignItems: 'flex-start',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
|
||||
<span style={{ fontSize: 15, fontWeight: 900, color: '#111827' }}>{rule.symbol}</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 900, color: '#2563EB', letterSpacing: '0.08em', textTransform: 'uppercase' }}>
|
||||
{rule.label}
|
||||
</span>
|
||||
</div>
|
||||
<div style={{ color: '#374151', fontSize: 13, marginBottom: 6 }}>
|
||||
{rule.notes || 'Simple trigger rule'}
|
||||
</div>
|
||||
<div style={{ color: '#6B7280', fontSize: 12, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
|
||||
{rule.buy_price != null && <span>Buy trigger: {Number(rule.buy_price).toFixed(4)}</span>}
|
||||
{rule.sell_price != null && <span>Sell trigger: {Number(rule.sell_price).toFixed(4)}</span>}
|
||||
{rule.quantity != null && <span>Qty: {rule.quantity}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{rule.stock_instance_id && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDelete(rule.stock_instance_id!)}
|
||||
style={{
|
||||
border: '1px solid #FECACA',
|
||||
background: '#FEF2F2',
|
||||
color: '#B91C1C',
|
||||
borderRadius: 10,
|
||||
padding: '8px 10px',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
aria-label={`Delete simple rule for ${rule.symbol}`}
|
||||
>
|
||||
<Trash2 size={14} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user