6 publicações com a etiqueta "performance"

Analytics — Mixpanel Deposit + AppsFlyer S2S​

• Novo evento Mixpanel Deposit Requested (useAnalytics.trackDepositRequested) disparado quando /wallet/add-credit retorna 200 OK. Espelha o legado DefaultLayout.vue das brands 7k/cassino/vera (props Amount em unidades inteiras + DepositMethod). Continua complementar ao evento de funil já existente (pix_generated no GTM e PixGenerated no Facebook).
• Bugfix crítico nos eventos S2S do AppsFlyer (sendRegister, sendFTD, sendRebill). Os três estavam dentro do guard if (!shouldLoadTrackers) return do useAnalytics, mas o gate é o inverso do gate do AppsFlyer (shouldLoadTrackers = !isAppMode && !isBot, useAppsFlyer.ready = enabled && isAppMode) — resultado: nenhuma das chamadas server-to-server disparava nem na web (gate externo bloqueia) nem dentro do APK (early return do gate externo cortava o caminho). Agora as três chamadas são disparadas antes do guard e o S2S funciona em produção. Coberto por useAppsFlyer.test.ts (202 linhas) e useAppMode.test.ts (72 linhas).
• useAppMode agora reconhece ?is_twa=true além de ?app=true. Os APKs em produção da família 7k/cassino/vera (publicados antes do rename do query param) continuam injetando o legado em cada landing — sem isso isAppMode ficava false pra users do app e desativava todo o pipeline de tracking S2S silenciosamente.
• Valor do deposit GTM corrigido pra unidades inteiras (amountCents / 100) ao invés de cents puros — paridade com o legado e com a expectativa dos dashboards de BI.

Dia pesado: 25 PRs no front-web-base cobrindo um empurrão grande de performance (CSS, ícones, modal), refatoração do header secundário com gating de rota, novas features de cassino e pagamentos, e ajustes finos de SEO/mobile/auth. Plus 4 mudanças de CI/CD em front-ops pra suportar o novo modelo de cache por device/country/buildId.

Performance — empurrão grande​

