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

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

@@ -2,16 +2,38 @@
 // 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, StyleSheet, Text, View } from 'react-native';
+
+type Screen = 'home' | 'register' | 'generate' | 'prove';
 
 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;
+    return <GenerateMock onGenerate={setMockDocument} onNavigate={navigate} onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'register') {
+    const RegisterDocument = require('./src/RegisterDocument').default;
+    return <RegisterDocument document={mockDocument} onBack={() => navigate('home')} />;
+  }
+
+  if (screen === 'prove') {
+    const ProveQRCode = require('./src/ProveQRCode').default;
+    return <ProveQRCode document={mockDocument} onBack={() => navigate('home')} />;
+  }
+
   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>
+      <Button title="Register Document" onPress={() => navigate('register')} />
+      <Button title="Generate Mock" onPress={() => navigate('generate')} />
+      <Button title="Prove QR Code" onPress={() => navigate('prove')} />
     </View>
   );
 }
@@ -28,10 +50,6 @@ const styles = StyleSheet.create({
     marginBottom: 12,
     fontWeight: 'bold',
   },
-  item: {
-    fontSize: 16,
-    marginVertical: 4,
-  },
 });
 
 export default App;

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();
 });

packages/mobile-sdk-alpha/demo-app/package.json

@@ -12,7 +12,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.3",
+    "@react-native-picker/picker": "^2.11.1",
     "@react-native/gradle-plugin": "0.76.9",
+    "@selfxyz/common": "workspace:*",
+    "@selfxyz/mobile-sdk-alpha": "workspace:*",
     "react": "^18.3.1",
     "react-native": "0.76.9"
   },

packages/mobile-sdk-alpha/demo-app/src/GenerateMock.tsx

