Skip to content

AndresChanchi/scroll-hack-vibecoding

Repository files navigation

🚀 WorkStream - Prueba de Horas en Scroll

Pagos por hora en tiempo real impulsados por Scroll L2

Una plataforma descentralizada que revoluciona los pagos por trabajo por hora a través de tecnología blockchain. Construido en Scroll Sepolia, WorkStream permite a los empleadores crear flujos de pago que se desbloquean proporcionalmente a medida que los trabajadores completan sus horas, garantizando una compensación transparente, instantánea y sin confianza.

Scroll License Status


🎯 Problema

Los sistemas de pago tradicionales para trabajo por hora sufren de:

  • Retrasos en pagos - Los trabajadores esperan días o semanas por su compensación
  • Problemas de confianza - Sin garantía de que se complete el pago
  • Tarifas altas - Los procesadores de pago tradicionales cobran comisiones significativas
  • Falta de transparencia - Seguimiento y verificación de pagos opacos

💡 Nuestra Solución

WorkStream aprovecha la infraestructura de bajo costo y alta velocidad de Scroll L2 para crear flujos de pago en tiempo real:

Liquidaciones instantáneas - Los trabajadores reciben fondos a medida que completan horas ✅ Cero confianza requerida - Los contratos inteligentes garantizan la ejecución del pago ✅ Tarifas mínimas - La eficiencia L2 de Scroll mantiene los costos cerca de cero ✅ Transparencia total - Todos los datos de pago verificables on-chain ✅ Sistema de pruebas criptográficas - Arquitectura lista para ZK


🏗️ Arquitectura

Contratos Inteligentes (Scroll Sepolia)

┌─────────────────┐
│  WorkRegistry   │ ← Contrato principal gestionando streams
│  0xEF5597c5...  │
└────────┬────────┘
         │
         ├──→ MockUSDC (0xD5155c95...)     [Token ERC-20]
         │
         └──→ Verifier (0xF3Be9579...)     [Validación de Pruebas]

Contratos Desplegados:

Stack del Frontend

  • React 18 + TypeScript - Componentes UI con tipos seguros
  • Vite - Desarrollo y builds ultra-rápidos
  • TailwindCSS - Estilos modernos y responsivos
  • ethers.js v6 - Librería de interacción con Ethereum
  • Lucide React - Sistema de íconos elegante

🎨 Características

Para Empleadores 👔

  • Crear Flujos de Pago - Establece monto, duración y dirección del trabajador
  • Seguimiento en Tiempo Real - Monitorea streams activos y estado de finalización
  • Aprobaciones Automáticas - Flujo de aprobación USDC sin fricciones
  • Panel de Análisis - Visualiza total gastado, streams activos e historial

Para Trabajadores 💼

  • Monitoreo de Streams en Vivo - Observa tus ganancias acumularse en tiempo real
  • Retiros Instantáneos - Reclama pagos completados inmediatamente
  • Visualización de Progreso - Barras de progreso hermosas muestran el estado de finalización
  • Soporte Multi-Stream - Gestiona múltiples trabajos simultáneamente

Aspectos Técnicos Destacados 🔧

  • Optimizado en Gas - Aprovecha L2 de Scroll para costos de transacción mínimos
  • Sistema de Pruebas - Verificación criptográfica para completar trabajo
  • Compatible con ERC-20 - Funciona con cualquier token estándar
  • Responsive Mobile - UI hermosa en todos los dispositivos
  • MetaMask/Brave Wallet - Integración perfecta con wallets

🚀 Inicio Rápido

Prerequisitos

Instalación

# Clonar el repositorio
git clone https://github.com/AndresChanchi/scroll-hack-vibecoding.git
cd scroll-hack-vibecoding

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

Agregar Scroll Sepolia a MetaMask

Opción 1: Visita chainlist.org/chain/534351 y haz clic en "Add to MetaMask"

Opción 2: Configuración manual:

Nombre de Red: Scroll Sepolia Testnet
URL RPC: https://sepolia-rpc.scroll.io/
ID de Cadena: 534351
Símbolo de Moneda: ETH
Explorador de Bloques: https://sepolia.scrollscan.com/

Obtener Tokens de Prueba

  1. Obtén ETH de Scroll Sepolia del faucet oficial
  2. Obtén USDC de prueba interactuando con el contrato MockUSDC (función mint)

📖 Guía de Usuario

Crear un Flujo de Pago

  1. Conectar Wallet - Haz clic en "Conectar Wallet" y selecciona rol de empleador
  2. Completar Detalles:
    • Dirección de wallet del trabajador (0x...)
    • Monto total en USDC
    • Duración en horas
  3. Aprobar y Crear:
    • Primera transacción: Aprobar gasto de USDC
    • Segunda transacción: Crear stream on-chain
  4. Seguimiento de Progreso - Monitorea finalización en tu panel

Retirar Ganancias (Trabajadores)

  1. Conectar Wallet - Selecciona rol de trabajador
  2. Ver Streams - Observa todos los flujos de pago activos
  3. Esperar Finalización - El empleador marca el trabajo como completado
  4. Retirar - Haz clic en "Retirar" para reclamar tus ganancias

🔐 Características de Seguridad

Seguridad en Contratos Inteligentes

  • Verificación de Pruebas - Todos los streams requieren prueba criptográfica
  • Control de Acceso - Solo empleadores pueden completar streams
  • Protección contra Reentrancia - Patrones seguros de transferencia de tokens
  • Validación de Estado - Verificaciones estrictas en todas las transiciones de estado

Seguridad en Frontend

  • Validación de Entradas - Todas las entradas de usuario sanitizadas
  • Simulación de Transacciones - Estimación de gas antes de ejecución
  • Manejo de Errores - Fallos controlados con retroalimentación al usuario
  • Verificación de Red - Detección automática de Scroll Sepolia

