ReplayX

Plataforma de trading no navegador, ao estilo do TradingView, feita para Bar Replay, backtest manual e automático e criação de estratégias (visual ou em script) — com os índices sintéticos da Deriv, forex, metais, cripto, índices, futuros e ações.

Funciona sem configuração: npm install && npm run dev e abre http://localhost:3000.

---

O que tem

Gráfico

• Velas, barras OHLC, Heikin Ashi, linha, área, linha de base, colunas e "hollow candles".
• Qualquer intervalo: 1m … 12h, 1D, 1W, 1M e intervalos personalizados (ex.: 7m, 90m, 3h). Escreve o número e carrega Enter.
• Layouts de 1, 2 (horizontal/vertical), 3 e 4 gráficos com sincronização de símbolo, intervalo e cruz (no replay, todos os gráficos andam no mesmo instante).
• Definições do gráfico como no TradingView: cores do corpo, borda e pavio das velas, linha/área, fundo (cor única ou gradiente), grelha, mira, texto das escalas e marca de água; escala normal, logarítmica, percentagem ou indexada a 100; etiqueta e linha do último preço; contador de tempo até ao fecho da vela. Seletor de cores com as tuas cores guardadas, código hex e opacidade.
• Barra de baixo como no TradingView: períodos 1D, 5D, 1M, 3M, 6M, YTD, 1A, 5A e Tudo (escolhem o intervalo e o tempo à vista), ir para uma data (sem replay), relógio com o fuso horário e escalas %, log e auto.
• Botões de navegação por cima do gráfico (afastar, aproximar, para trás, para a frente, repor) e “+” junto à escala de preços (alerta, ordem ou linha horizontal nesse preço).
• Eventos económicos (⚡) no fundo do gráfico para forex e metais, com a descrição ao passar o rato.
• Auto-escala, fuso horário configurável, temas claro e escuro, cores personalizáveis.
• Lista de observação com preços em tempo real, pesquisa de símbolos (incluindo todos os pares da Binance e o pesquisador do Yahoo), símbolos recentes e favoritos.

Ferramentas de desenho (28)

Linha de tendência, raio, linha de informação, linha estendida, linha com seta, linha horizontal / raio horizontal / vertical / cruz, canal paralelo, retração e extensão de Fibonacci, forquilha de Andrews, retângulo, elipse, triângulo, caminho, pincel, texto, nota, etiqueta de preço, setas, posição longa e curta (com resultado calculado), intervalo de preço, intervalo de datas e régua. Íman (OHLC, também com Ctrl), bloquear/ocultar, desfazer/refazer, árvore de objetos, estilos editáveis (cor, espessura, tracejado, níveis de Fibonacci). Os desenhos ficam ancorados ao tempo e preço, por isso mantêm-se ao mudar de intervalo.

• Favoritos: estrela nas ferramentas e nos indicadores; barra flutuante de favoritos (arrasta-se) e menu rápido de indicadores favoritos.
• Alinhar ângulo: com Shift ou pelo botão da bússola, as linhas encaixam de 15 em 15° (horizontal, 45°, vertical…) e mostram os graus.
• Texto nas linhas: botão “T” na barra do desenho; posição (início/centro/fim) e por cima/sobre/por baixo da linha, cor, tamanho, negrito e itálico.
• Modelos: guarda o estilo e o texto de um desenho com um nome e volta a usá-lo noutros (“Modelo” → “Guardar como modelo…”).
• Visibilidade por intervalo: mostrar um desenho só em minutos, horas, dias, semanas ou meses.
• Copiar/colar desenhos com Ctrl+C / Ctrl+V.
• Replay no telemóvel: aparece uma linha de corte (✂) com uma pega que se arrasta livremente até ao ponto de partida (perto das margens o gráfico desloca-se sozinho); mostra a data, tem ajuste fino (‹ › de barra em barra) e só começa ao tocar em "Começar aqui".
• Zoom com dois dedos rápido e progressivo (quanto mais depressa abres os dedos, mais aproxima), e mover o gráfico com os dois dedos.
• Barra de ferramentas no telemóvel estável: fica aberta enquanto mudas opções e fecha ao escolher uma ferramenta. Com uma ferramenta ativa, tocar no desenho selecionado edita-o em vez de criar outro. Botão para esconder as barras de baixo.
• Telemóvel: toque mais tolerante, pegas maiores e uma lupa (como no MT5) que mostra ampliado o ponto debaixo do dedo.

