Solidity Compiler IDE

Lyra Web3 游乐场

✨ 由 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)

全面的开源 Web3 学习平台。 专业开发环境、AI 辅助工具、安全测试和协作功能，尽在浏览器中。

在 GitHub 上获取源代码

托管说明： lyra.works 上的托管演示目前因迁移托管服务而暂时离线。克隆仓库并运行 npm install && npm run dev，即可通过 http://localhost:3000 使用以下所有环境。

---

🛠️ 开发环境

专业 IDE

工具	描述	链接
Web Sandbox	功能齐全的 Web IDE，支持 React、Vue、Python、实时预览和 Vim 模式	/ide?type=web
Solidity IDE	智能合约 IDE，支持多版本编译器（0.6.x - 0.8.24）	/ide?type=solidity
全栈游乐场	构建包含合约、前端和实时预览的完整 dApp	/fullstack-demo
交互式沙盒	支持 AI 助手、模板和测试网部署的 IDE	/sandbox

创新实验室（实验性）

打开 http://localhost:3000/innovation，或在沙盒中启用“创新模式”：

功能	能力
AI 代码哨兵	实时漏洞检测、语音控制、自动修复建议
合约时光机	版本历史、分支、状态模拟
安全测试实验室	测试合约能否抵御重入、闪电贷和溢出攻击
协作竞技场	与 AI 队友一起编写代码，参与挑战
神经 Gas 预言机	基于 ML 的 Gas 预测与优化
跨链部署器	部署到 8 条以上链，并自动配置桥接

♿ 无障碍访问（WCAG 2.1 AAA）

全面的无障碍支持：

功能	描述
悬停点击	将鼠标悬停即可点击，无需按下鼠标按钮
阅读辅助线	水平线随光标位置移动
色盲滤镜	支持红色盲、绿色盲和蓝黄色盲
文本转语音	以可调节的语速和音调朗读内容
认知辅助	简化模式、专注模式、延长超时时间
代码转通俗英语	将 Solidity 转换为通俗易懂的说明

请参阅 ACCESSIBILITY.md 查看完整文档。

---

快速访问所有工具

工具	URL	描述
IDE Hub	/ide	选择 Web Sandbox 或 Solidity IDE
Web Sandbox	/ide?type=web	HTML/CSS/JS/React/Vue/Python IDE
Solidity IDE	/ide?type=solidity	智能合约开发
交互式沙盒	/sandbox	带 AI 助手的沙盒
合约游乐场	/playground	基于模板的合约编辑器
学习游乐场	/learn	交互式教程
全栈演示	/fullstack-demo	合约与前端构建器
创新实验室	/innovation	实验性 AI 功能
市场	/markets	实时加密货币价格和 DeFi 数据
探索	/explore	社区项目展示

---

🎯 适合哪些人？

你是……	Lyra 可以帮你……
🌱 完全的新手	通过循序渐进的教程学习 Solidity
💻 Web 开发者	使用熟悉的工具过渡到 Web3
🎓 学生	无需支付 Gas 费即可练习智能合约
🔧 开发者	使用模板快速构建 dApp 原型
👩‍🏫 教育工作者	通过交互式示例教授区块链

---

⚡ 30 秒快速开始

运行 npm install && npm run dev，然后从下方选择一个选项。

选项 1：浏览教程

1. 打开 http://localhost:3000
2. 点击任意教程或示例
3. 立即开始编写代码

选项 2：试用 Solidity IDE

1. 打开 http://localhost:3000/ide
2. 编写或粘贴智能合约
3. 点击 "Compile"，然后点击 "Deploy"（使用 JavaScript VM，无需钱包）

选项 3：跟随教程学习

1. 打开 http://localhost:3000
2. 滚动到“学习 Web3 开发”
3. 根据你的水平选择教程

---

🎮 你可以在这里做什么？

学习

