Demo App

.github/workflows/deploy-demo.yml

@@ -0,0 +1,103 @@
+name: Deploy Demo
+
+on:
+  push:
+    branches:
+      - '**'
+  delete:
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+concurrency:
+  group: pages-${{ github.ref_name }}
+  cancel-in-progress: true
+
+jobs:
+  build-and-deploy:
+    if: github.event_name != 'delete'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: pnpm
+
+      - run: pnpm install --frozen-lockfile
+
+      - name: Set environment variables
+        env:
+          BRANCH: ${{ github.ref_name }}
+          REPO_NAME: ${{ github.event.repository.name }}
+          OWNER: ${{ github.repository_owner }}
+        run: |
+          # Base path: /repo/ for main, /repo/branch/ for other branches
+          if [ "$BRANCH" = "main" ]; then
+            BASE_PATH="/${REPO_NAME}/"
+            DEST_DIR="."
+          else
+            BASE_PATH="/${REPO_NAME}/${BRANCH}/"
+            DEST_DIR="${BRANCH}"
+          fi
+
+          # Full URL for manifest
+          APP_URL="https://${OWNER}.github.io${BASE_PATH}"
+
+          echo "VITE_BASE_PATH=${BASE_PATH}" >> $GITHUB_ENV
+          echo "VITE_APP_URL=${APP_URL}" >> $GITHUB_ENV
+          echo "DEST_DIR=${DEST_DIR}" >> $GITHUB_ENV
+
+          echo "Building for: ${APP_URL}"
+          echo "Destination: ${DEST_DIR}"
+
+      - name: Build demo
+        run: pnpm build --filter tonconnect-demo
+        env:
+          VITE_APP_URL: ${{ env.VITE_APP_URL }}
+          VITE_BASE_PATH: ${{ env.VITE_BASE_PATH }}
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./apps/tonconnect-demo/dist
+          destination_dir: ${{ env.DEST_DIR }}
+          keep_files: true
+
+  cleanup:
+    if: github.event_name == 'delete' && github.event.ref_type == 'branch'
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: gh-pages
+        continue-on-error: true
+
+      - name: Remove stale deployment
+        env:
+          BRANCH: ${{ github.event.ref }}
+        run: |
+          # Skip if gh-pages doesn't exist or branch dir doesn't exist
+          if [ ! -d "$BRANCH" ]; then
+            echo "No deployment found for branch: $BRANCH"
+            exit 0
+          fi
+
+          # Don't delete root
+          if [ "$BRANCH" = "." ] || [ "$BRANCH" = "" ]; then
+            echo "Skipping invalid branch name"
+            exit 0
+          fi
+
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+          rm -rf "$BRANCH"
+          git add -A
+          git commit -m "Cleanup: remove deployment for deleted branch $BRANCH" || echo "No changes to commit"
+          git push origin gh-pages

apps/tonconnect-demo/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/tonconnect-demo/README.md

@@ -0,0 +1,84 @@
+# TonConnect Demo
+
+A demo application for testing and demonstrating TonConnect wallet integration features.
+
+## Features
+
+- **Transaction**: Send transactions with customizable parameters
+- **Sign Data**: Test data signing capabilities (text, cell, binary)
+- **Subscription**: Manage wallet subscriptions
+- **Ton Proof**: Authenticate using TON Proof
+- **Settings**: Configure TonConnect UI appearance and behavior
+
+## Getting Started
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev --filter tonconnect-demo
+
+# Build for production
+VITE_APP_URL=https://your-domain.com pnpm build --filter tonconnect-demo
+```
+
+## Deployment
+
+The `tonconnect-manifest.json` is generated at build time based on the `VITE_APP_URL` environment variable.
+
+```bash
+# Local build
+VITE_APP_URL=https://your-domain.com pnpm build --filter tonconnect-demo
+
+# Or set in CI/CD environment variables (Vercel, GitHub Actions, etc.)
+```
+
+If `VITE_APP_URL` is not set, it defaults to `http://localhost:5173`.
+
+## DevTools
+
+The demo includes hidden developer tools for testing and debugging.
+
+### How to Activate
+
+1. Click on the "TonConnect Demo" title **5 times quickly** (within 2 seconds)
+2. A toast notification will confirm "DevTools unlocked!"
+3. A new "DevTools" tab will appear
+
+### Available Features
+
+#### QA Mode
+
+Enables testing mode from `@tonconnect/sdk`:
+
+- Disables strict validations (errors become console warnings)
+- Allows cross-network transactions (e.g., mainnet tx when wallet is on testnet)
+- Uses staging wallets list instead of production
+- Shows injected wallets in the list
+
+**Note**: Changing QA Mode requires a page reload to take full effect.
+
+#### Mobile Console (Eruda)
+
+Enables [Eruda](https://github.com/liriliri/eruda) - a mobile-friendly developer console:
+
+- Console logs viewer
+- Network requests inspector
+- DOM elements explorer
+- Storage viewer (localStorage, sessionStorage, cookies)
+
+Useful for debugging on mobile devices where browser DevTools are not available.
+
+### Hiding DevTools
+
+Click "Lock DevTools" button in the DevTools tab to hide it again. You can always re-activate it using the secret tap.
+
+## Tech Stack
+
+- React 19
+- TypeScript
+- Vite
+- Tailwind CSS
+- shadcn/ui components
+- MSW (Mock Service Worker) for API mocking

apps/tonconnect-demo/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

apps/tonconnect-demo/eslint.config.js

@@ -0,0 +1,43 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    rules: {
+      // React Compiler rules are too strict for demo app patterns
+      'react-hooks/set-state-in-effect': 'off',
+      'react-hooks/preserve-manual-memoization': 'off',
+    },
+  },
+  // shadcn/ui components - allow non-component exports and empty interfaces
+  {
+    files: ['src/components/ui/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+      '@typescript-eslint/no-empty-object-type': 'off',
+    },
+  },
+  // Context files - allow exporting context + provider together
+  {
+    files: ['src/context/**/*.{ts,tsx}'],
+    rules: {
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+])

apps/tonconnect-demo/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/png" sizes="180x180" href="/favicon.png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TonConnect Demo</title>
+    <script>
+      (function() {
+        var theme = localStorage.getItem("tonconnect-demo-theme") || "system";
+        var isDark = theme === "dark" ||
+          (theme === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+        if (isDark) document.documentElement.classList.add("dark");
+      })();
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/tonconnect-demo/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "tonconnect-demo",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.4",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/language": "^6.12.1",
+    "@codemirror/view": "^6.39.11",
+    "@hookform/resolvers": "^5.2.2",
+    "@lezer/highlight": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tailwindcss/vite": "^4.1.18",
+    "@ton/core": "^0.62.1",
+    "@ton/crypto": "3.3.0",
+    "@ton/ton": "^16.1.0",
+    "@tonconnect/sdk": "workspace:*",
+    "@tonconnect/ui-react": "workspace:*",
+    "@uiw/react-codemirror": "^4.25.4",
+    "ajv": "^8.17.1",
+    "ajv-formats": "^3.0.1",
+    "autoprefixer": "^10.4.23",
+    "buffer": "^6.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "crc-32": "^1.2.2",
+    "eruda": "^3.4.3",
+    "jose": "^6.1.3",
+    "lucide-react": "^0.562.0",
+    "msw": "^2.12.7",
+    "next-themes": "^0.4.6",
+    "postcss": "^8.5.6",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.18",
+    "tailwindcss-animate": "^1.0.7",
+    "tweetnacl": "^1.0.3",
+    "yaml": "^2.8.2",
+    "zod": "^4.3.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.8",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}