Indicadores (mais de 50)

Médias (SMA, EMA, WMA, HMA, DEMA, TEMA, VWMA e cruzamento), Bollinger, Keltner, Donchian, VWAP, Supertrend, Parabolic SAR, Ichimoku, ZigZag, Regressão linear, Pivots, Fractais, Volume, RSI, MACD, Estocástico, Stoch RSI, CCI, Williams %R, ADX/DMI, ATR, Desvio padrão, Largura de Bollinger, Momentum, ROC, Awesome Oscillator, TRIX, Aroon, OBV, MFI, CMF e mais. Todos com parâmetros, cores e painéis próprios.

Indicadores de método (desenham caixas, linhas e etiquetas por cima do gráfico; só usam velas fechadas, por isso não repintam e servem no replay):

• Topo e Fundo Duplo (entradas): caixa nos dois topos, praticamente no mesmo nível (tolerância em pips, à escolha); entrada na vela de rejeição, na combinação de duas velas (a que tocou na zona e a seguinte) ou na vela de expansão; stop além da caixa, saída no vale (correção a sério) ou na origem da pernada; não entra com pouco R nem com o alvo longe demais; resultado de cada sinal e placar.
• Curva de capital com retiradas (Topo e Fundo Duplo): painel extra com a curva de capital dos sinais; arrisca uma % da conta por operação e, a cada N dias, retira o lucro acima do capital inicial. Mostra a conta, o lucro líquido e o total (conta + retiradas).
• Perfil de volume: indicador do intervalo visível (muda quando mexes no gráfico) e ferramenta de desenho de intervalo fixo (dois cliques). Histograma por faixa de preço com volume de subida e de descida, linha de controlo (POC) e área de valor (VAH/VAL). Sem volume nos dados (índices sintéticos e forex da Deriv) mostra o tempo que o preço passou em cada faixa.
• Footprint + Layer Line: footprint, layer line, rompimento com reteste e divergência escondida no Estocástico; escalonamentos a favor da nova tendência.
• Estrutura de Mercado (Top-Down): topos e fundos reais, BOS e CHoCH em dois intervalos.
• Apocalypse: zonas onde costumam começar pernadas longas, com sinais só quando há significância estatística.

A legenda de cada indicador fica no topo do seu painel e acompanha quando mudas a altura dos painéis. Toca (ou clica) no nome para abrir as ações: ocultar, definições, adicionar alerta e remover.

Bar Replay

• Escolhe o ponto de partida clicando no gráfico, por data, ou ao acaso.
• Avançar/recuar barra a barra, reprodução automática com várias velocidades, "avançar por" um intervalo diferente do gráfico (ex.: gráfico em 1h, avançar de 5 em 5 minutos).
• Mudar de intervalo durante o replay sem revelar o futuro: a barra em formação é reconstruída a partir dos intervalos mais finos.
• Vários gráficos em replay sincronizado no mesmo instante.
• Conta de simulação com ordens a mercado, limite e stop, SL/TP, trailing stop, arrastar linhas de SL/TP no gráfico, break-even e fecho individual ou de todas as posições.
• Execução dentro da barra (o preço percorre abertura → extremo mais próximo → outro extremo → fecho), spread, derrapagem e comissão configuráveis.
• Sessões guardadas: retoma um replay mais tarde exatamente onde o deixaste.

Paper trading em tempo real

A mesma conta de simulação a correr sobre os preços ao vivo.

Alertas (como no TradingView)

• Fonte: preço ou qualquer indicador do gráfico (RSI, médias, MACD…).
• Condição: cruza, cruza para cima/baixo, maior/menor que, entra/sai do canal, dentro/fora do canal.
• Alvo: valor, canal entre dois valores, desenho (linha de tendência, raio, linha estendida, horizontal, canal paralelo, retângulo), outro indicador ou o preço.
• Frequência: só uma vez, uma vez por barra, uma vez por barra no fecho, sempre. Validade opcional, nome e mensagem com {{ticker}}, {{close}}, {{value}}, {{time}}, {{interval}}.
• Aviso: janela no ecrã até ser fechada, som e notificação no telemóvel/computador. Funcionam também durante o replay.
• Criar pelo painel de alertas, pelo botão direito no gráfico, pelo sino de um desenho ou de um indicador na legenda.
• Os alertas são verificados no navegador: precisam da app aberta (no telemóvel o sistema pode pausá-la em segundo plano).

App instalável (PWA)

Instala-se no telemóvel e no computador (Android/Chrome: botão "Instalar"; iPhone: Partilhar → Adicionar ao ecrã principal). Abre em ecrã inteiro, funciona sem internet com a última versão guardada, avisa quando há versão nova e tem atalhos para o Replay e os Alertas. As notificações dos alertas usam o service worker; no iPhone precisam da app instalada (iOS 16.4+).

Diário e estatísticas

Lista de operações com notas e etiquetas, curva de capital, lucro líquido, taxa de acerto, fator de lucro, expectativa, múltiplos R, MAE/MFE, drawdown máximo, sequências, análise por dia da semana, hora e direção e simulação de Monte Carlo.

Estratégias

• Construtor visual: regras de entrada/saída por blocos (indicadores, preços, cruzamentos, comparações, filtros de sessão), gestão de risco (SL/TP por ATR, pontos ou percentagem, risco por operação, trailing). Modelos prontos para começar.
• Scripts em JavaScript com API ao estilo Pine (ta.ema, ta.crossover, strategy.entry, plot, input…), editor com realce e autocompletar, erros com número da linha. Os scripts também podem ser usados só como indicadores.
• Testador de estratégias: resultados, curva de capital, lista de operações e marcadores no gráfico.
• Otimizador (grelha, aleatório ou genético) por lucro, fator de lucro, Sharpe, expectativa ou drawdown.
• Walk-forward (treina numa janela, testa na seguinte) com eficiência calculada — é assim que a estratégia "aprende" e é validada em dados que nunca viu.
• Multi-mercado: corre a mesma estratégia em vários símbolos e intervalos de uma vez.
• Tudo corre num Web Worker para não bloquear o gráfico.

Notícias e calendário

Notícias de forex, cripto, ações e matérias-primas (RSS públicos) e calendário económico semanal.

Planos

• Grátis: replay a partir de 15m, 1 gráfico, 3 indicadores por gráfico e 3 backtests por dia.
• Pro (100 MT/mês, 270 MT/trimestre, 1000 MT/ano): replay em todos os intervalos, até 4 gráficos, indicadores e backtests sem limite, otimizador, walk-forward e multi-mercado.
• Contas novas têm 14 dias de Pro grátis. Os preços e limites estão em src/core/plans.ts.
• O plano vem do documento replayx_users/{uid} no Firestore (só o servidor o escreve). O pagamento é feito pela ZumboPay (M-Pesa e cartão) pelas rotas /api/billing/checkout, /api/billing/status e /api/billing/webhook: o preço vem sempre do servidor, o webhook valida a assinatura, a ativação é idempotente e pagar antes do fim soma ao período em curso. Sem renovação automática.
• Contas novas: 14 dias de Pro. Páginas legais em /termos, /privacidade e /aviso-de-risco (rever com um advogado antes de vender).

Conta

Login com Google ou e-mail/palavra-passe (Firebase Auth), recuperação de palavra-passe e modo convidado (tudo fica só no navegador). Com sessão iniciada, as configurações, layouts, desenhos, contas, sessões de replay, estratégias e alertas são sincronizados no Firestore.

---

Fontes de dados (todas gratuitas e sem chave)