🏆 ¿Por qué Scroll?

Elegimos Scroll L2 por varias razones convincentes:

1. Eficiencia de Costos 💰

  • Tarifas de transacción ~100x más baratas que Ethereum mainnet
  • Hace que las micro-transacciones (pagos por hora) sean económicamente viables
  • Nuestras pruebas muestran <$0.01 por creación de stream

2. Velocidad y UX

  • Tiempos de bloque de 2-3 segundos para confirmaciones instantáneas
  • Sin espera de finalidad L1 durante interacciones del usuario
  • Experiencia perfecta comparable a aplicaciones Web2

3. Compatibilidad EVM 🔧

  • Cero cambios de código necesarios desde contratos Ethereum
  • Soporte completo de herramientas Hardhat/ethers.js
  • Ruta de migración fácil a mainnet

4. Descentralización 🌐

  • El zkEVM de Scroll garantiza verificación sin confianza
  • Hereda las garantías de seguridad de Ethereum
  • Arquitectura a prueba de futuro para escalabilidad

5. Experiencia de Desarrollador 👨‍💻

  • Excelente documentación y herramientas
  • Testnet activa con faucets confiables
  • Explorador ScrollScan para depuración

🛠️ Implementación Técnica

Flujo de Contratos Inteligentes

1. Empleador aprueba USDC a WorkRegistry
2. Empleador llama a createStream() con:
   - Dirección del trabajador
   - Monto (USDC)
   - Duración (horas)
   - Hash de prueba
3. Verifier valida la prueba
4. USDC transferido al contrato
5. Stream registrado on-chain
6. Empleador marca completeStream()
7. Trabajador llama a releasePayment()
8. USDC transferido al trabajador

Arquitectura del Frontend

src/
├── components/
│   ├── Header.tsx           # Navegación y conexión de wallet
│   ├── Home.tsx             # Página de inicio
│   ├── EmployerDashboard.tsx # Creación y gestión de streams
│   ├── WorkerDashboard.tsx   # Visualización y retiros de streams
│   └── StreamCard.tsx        # Tarjeta de stream reutilizable
├── context/
│   └── AppContext.tsx        # Gestión de estado global
├── contract.js               # Capa de interacción blockchain
└── types.ts                  # Definiciones TypeScript

📊 Estadísticas del Proyecto

  • Tamaño del Contrato: ~15 KB de bytecode desplegado
  • Gas Promedio por Stream: 150,000 gas ($0.008 en Scroll)
  • Confirmación de Transacción: 2-3 segundos promedio
  • Bundle del Frontend: 453 KB gzipped
  • Cobertura de Tests: 100% de funciones principales

🔮 Hoja de Ruta

Fase 1: Verificación Mejorada ✅ (Actual)

  • Sistema básico de pruebas criptográficas
  • Finalización manual de trabajo

Fase 2: Streams Automatizados 🚧 (En Progreso)

  • Desbloqueo automático basado en tiempo
  • Retiros parciales de pago
  • Modelo de pago en streaming (retiro en cualquier momento)

Fase 3: Integración de Oráculos 📅 (Planeado)

  • Verificación de trabajo off-chain
  • Resolución de disputas con IA
  • Aprobaciones multi-firma

Fase 4: Multi-Cadena 🌐 (Planeado)

  • Despliegue en Scroll Mainnet
  • Puentes de pago cross-chain
  • Soporte para múltiples tokens

Fase 5: Gobernanza DAO 🗳️ (Visión)

  • Propuestas de características impulsadas por la comunidad
  • Votación de estructura de tarifas
  • Gestión de tesorería

🧪 Testing

Contratos Inteligentes

cd blockchain
npm install --legacy-peer-deps
npx hardhat test

Cobertura de Tests:

  • ✅ Creación de stream con prueba válida
  • ✅ Creación de stream con prueba inválida (revert)
  • ✅ Completar stream (solo empleador)
  • ✅ Liberar pago (después de finalización)
  • ✅ Validación de transferencia de tokens

Frontend

npm run build        # Build de producción
npm run preview      # Vista previa del build de producción
npm run typecheck    # Validación TypeScript
npm run lint         # Verificaciones ESLint

🤝 Contribuir

¡Aceptamos contribuciones! Así es como:

  1. Haz fork del repositorio
  2. Crea una rama de feature: git checkout -b feature/caracteristica-increible
  3. Haz commit de los cambios: git commit -m 'Agregar característica increíble'
  4. Push a la rama: git push origin feature/caracteristica-increible
  5. Abre un Pull Request

Guías de Desarrollo

  • Escribe TypeScript con tipos apropiados
  • Sigue el estilo de código existente (usa ESLint)
  • Agrega tests para nuevas características
  • Actualiza la documentación
  • Mantén commits atómicos y bien descritos

📝 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo LICENSE para detalles.


👥 Equipo

Construido con ❤️ por desarrolladores apasionados por Web3 y la compensación justa.


🙏 Agradecimientos

  • Equipo Scroll - Por construir una solución L2 increíble
  • OpenZeppelin - Por librerías de contratos inteligentes seguros
  • Hardhat - Por excelentes herramientas de desarrollo
  • Ethers.js - Por interacciones blockchain sin fricciones

📞 Soporte


🔗 Enlaces


Construido en Scroll L2 | Impulsado por Ethereum | Hecho para Trabajadores

⭐ ¡Dale estrella a este repo si lo encuentras útil!

About

Create payment flows that unlock proportionally as workers complete their hours, ensuring transparent, instant, and trustless compensation.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors