Skip to content

Demo App#496

Draft
mois-ilya wants to merge 14 commits intoton-connect:mainfrom
mois-ilya:main
Draft

Demo App#496
mois-ilya wants to merge 14 commits intoton-connect:mainfrom
mois-ilya:main

Conversation

@mois-ilya
Copy link
Contributor

@mois-ilya mois-ilya commented Jan 28, 2026

Live demo: https://mois-ilya.github.io/sdk/

Why

A comprehensive demo that serves as both a learning resource for dApp developers and a debugging tool for wallet developers. Interactive examples with inline documentation, step-by-step verification flows, and RPC logs to troubleshoot integration issues.

Features

Core tabs:

  • Connect — TonProof verification with detailed success/failure checks
  • Transaction — JSON editor, confirmation tracking, history
  • Sign Data — text, binary, and cell signing modes
  • Settings — UI customization, manifest URL override

Developer experience:

  • Form and Raw modes for building transactions and sign-data requests
  • Field documentation via (i) icons
  • Auto-deploy to GitHub Pages with branch previews
  • Hidden DevTools panel (click header 5×): QA mode, RPC logs, mobile console

- Add useIsConnectionRestored to prevent Network field flicker on reload
- Extract walletNetwork to useMemo and export from useTransaction hook
- Remove duplicate useTonWallet/walletNetwork in TransactionTab
- Combine timer state into single object to reduce re-renders
- Add skeleton placeholder for Network field during connection restore
- Add opacity transition for Valid Until hover
Add bypass logic to mockServiceWorker.js for:
- Event source requests (/events) used by TonConnect SSE
- Cross-origin requests (except /api/*)

This matches the approach used in demo-dapp-with-react-ui.
Add a secret DevTools tab that can be unlocked by tapping the title
5 times quickly. Features:
- QA Mode toggle (disables SDK validations, uses staging wallets list)
- Eruda mobile console for debugging on mobile devices
- Settings persist in localStorage across sessions
- Add detailed verification checks display (Address, Public key, Domain,
  Timestamp, Signature, Payload) with JWT details in collapsible
- Change Verify button to show "Verified" state with green styling after success
- Fix missing state_init in proof request causing all checks to fail
- Auto-regenerate payload on disconnect to prevent stale token errors
- Separate core TonProof checks from implementation-specific JWT check
…ved features display

- Add vertical sections: REQUESTED → WALLET RESPONSE → RAW DATA
- Format features without duplicates (e.g., SendTx(255), SignData(text,bin,cell))
- Add CopyButton for Public Key field
- Show TonProof column only when tonProof data exists in response
- Add RawDataSection with Request/Response/Both tabs
- Extract connection types to dedicated types file
- Add useConnectionHistory hook for localStorage persistence
- Add connection-formatters utility for shared formatting functions
- Rename tonconnect-demo-unified to tonconnect-demo
- Add build-time tonconnect-manifest.json generation via Vite plugin
- Remove unused files (react.svg, useTheme.ts, StepCard, TransactionResult, etc.)
- Extract copyToClipboard to shared utility
- Add favicon.png, terms-of-use.txt, privacy-policy.txt
- Update README with deployment instructions
- Configure eslint to ignore shadcn/ui and context patterns
- Disable React Compiler rules (too strict for demo patterns)
- Fix useMemo dependencies in ConnectionEventsCard, HowItWorksCard
- Remove unused variables in handlers and validators
- Add deploy-demo.yml workflow for automatic deployment
- Support branch previews at /<repo>/<branch>/ paths
- Fix manifest URL to use BASE_URL for subdirectory deployment
- Add cleanup job for deleted branches
- Fix script injection vulnerability (use env: block)
@mois-ilya mois-ilya requested a review from a team as a code owner January 28, 2026 02:16
@vercel
Copy link

vercel bot commented Jan 28, 2026

@mois-ilya is attempting to deploy a commit to the TOP Team on Vercel.

A member of the Team first needs to authorize it.

- Cards edge-to-edge on mobile (no border-radius, no side borders)
- Increased inner padding on mobile to prevent content touching edges
- Theme toggle: single cycling button on mobile, segmented on desktop
- Hide header description on mobile for compact layout
- Fix pre blocks overflow in markdown content
@mois-ilya mois-ilya marked this pull request as draft January 28, 2026 03:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant