feat(ecosystem): Bio 小程序生态系统架构 #133
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Gaubee
force-pushed
the
feat/ecosystem
branch
from
23db0bb to
dda5cad
Compare
- Add pnpm-workspace.yaml for monorepo structure - Create @aspect-aspect/bio-sdk package with EIP-1193 style API - Create miniapps/teleport (一键传送) demo app - Create miniapps/forge (锻造) demo app - Add ecosystem.json subscription manifest - Add whitebook documentation (10-生态篇) - Configure build scripts for SDK and miniapps
Phase 2: Host Provider - Add PostMessage bridge for iframe communication - Implement wallet handlers (requestAccounts, selectAccount, pickWallet) - Implement signing handlers (signMessage, signTypedData) - Implement transfer handlers (sendTransaction) - Add miniapp registry for subscription management Phase 3: UI Integration - Add EcosystemTab with app grid - Add MiniappActivity and MiniappPage for running miniapps - Update TabBar with ecosystem tab (3 tabs: wallet, ecosystem, settings) - Register MiniappActivity route Testing - Add unit tests for types, bridge, and registry - All 1622 tests passing Documentation - Add implementation status document - Update whitebook index with ecosystem chapter
- AccountPickerJob: wallet account selector for miniapps - SigningConfirmJob: message signing confirmation dialog - PermissionRequestJob: permission request dialog - MiniappPage: register handler callbacks for UI integration Phase 4: Complete UI integration for bio_selectAccount, bio_signMessage
Phase 5: Permission & Architecture - Add EcosystemStore for permission and source storage - Add permissions.ts for permission checking - Integrate permission checking into bridge.ts - Add HandlerContext for multi-instance callback management - Refactor handlers to use context-based callbacks - Update PermissionRequestJob to handle JSON permissions All 1623 tests passing.
Phase 6: Feature Completion - Add MiniappTransferConfirmJob for miniapp transfer requests - Add SettingsSourcesActivity for managing trusted sources - Add sources management entry in settings page - Update miniapp.tsx to use new transfer confirm dialog All 1623 tests passing.
- bio-sdk: vitest config + 18 unit tests (events, types, provider) - teleport: vitest config + 6 component tests - forge: vitest config + 7 component tests - Add window.bio type declarations - Add turbo.json test:storybook task config - Update whitebook: Storybook v10 + Vitest integration rationale All subprojects now have proper test infrastructure: - vitest.config.ts for test runner - test-setup.ts for jest-dom matchers - Unit tests for core logic - Component tests for React apps
- SigningConfirmJob: use SignatureAuthService.handleMessageSign - MiniappTransferConfirmJob: use SignatureAuthService.handleTransferSign - Both dialogs now trigger WalletLockConfirmJob for password verification - miniapp.tsx: extract chainName from wallet address for signing The signing flow now: 1. User confirms → WalletLockConfirmJob opens 2. User inputs pattern → Password verified 3. Real Ed25519/mock signature generated based on chain type 4. Signature returned to miniapp via CustomEvent
- Test ecosystem tab visibility - Test account picker job - Test signing confirm job - Test transfer confirm job - Test trusted sources management Uses mock configuration for consistent test data.
Screenshots added: - 01-home-with-ecosystem-tab: Home page with ecosystem tab - 02-ecosystem-tab-content: Miniapp list (Teleport, Forge) - 03-account-picker: Single wallet account picker - 04-signing-confirm: Signing request dialog - 05-signing-wallet-lock: Pattern lock for signing - 06-transfer-confirm: Transfer confirmation dialog - 07-trusted-sources: Trusted sources management - 08-multi-wallet-picker: Multiple wallets account picker - 09-ethereum-only-picker: Chain-filtered account picker - 10-long-message-signing: Long message signing dialog - 11-large-amount-transfer: Large amount transfer - 12-small-amount-transfer: Small decimal amount transfer Bug fix: - AccountPickerJob: Hide wallets without matching chain address instead of showing them as disabled. This prevents confusion when filtering by chain.
Port rule: default port + 6000 to avoid vite default port conflicts - e2e: 11173 (dev) - e2e:mock: 11174 (mock) This prevents port conflicts when vite dev server is already running on default ports 5173/5174.
- AccountPickerJob: use AddressDisplay for wallet addresses - SigningConfirmJob: use AddressDisplay for signing address - MiniappTransferConfirmJob: use AddressDisplay for from/to addresses, AmountDisplay for transfer amount with proper formatting Benefits: - Consistent address truncation across components - Proper number formatting with thousand separators - Responsive address display based on container width - Accessibility improvements (aria labels, copy functionality)
Changed From-To section from horizontal to vertical layout: - Addresses now have full width for proper truncation - Single ellipsis in middle (e.g., c7R6wVdP...7CpPn5Mk5Xz3) - Added copy buttons for both addresses - Down arrow between from/to for better visual flow
New screenshot tests:
- 13: Permission request dialog (bio_signMessage, bio_sendTransaction)
- 14: Empty wallet state in account picker
- 15: Hex data warning in signing dialog
New interaction tests:
- Cancel signing triggers event with { confirmed: false }
- Cancel transfer triggers event with { confirmed: false }
- Cancel account picker triggers cancel event
- Select account triggers event with address/chain/name
- Transfer confirm page has copyable addresses
Total: 20 tests (12 screenshots + 8 functional)
- Expand MiniappManifest with category, tags, screenshots, publishedAt, updatedAt, verified, beta, longDescription, website fields - Add MiniappCategory type and KNOWN_PERMISSIONS definitions - Create MiniappDetailActivity for full app metadata display - App header with icon, name, verified badge, author, category - Long description with Markdown support - Screenshots horizontal scroll gallery - Permission list with risk level indicators - Supported chains display - Tags display - Developer info section - Update EcosystemTab with card-based layout - Rich app cards with icon, name, description, badges - Click card for details, direct open button - Update ecosystem.json with enhanced sample data - Add E2E tests for detail page (17 screenshots total)
- Add MiniappInfo interface with name and icon - Update SigningParams to use app object instead of appName - Update HandlerCallbacks interfaces to include app info - Pass appIcon from MiniappPage to all Sheet components: - SigningConfirmJob - MiniappTransferConfirmJob - AccountPickerJob - PermissionRequestJob - Update Sheet headers to display app icon with fallback - Update E2E tests with appIcon parameter
- Redesign teleport icon: purple portal with arrow and sparkles - Redesign forge icon: orange flame with anvil - Add SVG screenshots showing app interfaces: - teleport: transfer form and success screens - forge: exchange interface - Update ecosystem.json to use SVG screenshots - Update E2E screenshots showing app icons in dialogs
- Split globals.css into theme.css (shareable) and globals.css - Create @keyapp/sdk package with context API (theme, locale, env, a11y) - Configure miniapps to use tsconfig paths for component sharing - Add Tailwind CSS 4 support to miniapps with vite-tsconfig-paths - Pass context params to iframe URL and sync via PostMessage - Add React hooks for context consumption in miniapps
- Rewrite Teleport and Forge apps using shared @/components/ui - Add Tailwind CSS styling with theme support - Add E2E tests for miniapp UI with 16 screenshot tests - Verify theme sync (light/dark mode, custom primary hue) - Fix emptyOutDir to preserve icon and screenshots
EcosystemTab: - Featured card with gradient background - Category filter tabs (全部/DeFi/交易/工具/NFT/游戏/社交) - App list with icons, descriptions, and '获取' button - Hot apps section with flame icon Teleport miniapp: - 6-step flow: connect → select-asset → input-amount → select-target → confirm → success - Asset picker with balance display - Amount input with 'Max' button - Transfer summary card Forge miniapp: - Token swap interface with from/to selection - Exchange rate display - Quick amount buttons (25%/50%/75%/Max) - Token picker modal - Processing animation All 16 E2E tests passing
- Date header with '发现' title (like Today tab) - Large featured story card with gradient background - Horizontal scrolling mini cards (colorful) - Ranked app list with numbers Screenshots updated
UI Improvements: - Discover/Mine dual tabs with slide indicator - Touch swipe to switch tabs (threshold 80px) - Enhanced card gradients with radial light effects - Responsive cards with @container queries - Smooth scroll-snap for horizontal scrolling - Hide scrollbar with modern CSS My Apps Feature: - LocalStorage persistence (ecosystem_my_apps) - Track install time and last used - Recent apps grid with time ago display Data Source: - Registry loads from /ecosystem.json - My apps synced on open E2E Tests: - Added 'My Tab' screenshot test - Updated test names for clarity
My Apps UI: - 4-column grid layout (like iOS home screen) - 60x60px icons with 13px border-radius - App name below icon (11px, max 2 lines) - 'Long press for more options' hint Context Menu (long press / right click): - Open app - View details - Share app - Add to favorites - Remove from My Apps Interaction: - Long press detection (500ms threshold) - Touch move cancels long press (10px threshold) - Backdrop blur menu with smooth animations - Auto-position menu within viewport Animation: - Press scale feedback (0.9x) - Menu zoom-in + slide-up entrance - Wiggle animation support (for edit mode)
New Component: src/components/ecosystem/miniapp-icon.tsx ## Icon Size Specification (iOS-style) | Size | Dimensions | Border Radius | Use Case | |------|------------|---------------|-----------------------| | xs | 32x32 | 7px | Notifications | | sm | 40x40 | 9px | Search results | | md | 48x48 | 10px | Standard list items | | lg | 60x60 | 13px | iOS home screen grid | | xl | 80x80 | 18px | Detail page, featured | | 2xl | 120x120 | 27px | Large display | ## Border Radius Formula borderRadius = size * 0.22 (iOS standard ratio) ## Features - MiniappIcon: Core icon component - MiniappIconWithLabel: Icon + name (iOS home style) - MiniappIconGrid: Grid layout helper - Badge support: verified, beta, new, update - Glass effect for gradient backgrounds - Loading state with spinner - Error fallback with placeholder - Shadow variants: sm, md, lg ## Refactored EcosystemTab - Uses unified MiniappIcon throughout - Consistent styling across all views - Badge automatically from app.verified/beta
- Remove x='8' y='8' offset from background rect - Background now fills entire 120x120 viewBox - Icons display edge-to-edge in MiniappIcon container - Verified badge now visible on icons
- Add themeColor, themeColorFrom, themeColorTo to MiniappManifest - FeaturedStoryCard uses app.themeColor - HorizontalAppCard uses app.themeColor with fallback - Update ecosystem.json with app-specific colors: - teleport: violet-purple gradient - forge: orange-red gradient - Remove hardcoded variant prop from FeaturedStoryCard
Problem: Icon colors match card background, making icons hard to see Solution (B + C): - Card backgrounds use darker shades (800/900/950 instead of 500/600) - teleport: indigo-800 → purple-900 → violet-950 - forge: red-800 → orange-900 → amber-950 - Glass mode icons get stronger white border (ring-2 ring-white/50) - Added shadow-lg to glass mode for more depth Result: Icons now pop against darker card backgrounds
Glass mode now features: - Inset top highlight (white 60%) - Inset bottom shadow (black 10%) - Outer glow border (white 40%, 1.5px) - Drop shadow for depth - Diagonal highlight overlay (135deg gradient) Creates iOS-like 3D appearance for icons on gradient cards
- Add splashScreen config to MiniappManifest type - Add bio_closeSplashScreen method to Bio SDK types - Implement splash screen in MiniappPage: - Shows app icon while miniapp initializes - Auto-closes on timeout (default 5s) - Miniapp can call bio.closeSplashScreen() when ready - Falls back to iframe load event if no splashScreen config This allows miniapps to control when they're ready to be shown, improving UX for apps that need initialization time.
Tests now pass real miniapp icons to signing and transfer dialogs: - Long message signing: uses forge icon - Large amount transfer: uses forge icon - Small amount transfer: uses teleport icon - Hex data warning: uses forge icon This fixes screenshots showing placeholder icons instead of real app icons.
Bug 修复: 1. 滑动方向修正: 向左滑切换到'我的', 向右滑切换到'发现' 2. 横向滚动事件冒泡: stopPropagation 阻止推荐栏滑动触发 Tab 切换 3. 发现页点击行为: 应用点击改为打开详情页而非直接进入应用
…etCard - Use WalletCard component for network address authorization - Add local chain selector sheet (not affecting global state) - Chain selector available when chainName not specified by miniapp - Add i18n translations for selectNetwork This provides a more intuitive UI by showing the full wallet card with the chain selector in the top-right corner.
Redesign the miniapp detail page with iOS App Store aesthetics: - Larger app icon (112px) with shadow - Pill-shaped 'Open' button - App Store style screenshot carousel with snap scrolling - Expandable description with 'more/less' toggle - Privacy section with permission icons - Clean info section with rounded card background - Blur header with share button - Add app to 'my apps' when opening
- Create shared my-apps.ts service for local app storage - Fix MiniappIcon import path and props in MiniappDetailActivity - Update EcosystemTab to use shared my-apps service
- Fix localStorage key to match test expectations - Update h3 → h2 selector for permissions section - Regenerate all ecosystem screenshots
- miniapps vite.config: add /manifest.json proxy with dynamic screenshots from e2e - miniapps vite.config: add /screenshots proxy to serve e2e screenshots - miniapps manifest.json: screenshots now empty, dynamically injected - vite-plugin-miniapps: fetch /manifest.json from each miniapp in dev mode - vite-plugin-miniapps: build miniapps to dist/miniapps/ instead of public/ - vite-plugin-miniapps: copy e2e screenshots to output - migrate static assets (icon.svg) to miniapps/*/public/ - delete public/miniapps/ directory - add keyapp-sdk vite.config.ts and safe-markdown.tsx from feat/ecosystem
Gaubee
force-pushed
the
feat/ecosystem
branch
from
24cbf2d to
e4824e5
Compare
…olver - ecosystem.json now outputs to dist/miniapps/ecosystem.json - all paths in ecosystem.json are relative to its location (./forge/, ../logo.svg) - add src/lib/url-resolver.ts with createResolver() factory for unified relative path resolution - update build-check plugin to verify new location - update dev middleware to serve /miniapps/ecosystem.json
- registry.ts: resolve icon/url/screenshots paths relative to source URL - ecosystem.ts: update default source to /miniapps/ecosystem.json - bio-sdk: rebuild to export BioUnsignedTransaction/BioSignedTransaction types
- delete fixtures/ directory (stackflow residual, not needed) - update tsconfig lib to ES2023 for findLast support - fix makeHistoryTaskQueue import path - fix makeTemplate parse() type inference - fix historySyncPlugin activityParams type assertions
…tion - add tsconfigPaths plugin to vitest.config.ts for @ alias resolution - update tests to match current App.tsx implementation
- packages/i18n-tools: unified i18n check tool (bun run -b i18n-tools) - validates zh.json and en.json key consistency - checks fallback config (zh-CN/zh-TW/zh-HK → zh, default → en) - supports --fix to add missing keys - miniapps/forge: add i18n with zh/en translations - miniapps/teleport: add i18n with zh/en translations - add i18next and react-i18next dependencies
- packages/theme-tools: unified theme check tool (bunx @biochain/theme-tools) - validates dark mode best practices - checks bg/text color pairing - detects missing dark: variants - warns about semantic color usage - update miniapps to use bunx @biochain/theme-tools for theme:run
- miniapps: add .oxlintrc.json with react/typescript plugins - miniapps: add lint:run script using oxlint - turbo.json: add lint:run task - CI: add lint:run to all test pipelines
- add jsx-a11y, unicorn plugins - add eslint-plugin-i18next for literal string detection - add more react/typescript rules - ensure same quality standards as main app
- 重构 EcosystemTab 为 DiscoverPage + MyAppsPage 双页面 - 实现 iOS 风格的长按上下文菜单（popover=manual） - 添加 ::backdrop 模糊效果和进入/退出动画 - 菜单位置手动计算，支持边界检测 - 添加 SwipeableTabs 通用组件 - 添加 IOSSearchCapsule 搜索胶囊组件 - TabBar 动态图标根据子页面切换
- forge/teleport: 集成 shadcn/ui 组件库 - forge: 添加 BackgroundBeams + FireButton 动效 - teleport: 添加 AuroraBackground + GlowButton 动效 - 添加 iOS 风格壁纸组件 - 更新 E2E 截图基线 - 移除废弃的 content-tabs 组件 - 优化主页 Tab 布局
- 新增 @biochain/e2e-tools 包 - 支持 bunx @biochain/e2e-tools audit 命令 - 集成到主应用和 miniapps (pnpm e2e:audit) - 添加 turbo task 支持并行检查 - 更新白皮书文档
- 删除 3 个未被引用的残留截图 - CI 流程添加 e2e:audit 检查任务
- badge/button: text-white → text-destructive-foreground - avatar: 添加 text-muted-foreground - teleport: bg-primary 搭配 text-primary-foreground
- i18n-tools: 修复 TranslationValue 类型循环引用 - forge: 更新测试匹配 '多链熔炉' - teleport: 更新测试匹配 '启动传送门'/'选择资产'
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
概述
搭建 Bio 小程序生态系统的完整架构，包含真实签名服务集成：
window.bio接口SignatureAuthService执行真实 Ed25519 签名用户故事流程
完成的 Phases
签名流程
测试覆盖
CI 状态
待后续 PR