Fonte	Mercados	Como
Deriv (WebSocket público)	Índices sintéticos (Volatility, Volatility 1s, Boom/Crash, Step, Jump, Range Break, Bear/Bull, DEX, Drift Switch, baskets), forex, metais, índices OTC	ticks_history + subscrição de ticks; troca automática entre o endpoint novo e os antigos
Binance (REST + WebSocket)	Todos os pares à vista	klines + streams
Yahoo Finance (via rotas /api/market/* do próprio servidor)	Índices, futuros, ações, ETFs	evita CORS
Simulado	Mercados sintéticos gerados localmente	funciona offline e serve para testes
RSS públicos / Forex Factory (via /api/news e /api/calendar)	Notícias e calendário	—

Não é preciso configurar nenhuma chave de API.

---

Executar

npm install
npm run dev          # http://localhost:3000

Produção:

npm run build
npm start

Publicar na Vercel

1. Importa este repositório na Vercel (framework: Next.js; não precisa de variáveis de ambiente).
2. No Firebase Console → projeto coffee-spark-ai-barista-e7a91 → Authentication → Settings → Authorized domains, adiciona o domínio da Vercel (ex.: replayx.vercel.app). Sem isto o login com Google mostra "domínio não autorizado" (o login por e-mail e o modo convidado funcionam na mesma).
3. As regras do Firestore estão neste repositório (firestore.rules). Publica-as a partir daqui (precisa do Firebase CLI e de firebase login):

   firebase deploy --only firestore:rules
   

   Ou, sem instalar nada: copia o conteúdo de firestore.rules para Firestore Database → Rules na consola e carrega em Publish. Até lá a sincronização na nuvem falha com "permissão negada" e a app continua a guardar tudo localmente.

Pagamentos (ZumboPay)

1. Na Vercel → Settings → Environment Variables, define ZUMBOPAY_API_KEY, ZUMBOPAY_MERCHANT_ID, ZUMBOPAY_WALLET_ID, ZUMBOPAY_WEBHOOK_SECRET e FIREBASE_SERVICE_ACCOUNT_KEY (JSON da chave de serviço do Firebase: Project settings → Service accounts → Generate new private key).
2. No painel da ZumboPay (Programadores → Webhooks) acrescenta https://<o-teu-domínio>/api/billing/webhook com os eventos payment.succeeded, payment.failed e payment.refunded. A mesma conta pode servir o MajorStockX: o ReplayX ignora os pagamentos que não são seus.
3. Define também NEXT_PUBLIC_OPERATOR_NAME (opcional: por omissão aparece Major Group como titular), NEXT_PUBLIC_SUPPORT_EMAIL e NEXT_PUBLIC_SUPPORT_WHATSAPP (aparecem nas páginas legais) e, quando tiveres, NEXT_PUBLIC_DERIV_APP_ID.
4. Faz uma compra de teste de 100 MT e confirma que o Pro se ativa sozinho.

Outro projeto Firebase (opcional)

Por omissão usa o projeto Firebase próprio do ReplayX (coffee-spark-ai-barista-e7a91). Para usar outro, copia .env.example para .env.local, preenche as variáveis NEXT_PUBLIC_FIREBASE_*, muda o projeto em .firebaserc e publica as regras nesse projeto.

---

Testes

npm run typecheck
npm run lint
npm test             # testes unitários (vitest): intervalos, agregação, dados simulados, motor de ordens, backtester, scripts, otimizador, RSS
npm run build && npm run test:e2e   # ponta a ponta (Playwright)

Os testes de ponta a ponta simulam a Deriv (endpoint novo e antigo) e a Binance, fazem um replay completo com mudança de intervalo, ordens e diário, verificam desenhos entre intervalos e correm o testador, scripts e otimizador. Para usar um Chromium já instalado:

PW_CHROMIUM=/caminho/para/chrome npm run test:e2e

---

Atalhos

Tecla	Ação
Shift + → / ←	Replay: avançar / recuar uma barra
Shift + ↓	Replay: reproduzir / pausa
Escrever letras	Procurar símbolo
Números + Enter	Mudar intervalo (15, 4h, 1D…)
/	Indicadores
Alt + T / H / V / F	Tendência / horizontal / vertical / Fibonacci
Alt + Shift + R	Retângulo
Alt + L / Alt + S	Posição longa / curta
Alt + B / Alt + N	Comprar / vender a mercado
Ctrl + Z / Ctrl + Y	Desfazer / refazer
Delete	Apagar desenho selecionado
Alt + R	Repor vista

---

Estrutura

src/
  core/            lógica sem interface (testável)
    feed/          fornecedores de dados (deriv, binance, yahoo, demo), cache e agregação de intervalos
    indicators/    funções de análise técnica e registo de indicadores
    trading/       motor de ordens/posições e estatísticas
    strategy/      backtester, construtor visual, scripts, otimizador, walk-forward, worker
  chart/           controlador do lightweight-charts, desenhos, interação, sobreposições
  replay/          motor do Bar Replay
  store/           estado (zustand) persistido e sincronizado
  lib/             Firebase, autenticação, sincronização, formatação
  server/          RSS e utilitários das rotas de API
  app/             páginas e rotas de API (Next.js)
  components/      interface (terminal, painéis, diálogos, estratégia)
tests/             testes unitários
e2e/               testes de ponta a ponta

Feito com Next.js, React, TypeScript, Tailwind CSS, lightweight-charts, zustand e Firebase.

Aviso: ferramenta de estudo e simulação. Nenhuma ordem é enviada a uma corretora e nada aqui é aconselhamento financeiro.