Web3 Playground & Sandbox - Learn, Develop, Test MCP Servers + Toolkit SDK
Compilador Solidity gratuito e IDE Web3 com tutoriais interativos. Aprenda desenvolvimento blockchain, implante contratos inteligentes em 8+ chains (Ethereum, Polygon, Base, Arbitrum, Solana). Modelos para tokens, NFTs, DeFi, DAOs. Editor Monaco, assistência de IA, acessível WCAG. Alternativa ao Remix. Otimização de gas, integração com MetaMask, código aberto. Amigável para iniciantes. Kit de ferramentas MCP.
GitHub
26
Experimente este MCPPatrocinadoDocumentação
Lyra Web3 Playground
✨ Construído por nich | GitHub | X/Twitter
[](https://github.com/nirholas/lyra-web3-playground) [](https://www.typescriptlang.org/) [](https://react.dev/) [](docs/ACCESSIBILITY.md) [](docs/ARCHITECTURE.md) [](https://x.com/nichxbt)Uma plataforma abrangente de aprendizado Web3 de código aberto. Ambientes de desenvolvimento profissionais, ferramentas assistidas por IA, testes de segurança e recursos colaborativos — tudo no seu navegador.
Obtenha o código-fonte no GitHub
Nota de hospedagem: a demonstração hospedada em lyra.works está atualmente offline enquanto a hospedagem está sendo migrada. Clone o repositório e execute
npm install && npm run devpara usar todos os ambientes abaixo emhttp://localhost:3000.
🛠️ Ambientes de Desenvolvimento
IDEs Profissionais
| Ferramenta | Descrição | Link |
|---|---|---|
| Web Sandbox | IDE web completo com React, Vue, Python, pré-visualização ao vivo, modo Vim | /ide?type=web |
| Solidity IDE | IDE de contratos inteligentes com compilador multi-versão (0.6.x - 0.8.24) | /ide?type=solidity |
| Full-Stack Playground | Construa dApps completos com contrato + frontend + pré-visualização ao vivo | /fullstack-demo |
| Interactive Sandbox | IDE com assistente de IA, modelos e implantação em testnet | /sandbox |
Laboratório de Inovação (Experimental)
Abra http://localhost:3000/innovation ou ative o "Modo Inovação" no sandbox:
| Recurso | Capacidade |
|---|---|
| AI Code Whisperer | Detecção de vulnerabilidades em tempo real, controle por voz, sugestões de correção automática |
| Contract Time Machine | Histórico de versões, ramificações, simulação de estado |
| Security Testing Lab | Teste contratos contra reentrância, empréstimos instantâneos, ataques de estouro |
| Collaborative Arena | Codifique com colegas de IA, participe de desafios |
| Neural Gas Oracle | Previsão e otimização de gás com ML |
| Cross-Chain Deployer | Implante em 8+ cadeias com configuração automatizada de ponte |
♿ Acessibilidade (WCAG 2.1 AAA)
Suporte abrangente de acessibilidade:
| Recurso | Descrição |
|---|---|
| Dwell Click | Clique ao passar o mouse — nenhum botão do mouse necessário |
| Reading Guide | Linha horizontal segue a posição do cursor |
| Color Blind Filters | Suporte a Protanopia, Deuteranopia, Tritanopia |
| Text-to-Speech | Leia o conteúdo em voz alta com velocidade/tom ajustáveis |
| Cognitive Support | Modo simplificado, modo foco, tempos limite estendidos |
| Code-to-English | Traduz Solidity para explicações em inglês simples |
Veja ACCESSIBILITY.md para documentação completa.
Acesso Rápido a Todas as Ferramentas
| Ferramenta | URL | Descrição |
|---|---|---|
| IDE Hub | /ide | Escolha Web Sandbox ou Solidity IDE |
| Web Sandbox | /ide?type=web | IDE HTML/CSS/JS/React/Vue/Python |
| Solidity IDE | /ide?type=solidity | Desenvolvimento de contratos inteligentes |
| Interactive Sandbox | /sandbox | Sandbox com assistente de IA |
| Contract Playground | /playground | Editor de contratos baseado em modelos |
| Learning Playground | /learn | Tutoriais interativos |
| Full-Stack Demo | /fullstack-demo | Construtor de Contrato + Frontend |
| Innovation Lab | /innovation | Recursos experimentais de IA |
| Markets | /markets | Preços de cripto ao vivo e dados DeFi |
| Explore | /explore | Galeria de projetos da comunidade |
🎯 Para quem é isso?
| Você é... | Lyra ajuda você a... |
|---|---|
| 🌱 Iniciante completo | Aprenda Solidity com tutoriais passo a passo |
| 💻 Desenvolvedor web | Transicione para Web3 com ferramentas familiares |
| 🎓 Estudante | Pratique contratos inteligentes sem gastar gás |
| 🔧 Construtor | Prototipe dApps rapidamente com modelos |
| 👩🏫 Educador | Ensine blockchain com exemplos interativos |
⚡ Comece em 30 Segundos
Execute npm install && npm run dev, depois escolha uma opção abaixo.
Opção 1: Navegue pelos tutoriais
- Abra
http://localhost:3000 - Clique em qualquer tutorial ou exemplo
- Comece a codificar imediatamente
Opção 2: Experimente o Solidity IDE
- Abra
http://localhost:3000/ide - Escreva ou cole um contrato inteligente
- Clique em "Compile" e depois em "Deploy" (usa JavaScript VM - nenhuma carteira necessária)
Opção 3: Siga um tutorial
- Abra
http://localhost:3000 - Role até "Aprenda Desenvolvimento Web3"
- Escolha um tutorial com base no seu nível
🎮 O que você pode fazer aqui?
Para Aprender
- 📖 50+ tutoriais de "O que é blockchain?" até DeFi avançado
- 🎯 Exemplos interativos - o código é executado enquanto você lê
- 💡 Feedback instantâneo - veja erros e resultados imediatamente
- 🏆 Acompanhamento de progresso - continue de onde parou
Para Construir
- ⚡ Solidity IDE - compile e implante em segundos
- 📝 40+ modelos - tokens, NFTs, DAOs, DeFi
- 🤖 AI dApp Builder - descreva o que você quer, obtenha código
- 🔗 Multi-cadeia - Ethereum, Polygon, Base, Arbitrum e mais
Para Todos
- 🌍 10 idiomas - Inglês, Espanhol, Chinês, Árabe e mais
- ♿ Totalmente acessível - leitores de tela, navegação por teclado, suporte a daltonismo
- 🌙 Modo escuro - fácil para os olhos
- 📱 Compatível com dispositivos móveis - aprenda em qualquer dispositivo
📚 Caminhos de Aprendizado
🌱 Sou novo em blockchain
- Comece com o tutorial "O que é Ethereum?" na página inicial (
/) - Continue com "Seu Primeiro Contrato Inteligente" (
/) - Experimente o exemplo Hello World (
/example/hello-world)
💻 Conheço JavaScript, ensine-me Solidity
- Leia "Solidity para Desenvolvedores JS" na página inicial (
/) - Compare JavaScript e Solidity lado a lado (
/) - Construa um Token Simples (
/example/erc20-token)
🚀 Quero construir um dApp
- Use o AI dApp Builder na página inicial (
/) e descreva sua ideia - Ou comece a partir de um modelo no IDE (
/ide) - Implante em testnet e compartilhe com a comunidade
✨ Recursos
🎮 Sandbox de Código Premium (NOVO!)
- IDE de classe mundial comparável a CodePen, JSFiddle e Remix
- Web Sandbox: Projetos com múltiplos arquivos com HTML, CSS, JS, React, Vue, Python
- Solidity IDE: Ambiente de desenvolvimento de contratos inteligentes completo
- Layouts de painel dividido com redimensionamento arrastável
- Predefinições de dispositivo para testes responsivos (Desktop/Tablet/Mobile)
- Execução automática ao alterar com pré-visualização ao vivo
- Painel de console com captura de log/aviso/erro
- Painel de configurações: Tema, tamanho da fonte, modo Vim, salvamento automático e mais
🎮 Playground de Código Interativo (/playground)
- Editor de múltiplos arquivos com abas de arquivo (HTML, CSS, JS, Solidity, JSON e mais)
- Layout de painel duplo com pré-visualização de recarga ao vivo
- Captura de console — veja
console.log/warn/errordo seu código em tempo real - Gerenciamento de arquivos — crie, exclua e alterne entre arquivos
- Geração de contratos com IA a partir de prompts em linguagem natural
- 40+ modelos de contratos inteligentes prontos para implantar
- Implantação com um clique em qualquer blockchain suportada
🔧 Desenvolvimento Solidity (NOVO!)
- Múltiplas versões de Solidity (0.6.x até 0.8.24)
- Compilação em tempo real com destaque de erros/avisos
- Implantação em qualquer rede (JS VM, Sepolia, Goerli, Mumbai, Mainnet)
- UI de contrato interativa - chame funções diretamente
- Histórico de transações com rastreamento de gás
- Copie ABI/Bytecode com um clique
- Atalhos de teclado (Ctrl+S para compilar)
###️ Full-Stack Sandbox (/sandbox)
- Navegação em árvore de arquivos com gerenciamento de espaço de trabalho
- Painel de pré-visualização web com recarga ao vivo para projetos HTML/CSS/JS
- Captura de log do console do iframe de pré-visualização
- Painel de interação com contratos para contratos inteligentes implantados
- Integração com assistente de IA para sugestões de código
- Modo Inovação — recursos experimentais como AI Whisperer, Time Machine, Exploit Lab
- Exportar/compartilhar espaços de trabalho com um clique
📚 Modelos de Contratos Inteligentes
- 40+ modelos prontos para uso em categorias:
- ERC-20, ERC-721, ERC-1155 tokens
- DeFi (staking, vaults, DEX)
- Mercados de NFT e cunhagem
- Governança e DAOs
- Pontes entre cadeias
📖 Tutoriais Abrangentes
- 50+ tutoriais do iniciante ao avançado [em andamento]
- Guias passo a passo com exemplos interativos
- Tópicos: fundamentos de Solidity, mecânicas de DeFi, padrões de segurança, otimização de gás
🔗 Suporte Multi-Cadeia
- Ethereum, Base, Polygon, Avalanche, BSC, Arbitrum
- Integração com Solana
- Suporte à testnet Monad
🧹 Ferramenta de Consolidação de Tokens
- Varra tokens residuais entre carteiras
- Gerenciamento de tokens multi-cadeia
- Operações em lote eficientes em gás
🎨 UI/UX Moderna
- Modo escuro/claro
- Design totalmente responsivo
- Atalhos de teclado para usuários avançados
- Otimizado para dispositivos móveis com navegação inferior
♿ Acessibilidade - Além do WCAG 2.1 AAA (NOVO!)
Vamos muito além da acessibilidade padrão. Nosso sistema inclui recursos futuristas que tornam o Web3 verdadeiramente acessível a todos:
Perfis rápidos (predefinições com um clique):
- 👓 Baixa Visão • 🦯 Cego • 🦻 Surdo • 🖐️ Deficiência Motora • 🧠 Cognitivo
Recursos de Visão:
- Modo de alto contraste, texto grande (até 200%), cores personalizadas
- Filtros para daltonismo: Protanopia, Deuteranopia, Tritanopia e mais
- Guia de leitura: Linha horizontal segue seu cursor para leitura mais fácil
- Fonte OpenDyslexic: Especialmente projetada para leitores disléxicos
Acessibilidade Motora:
- Dwell Click: Clique ao passar o mouse - nenhum botão do mouse necessário
- Alvos de clique grandes (até 64px), simulação de teclas aderentes
- Navegação completa por teclado com acesso rápido
Alt+A
Suporte Cognitivo:
- Modo de interface simplificada, modo foco, animações reduzidas
- Tempos limite estendidos, ajuste de velocidade de leitura
- Layouts claros e consistentes
Leitor de Tela e Áudio:
- Regiões ativas ARIA anunciam todas as ações
- Texto para Fala: Leia o conteúdo em voz alta com velocidade/tom ajustáveis
- Código para Linguagem Natural: Traduz código para inglês simples
Amigável para Desenvolvedores:
- Botão de acessibilidade flutuante arrastável
- Exportar/importar configurações personalizadas
- Suporte completo a atalhos de teclado
Veja ACCESSIBILITY.md para documentação completa
🤖 Construtor de dApp com IA (NOVO!)
- Linguagem natural → Geração de dApp full-stack
- Gera Solidity + HTML + CSS + JavaScript a partir de prompts
- Modelos de contratos inteligentes: Token, NFT, DAO
- Editor interativo estilo tutorial com orientação passo a passo
- Implante diretamente em testnets
🌐 Recursos da Comunidade (NOVO!)
- Compartilhar Projetos: Publique seu trabalho com links exclusivos para compartilhamento
- Explorar Galeria: Descubra projetos, modelos e tutoriais da comunidade
- Curtir e Comentar: Interaja com o trabalho de outros desenvolvedores
- Bifurcar Projetos: Construa sobre o código de outros
- Autenticação por Carteira: Conecte a carteira para acessar recursos da comunidade
- Incorporar Código: Incorpore projetos compartilhados em seus próprios sites
🌍 Internacionalização (NOVO!)
- 10 idiomas suportados de fábrica
- Inglês, Espanhol, Chinês, Francês, Alemão, Japonês, Coreano, Português, Russo, Árabe
- Suporte RTL para árabe
- Seletor de idioma na navegação
- Preferência de idioma persistida
📊 Integração de Dados de Mercado (NOVO!)
- Preços de Cripto ao Vivo: Dados em tempo real da CoinGecko
- Análises DeFi: TVL de protocolos, rendimentos da DeFiLlama
- Estatísticas de Cadeia: TVL por cadeia, moedas em alta
- Página de Mercados: Visão geral abrangente do mercado em
/markets
🚀 Início Rápido
Pré-requisitos
- Node.js 18+
- npm ou yarn
Instalação
# Clone the repository
git clone https://github.com/nirholas/lyra-web3-playground.git
cd lyra-web3-playground
# Install dependencies
npm install
# Start development server
npm run dev
Abra http://localhost:3000 no seu navegador.
Variáveis de Ambiente
O aplicativo é executado sem configuração, mas o login com carteira, a API de backend, o acesso RPC e os recursos baseados em Supabase precisam de credenciais. Copie o arquivo de exemplo e preencha-o:
cp .env.example .env
| Variável | Propósito |
|---|---|
VITE_PRIVY_APP_ID | ID do aplicativo Privy usado para login com carteira / e-mail |
VITE_API_URL | URL base da API de backend (padrão: http://localhost:3001) |
VITE_INFURA_API_KEY | ID do projeto Infura para chamadas RPC somente leitura |
VITE_SUPABASE_URL | URL do projeto Supabase |
VITE_SUPABASE_ANON_KEY | Chave anônima (pública) do Supabase |
Todo valor com prefixo VITE_ é incorporado ao bundle do cliente e, portanto, é público — nunca coloque uma chave privada ou segredo de servidor em .env. Segredos do lado do servidor pertencem a server/.env (veja server/.env.example).
Build para Produção
npm run build
npm run preview
🏗️ Estrutura do Projeto
├── src/
│ ├── components/ # React components
│ │ ├── Accessibility/ # Comprehensive a11y system
│ │ │ ├── AccessibilityButton.tsx # Floating button
│ │ │ ├── AccessibilityPanel.tsx # Settings panel
│ │ │ ├── DwellClick.tsx # Click-by-hovering
│ │ │ ├── ReadingGuide.tsx # Line highlighter
│ │ │ └── ColorBlindFilters.tsx # Color blind support
│ │ ├── CodePlayground/ # Monaco editor & compiler
│ │ ├── Tutorial/ # Tutorial system
│ │ ├── Sandbox/ # Premium sandbox IDEs
│ │ │ ├── WebSandbox.tsx # Web dev sandbox
│ │ │ ├── SoliditySandbox.tsx # Solidity IDE
│ │ │ ├── UnifiedSandbox.tsx # Generic sandbox wrapper
│ │ │ └── ShareModal.tsx # Project sharing modal
│ │ ├── Playground/ # Full-stack dApp playground
│ │ ├── FullStackPlayground/ # AI dApp builder
│ │ └── Consolidation/ # Token consolidation
│ ├── pages/ # Route pages
│ │ ├── SandboxPage.tsx # Premium IDE selection
│ │ ├── ExplorePage.tsx # Community project gallery
│ │ ├── SharedProjectPage.tsx # View shared projects
│ │ ├── MarketsPage.tsx # Market data dashboard
│ │ └── ExamplePage.tsx # Example with sandbox toggle
│ ├── services/ # API services
│ │ ├── community.ts # Sharing, likes, comments, forks
│ │ └── marketData.ts # CoinGecko & DeFiLlama integration
│ ├── hooks/ # Custom React hooks
│ │ └── useMarketData.ts # Market data hooks
│ ├── stores/ # Zustand state management
│ │ ├── accessibilityStore.ts # 40+ a11y settings
│ │ ├── i18nStore.ts # 10 languages + RTL
│ │ ├── themeStore.ts # Dark/light mode
│ │ └── walletStore.ts # Wallet connection
│ ├── styles/
│ │ ├── index.css # Main styles
│ │ └── accessibility.css # 580+ lines a11y CSS
│ ├── examples/ # Code examples (web3, ai)
│ └── utils/ # Helper functions
│ └── contractTemplates.ts # 40+ contract templates
├── server/ # Backend API (optional)
├── docs/ # Documentation
└── public/ # Static assets
🛠️ Pilha Tecnológica
| Categoria | Tecnologia |
|---|---|
| Frontend | React 18, TypeScript, Vite |
| Estilização | TailwindCSS |
| Editor | Monaco Editor |
| Web3 | ethers.js v6, viem |
| Estado | Zustand (com persist) |
| i18n | Store personalizada (10 idiomas + RTL) |
| Acessibilidade | Sistema a11y personalizado (WCAG 2.1 AAA+) |
| Banco de dados | Supabase |
| Testes | Vitest |
| Implantação | Vercel, Netlify, Docker |
📖 Documentação
| Documento | Descrição |
|---|---|
| Começando | Novo no blockchain? Comece aqui! |
| Guia de Início Rápido | Configure e execute localmente |
| Guia do IDE | Todos os ambientes de desenvolvimento e URLs |
| Guia do Sandbox | Recursos premium do sandbox |
| Laboratório de Inovação | Recursos de IA e experimentais |
| Playgrounds | Todos os componentes do playground |
| Visão Geral da Arquitetura | Design do sistema |
| API de Backend | Referência da API |
| Guia de Implantação | Implante sua própria instância |
| Segurança | Práticas de segurança |
| Acessibilidade | Recursos de acessibilidade e uso |
❓ Perguntas Frequentes
Preciso instalar alguma coisa?
Não! Execute npm run dev e abra http://localhost:3000 no seu navegador. Tudo roda no seu navegador.
Preciso de criptomoeda ou carteira?
Não! Você pode aprender e praticar sem cripto. O IDE tem um modo "JavaScript VM" que simula um blockchain localmente. Quando estiver pronto para implantar de verdade, você precisará do MetaMask e de ETH de testnet (que é gratuito).
Isso é gratuito?
Sim, é gratuito para executar. Sem taxas ocultas, sem nível premium. Veja o arquivo LICENSE para os termos de uso.
Estou recebendo erros. O que eu faço?
- Verifique a mensagem de erro - geralmente ela indica o que está errado
- Certifique-se de que sua versão do Solidity corresponde ao seu código
- Verifique o
/faqpara problemas comuns - Abra uma issue se estiver travado
Posso usar isso para minha aula/oficina?
Absolutamente! Esse é um dos principais casos de uso. Você pode compartilhar links para exemplos específicos, e os alunos podem codificar junto em seus navegadores. Nenhuma configuração necessária.
Como faço para implantar em uma rede real?
- Instale o MetaMask
- Obtenha ETH de testnet de um faucet (gratuito)
- Conecte sua carteira no Lyra
- Selecione sua rede (ex.: Sepolia, Mumbai)
- Clique em "Deploy" - seu contrato agora está no blockchain!
Encontrei um bug / tenho uma sugestão
Por favor, abra uma issue! Agradecemos todo feedback.
🤝 Contribuindo
Contribuições são bem-vindas! Leia nosso Guia de Contribuição para detalhes sobre:
- Código de conduta
- Fluxo de trabalho de desenvolvimento
- Processo de pull request
- Padrões de codificação
- Mensagens de commit acessíveis - Usamos um formato projetado para leitores de tela e acessibilidade cognitiva
Formato da Mensagem de Commit
[type] Clear description in plain English (emoji at end) 🎉
Exemplo: [add] Keyboard navigation for dropdown menus ♿
Por que esse formato?
- Texto primeiro - Leitores de tela leem nomes de emojis, então o significado vem primeiro
- Palavras simples - Claro para desenvolvedores com deficiências cognitivas
- Consistente - Fácil de escanear para usuários com baixa visão
Veja CONTRIBUTING.md para diretrizes completas.
Boas Primeiras Issues
Confira issues rotuladas como good first issue para começar.
📄 Licença
Todos os direitos reservados. Veja o arquivo LICENSE para detalhes.
🙏 Agradecimentos
- Remix IDE pela inspiração
- OpenZeppelin pelos padrões de contratos
- A comunidade de desenvolvedores Web3
Se você achar este projeto útil, considere dar uma ⭐
Feito com ❤️ por nich
Documentação
Site de documentação completo: https://nirholas.github.io/lyra-web3-playground/