PayStack Frontend

Base do frontend da Semana 1:

• Vue 3 + Vite + TypeScript
• Vue Router com rotas publicas/privadas
• Pinia para sessao do usuario
• Fluxo inicial de login (mock) para Google, Apple e email
• Cliente HTTP com fetch e tratamento de 401

Base da Semana 2:

• Integracao de saldo com GET /wallet/balance?address=...
• Dashboard com estados loading, erro e atualizar saldo

Base da Semana 3:

• Tela Charge para gerar URL de pagamento (/pay?to=...&token=usdcx&amount=...)
• Rota /pay para prefill e confirmacao no frontend
• Redirecionamento pos-login respeitando query redirect

Base da Semana 4:

• POST /transaction/send integrado na tela /pay
• Polling de GET /transaction/:txHash ate success ou failed
• Modo mock para transacoes com VITE_USE_MOCK_TRANSACTIONS=true

Base da Semana 5:

• Historico de transacoes no dashboard (/app)
• Persistencia local do historico em localStorage
• Atualizacao automatica do historico durante envio/polling na /pay

Base da Semana 6:

• Validacao de endereco Stacks e valor USDCx nas telas /charge e /pay
• Timeout de polling com opcao de retry na /pay
• Melhorias no historico da /app (badge de status, hash curto e limpar historico)

Requisitos

• Node.js LTS instalado
• npm disponivel no terminal

Setup

1. Criar arquivo de ambiente:

Copy-Item .env.example .env

Observacao:

• VITE_USE_MOCK_BALANCE=true usa saldo mock para desenvolvimento local.
• Para consumir backend real, altere para false e ajuste VITE_API_BASE_URL.
• VITE_USE_MOCK_TRANSACTIONS=true usa envio/status mock para testar fluxo de confirmacao.

2. Instalar dependencias:

npm install

3. Rodar app local:

npm run dev

Scripts

npm run dev
npm run build
npm run lint
npm run type-check

Estrutura principal

• src/router/index.ts: rotas + guards (requiresAuth e guestOnly)
• src/stores/session.ts: sessao, persistencia em localStorage, login/logout
• src/services/auth.ts: servico mock de autenticacao
• src/services/http.ts: wrapper HTTP com header Authorization
• src/services/wallet.ts: consultas de saldo da carteira
• src/utils/payment-link.ts: builder/parser de links de pagamento
• src/services/transaction.ts: envio e consulta de transacoes
• src/views/LoginView.vue: tela de login
• src/views/HomeView.vue: dashboard autenticado com saldo de carteira
• src/views/ChargeView.vue: criacao de link de pagamento
• src/views/PayView.vue: confirmacao + envio de transacao e status
• src/stores/transactions.ts: store de historico de transacoes
• src/utils/validation.ts: validadores de endereco/valor