[SELF-700] feat: add mock document generator demo

.github/workflows/mobile-sdk-demo-ci.yml

@@ -18,6 +18,11 @@ jobs:
           node-version-file: .nvmrc
       - name: Install Dependencies
         uses: ./.github/actions/yarn-install
+      - name: Build dependencies (topological)
+        shell: bash
+        run: |
+          # Build demo-app and all its transitive workspace deps in the correct order
+          yarn workspaces foreach -At --from demo-app run build
       - name: Run demo app tests
         run: |
           yarn workspace demo-app test

.gitignore

@@ -10,6 +10,7 @@ showcase
 output/*
 *.tsbuildinfo
 .yarnrc.yml
+.giga/tasks/*
 
 # PR Action Items - prevent accidental commits
 PR-*-ACTION*.md

.watchmanconfig

@@ -1,3 +1,26 @@
 {
-
+  "ignore_dirs": [
+    "node_modules",
+    "dist",
+    "build",
+    "vendor",
+    "Pods",
+    "ios/build",
+    "android/build",
+    "app/android/build",
+    "app/ios/build",
+    "app/ios/Pods",
+    "contracts/artifacts",
+    "contracts/cache",
+    "circuits/build",
+    "common/node_modules",
+    "contracts/node_modules",
+    "circuits/node_modules",
+    "sdk/node_modules",
+    "packages/mobile-sdk-alpha/node_modules",
+    "packages/mobile-sdk-alpha/demo-app/node_modules",
+    "packages/mobile-sdk-alpha/demo-app/android/build",
+    "packages/mobile-sdk-alpha/demo-app/ios/build",
+    "registry/node_modules"
+  ]
 }

README.md

@@ -93,3 +93,4 @@ We are actively looking for contributors. Please check the [open issues](https:/
 Thanks [Rémi](https://github.com/remicolin), [Florent](https://github.com/0xturboblitz), [Ayman](https://github.com/Nesopie), [Justin](https://github.com/transphorm), [Seshanth](https://github.com/seshanthS), [Nico](https://github.com/motemotech) and all other contributors for building Self.
 
 Thanks [Aayush](https://twitter.com/yush_g), [Vivek](https://twitter.com/viv_boop), [Andy](https://twitter.com/AndyGuzmanEth) and [Vitalik](https://github.com/vbuterin) for contributing ideas and inspiring us to build this technology, and [PSE](https://pse.dev/) for supporting the initial work through grants!
+# Cache refresh Sat Aug 30 22:47:05 PDT 2025

app/Gemfile.lock

@@ -25,8 +25,8 @@ GEM
     artifactory (3.0.17)
     atomos (0.1.3)
     aws-eventstream (1.4.0)
-    aws-partitions (1.1152.0)
-    aws-sdk-core (3.231.0)
+    aws-partitions (1.1153.0)
+    aws-sdk-core (3.232.0)
       aws-eventstream (~> 1, >= 1.3.0)
       aws-partitions (~> 1, >= 1.992.0)
       aws-sigv4 (~> 1.9)

package.json

@@ -26,13 +26,15 @@
     "sort-package-jsons": "find . -name 'package.json' -not -path './node_modules/*' -not -path './*/node_modules/*' | xargs npx sort-package-json",
     "test": "yarn workspaces foreach --parallel -i --all run test",
     "test:license-headers": "cd scripts/tests && node check-license-headers.test.mjs",
-    "types": "yarn workspaces foreach --topological-dev --parallel --exclude @selfxyz/contracts -i --all run types "
+    "types": "yarn workspaces foreach --topological-dev --parallel --exclude @selfxyz/contracts -i --all run types ",
+    "build:mobile-sdk": "yarn workspace @selfxyz/mobile-sdk-alpha build && yarn workspace demo-app build",
+    "demo:mobile": "yarn build:mobile-sdk && yarn workspace demo-app start"
   },
   "resolutions": {
-    "@typescript-eslint/eslint-plugin": "^8.39.0",
-    "@typescript-eslint/parser": "^8.39.0",
     "@babel/core": "^7.28.3",
     "@babel/runtime": "^7.28.3",
+    "@typescript-eslint/eslint-plugin": "^8.39.0",
+    "@typescript-eslint/parser": "^8.39.0",
     "react": "^18.3.1",
     "react-native": "0.76.9"
   },

packages/mobile-sdk-alpha/demo-app/App.tsx

@@ -2,35 +2,199 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useState } from 'react';
+import { Button, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+type Screen = 'home' | 'register' | 'generate' | 'prove' | 'camera' | 'nfc' | 'onboarding' | 'qr';
+type GenerateMockCmp = typeof import('./src/GenerateMock').default;
+type RegisterDocumentCmp = typeof import('./src/RegisterDocument').default;
+type ProveQRCodeCmp = typeof import('./src/ProveQRCode').default;
 
 function App() {
+  const [screen, setScreen] = useState<Screen>('home');
+  const [mockDocument, setMockDocument] = useState<Record<string, unknown> | null>(null);
+
+  const navigate = (next: Screen) => setScreen(next);
+
+  if (screen === 'generate') {
+    const GenerateMock = require('./src/GenerateMock').default as GenerateMockCmp;
+    return <GenerateMock onGenerate={setMockDocument} onNavigate={navigate} onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'register') {
+    const RegisterDocument = require('./src/RegisterDocument').default as RegisterDocumentCmp;
+    return <RegisterDocument document={mockDocument} onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'prove') {
+    const ProveQRCode = require('./src/ProveQRCode').default as ProveQRCodeCmp;
+    return <ProveQRCode document={mockDocument} onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'camera') {
+    const DocumentCamera = require('./src/DocumentCamera').default;
+    return <DocumentCamera onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'nfc') {
+    const DocumentNFCScan = require('./src/DocumentNFCScan').default;
+    return <DocumentNFCScan onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'onboarding') {
+    const DocumentOnboarding = require('./src/DocumentOnboarding').default;
+    return <DocumentOnboarding onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'qr') {
+    const QRCodeViewFinder = require('./src/QRCodeViewFinder').default;
+    return <QRCodeViewFinder onBack={() => navigate('home')} />;
+  }
+
+  const MenuButton = ({
+    title,
+    onPress,
+    isWorking = false,
+  }: {
+    title: string;
+    onPress: () => void;
+    isWorking?: boolean;
+  }) => (
+    <TouchableOpacity
+      style={[styles.menuButton, isWorking ? styles.workingButton : styles.placeholderButton]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
+      <Text style={[styles.menuButtonText, isWorking ? styles.workingButtonText : styles.placeholderButtonText]}>
+        {title}
+      </Text>
+    </TouchableOpacity>
+  );
+
   return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Self Demo App</Text>
-      <Text style={styles.item}>Register Document</Text>
-      <Text style={styles.item}>Generate Mock</Text>
-      <Text style={styles.item}>Prove QR Code</Text>
-    </View>
+    <ScrollView contentContainerStyle={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Self Demo App</Text>
+        <Text style={styles.subtitle}>Mobile SDK Alpha - Available Screens</Text>
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>🎯 Core Features</Text>
+        <MenuButton title="✅ Generate Mock Data" onPress={() => navigate('generate')} isWorking={true} />
+        <MenuButton
+          title="⏳ Register Document"
+          onPress={() => navigate('register')}
+          isWorking={Boolean(mockDocument)}
+        />
+        <MenuButton title="⏳ Prove QR Code" onPress={() => navigate('prove')} isWorking={Boolean(mockDocument)} />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>📷 Document Scanning</Text>
+        <MenuButton title="⏳ Document Camera" onPress={() => navigate('camera')} />
+        <MenuButton title="⏳ Document NFC Scan" onPress={() => navigate('nfc')} />
+        <MenuButton title="⏳ Document Onboarding" onPress={() => navigate('onboarding')} />
+      </View>
+
+      <View style={styles.section}>
+        <Text style={styles.sectionTitle}>📱 QR Code Features</Text>
+        <MenuButton title="⏳ QR Code View Finder" onPress={() => navigate('qr')} />
+      </View>
+
+      <View style={styles.footer}>
+        <Text style={styles.footerText}>✅ Working | ⏳ Placeholder (Not Implemented)</Text>
+        <Text style={styles.footerSubtext}>Tap any screen to explore the demo interface</Text>
+      </View>
+    </ScrollView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
+    flexGrow: 1,
+    backgroundColor: '#f8f9fa',
+    padding: 20,
+  },
+  header: {
     alignItems: 'center',
-    backgroundColor: '#fff',
+    marginBottom: 32,
+    paddingTop: 20,
   },
   title: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    color: '#1a1a1a',
+    marginBottom: 8,
+  },
+  subtitle: {
+    fontSize: 16,
+    color: '#666',
+    textAlign: 'center',
+  },
+  section: {
+    marginBottom: 32,
+  },
+  sectionTitle: {
     fontSize: 20,
-    marginBottom: 12,
     fontWeight: 'bold',
+    marginBottom: 16,
+    color: '#333',
+    textAlign: 'center',
+  },
+  menuButton: {
+    width: '100%',
+    paddingVertical: 16,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    marginBottom: 12,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 3.84,
+    elevation: 5,
+  },
+  workingButton: {
+    backgroundColor: '#007AFF',
   },
-  item: {
+  placeholderButton: {
+    backgroundColor: '#fff',
+    borderWidth: 1,
+    borderColor: '#e1e5e9',
+  },
+  menuButtonText: {
     fontSize: 16,
-    marginVertical: 4,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  workingButtonText: {
+    color: '#fff',
+  },
+  placeholderButtonText: {
+    color: '#666',
+  },
+  footer: {
+    marginTop: 20,
+    padding: 20,
+    backgroundColor: '#fff',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#e1e5e9',
+  },
+  footerText: {
+    textAlign: 'center',
+    color: '#666',
+    fontSize: 14,
+    fontWeight: '500',
+    marginBottom: 8,
+  },
+  footerSubtext: {
+    textAlign: 'center',
+    color: '#999',
+    fontSize: 12,
   },
 });
 

packages/mobile-sdk-alpha/demo-app/README.md

@@ -0,0 +1,45 @@
+# Self Demo App
+
+This is a demo application for testing the Self mobile SDK.
+
+## Configuration
+
+### New Architecture
+The new architecture (Fabric + TurboModules) can be toggled on/off:
+
+**Android**: Set `newArchEnabled` in `android/gradle.properties`
+- `newArchEnabled=true` - Enable new architecture
+- `newArchEnabled=false` - Disable new architecture (default)
+
+**iOS**: Set `:fabric_enabled` in `ios/Podfile`
+- `:fabric_enabled => true` - Enable new architecture
+- `:fabric_enabled => false` - Disable new architecture (default)
+
+### Hermes Engine
+Hermes JavaScript engine can be toggled on/off:
+
+**Android**: Set `hermesEnabled` in `android/gradle.properties`
+- `hermesEnabled=true` - Enable Hermes (default)
+- `hermesEnabled=false` - Use JSC instead
+
+**iOS**: Set `:hermes_enabled` in `ios/Podfile`
+- `:hermes_enabled => true` - Enable Hermes (default)
+- `:hermes_enabled => false` - Use JSC instead
+
+## Current Settings
+- **New Architecture**: Disabled
+- **Hermes**: Enabled
+
+## Build Commands
+
+After changing configuration:
+```bash
+# Clean and rebuild
+yarn clean
+
+# Run on Android
+yarn android
+
+# Run on iOS
+yarn ios
+```

packages/mobile-sdk-alpha/demo-app/__tests__/App.test.tsx

@@ -4,14 +4,15 @@
 
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { Text } from 'react-native';
+import { Button, Text } from 'react-native';
 import App from '../App';
 
-test('renders menu items', () => {
+test('renders menu buttons', () => {
   const rendered = renderer.create(<App />);
-  const texts = rendered.root.findAllByType(Text).map(node => React.Children.toArray(node.props.children).join(''));
-  const expected = ['Self Demo App', 'Register Document', 'Generate Mock', 'Prove QR Code'];
-  expect(texts).toEqual(expect.arrayContaining(expected));
-  expect(texts).toHaveLength(expected.length);
+  const titleNode = rendered.root.findAllByType(Text).find(node => node.props.children === 'Self Demo App');
+  expect(titleNode).toBeTruthy();
+  const buttons = rendered.root.findAllByType(Button);
+  const titles = buttons.map(b => b.props.title);
+  expect(titles).toEqual(['Register Document', 'Generate Mock', 'Prove QR Code']);
   rendered.unmount();
 });