feat(auto-trading): integrate MetaApi for automated trading
- Add metaapi.cloud-sdk for broker integration - Implement AutoTradingView component - Extend Signal interface with secondary take-profit levels - Update UI to include auto-trading navigation tab
This commit is contained in:
desartstudio95
@@ -1,58 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import { collection, addDoc } from 'firebase/firestore';
|
||||
import { db, auth } from '../lib/firebase';
|
||||
import { ImageUploader } from './ImageUploader';
|
||||
|
||||
export const AddTestimonialForm: React.FC = () => {
|
||||
const [text, setText] = useState('');
|
||||
const [imageUrls, setImageUrls] = useState<string[]>([]);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!auth.currentUser || !text.trim()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
await addDoc(collection(db, 'testimonials'), {
|
||||
userId: auth.currentUser.uid,
|
||||
userName: auth.currentUser.email || 'Usuário',
|
||||
text: text,
|
||||
timestamp: Date.now(),
|
||||
imageUrls: imageUrls
|
||||
});
|
||||
setText('');
|
||||
setImageUrls([]);
|
||||
alert('Resultado enviado com sucesso!');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('Erro ao enviar resultado.');
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (!auth.currentUser) return null;
|
||||
|
||||
return (
|
||||
<form onSubmit={handleSubmit} className="glass-card p-6 space-y-4 mt-8 max-w-2xl mx-auto">
|
||||
<h3 className="font-black uppercase tracking-widest text-brand-red">Deixe o seu resultado</h3>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => setText(e.target.value)}
|
||||
className="w-full bg-white/5 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:ring-1 focus:ring-brand-red"
|
||||
placeholder="O que achou do QuantScanner?"
|
||||
maxLength={500}
|
||||
/>
|
||||
<ImageUploader onUpload={setImageUrls} />
|
||||
{imageUrls.length > 0 && <p className="text-xs text-green-500">{imageUrls.length} imagem(ns) carregada(s) com sucesso!</p>}
|
||||
<button
|
||||
disabled={submitting}
|
||||
type="submit"
|
||||
className="bg-brand-red text-white py-2 px-4 rounded-lg font-bold hover:bg-opacity-90 disabled:opacity-50"
|
||||
>
|
||||
{submitting ? 'Enviando...' : 'Enviar Resultado'}
|
||||
</button>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
@@ -600,11 +600,14 @@ export const AdminDashboard: React.FC = () => {
|
||||
</h4>
|
||||
<ul className="ml-8 list-disc list-inside space-y-2 text-zinc-400">
|
||||
<li><strong>Title:</strong> QuantScan IA Auto-Worker (ou qualquer nome)</li>
|
||||
<li><strong>URL:</strong> Copie e cole a URL abaixo:</li>
|
||||
<li><strong>URL:</strong> Copie a URL abaixo:</li>
|
||||
</ul>
|
||||
<div className="ml-8 bg-black border border-white/10 p-3 rounded-lg text-xs font-mono select-all overflow-x-auto text-green-400">
|
||||
{window.location.origin}/api/cron/auto-scanner
|
||||
{window.location.origin.replace('ais-dev', 'ais-pre')}/api/cron/auto-scanner
|
||||
</div>
|
||||
<p className="ml-8 text-[10px] text-brand-red font-bold">
|
||||
Atenção: A URL deve usar "ais-pre" (sua versão pública/compartilhada). Se você usar a "ais-dev", o acesso será negado por conta do login de desenvolvedor. Você também precisa publicar/compartilhar o app pelo menos uma vez.
|
||||
</p>
|
||||
|
||||
<h4 className="font-bold text-white flex items-center gap-2">
|
||||
<span className="bg-blue-500/20 text-blue-400 w-6 h-6 rounded-full flex items-center justify-center text-xs border border-blue-500/30">3</span>
|
||||
|
||||
@@ -241,7 +241,6 @@ export const AnalysisView: React.FC<{ userData?: any, onGoToHistory?: () => void
|
||||
setPreview(null);
|
||||
setResult(null);
|
||||
setError(null);
|
||||
setMockPrice(null);
|
||||
setAlerts([]);
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,453 @@
|
||||
import React, { useState } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import {
|
||||
Bot, Power, Activity, Settings2, Link, Zap, Shield,
|
||||
BarChart2, TrendingUp, DollarSign, Send, Globe2, AlertTriangle,
|
||||
Fingerprint, ChevronRight, Server, Cpu, Radio, Network, CheckCircle2
|
||||
} from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
export const AutoTradingView: React.FC<{ userData?: any, onUpdate?: (data: any) => void, onNavigate?: (tab: string) => void, isAdmin?: boolean }> = ({ userData, onUpdate, onNavigate, isAdmin }) => {
|
||||
const [robotActive, setRobotActive] = useState(false);
|
||||
const [mtPlatform, setMtPlatform] = useState(userData?.mtPlatform || 'mt5');
|
||||
const [mtLogin, setMtLogin] = useState(userData?.mtLogin || '');
|
||||
const [mtPassword, setMtPassword] = useState(userData?.mtPassword || '');
|
||||
const [mtServer, setMtServer] = useState(userData?.mtServer || '');
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [saveSuccess, setSaveSuccess] = useState(false);
|
||||
|
||||
// Bot Settings State
|
||||
const [tradingSettings, setTradingSettings] = useState([
|
||||
{ key: 'smartEntry', label: "Smart Entry AI", desc: "Usa rede neural para entradas precisas", active: userData?.tradingSettings?.smartEntry ?? true },
|
||||
{ key: 'copyTrades', label: "Copy Institutional Trades", desc: "Copia movimentos de Baleias e Bancos", active: userData?.tradingSettings?.copyTrades ?? true },
|
||||
{ key: 'newsFilter', label: "News Filter (Alta Volatilidade)", desc: "Pausa o robô durante notícias vermelhas", active: userData?.tradingSettings?.newsFilter ?? false },
|
||||
{ key: 'autoTp', label: "Auto Take Profit (Dinâmico)", desc: "Ajusta alvo baseado em liquidez", active: userData?.tradingSettings?.autoTp ?? true },
|
||||
{ key: 'autoSl', label: "Auto Stop Loss (Trailing)", desc: "Acompanha o preço para garantir lucro", active: userData?.tradingSettings?.autoSl ?? true },
|
||||
]);
|
||||
const [riskPerTrade, setRiskPerTrade] = useState(userData?.tradingSettings?.riskPerTrade?.toString() || "1.5");
|
||||
const [maxPositions, setMaxPositions] = useState(userData?.tradingSettings?.maxPositions?.toString() || "3");
|
||||
const [selectedAsset, setSelectedAsset] = useState(userData?.tradingSettings?.selectedAsset || 'XAU/USD');
|
||||
|
||||
const saveSettingsToFirebase = async (newSettings: any[], newRisk: string, newMax: string, newAsset?: string) => {
|
||||
if (!userData?.uid) return;
|
||||
const { doc, updateDoc } = await import('firebase/firestore');
|
||||
const { db } = await import('../lib/firebase');
|
||||
const userRef = doc(db, 'users', userData.uid);
|
||||
|
||||
const assetToSave = newAsset ?? selectedAsset;
|
||||
|
||||
const updatedSettingsObj = {
|
||||
smartEntry: newSettings[0].active,
|
||||
copyTrades: newSettings[1].active,
|
||||
newsFilter: newSettings[2].active,
|
||||
autoTp: newSettings[3].active,
|
||||
autoSl: newSettings[4].active,
|
||||
riskPerTrade: parseFloat(newRisk) || 1.5,
|
||||
maxPositions: parseInt(newMax) || 3,
|
||||
selectedAsset: assetToSave
|
||||
};
|
||||
|
||||
try {
|
||||
await updateDoc(userRef, { tradingSettings: updatedSettingsObj });
|
||||
if (onUpdate) {
|
||||
onUpdate({ ...userData, tradingSettings: updatedSettingsObj });
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Error saving settings:", e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleToggleSetting = (index: number) => {
|
||||
const newSettings = [...tradingSettings];
|
||||
newSettings[index].active = !newSettings[index].active;
|
||||
setTradingSettings(newSettings);
|
||||
saveSettingsToFirebase(newSettings, riskPerTrade, maxPositions);
|
||||
};
|
||||
|
||||
const handleRiskBlur = () => {
|
||||
saveSettingsToFirebase(tradingSettings, riskPerTrade, maxPositions);
|
||||
};
|
||||
|
||||
const handleMaxBlur = () => {
|
||||
saveSettingsToFirebase(tradingSettings, riskPerTrade, maxPositions);
|
||||
};
|
||||
|
||||
const handleAssetBlur = () => {
|
||||
saveSettingsToFirebase(tradingSettings, riskPerTrade, maxPositions, selectedAsset);
|
||||
};
|
||||
|
||||
const handleDisconnectBroker = async () => {
|
||||
if (!userData?.uid) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const { doc, updateDoc } = await import('firebase/firestore');
|
||||
const { db } = await import('../lib/firebase');
|
||||
const userRef = doc(db, 'users', userData.uid);
|
||||
await updateDoc(userRef, {
|
||||
mtPlatform: '',
|
||||
mtLogin: '',
|
||||
mtPassword: '',
|
||||
mtServer: '',
|
||||
metaApiAccountId: null,
|
||||
metaApiState: null
|
||||
});
|
||||
|
||||
if (onUpdate) {
|
||||
onUpdate({ ...userData, mtPlatform: '', mtLogin: '', mtPassword: '', mtServer: '', metaApiAccountId: null, metaApiState: null });
|
||||
}
|
||||
setMtPlatform('mt5');
|
||||
setMtLogin('');
|
||||
setMtPassword('');
|
||||
setMtServer('');
|
||||
} catch (e: any) {
|
||||
console.error("Error disconnecting broker:", e);
|
||||
alert(e.message || "Failed to disconnect");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleConnectBroker = async () => {
|
||||
if (!userData?.uid) return;
|
||||
setIsSaving(true);
|
||||
try {
|
||||
// First try to provision through our backend proxy
|
||||
const res = await fetch('/api/metaapi/provision', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
platform: mtPlatform,
|
||||
login: mtLogin,
|
||||
password: mtPassword,
|
||||
serverName: mtServer
|
||||
})
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error(data.error || 'Failed to connect to MetaAPI');
|
||||
}
|
||||
|
||||
// Save to Firebase
|
||||
const { doc, updateDoc } = await import('firebase/firestore');
|
||||
const { db } = await import('../lib/firebase');
|
||||
const userRef = doc(db, 'users', userData.uid);
|
||||
await updateDoc(userRef, {
|
||||
mtPlatform,
|
||||
mtLogin,
|
||||
mtPassword,
|
||||
mtServer,
|
||||
metaApiAccountId: data.accountId,
|
||||
metaApiState: data.state
|
||||
});
|
||||
|
||||
if (onUpdate) {
|
||||
onUpdate({ ...userData, mtPlatform, mtLogin, mtPassword, mtServer, metaApiAccountId: data.accountId, metaApiState: data.state });
|
||||
}
|
||||
setSaveSuccess(true);
|
||||
setTimeout(() => setSaveSuccess(false), 3000);
|
||||
} catch (e: any) {
|
||||
console.error("Error saving Broker config:", e);
|
||||
alert(e.message || "Failed to connect to Terminal");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const marketData = [
|
||||
{ pair: 'EUR/USD', signal: 'BUY', score: 98, momentum: 'High', liquidity: 'Optimal', trend: 'Bullish' },
|
||||
{ pair: 'GBP/USD', signal: 'SELL', score: 92, momentum: 'Medium', liquidity: 'High', trend: 'Bearish' },
|
||||
{ pair: 'XAU/USD', signal: 'BUY', score: 99, momentum: 'Extreme', liquidity: 'Optimal', trend: 'Bullish' },
|
||||
{ pair: 'BTC/USD', signal: 'SELL', score: 85, momentum: 'Low', liquidity: 'Medium', trend: 'Ranging' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto p-4 md:p-8 space-y-8 animate-in fade-in duration-500">
|
||||
|
||||
{/* HEADER PRINCIPAL */}
|
||||
<div className="flex flex-col justify-end md:flex-row md:items-end md:justify-between gap-6 relative p-8 min-h-[400px] rounded-2xl bg-black/40 border border-brand-red/20 overflow-hidden group">
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] from-brand-red/10 via-transparent to-transparent opacity-50 pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent pointer-events-none z-0" />
|
||||
<img src="https://i.ibb.co/VcJRM0zZ/90a0c129-b771-41d6-ad30-634d1d2546c4.png" alt="Background" className="absolute inset-0 w-full h-full object-cover opacity-100 mix-blend-overlay pointer-events-none" />
|
||||
|
||||
<div className="flex items-center gap-6 relative z-10">
|
||||
<div className="space-y-1">
|
||||
<h1 className="text-3xl font-black italic uppercase tracking-tighter text-white drop-shadow-[0_0_10px_rgba(255,255,255,0.2)] flex items-center gap-3">
|
||||
QUANTSCAN IA
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 relative z-10">
|
||||
<div className="text-right hidden md:block">
|
||||
<div className="text-[10px] text-zinc-500 font-bold uppercase tracking-widest mb-1">Status Global</div>
|
||||
<div className={cn(
|
||||
"text-xl font-black tracking-widest",
|
||||
robotActive ? "text-brand-red drop-shadow-[0_0_10px_rgba(255,0,0,0.8)]" : "text-zinc-600"
|
||||
)}>
|
||||
{robotActive ? "ONLINE" : "OFFLINE"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DASHBOARD GRID */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
|
||||
{/* LEFT COLUMN: STATUS & BUTTONS */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
|
||||
{/* STATUS CARDS REMOVED */}
|
||||
|
||||
|
||||
{/* MAIN BUTTONS */}
|
||||
<div className="space-y-3 bg-black/40 border border-white/10 p-4 rounded-2xl">
|
||||
<button
|
||||
onClick={() => setRobotActive(!robotActive)}
|
||||
className={cn(
|
||||
"relative w-full py-4 rounded-xl font-black italic uppercase tracking-widest flex items-center justify-center gap-3 transition-all duration-300 overflow-hidden group",
|
||||
robotActive
|
||||
? "bg-black text-brand-red border border-brand-red/50 shadow-[0_0_20px_rgba(255,0,0,0.3)] hover:scale-[0.98]"
|
||||
: "bg-[#111] text-white border border-brand-red/40 shadow-[0_0_30px_rgba(255,0,0,0.15)] hover:border-brand-red hover:shadow-[0_0_40px_rgba(255,0,0,0.3)] hover:bg-[#1a0505] hover:scale-[1.02]"
|
||||
)}>
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-brand-red/20 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none" />
|
||||
<div className="absolute top-0 right-0 w-8 h-[2px] bg-brand-red shadow-[0_0_10px_rgba(255,0,0,1)]" />
|
||||
<div className="absolute bottom-0 left-0 w-8 h-[2px] bg-brand-red shadow-[0_0_10px_rgba(255,0,0,1)]" />
|
||||
<Power size={20} className={cn("relative z-10 transition-transform duration-300", !robotActive && "text-brand-red animate-pulse group-hover:scale-110")} />
|
||||
<span className="relative z-10 tracking-[0.2em]">{robotActive ? "Halt System" : "Initialize Engine"}</span>
|
||||
</button>
|
||||
|
||||
<div className="space-y-4 bg-black/40 border border-brand-red/20 p-5 rounded-2xl relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 p-4 opacity-10">
|
||||
<Cpu size={100} className="text-brand-red" />
|
||||
</div>
|
||||
<h3 className="font-black italic uppercase text-white tracking-widest text-sm flex items-center gap-2 relative z-10">
|
||||
<Bot size={16} className="text-brand-red" /> Robôs Conectados
|
||||
</h3>
|
||||
|
||||
<div className="space-y-3 relative z-10">
|
||||
<div className="bg-black/50 border border-white/10 rounded-lg p-3 flex items-center justify-between">
|
||||
<div>
|
||||
<div className="text-xs font-bold text-white uppercase flex items-center gap-2">QuantScan IA <span className="bg-brand-red/20 text-brand-red text-[8px] px-2 py-0.5 rounded-full">PRO</span></div>
|
||||
<div className="text-[10px] text-zinc-500 mt-0.5">Trading Institucional HFR</div>
|
||||
</div>
|
||||
<div className="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(0,255,0,0.8)]" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => document.getElementById("broker-connection")?.scrollIntoView({ behavior: "smooth" })}
|
||||
className="w-full py-3 rounded-xl font-bold uppercase tracking-wider text-xs flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white border border-white/10 transition-colors">
|
||||
<Link size={16} /> Connect Broker
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onNavigate && onNavigate('history')}
|
||||
className="w-full py-3 rounded-xl font-bold uppercase tracking-wider text-xs flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white border border-white/10 transition-colors">
|
||||
<BarChart2 size={16} /> View Signals
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onNavigate && onNavigate('scan')}
|
||||
className="w-full py-3 rounded-xl font-bold uppercase tracking-wider text-xs flex items-center justify-center gap-2 bg-white/5 hover:bg-white/10 text-white border border-white/10 transition-colors">
|
||||
<Zap size={16} /> Auto Scanner
|
||||
</button>
|
||||
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={() => onNavigate && onNavigate('admin')}
|
||||
className="w-full py-3 rounded-xl font-bold uppercase tracking-wider text-xs flex items-center justify-center gap-2 bg-[#0088cc]/20 hover:bg-[#0088cc]/30 text-[#0088cc] border border-[#0088cc]/30 transition-colors">
|
||||
<Send size={16} /> Telegram Alerts
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* MIDDLE COLUMN: SETTINGS */}
|
||||
<div className="lg:col-span-1 space-y-6">
|
||||
<div className="bg-black/40 border border-white/10 p-5 rounded-2xl h-full">
|
||||
<h3 className="font-black italic uppercase text-white tracking-widest text-sm mb-6 flex items-center gap-2 border-b border-white/5 pb-4">
|
||||
<Settings2 size={16} className="text-brand-red" /> Auto Trading Settings
|
||||
</h3>
|
||||
|
||||
<div className="space-y-6">
|
||||
{tradingSettings.map((setting, i) => (
|
||||
<div key={i} className="flex items-center justify-between gap-4">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-xs font-bold text-white uppercase tracking-wider">{setting.label}</span>
|
||||
<span className="text-[9px] text-zinc-500 mt-0.5">{setting.desc}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleToggleSetting(i)}
|
||||
className={cn(
|
||||
"relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus:outline-none",
|
||||
setting.active ? "bg-brand-red" : "bg-zinc-800"
|
||||
)}
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"inline-block h-3 w-3 transform rounded-full bg-white transition-transform",
|
||||
setting.active ? "translate-x-5" : "translate-x-1"
|
||||
)}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="pt-4 border-t border-white/5 space-y-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Ativo a Negociar</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ex: EUR/USD, XAU/USD..."
|
||||
value={selectedAsset}
|
||||
onChange={(e) => setSelectedAsset(e.target.value)}
|
||||
onBlur={handleAssetBlur}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Risk per Trade (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={riskPerTrade}
|
||||
onChange={(e) => setRiskPerTrade(e.target.value)}
|
||||
onBlur={handleRiskBlur}
|
||||
step="0.1"
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Max Open Positions</label>
|
||||
<input
|
||||
type="number"
|
||||
value={maxPositions}
|
||||
onChange={(e) => setMaxPositions(e.target.value)}
|
||||
onBlur={handleMaxBlur}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN: BROKERS & LIVE MARKET */}
|
||||
<div className="lg:col-span-2 space-y-6">
|
||||
|
||||
{/* BROKER INTEGRATION (MT4/MT5) */}
|
||||
<div id="broker-connection" className="bg-black/40 border border-white/10 p-5 rounded-2xl">
|
||||
<h3 className="font-black italic uppercase text-white tracking-widest text-sm mb-6 flex items-center gap-2">
|
||||
<Globe2 size={16} className="text-brand-red" /> MT4 / MT5 Server Connection
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{userData?.metaApiAccountId ? (
|
||||
<div className="bg-green-500/10 border border-green-500/30 rounded-xl p-6 text-center space-y-4">
|
||||
<div className="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mx-auto mb-2">
|
||||
<CheckCircle2 size={32} className="text-green-500" />
|
||||
</div>
|
||||
<h4 className="text-green-500 font-bold uppercase tracking-widest text-lg">Terminal Conectado</h4>
|
||||
<p className="text-sm text-zinc-400">Conta: <span className="text-white font-mono">{mtLogin}</span> ({mtPlatform.toUpperCase()})</p>
|
||||
<button
|
||||
onClick={handleDisconnectBroker}
|
||||
disabled={isSaving}
|
||||
className="w-full mt-4 bg-zinc-900 border border-brand-red/30 hover:bg-brand-red/10 text-brand-red font-bold uppercase tracking-widest text-xs py-3 rounded-xl transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? "Desconectando..." : "Desconectar Terminal"}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Platform</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={mtPlatform}
|
||||
onChange={(e) => setMtPlatform(e.target.value)}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 pr-8 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors appearance-none"
|
||||
>
|
||||
<option value="mt5">MetaTrader 5</option>
|
||||
<option value="mt4">MetaTrader 4</option>
|
||||
</select>
|
||||
<ChevronRight className="absolute right-3 top-1/2 -translate-y-1/2 text-zinc-500 pointer-events-none rotate-90" size={14} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Login (Account ID)</label>
|
||||
<input
|
||||
type="number"
|
||||
placeholder="Ex: 10029384"
|
||||
value={mtLogin}
|
||||
onChange={(e) => setMtLogin(e.target.value)}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="••••••••"
|
||||
value={mtPassword}
|
||||
onChange={(e) => setMtPassword(e.target.value)}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Server</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Ex: Deriv-Server-01"
|
||||
value={mtServer}
|
||||
onChange={(e) => setMtServer(e.target.value)}
|
||||
className="w-full bg-black border border-white/10 rounded-lg p-3 text-sm text-white font-mono focus:border-brand-red outline-none transition-colors"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1 mt-2">
|
||||
<label className="text-[10px] font-black text-zinc-500 uppercase tracking-widest">Trade Comment (Metatrader/Corretora)</label>
|
||||
<input
|
||||
type="text"
|
||||
value="QuantScan IA"
|
||||
disabled
|
||||
className="w-full bg-black border border-white/10 rounded-lg py-3 px-4 text-green-500 font-bold text-sm focus:outline-none opacity-80"
|
||||
/>
|
||||
<p className="text-[10px] text-zinc-500 ml-1">Este comentário será enviado obrigatoriamente a cada trade executado, provando a autenticidade das operações na sua corretora.</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleConnectBroker}
|
||||
disabled={isSaving || !mtLogin || !mtPassword || !mtServer}
|
||||
className="w-full bg-brand-red/10 text-brand-red border border-brand-red/30 hover:bg-brand-red/20 font-bold uppercase tracking-widest text-xs py-3 rounded-xl transition-colors disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? "Connecting..." : saveSuccess ? "Connected Successfully" : "Connect Terminal"}
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* TELEGRAM SETTINGS WIDGET */}
|
||||
<div className="bg-[#0088cc]/10 border border-[#0088cc]/30 p-5 rounded-2xl flex flex-col md:flex-row gap-6 items-center">
|
||||
<div className="w-12 h-12 rounded-full bg-[#0088cc]/20 flex items-center justify-center shrink-0">
|
||||
<Send size={24} className="text-[#0088cc]" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-1 text-center md:text-left">
|
||||
<h4 className="font-bold text-white uppercase text-sm">Alertas no Telegram</h4>
|
||||
<p className="text-xs text-zinc-400">Receba notificações de entradas e saídas do robô instantaneamente no seu celular.</p>
|
||||
</div>
|
||||
<button className="bg-[#0088cc] hover:bg-[#0088cc]/80 text-white font-bold uppercase tracking-widest text-[10px] px-6 py-3 rounded-xl transition-colors shrink-0">
|
||||
Configurar
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -7,7 +7,6 @@ import { MarketTicker } from './MarketTicker';
|
||||
import Autoplay from 'embla-carousel-autoplay';
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "./ui/carousel";
|
||||
import { Card, CardContent } from "./ui/card";
|
||||
import { AddTestimonialForm } from './AddTestimonialForm';
|
||||
|
||||
interface LandingPageProps {
|
||||
onGetStarted: () => void;
|
||||
@@ -336,7 +335,6 @@ export const LandingPage: React.FC<LandingPageProps> = ({ onGetStarted, onViewPl
|
||||
<p className="text-zinc-500 text-sm text-center">Nenhum resultado postado ainda.</p>
|
||||
)}
|
||||
</div>
|
||||
<AddTestimonialForm />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { LayoutDashboard, History, PieChart, Info, LogOut, CreditCard, ShieldCheck, User } from 'lucide-react';
|
||||
import { LayoutDashboard, History, PieChart, Info, LogOut, CreditCard, ShieldCheck, User, Cpu } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
interface NavbarProps {
|
||||
@@ -12,6 +12,7 @@ interface NavbarProps {
|
||||
export const Navbar: React.FC<NavbarProps> = ({ activeTab, setActiveTab, isAdmin, user }) => {
|
||||
const mainTabs = [
|
||||
{ id: 'scan', label: 'Scan IA', icon: LayoutDashboard },
|
||||
{ id: 'autoTrade', label: 'Auto Trading', icon: Cpu },
|
||||
{ id: 'history', label: 'Histórico', icon: History },
|
||||
{ id: 'stats', label: 'Estatísticas', icon: PieChart },
|
||||
];
|
||||
|
||||
@@ -191,90 +191,6 @@ export const ProfileView: React.FC<{
|
||||
className="w-5 h-5 accent-brand-red rounded bg-brand-dark/50 border border-white/10 cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Risco Por Trade (%)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={riskPerTrade}
|
||||
onChange={(e) => setRiskPerTrade(e.target.value)}
|
||||
placeholder="Ex: 2"
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Máximo de Posições Simultâneas / Por Sinal</label>
|
||||
<input
|
||||
type="number"
|
||||
value={maxPositionsPerSignal}
|
||||
onChange={(e) => setMaxPositionsPerSignal(e.target.value)}
|
||||
placeholder="Ex: 1"
|
||||
min="1"
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
/>
|
||||
<p className="text-[10px] text-zinc-500 ml-1">Recomendado: Para a segurança da banca, o cliente deve escolher quantas posições no máximo o IA pode abrir.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Corretora (Broker)</label>
|
||||
<select
|
||||
value={broker}
|
||||
onChange={(e) => setBroker(e.target.value)}
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
>
|
||||
<option value="binance">Binance</option>
|
||||
<option value="deriv">Deriv</option>
|
||||
<option value="exness">Exness</option>
|
||||
<option value="just_market">Just Market</option>
|
||||
<option value="fxpro">FXPRO</option>
|
||||
<option value="xm_global">XM GLOBAL</option>
|
||||
<option value="custom">Outra (Custom/Webhook)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">ID da Conta (Account ID)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={brokerAccountId}
|
||||
onChange={(e) => setBrokerAccountId(e.target.value)}
|
||||
placeholder="Ex: 12345678"
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">API Key / Webhook URL (Apenas Leitura & Trade)</label>
|
||||
<input
|
||||
type="text"
|
||||
value={brokerApiKey}
|
||||
onChange={(e) => setBrokerApiKey(e.target.value)}
|
||||
placeholder="Cole aqui a API Key / URL"
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">API Secret / Server Token</label>
|
||||
<input
|
||||
type="password"
|
||||
value={brokerApiSecret}
|
||||
onChange={(e) => setBrokerApiSecret(e.target.value)}
|
||||
placeholder="Cole aqui o seu Secret/Token"
|
||||
className="w-full bg-brand-dark/50 border border-white/5 rounded-xl py-3 px-4 text-white text-sm focus:outline-none focus:border-brand-red/50 transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-[10px] uppercase font-black tracking-widest text-zinc-500 ml-1">Trade Comment (Metatrader/Corretora)</label>
|
||||
<input
|
||||
type="text"
|
||||
value="QuantScan IA"
|
||||
disabled
|
||||
className="w-full bg-brand-dark/30 border border-white/5 rounded-xl py-3 px-4 text-green-500 font-bold text-sm focus:outline-none opacity-80"
|
||||
/>
|
||||
<p className="text-[10px] text-zinc-500 ml-1">Este comentário será enviado obrigatoriamente a cada trade executado, provando a autenticidade das operações na sua corretora.</p>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="p-4 bg-brand-red/10 border border-brand-red/20 rounded-xl space-y-2">
|
||||
|
||||
@@ -24,7 +24,7 @@ export const SignalHistory: React.FC = () => {
|
||||
const pendingSignals = signals.filter(s => s.result === SignalResult.PENDING);
|
||||
if (pendingSignals.length === 0) return;
|
||||
|
||||
const pairs = Array.from(new Set(pendingSignals.map(s => s.pair)));
|
||||
const pairs = Array.from(new Set<string>(pendingSignals.map(s => s.pair || '')));
|
||||
|
||||
try {
|
||||
const promises = pairs.map(symbol => fetchCurrentPrice(symbol));
|
||||
@@ -33,7 +33,7 @@ export const SignalHistory: React.FC = () => {
|
||||
const newPrices: Record<string, number> = {};
|
||||
results.forEach((price, index) => {
|
||||
if (price !== null) {
|
||||
newPrices[pairs[index]] = price;
|
||||
newPrices[pairs[index] as string] = price;
|
||||
}
|
||||
});
|
||||
setMarketPrices(prev => ({ ...prev, ...newPrices }));
|
||||
|
||||
Reference in New Issue
Block a user