• 📖 50 多个教程，涵盖从“什么是区块链？”到高级 DeFi 的内容
• 🎯 交互式示例——边读边运行代码
• 💡 即时反馈——立即查看错误和结果
• 🏆 进度跟踪——从上次离开的地方继续

构建

• ⚡ Solidity IDE——几秒内即可编译和部署
• 📝 40 多个模板——代币、NFT、DAO、DeFi
• 🤖 AI dApp 构建器——描述你的需求，即可生成代码
• 🔗 多链支持——Ethereum、Polygon、Base、Arbitrum 等

所有人都能使用

• 🌍 支持 10 种语言——英语、西班牙语、中文、阿拉伯语等
• ♿ 全面无障碍——支持屏幕阅读器、键盘导航和色盲用户
• 🌙 深色模式——让眼睛更舒适
• 📱 适配移动设备——在任何设备上学习

---

📚 学习路径

🌱 我是区块链新手

1. 从主页（/）上的“什么是 Ethereum？”教程开始
2. 接着学习“你的第一个智能合约”（/）
3. 尝试 Hello World 示例（/example/hello-world）

💻 我会 JavaScript，想学习 Solidity

1. 阅读主页（/）上的“面向 JS 开发者的 Solidity”
2. 并排比较 JavaScript 和 Solidity（/）
3. 构建一个简单代币（/example/erc20-token）

🚀 我想构建 dApp

1. 使用主页（/）上的 AI dApp 构建器描述你的想法
2. 或从 IDE（/ide）中的模板开始
3. 部署到测试网并与社区分享

---

✨ 功能

🎮 高级代码沙盒（新功能！）

• 世界级 IDE，可媲美 CodePen、JSFiddle 和 Remix
• Web 沙盒：支持 HTML、CSS、JS、React、Vue、Python 的多文件项目
• Solidity IDE：功能齐全的智能合约开发环境
• 分栏布局，可拖动调整大小
• 设备预设，用于响应式测试（桌面端/平板/移动端）
• 更改时自动运行，并实时预览
• 控制台面板，捕获 log/warn/error
• 设置面板：主题、字体大小、Vim 模式、自动保存等

🎮 交互式代码练习场（/playground）

• 多文件编辑器，带文件标签页（HTML、CSS、JS、Solidity、JSON 等）
• 双栏布局，支持实时热重载预览
• 控制台捕获——实时查看代码中的 console.log/warn/error
• 文件管理——创建、删除和切换文件
• AI 驱动的合约生成，根据自然语言提示词生成
• 40 多个可直接部署的智能合约模板
• 一键部署到任何受支持的区块链

🔧 Solidity 开发（新功能！）

• 多个 Solidity 版本（0.6.x 至 0.8.24）
• 实时编译，高亮显示错误和警告
• 部署到任何网络（JS VM、Sepolia、Goerli、Mumbai、Mainnet）
• 交互式合约 UI——直接调用函数
• 交易历史记录，包含 Gas 跟踪
• 一键复制 ABI/Bytecode
• 键盘快捷键（Ctrl+S 可编译）

🛠️ 全栈沙盒（/sandbox）

• 文件树导航，支持工作区管理
• 网页预览面板，支持 HTML/CSS/JS 项目的实时热重载
• 捕获预览 iframe 中的控制台日志
• 合约交互面板，用于与已部署的智能合约交互
• 集成 AI 助手，提供代码建议
• 创新模式——包含 AI Whisperer、Time Machine、Exploit Lab 等实验性功能
• 一键导出 / 分享工作区

📚 智能合约模板

• 40 多个即用型模板，涵盖多个类别：
  • ERC-20、ERC-721、ERC-1155 代币
  • DeFi（质押、金库、DEX）
  • NFT 市场和铸造
  • 治理和 DAO
  • 跨链桥

📖 全面的教程

• 50 多篇从入门到进阶的教程［正在编写］
• 提供包含交互式示例的分步指南
• 主题：Solidity 基础、DeFi 机制、安全模式、Gas 优化

🔗 多链支持

