diff --git a/native/account/registration/avatar-selection.react.js b/native/account/registration/avatar-selection.react.js --- a/native/account/registration/avatar-selection.react.js +++ b/native/account/registration/avatar-selection.react.js @@ -26,6 +26,7 @@ import { type NavigationRoute, RegistrationTermsRouteName, + CreateSIWEBackupMessageRouteName, AvatarSelectionRouteName, EmojiAvatarSelectionRouteName, RegistrationUserAvatarCameraModalRouteName, @@ -144,6 +145,13 @@ ...userSelections, avatarData, }; + if (userSelections.accountSelection.accountType === 'ethereum') { + navigate<'CreateSIWEBackupMessage'>({ + name: CreateSIWEBackupMessageRouteName, + params: { userSelections: newUserSelections }, + }); + return; + } navigate<'RegistrationTerms'>({ name: RegistrationTermsRouteName, params: { userSelections: newUserSelections }, diff --git a/native/account/registration/siwe-backup-message-creation.react.js b/native/account/registration/siwe-backup-message-creation.react.js new file mode 100644 --- /dev/null +++ b/native/account/registration/siwe-backup-message-creation.react.js @@ -0,0 +1,140 @@ +// @flow + +import * as React from 'react'; +import { Text } from 'react-native'; + +import { type SIWEResult, SIWEMessageTypes } from 'lib/types/siwe-types.js'; + +import RegistrationButtonContainer from './registration-button-container.react.js'; +import RegistrationButton from './registration-button.react.js'; +import RegistrationContainer from './registration-container.react.js'; +import RegistrationContentContainer from './registration-content-container.react.js'; +import { type RegistrationNavigationProp } from './registration-navigator.react.js'; +import type { + CoolOrNerdMode, + AccountSelection, + AvatarData, +} from './registration-types.js'; +import { + type NavigationRoute, + RegistrationTermsRouteName, +} from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; +import SIWEPanel from '../siwe-panel.react.js'; + +export type CreateSIWEBackupMessageParams = { + +userSelections: { + +coolOrNerdMode: CoolOrNerdMode, + +keyserverURL: string, + +farcasterID: ?string, + +accountSelection: AccountSelection, + +avatarData: ?AvatarData, + }, +}; + +type PanelState = 'closed' | 'opening' | 'open' | 'closing'; + +type Props = { + +navigation: RegistrationNavigationProp<'CreateSIWEBackupMessage'>, + +route: NavigationRoute<'CreateSIWEBackupMessage'>, +}; +function CreateSIWEBackupMessage(props: Props): React.Node { + const { navigate } = props.navigation; + const { params } = props.route; + + const styles = useStyles(unboundStyles); + + const secureWithEthereumWalletText = 'Secure with Ethereum Wallet'; + const secureWithEthereumWalletVariant = 'enabled'; + const [panelState, setPanelState] = React.useState('closed'); + + const openPanel = React.useCallback(() => { + setPanelState('opening'); + }, []); + const onPanelClosed = React.useCallback(() => { + setPanelState('closed'); + }, []); + const onPanelClosing = React.useCallback(() => { + setPanelState('closing'); + }, []); + + const siwePanelSetLoading = React.useCallback( + (loading: boolean) => { + if (panelState === 'closing' || panelState === 'closed') { + return; + } + setPanelState(loading ? 'opening' : 'open'); + }, + [panelState], + ); + + const onSuccessfulWalletSignature = React.useCallback( + async (result: SIWEResult) => { + console.log(result); + navigate<'RegistrationTerms'>({ + name: RegistrationTermsRouteName, + params, + }); + }, + [navigate, params], + ); + + let siwePanel; + if (panelState !== 'closed') { + siwePanel = ( + + ); + } + const body = ( + + Comm encrypts user backup so that out backend is not able to see user + data. + + ); + + return ( + <> + + + Encrypting your Comm Backup + {body} + + + + + + {siwePanel} + + ); +} + +const unboundStyles = { + scrollViewContentContainer: { + flexGrow: 1, + }, + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + body: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, +}; + +export default CreateSIWEBackupMessage; 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 @@ -12,6 +12,7 @@ import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js'; import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js'; import type { RegistrationTermsParams } from '../account/registration/registration-terms.react.js'; +import type { CreateSIWEBackupMessageParams } from '../account/registration/siwe-backup-message-creation.react.js'; import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; @@ -121,6 +122,7 @@ export const KeyserverSelectionRouteName = 'KeyserverSelection'; export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection'; export const ConnectEthereumRouteName = 'ConnectEthereum'; +export const CreateSIWEBackupMessageRouteName = 'CreateSIWEBackupMessage'; export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount'; export const ConnectFarcasterRouteName = 'ConnectFarcaster'; export const UsernameSelectionRouteName = 'UsernameSelection'; @@ -261,6 +263,7 @@ +ConnectEthereum: ConnectEthereumParams, +ExistingEthereumAccount: ExistingEthereumAccountParams, +ConnectFarcaster: ConnectFarcasterParams, + +CreateSIWEBackupMessage: CreateSIWEBackupMessageParams, +UsernameSelection: UsernameSelectionParams, +PasswordSelection: PasswordSelectionParams, +AvatarSelection: AvatarSelectionParams,