• Drop important: true do Tailwind (tailwind.config.js). Removido globalmente — precedência CSS volta ao normal (inline style vence class). Resultado: CSS −23,5KB raw (−14,4%). Componentes que usavam o pattern condicional bgStyle ? "" : "bg-..." (omitir classe quando havia inline style) foram simplificados — agora basta sempre emitir a classe que o style inline sobrescreve quando presente. Atualizados: GameCardStacked, GameStats, GameWinners, MainLeaguesSquare, SidebarButtonsGradient, SidebarButtonsGrid.
• Migração react-modal-sheet → vaul (app/components/base/Modal.tsx). Modal chunk caiu de ~158KB pra ~65KB raw — −93KB (−59%). Mesma API externa, drop-in pelos consumers. (PR #405 fez ajustes finos depois pra resolver bugs de input-focus em mobile e espaço fantasma no footer.)
• Remoção do @tailwindcss/typography. Plugin não justificava o custo — uso restrito a 4 lugares (FaqSingleContent, WpPostContent, page.$slug, vip/levels) substituído por classes utilitárias inline. package.json enxuga uma dep + 22 linhas de pnpm-lock.yaml.
• Ícones direct-imports + lazy MainLeagues (app/widgets/home-leagues/). Drop do registry intermediário — agora cada componente faz import Icon from "~icons/<set>/<name>" direto. MainLeaguesSquare virou lazy chunk separado. 25 arquivos tocados, −564 linhas vs +454. Atualiza configs de home-leagues em 7 brands (7k-bet-br, cassino-bet-br, fi-7k-bet, ng-7k-bet, pb-bet, vera-bet-br, state77-com, x2b-bet).
• CI Lighthouse manual (.github/workflows/lighthouse.yml). Workflow caller dispatchável via workflow_dispatch pra rodar Lighthouse on-demand contra preview/prod sem precisar de schedule fixo. Útil pra validar PRs pesados de UI antes de mergear.

Sistema de Ícones — migração lucide-react → unplugin-icons​

• lucide-react removido por completo e substituído por unplugin-icons apoiado em três datasets Iconify (@iconify-json/lucide, @iconify-json/simple-icons, @iconify-json/mdi) mais uma coleção custom lida via FileSystemIconLoader de app/icons/custom/. Cada ícone agora resolve para um componente SVG inline em build-time — zero fetch em runtime, SSR-safe no Cloudflare Workers, e o chunk manual vendor-lucide foi descontinuado.
• API de uso por dataset: import Trophy from "~icons/lucide/trophy" para ícones genéricos de UI, ~icons/simple-icons/<name> para logos de marca (WhatsApp, Facebook, X, Instagram, TikTok), ~icons/mdi/<name> para esportes e equivalentes a emojis, e ~icons/custom/<name> para SVGs próprios em app/icons/custom/ (auto-discovered). Naming kebab-case obrigatório (AlarmClock → alarm-clock, XCircle → x-circle).
• Tipo IconComponent substitui LucideIcon em todo o codebase via app/types/icon.ts (superset de SVGProps<SVGSVGElement> com alias legacy de size). unplugin-icons não suporta a prop size do Lucide — codemod scripts/migrate-icon-size-prop.mjs converteu 471 ocorrências de size={X} para width={X} height={X}.
• Registry string-driven em app/icons/registry.ts para configs que referenciam ícones por string (ex: icon: "mdi:soccer") consumidos via <Icon name="..." /> ou <SmartIcon icon={...} /> (smart dispatch que renderiza o ícone registrado ou cai no texto literal — preserva configs legados com emoji).
• Exceções aceitáveis para SVG inline: spinners/loaders animados customizados, checkmarks de success animados, indicadores visuais brand-specific que não existem em nenhum dataset Iconify, e seals de regulação (ANJL, Anatel, Compulsafe) servidos via <img> apontando para public/assets/seals/.
• Migração automatizada via codemods em scripts/: migrate-lucide-to-unplugin-icons.mjs (converte imports nomeados em default imports kebab-case, ordenado via biome check --write), migrate-icon-size-prop.mjs (size → width/height em JSX) e migrate-emoji-icons.mjs (emoji literais → IconName registrado). Fix posterior em toKebabCase para acrônimos consecutivos (XCircle → x-circle, antes virava xcircle quebrado).

Autenticação / Recuperação de senha​

• Correção no estado de erro do formulário de recuperação de senha — erro agora limpa automaticamente quando o form fica válido
• Imagem de banner adicionada ao modal de registro
• Máscaras de input corrigidas nos formulários de auth

Autenticação / Login / Registro​

• Modal de recuperação de senha implementado e integrado ao fluxo de login ("Esqueceu a senha?")
• Tela de confirmação de saída no modal de registro — previne fechamento acidental
• Reset dos campos de login/senha/erro ao fechar o modal de login
• Termos pré-marcados configuráveis e links legais clicáveis no formulário de registro
• Opção para esconder botão de fechar no RegisterModal durante estado de confirmação
• Melhoria na interação do overlay — cursor-default e pointer-events-none no backdrop

Validações (front-web-base + front-cactus-core)​

• Adicionado motor de validações no core SDK: stores Zustand, hooks e serviços para gerenciar fluxo de validação de jogadores por contexto (depósito, saque, casino, esportes)
• Implementado ValidationBlockerOverlay: tela bloqueante com anti-tamper (MutationObserver + interval), bloqueio de ESC e carrossel de steps
• Criado ValidationStepsModal: modal fechável para validações contextuais, com visual idêntico ao overlay porém com botão de fechar
• Adicionados 10 componentes de step: Email, Telefone, Endereço, Documentos, Senha, Limites, KYC, Termos, GPS e Conta Bancária
• Primitivos de UI criados: OTPInput, InputField, SelectField, PrimaryButton, ResendButton, SuccessState, StepCarousel
• Todos os modais tematizados com tokens auth.* do theme.config.ts
• Gates de validação conectados nos módulos existentes: GameIframe (antes de abrir jogo), DepositModal, WithdrawModal, Sports layout, e seções da conta do usuário (endereço, documentos, limites, autoexclusão, timeout)
• 14 rotas de API criadas para todos os endpoints de validação
• Utilitário buildValidationSnapshot adicionado
• AuthInitializer conectado com sincronização de runtime
• Pacote validations publicado no core com motor de regras, tipos TypeScript e testes unitários