diff --git a/native/account/restore-prompt-screen.react.js b/native/account/restore-prompt-screen.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/restore-prompt-screen.react.js
@@ -0,0 +1,91 @@
+// @flow
+
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import PromptButton from './prompt-button.react.js';
+import RegistrationButtonContainer from './registration/registration-button-container.react.js';
+import RegistrationContainer from './registration/registration-container.react.js';
+import RegistrationContentContainer from './registration/registration-content-container.react.js';
+import type { SignInNavigationProp } from './sign-in-navigator.react';
+import type { NavigationRoute } from '../navigation/route-names';
+import { useColors, useStyles } from '../themes/colors.js';
+import RestoreIcon from '../vectors/restore-icon.react.js';
+
+type Props = {
+ +navigation: SignInNavigationProp<'RestorePromptScreen'>,
+ +route: NavigationRoute<'RestorePromptScreen'>,
+};
+
+// eslint-disable-next-line no-unused-vars
+function RestorePromptScreen(props: Props): React.Node {
+ const styles = useStyles(unboundStyles);
+
+ const colors = useColors();
+ return (
+
+
+ Restore account
+
+ If you’ve lost access to your primary device, you can try recovering
+ your Comm account.
+
+
+ To proceed, select the same login method that you used during
+ registration.
+
+
+ Note that after completing the recovery flow, you will be logged out
+ from all of your other devices.
+
+
+
+
+
+
+
+ {}}
+ variant="siwe"
+ />
+
+
+ {}}
+ variant="regular"
+ />
+
+
+
+ );
+}
+
+const unboundStyles = {
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ section: {
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+ iconContainer: {
+ flexGrow: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ buttonContainer: {
+ flexDirection: 'row',
+ },
+ scrollViewContentContainer: {
+ flexGrow: 1,
+ },
+};
+
+export default RestorePromptScreen;
diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js
--- a/native/account/sign-in-navigator.react.js
+++ b/native/account/sign-in-navigator.react.js
@@ -8,11 +8,13 @@
import * as React from 'react';
import QRCodeScreen from './qr-code-screen.react.js';
+import RestorePromptScreen from './restore-prompt-screen.react.js';
import type { RootNavigationProp } from '../navigation/root-navigator.react.js';
import {
type ScreenParamList,
type SignInParamList,
QRCodeScreenRouteName,
+ RestorePromptScreenRouteName,
} from '../navigation/route-names.js';
import { useColors } from '../themes/colors.js';
@@ -53,6 +55,10 @@
name={QRCodeScreenRouteName}
component={QRCodeScreen}
/>
+
);
}
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -151,6 +151,7 @@
export const CreateRolesScreenRouteName = 'CreateRolesScreen';
export const SignInNavigatorRouteName = 'SignInNavigator';
export const QRCodeScreenRouteName = 'QRCodeScreen';
+export const RestorePromptScreenRouteName = 'RestorePromptScreen';
export const UserProfileBottomSheetNavigatorRouteName =
'UserProfileBottomSheetNavigator';
export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet';
@@ -335,6 +336,7 @@
export type SignInParamList = {
+QRCodeScreen: void,
+ +RestorePromptScreen: void,
};
export type UserProfileBottomSheetParamList = {
diff --git a/native/vectors/restore-icon.react.js b/native/vectors/restore-icon.react.js
new file mode 100644
--- /dev/null
+++ b/native/vectors/restore-icon.react.js
@@ -0,0 +1,43 @@
+// @flow
+
+import * as React from 'react';
+import { Svg, Path } from 'react-native-svg';
+
+type Props = {
+ +color?: string,
+};
+
+function RestoreIcon(props: Props): React.Node {
+ const color = props.color ?? '#373737';
+ console.log(color);
+ return (
+
+ );
+}
+
+export default RestoreIcon;