feat: backup and restore DID Documents

app.config.js

@@ -0,0 +1,126 @@
+const { version } = require('./package.json');
+
+const ENV = process.env.APP_ENV || 'debug';
+
+const getBundleIdentifier = () => {
+  switch (ENV) {
+    case 'development':
+      return 'com.anonymous.rocca.dev';
+    case 'testing':
+      return 'com.anonymous.rocca.test';
+    case 'production':
+      return 'com.anonymous.rocca';
+    case 'debug':
+    default:
+      return 'com.anonymous.rocca.debug';
+  }
+};
+
+const getAppName = () => {
+  switch (ENV) {
+    case 'development':
+      return 'Rocca Dev';
+    case 'testing':
+      return 'Rocca Test';
+    case 'production':
+      return 'Rocca';
+    case 'debug':
+    default:
+      return 'Rocca Debug';
+  }
+};
+
+module.exports = {
+  expo: {
+    name: getAppName(),
+    slug: 'rocca',
+    version: version,
+    orientation: 'portrait',
+    scheme: 'rocca',
+    userInterfaceStyle: 'automatic',
+    newArchEnabled: true,
+    ios: {
+      supportsTablet: true,
+      bundleIdentifier: getBundleIdentifier(),
+    },
+    icon: './assets/icon.png',
+    splash: {
+      image: './assets/splash.png',
+      resizeMode: 'contain',
+      backgroundColor: '#ffffff',
+    },
+    android: {
+      adaptiveIcon: {
+        foregroundImage: './assets/adaptive-icon.png',
+        backgroundColor: '#ffffff',
+      },
+      edgeToEdgeEnabled: true,
+      predictiveBackGestureEnabled: false,
+      package: getBundleIdentifier(),
+    },
+    web: {
+      output: 'static',
+      favicon: './assets/favicon.png',
+    },
+    plugins: [
+      './plugins/expo-rocca-plugin',
+      'expo-router',
+      [
+        'expo-splash-screen',
+        {
+          image: './assets/images/splash-icon.png',
+          imageWidth: 200,
+          resizeMode: 'contain',
+          backgroundColor: '#ffffff',
+          dark: {
+            backgroundColor: '#000000',
+          },
+        },
+      ],
+      [
+        'expo-build-properties',
+        {
+          android: {
+            compileSdkVersion: 35,
+          },
+        },
+      ],
+      '@config-plugins/react-native-webrtc',
+      [
+        '@algorandfoundation/react-native-passkey-autofill',
+        {
+          site: 'https://fido.shore-tech.net',
+          label: 'Rocca Wallet',
+        },
+      ],
+    ],
+    experiments: {
+      typedRoutes: true,
+      reactCompiler: true,
+    },
+    extra: {
+      provider: {
+        name: 'Rocca',
+        primaryColor: '#3B82F6',
+        secondaryColor: '#E1EFFF',
+        accentColor: '#10B981',
+        welcomeMessage: 'Your identity, connected.',
+        logo: '',
+        showAccounts: true,
+        showPasskeys: true,
+        showIdentities: true,
+        showConnections: true,
+      },
+      router: {},
+      eas: {
+        projectId: 'f1e6cb1b-642d-49fa-b276-53b4403f62d6',
+      },
+    },
+    runtimeVersion: {
+      policy: 'appVersion',
+    },
+    updates: {
+      url: 'https://u.expo.dev/f1e6cb1b-642d-49fa-b276-53b4403f62d6',
+    },
+  },
+};

app/landing.tsx

@@ -201,6 +201,11 @@ export default function LandingScreen() {
         visible={modalVisible}
         onClose={() => setModalVisible(false)}
         didDocument={activeIdentity?.didDocument}
+        onDidDocumentUpdate={async (newDidDocument) => {
+          if (activeIdentity) {
+            await identity.store.updateDidDocument(activeIdentity.address, newDidDocument);
+          }
+        }}
       />
     </SafeAreaView>
   );

dialogs/DidDocumentModal.tsx

@@ -1,15 +1,79 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Alert } from 'react-native';
+import { MaterialIcons } from '@expo/vector-icons';
+import * as DocumentPicker from 'expo-document-picker';
 import Modal from '../components/Modal';
 import type { DIDDocument } from "@/extensions/identities/types";
+import { exportDidDocument, importDidDocument } from '@/utils/did-backup';
 
 interface DidDocumentModalProps {
   visible: boolean;
   onClose: () => void;
   didDocument: DIDDocument | undefined;
+  onDidDocumentUpdate?: (didDocument: DIDDocument) => void;
 }
 
-export function DidDocumentModal({ visible, onClose, didDocument }: DidDocumentModalProps) {
+export function DidDocumentModal({ visible, onClose, didDocument, onDidDocumentUpdate }: DidDocumentModalProps) {
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleExport = async () => {
+    if (!didDocument) {
+      Alert.alert('Error', 'No DID Document to export');
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      await exportDidDocument(didDocument);
+    } catch (error) {
+      Alert.alert('Export Failed', error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleImport = async () => {
+    if (!didDocument) {
+      Alert.alert('Error', 'No current DID Document to validate against');
+      return;
+    }
+
+    try {
+      const result = await DocumentPicker.getDocumentAsync({
+        type: 'application/json',
+        copyToCacheDirectory: true,
+      });
+
+      if (result.canceled) {
+        return;
+      }
+
+      const file = result.assets[0];
+
+      setIsLoading(true);
+      const importedDoc = await importDidDocument(file.uri, didDocument.id);
+
+      Alert.alert(
+        'Import Successful',
+        'DID Document imported successfully. Replace current document?',
+        [
+          { text: 'Cancel', style: 'cancel' },
+          { 
+            text: 'Replace', 
+            style: 'default',
+            onPress: () => {
+              onDidDocumentUpdate?.(importedDoc);
+            }
+          }
+        ]
+      );
+    } catch (error) {
+      Alert.alert('Import Failed', error instanceof Error ? error.message : 'Unknown error');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <Modal
       visible={visible}
@@ -74,6 +138,26 @@ export function DidDocumentModal({ visible, onClose, didDocument }: DidDocumentM
               </View>
             </View>
           ))}
+
+          <View style={styles.actionButtons}>
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={handleExport}
+              disabled={isLoading}
+            >
+              <MaterialIcons name="file-upload" size={20} color="#3B82F6" />
+              <Text style={styles.actionButtonText}>Export</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity
+              style={styles.actionButton}
+              onPress={handleImport}
+              disabled={isLoading}
+            >
+              <MaterialIcons name="file-download" size={20} color="#10B981" />
+              <Text style={styles.actionButtonText}>Import</Text>
+            </TouchableOpacity>
+          </View>
         </View>
       ) : (
         <Text style={styles.noDocText}>No DID Document available</Text>
@@ -141,6 +225,33 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     marginTop: 20,
   },
+  actionButtons: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    marginTop: 24,
+    paddingTop: 20,
+    borderTopWidth: 2,
+    borderTopColor: '#E2E8F0',
+    paddingBottom: 20,
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 24,
+    paddingVertical: 14,
+    borderRadius: 12,
+    backgroundColor: '#EFF6FF',
+    borderWidth: 1,
+    borderColor: '#3B82F6',
+    minWidth: 120,
+    justifyContent: 'center',
+  },
+  actionButtonText: {
+    marginLeft: 10,
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#1D4ED8',
+  },
 });
 
 export default DidDocumentModal;