• Ethereum、Base、Polygon、Avalanche、BSC、Arbitrum
• 集成 Solana
• 支持 Monad 测试网

🧹 代币归集工具

• 归集多个钱包中的零散代币
• 多链代币管理
• Gas 高效的批量操作

🎨 现代化 UI/UX

• 深色 / 浅色模式
• 完全响应式设计
• 为高级用户提供键盘快捷键
• 针对移动设备优化，配备底部导航栏

♿ 无障碍功能——超越 WCAG 2.1 AAA 标准（新增！）

我们提供的无障碍功能远超标准要求。系统包含前沿功能，让 Web3 真正惠及所有人：

快捷配置（一键预设）：

• 👓 低视力 • 🦯 失明 • 🦻 失聪 • 🖐️ 运动障碍 • 🧠 认知障碍

视觉功能：

• 高对比度模式、大号文字（最大 200%）、自定义颜色
• 色盲滤镜：红色盲、绿色盲、蓝黄色盲等
• 阅读辅助线：随光标移动的水平线，让阅读更轻松
• OpenDyslexic 字体：专为阅读障碍人士设计

运动障碍辅助功能：

• 悬停点击：悬停即可点击，无需按下鼠标按钮
• 大型点击目标（最大 64px）、模拟粘滞键
• 完整的键盘导航，可通过 Alt+A 快速访问

认知辅助功能：

• 简化界面模式、专注模式、减少动画
• 延长超时设置、调整阅读速度
• 清晰、一致的布局

屏幕阅读器和音频：

• ARIA live 区域播报所有操作
• 文本转语音：朗读内容，并可调节语速 / 音调
• 代码转自然语言：将代码翻译成通俗易懂的英语

开发者友好功能：

• 可拖动的悬浮无障碍按钮
• 导出 / 导入自定义设置
• 完整支持键盘快捷键

完整文档请参阅 ACCESSIBILITY.md

🤖 AI 驱动的 dApp 构建器（新增！）

• 自然语言 → 生成全栈 dApp
• 根据提示词生成 Solidity + HTML + CSS + JavaScript
• 智能合约模板：Token、NFT、DAO
• 交互式教程风格编辑器，提供分步指导
• 直接部署到测试网

🌐 社区功能（新增！）

• 分享项目：发布作品并生成专属分享链接
• 探索图库：发现社区中的项目、模板和教程
• 点赞和评论：与其他开发者交流作品
• 分叉项目：基于他人的代码继续构建
• 钱包身份验证：连接钱包以使用社区功能
• 嵌入代码：将分享的项目嵌入自己的网站

🌍 国际化（新增！）

• 开箱即支持 10 种语言
• 英语、西班牙语、中文、法语、德语、日语、韩语、葡萄牙语、俄语、阿拉伯语
• 支持 RTL（从右向左），适用于阿拉伯语
• 导航栏中提供语言选择器
• 保存语言偏好设置

📊 市场数据集成（新增！）

• 实时加密货币价格：来自 CoinGecko 的实时数据
• DeFi 分析：来自 DeFiLlama 的协议 TVL 和收益率
• 链统计数据：按链统计的 TVL、热门币种
• 市场页面：在 /markets 查看全面的市场概览

---

🚀 快速开始

前置条件

• Node.js 18+
• npm 或 yarn

安装

# 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

在浏览器中打开 http://localhost:3000。

环境变量

应用无需配置即可运行，但钱包登录、后端 API、RPC 访问和由 Supabase 提供支持的功能需要凭据。复制示例文件并填写：

cp .env.example .env

变量	用途
VITE_PRIVY_APP_ID	用于钱包／电子邮件登录的 Privy 应用 ID
VITE_API_URL	后端 API 的基础 URL（默认为 http://localhost:3001）
VITE_INFURA_API_KEY	用于只读 RPC 调用的 Infura 项目 ID
VITE_SUPABASE_URL	Supabase 项目 URL
VITE_SUPABASE_ANON_KEY	Supabase 匿名（公开）密钥

