Pending changes exported from your codespace

example/src/App.js

@@ -0,0 +1,51 @@
+import React, { useState, useEffect, useContext } from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { HomeScreen } from './screens/HomeScreen';
+import { PoolServiceDemo } from './screens/PoolServiceDemo';
+import { MPCKeyServiceDemo } from './screens/MPCKeyServiceDemo';
+import { MPCWalletServiceDemo } from './screens/MPCWalletServiceDemo';
+import { MPCSignatureDemo } from './screens/MPCSignatureDemo';
+import { MPCKeyExportDemo } from './screens/MPCKeyExportDemo';
+import AppContext from './components/AppContext';
+import { DeviceBackupDemo } from './screens/DeviceBackupDemo';
+import { DeviceAdditionDemo } from './screens/DeviceAdditionDemo';
+import { ModeSelectionScreen } from './screens/ModeSelectionScreen';
+import { ModeContext } from './utils/ModeProvider';
+import { ModeProvider } from './utils/ModeProvider';
+/** The navigation stack. */
+const Stack = createNativeStackNavigator();
+function SetupApp() {
+    const [apiKeyData, setApiKeyData] = useState({});
+    const [proxyUrlData, setProxyUrlData] = useState('');
+    const { selectedMode } = useContext(ModeContext);
+    useEffect(() => {
+        if (selectedMode === 'direct-mode') {
+            const cloudAPIKey = require('./.coinbase_cloud_api_key.json');
+            setApiKeyData(cloudAPIKey);
+        }
+        else {
+            const config = require('./config.json');
+            setProxyUrlData(config.proxyUrl);
+        }
+    }, [selectedMode]);
+    const apiKeyName = apiKeyData.name || '';
+    const privateKey = apiKeyData.privateKey || '';
+    const proxyUrl = proxyUrlData || '';
+    return (React.createElement(AppContext.Provider, { value: { apiKeyName, privateKey, proxyUrl } },
+        React.createElement(NavigationContainer, null,
+            React.createElement(Stack.Navigator, { initialRouteName: "ModeSelectionScreen" },
+                React.createElement(Stack.Screen, { name: "ModeSelectionScreen", component: ModeSelectionScreen }),
+                React.createElement(Stack.Screen, { name: "Home", component: HomeScreen }),
+                React.createElement(Stack.Screen, { name: "PoolServiceDemo", component: PoolServiceDemo }),
+                React.createElement(Stack.Screen, { name: "MPCKeyServiceDemo", component: MPCKeyServiceDemo }),
+                React.createElement(Stack.Screen, { name: "MPCWalletServiceDemo", component: MPCWalletServiceDemo }),
+                React.createElement(Stack.Screen, { name: "MPCSignatureDemo", component: MPCSignatureDemo }),
+                React.createElement(Stack.Screen, { name: "MPCKeyExportDemo", component: MPCKeyExportDemo }),
+                React.createElement(Stack.Screen, { name: "DeviceBackupDemo", component: DeviceBackupDemo }),
+                React.createElement(Stack.Screen, { name: "DeviceAdditionDemo", component: DeviceAdditionDemo })))));
+}
+export default function App() {
+    return (React.createElement(ModeProvider, null,
+        React.createElement(SetupApp, null)));
+}

example/src/components/AppContext.js

@@ -0,0 +1,4 @@
+// components/AppContext.js
+import React from 'react';
+const AppContext = React.createContext({});
+export default AppContext;

example/src/components/ContinueButton.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleSheet, Button, View } from 'react-native';
+/**
+ * A component for a continue button.
+ * @param onPress The function to call when the button is pressed.
+ * @returns The continue button component.
+ */
+export const ContinueButton = ({ onPress }) => {
+    return (React.createElement(View, { style: styles.continueButtonContainer },
+        React.createElement(Button, { title: "Continue", onPress: onPress })));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    continueButtonContainer: {
+        marginTop: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

example/src/components/CopyButton.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleSheet, Button, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
+/**
+ * A component for a copy button.
+ * @param text The text to copy.
+ * @returns The copy button component.
+ */
+export const CopyButton = ({ text }) => {
+    return (React.createElement(View, { style: styles.copyButtonContainer },
+        React.createElement(Button, { title: "Copy", onPress: () => Clipboard.setString(text) })));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    copyButtonContainer: {
+        marginTop: 2,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});

example/src/components/DemoStep.js

@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import { Animated, StyleSheet } from 'react-native';
+/**
+ * A component for a single step in a demo.
+ * @param children The children of the demo step.
+ * @returns The demo step component.
+ */
+export const DemoStep = ({ children }) => {
+    const [fade] = useState(new Animated.Value(0));
+    useEffect(() => {
+        Animated.timing(fade, {
+            toValue: 1,
+            duration: 1000,
+            useNativeDriver: true,
+        }).start();
+    }, [fade]);
+    return (React.createElement(Animated.View, { style: [styles.demoStepContainer, { opacity: fade }] }, children));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    demoStepContainer: {
+        background: 'white',
+        flexDirection: 'column',
+        margin: 10,
+    },
+});

example/src/components/DemoText.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+/**
+ * A component for demo text.
+ * @param children The text representing the step.
+ * @returns The demo text component.
+ */
+export const DemoText = ({ children }) => {
+    return React.createElement(Text, { style: styles.demoText }, children);
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    demoText: {
+        fontSize: 14,
+        fontWeight: '600',
+        marginVertical: 10,
+    },
+});