@@ -2,7 +2,154 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-export default function GenerateMock() {
-  // TODO: implement mock generation
-  return null;
+import React, { useState } from 'react';
+import { ActivityIndicator, Button, ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native';
+import { Picker } from '@react-native-picker/picker';
+
+import { generateMockDocument, signatureAlgorithmToStrictSignatureAlgorithm } from '@selfxyz/mobile-sdk-alpha';
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { countryCodes } = require('@selfxyz/common/dist/cjs/src/constants/constants.cjs');
+
+const algorithmOptions = Object.keys(signatureAlgorithmToStrictSignatureAlgorithm);
+const documentTypeOptions = ['mock_passport', 'mock_id_card'] as const;
+const countryOptions = Object.keys(countryCodes);
+
+const defaultAge = '21';
+const defaultExpiryYears = '5';
+const defaultAlgorithm = 'sha256 rsa 65537 2048';
+const defaultCountry = 'USA';
+const defaultDocumentType = 'mock_passport';
+const defaultOfac = true;
+
+type Props = {
+  onGenerate?: (doc: Record<string, unknown>) => void;
+  onNavigate: (screen: 'home' | 'register' | 'prove') => void;
+  onBack: () => void;
+};
+
+export default function GenerateMock({ onGenerate, onNavigate, onBack }: Props) {
+  const [age, setAge] = useState(defaultAge);
+  const [expiryYears, setExpiryYears] = useState(defaultExpiryYears);
+  const [isInOfacList, setIsInOfacList] = useState(defaultOfac);
+  const [algorithm, setAlgorithm] = useState(defaultAlgorithm);
+  const [country, setCountry] = useState(defaultCountry);
+  const [documentType, setDocumentType] = useState<(typeof documentTypeOptions)[number]>(defaultDocumentType);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [result, setResult] = useState<Record<string, unknown> | null>(null);
+
+  const reset = () => {
+    setAge(defaultAge);
+    setExpiryYears(defaultExpiryYears);
+    setIsInOfacList(defaultOfac);
+    setAlgorithm(defaultAlgorithm);
+    setCountry(defaultCountry);
+    setDocumentType(defaultDocumentType as (typeof documentTypeOptions)[number]);
+    setResult(null);
+    setError(null);
+  };
+
+  const handleGenerate = async () => {
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const doc = await generateMockDocument({
+        age: Number(age),
+        expiryYears: Number(expiryYears),
+        isInOfacList,
+        selectedAlgorithm: algorithm,
+        selectedCountry: country,
+        selectedDocumentType: documentType,
+      });
+      setResult(doc);
+      onGenerate?.(doc);
+    } catch (e) {
+      setError((e as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Button title="Back" onPress={onBack} />
+      <Text style={styles.label}>Age</Text>
+      <TextInput style={styles.input} keyboardType="numeric" value={age} onChangeText={setAge} />
+      <Text style={styles.label}>Expiry Years</Text>
+      <TextInput style={styles.input} keyboardType="numeric" value={expiryYears} onChangeText={setExpiryYears} />
+      <View style={styles.switchRow}>
+        <Text style={styles.label}>OFAC Listed</Text>
+        <Switch value={isInOfacList} onValueChange={setIsInOfacList} />
+      </View>
+      <Text style={styles.label}>Algorithm</Text>
+      <Picker selectedValue={algorithm} onValueChange={(itemValue: string) => setAlgorithm(itemValue)}>
+        {algorithmOptions.map(alg => (
+          <Picker.Item label={alg} value={alg} key={alg} />
+        ))}
+      </Picker>
+      <Text style={styles.label}>Country</Text>
+      <Picker selectedValue={country} onValueChange={(itemValue: string) => setCountry(itemValue)}>
+        {countryOptions.map(code => (
+          <Picker.Item label={`${code} - ${countryCodes[code as keyof typeof countryCodes]}`} value={code} key={code} />
+        ))}
+      </Picker>
+      <Text style={styles.label}>Document Type</Text>
+      <Picker
+        selectedValue={documentType}
+        onValueChange={(itemValue: string) => setDocumentType(itemValue as (typeof documentTypeOptions)[number])}
+      >
+        {documentTypeOptions.map(dt => (
+          <Picker.Item label={dt} value={dt} key={dt} />
+        ))}
+      </Picker>
+      <View style={styles.buttonRow}>
+        <Button title="Reset" onPress={reset} />
+        <Button title="Generate" onPress={handleGenerate} disabled={loading} />
+      </View>
+      {loading && <ActivityIndicator style={styles.spinner} />}
+      {error && <Text style={styles.error}>{error}</Text>}
+      {result ? (
+        <>
+          <Text selectable style={styles.result}>
+            {JSON.stringify(result, null, 2)}
+          </Text>
+          <View style={styles.navRow}>
+            <Button title="Register Document" onPress={() => onNavigate('register')} />
+            <Button title="Prove QR Code" onPress={() => onNavigate('prove')} />
+          </View>
+        </>
+      ) : null}
+    </ScrollView>
+  );
 }
+
+const styles = StyleSheet.create({
+  container: { padding: 16 },
+  label: { marginVertical: 8, fontWeight: 'bold' },
+  input: {
+    borderWidth: 1,
+    borderColor: '#ccc',
+    padding: 8,
+    borderRadius: 4,
+  },
+  switchRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginVertical: 8,
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginVertical: 8,
+  },
+  navRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 16,
+  },
+  spinner: { marginVertical: 16 },
+  error: { color: 'red', marginTop: 16 },
+  result: { marginTop: 16, fontFamily: 'monospace' },
+});

packages/mobile-sdk-alpha/demo-app/src/ProveQRCode.tsx

@@ -2,7 +2,20 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-export default function ProveQRCode() {
-  // TODO: implement QR code proof
-  return null;
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+
+type Props = {
+  document: Record<string, unknown> | null;
+  onBack: () => void;
+};
+
+export default function ProveQRCode({ document, onBack }: Props) {
+  return (
+    <View>
+      <Text>QR code proof flow not implemented</Text>
+      {document && <Text selectable>{JSON.stringify(document, null, 2)}</Text>}
+      <Button title="Back" onPress={onBack} />
+    </View>
+  );
 }

packages/mobile-sdk-alpha/demo-app/src/RegisterDocument.tsx

@@ -2,7 +2,20 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-export default function RegisterDocument() {
-  // TODO: implement register document flow
-  return null;
+import React from 'react';
+import { Button, Text, View } from 'react-native';
+
+type Props = {
+  document: Record<string, unknown> | null;
+  onBack: () => void;
+};
+
+export default function RegisterDocument({ document, onBack }: Props) {
+  return (
+    <View>
+      <Text>Register document flow not implemented</Text>
+      {document && <Text selectable>{JSON.stringify(document, null, 2)}</Text>}
+      <Button title="Back" onPress={onBack} />
+    </View>
+  );
 }

yarn.lock

@@ -4104,6 +4104,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-picker/picker@npm:^2.11.1":
+  version: 2.11.1
+  resolution: "@react-native-picker/picker@npm:2.11.1"
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  checksum: 10c0/d2e9aeb32ae80f2ab56fa025f1afd6d8ff8051e7078bfd17c6794ff0cc1538d4a2f548098826eb652e6cb64d998070b0111777c78de4dcb468cb71e7e4d93097
+  languageName: node
+  linkType: hard
+
 "@react-native/assets-registry@npm:0.76.9":
   version: 0.76.9
   resolution: "@react-native/assets-registry@npm:0.76.9"
@@ -5193,7 +5203,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@selfxyz/mobile-sdk-alpha@workspace:^, @selfxyz/mobile-sdk-alpha@workspace:packages/mobile-sdk-alpha":
+"@selfxyz/mobile-sdk-alpha@workspace:*, @selfxyz/mobile-sdk-alpha@workspace:^, @selfxyz/mobile-sdk-alpha@workspace:packages/mobile-sdk-alpha":
   version: 0.0.0-use.local
   resolution: "@selfxyz/mobile-sdk-alpha@workspace:packages/mobile-sdk-alpha"
   dependencies:
@@ -13909,7 +13919,10 @@ __metadata:
   dependencies:
     "@babel/core": "npm:^7.28.3"
     "@babel/runtime": "npm:^7.28.3"
+    "@react-native-picker/picker": "npm:^2.11.1"
     "@react-native/gradle-plugin": "npm:0.76.9"
+    "@selfxyz/common": "workspace:*"
+    "@selfxyz/mobile-sdk-alpha": "workspace:*"
     "@tsconfig/react-native": "npm:^3.0.6"
     "@types/jest": "npm:^29.5.14"
     "@types/react": "npm:^18.3.4"