所有以 VITE_ 为前缀的值都会被内联到客户端 bundle 中，因此是公开的——切勿将私钥或服务器密钥放入 .env。服务器端密钥应放在 server/.env 中（参见 server/.env.example）。

构建生产版本

npm run build
npm run preview

---

🏗️ 项目结构

├── 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

---

🛠️ 技术栈

类别	技术
前端	React 18、TypeScript、Vite
样式	TailwindCSS
编辑器	Monaco Editor
Web3	ethers.js v6、viem
状态	Zustand（带持久化）
国际化	自定义存储（10 种语言 + RTL）
无障碍	自定义 a11y 系统（WCAG 2.1 AAA+）
数据库	Supabase
测试	Vitest
部署	Vercel、Netlify、Docker

---

📖 文档

文档	描述
入门指南	刚接触区块链？从这里开始！
快速入门指南	在本地快速运行
IDE 指南	所有开发环境和 URL
沙盒指南	高级沙盒功能
创新实验室	AI 和实验性功能
Playgrounds	所有 Playground 组件
架构概览	系统设计
后端 API	API 参考
部署指南	部署自己的实例
安全	安全实践
无障碍	无障碍功能及用法

---

❓ 常见问题

我需要安装任何东西吗？

不需要！运行 npm run dev，然后在浏览器中打开 http://localhost:3000 即可。一切都在浏览器中运行。

我需要加密货币或钱包吗？

不需要！无需任何加密货币即可学习和练习。IDE 有一种“JavaScript VM”模式，可以在本地模拟区块链。准备好实际部署时，你需要 MetaMask 和测试网 ETH（免费）。

这是免费的吗？

是的，运行是免费的。没有隐藏费用，也没有高级套餐。使用条款请参阅 LICENSE 文件。

我遇到了错误，该怎么办？

1. 查看错误消息——通常会说明问题所在
2. 确保 Solidity 版本与你的代码一致
3. 查看 /faq，了解常见问题
4. 如果仍无法解决，请提交问题

我可以在课堂或研讨会上使用它吗？

当然可以！这是它的主要用途之一。你可以分享指向特定示例的链接，学生可以在浏览器中跟着编写代码。无需任何设置。

如何部署到真实网络？

1. 安装 MetaMask
2. 从水龙头获取测试网 ETH（免费）
3. 在 Lyra 上连接你的钱包
4. 选择你的网络（例如 Sepolia、Mumbai）
5. 点击“Deploy”——你的合约现在已部署到区块链上！

我发现了错误／有建议

请提交问题！我们感谢所有反馈。

---

🤝 参与贡献

欢迎贡献！请阅读我们的贡献指南，了解以下内容：

• 行为准则
• 开发工作流
• 拉取请求流程
• 编码规范
• 无障碍提交消息——我们采用专为屏幕阅读器和认知无障碍设计的格式

提交消息格式

[type] Clear description in plain English (emoji at end) 🎉

示例：[add] Keyboard navigation for dropdown menus ♿

为什么采用这种格式？

• 文本优先——屏幕阅读器会读出表情符号的名称，因此先表达含义
• 用词简单——便于有认知障碍的开发者理解
• 保持一致——方便低视力用户快速浏览

完整指南请参阅 CONTRIBUTING.md。

适合新手的优先问题

查看标记为 good first issue 的问题，开始参与贡献。

---

📄 许可证

保留所有权利。详情请参阅 LICENSE 文件。

---

🙏 致谢

• 感谢 Remix IDE 带来的灵感
• 感谢 OpenZeppelin 提供合约标准
• 感谢 Web3 开发者社区

---

如果你觉得这个项目有用，请考虑为它点亮一颗 ⭐

由 nich 用 ❤️ 构建

文档

完整文档网站：https://nirholas.github.io/lyra-web3-playground/

• 入门指南介绍安装和首次运行。
• 示例提供可直接复制粘贴的代码片段。

Star 历史