example/src/components/ErrorText.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+/**
+ * A component for error text.
+ * @param children The text representing the error.
+ * @returns The error text component.
+ */
+export const ErrorText = ({ children }) => {
+    return React.createElement(Text, { style: styles.demoText }, children);
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    demoText: {
+        color: 'red',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+});

example/src/components/InputText.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+/**
+ * A component for input text.
+ * @param onTextChange The function to call when the text changes.
+ * @param editable Whether the input text is editable.
+ * @param secret Whether the input text should be considered secret.
+ * @param placeholderText The placeholder text to display in the input field.
+ * @returns The input text component.
+ */
+export const InputText = ({ onTextChange, editable, secret, placeholderText }) => {
+    return (React.createElement(TextInput, { style: styles.inputText, autoCapitalize: "none", onChangeText: onTextChange, secureTextEntry: !!secret, editable: !!editable, placeholder: placeholderText, placeholderTextColor: "#999" }));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    inputText: {
+        height: 40,
+        margin: 12,
+        borderWidth: 1,
+        padding: 10,
+    },
+});

example/src/components/LargeInputText.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { StyleSheet, TextInput } from 'react-native';
+/**
+ * A component for large input text.
+ * @param onTextChange The function to call when the text changes.
+ * @param initialText The initial text.
+ * @returns The large input text component.
+ */
+export const LargeInputText = ({ onTextChange, initialText }) => {
+    return (React.createElement(TextInput, { style: styles.inputText, multiline: true, numberOfLines: 15, autoCapitalize: "none", onChangeText: onTextChange, defaultValue: initialText }));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    inputText: {
+        fontFamily: 'Courier New',
+        height: 200,
+        margin: 12,
+        borderWidth: 1,
+        padding: 10,
+    },
+});

example/src/components/MonospaceText.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/**
+ * A component for displaying text in monospace font.
+ * @param verticalMargin The amount of margin to apply above and below the text.
+ * @returns The text component.
+ */
+export const MonospaceText = ({ children, verticalMargin = 0, }) => {
+    return (React.createElement(View, { style: styles.container },
+        React.createElement(Text, { style: [styles.monospaceText, { marginVertical: verticalMargin }] }, children)));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#f5f5f5',
+    },
+    monospaceText: {
+        fontFamily: 'Courier',
+        fontSize: 12,
+        lineHeight: 24,
+        backgroundColor: '#f5f5f5',
+    },
+});

example/src/components/Note.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+/**
+ * A component for displaying a note section.
+ * @param children The content to display in the note.
+ * @param items An optional array of items to render in a numbered list.
+ * @returns The note component.
+ */
+export const Note = ({ children, items }) => {
+    const renderItem = (item, index) => (React.createElement(View, { key: index, style: styles.listItem },
+        React.createElement(Text, { style: [styles.listItemNumber, styles.noteText] },
+            index + 1,
+            "."),
+        React.createElement(Text, { style: [styles.listItemText, styles.noteText] }, item)));
+    const renderContent = () => {
+        if (typeof children === 'string') {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Text, { style: styles.noteText }, children),
+                items && (React.createElement(View, { style: styles.listContainer }, items.map((item, index) => renderItem(item, index))))));
+        }
+        else if (Array.isArray(children)) {
+            return (React.createElement(React.Fragment, null,
+                children.map((child, index) => (React.createElement(Text, { key: index, style: styles.noteText }, child))),
+                items && (React.createElement(View, { style: styles.listContainer }, items.map((item, index) => renderItem(item, index))))));
+        }
+        else {
+            return children;
+        }
+    };
+    return React.createElement(View, { style: styles.container }, renderContent());
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    container: {
+        backgroundColor: '#fff8dc',
+        borderColor: '#ffeb9c',
+        borderWidth: 1,
+        borderRadius: 4,
+        padding: 8,
+        marginBottom: 16,
+    },
+    noteText: {
+        fontSize: 16,
+        color: '#333',
+        fontStyle: 'italic',
+    },
+    listContainer: {
+        marginTop: 8,
+    },
+    listItem: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 4,
+    },
+    listItemNumber: {
+        marginRight: 4,
+        fontSize: 14,
+        color: '#333',
+    },
+    listItemText: {
+        flex: 1,
+        fontSize: 14,
+        color: '#333',
+        marginLeft: 4,
+    },
+});

example/src/components/PageTitle.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, Text, useColorScheme, View } from 'react-native';
+import { Colors } from 'react-native/Libraries/NewAppScreen';
+/**
+ * A component for a page title.
+ * @param title The page title.
+ * @returns The page title component.
+ */
+export const PageTitle = ({ title }) => {
+    const isDarkMode = useColorScheme() === 'dark';
+    return (React.createElement(View, { style: styles.pageTitleContainer },
+        React.createElement(Text, { style: [
+                styles.pageTitle,
+                {
+                    color: isDarkMode ? Colors.white : Colors.black,
+                },
+            ] }, title)));
+};
+/**
+ * Styles for the component.
+ */
+const styles = StyleSheet.create({
+    pageTitleContainer: {
+        marginVertical: 20,
+    },
+    pageTitle: {
+        fontSize: 32,
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+});