Page MenuHomePhabricator
Files F3335895

D11644.id39210.diff
No OneTemporary
Actions

D11644.id39210.diff
View Options

diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -17,7 +17,7 @@
import KeyserverSelection from './keyserver-selection.react.js';
import PasswordSelection from './password-selection.react.js';
import RegistrationTerms from './registration-terms.react.js';
-import CreateSIWEBackupMessage from './siwe-backup-message-creation.react.js';
+import { CreateSIWEBackupMessage } from './siwe-backup-message-creation.react.js';
import UsernameSelection from './username-selection.react.js';
import RegistrationUserAvatarCameraModal from '../../media/registration-user-avatar-camera-modal.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
diff --git a/native/account/registration/siwe-backup-message-creation.react.js b/native/account/registration/siwe-backup-message-creation.react.js
--- a/native/account/registration/siwe-backup-message-creation.react.js
+++ b/native/account/registration/siwe-backup-message-creation.react.js
@@ -25,6 +25,109 @@
import { useStyles } from '../../themes/colors.js';
import SIWEPanel from '../siwe-panel.react.js';
+type PanelState = 'closed' | 'opening' | 'open' | 'closing';
+
+type CreateSIWEBackupMessageBaseProps = {
+ +onSuccessfulWalletSignature: (result: SIWEResult) => void,
+ +onExistingWalletSignature?: () => void,
+};
+
+const CreateSIWEBackupMessageBase: React.ComponentType<CreateSIWEBackupMessageBaseProps> =
+ React.memo<CreateSIWEBackupMessageBaseProps>(
+ function CreateSIWEBackupMessageBase(
+ props: CreateSIWEBackupMessageBaseProps,
+ ): React.Node {
+ const { onSuccessfulWalletSignature, onExistingWalletSignature } = props;
+ const styles = useStyles(unboundStyles);
+
+ const [panelState, setPanelState] = React.useState<PanelState>('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],
+ );
+
+ let siwePanel;
+ if (panelState !== 'closed') {
+ siwePanel = (
+ <SIWEPanel
+ onClosing={onPanelClosing}
+ onClosed={onPanelClosed}
+ closing={panelState === 'closing'}
+ onSuccessfulWalletSignature={onSuccessfulWalletSignature}
+ siweMessageType={SIWEMessageTypes.MSG_BACKUP}
+ setLoading={siwePanelSetLoading}
+ />
+ );
+ }
+
+ const newSignatureButtonText = onExistingWalletSignature
+ ? 'Encrypt with new signature'
+ : 'Encrypt with Ethereum Wallet';
+ const newSignatureButtonVariant = onExistingWalletSignature
+ ? 'outline'
+ : 'enabled';
+
+ let useExistingSignatureButton;
+ if (onExistingWalletSignature) {
+ useExistingSignatureButton = (
+ <RegistrationButton
+ onPress={onExistingWalletSignature}
+ label="Encrypt with existing signature"
+ variant="enabled"
+ />
+ );
+ }
+
+ const body = (
+ <Text style={styles.body}>
+ Comm encrypts user backups so that our backend is not able to see user
+ data.
+ </Text>
+ );
+
+ return (
+ <>
+ <RegistrationContainer>
+ <RegistrationContentContainer
+ style={styles.scrollViewContentContainer}
+ >
+ <Text style={styles.header}>Encrypting your Comm Backup</Text>
+ {body}
+ <View style={styles.siweBackupIconContainer}>
+ <Icon name="backup" size={200} style={styles.siweBackupIcon} />
+ </View>
+ </RegistrationContentContainer>
+ <RegistrationButtonContainer>
+ {useExistingSignatureButton}
+ <RegistrationButton
+ onPress={openPanel}
+ label={newSignatureButtonText}
+ variant={newSignatureButtonVariant}
+ />
+ </RegistrationButtonContainer>
+ </RegistrationContainer>
+ {siwePanel}
+ </>
+ );
+ },
+ );
+
export type CreateSIWEBackupMessageParams = {
+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,
@@ -35,8 +138,6 @@
},
};
-type PanelState = 'closed' | 'opening' | 'open' | 'closing';
-
type Props = {
+navigation: RegistrationNavigationProp<'CreateSIWEBackupMessage'>,
+route: NavigationRoute<'CreateSIWEBackupMessage'>,
@@ -46,30 +147,6 @@
const { params } = props.route;
const { userSelections } = params;
- const styles = useStyles(unboundStyles);
-
- const [panelState, setPanelState] = React.useState<PanelState>('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 registrationContext = React.useContext(RegistrationContext);
invariant(registrationContext, 'registrationContext should be set');
const { cachedSelections, setCachedSelections } = registrationContext;
@@ -108,64 +185,19 @@
});
}, [navigate, siweBackupSecrets, userSelections]);
- let siwePanel;
- if (panelState !== 'closed') {
- siwePanel = (
- <SIWEPanel
- onClosing={onPanelClosing}
- onClosed={onPanelClosed}
- closing={panelState === 'closing'}
- onSuccessfulWalletSignature={onSuccessfulWalletSignature}
- siweMessageType={SIWEMessageTypes.MSG_BACKUP}
- setLoading={siwePanelSetLoading}
- />
- );
- }
-
- const newSignatureButtonText = siweBackupSecrets
- ? 'Encrypt with new signature'
- : 'Encrypt with Ethereum Wallet';
- const newSignatureButtonVariant = siweBackupSecrets ? 'outline' : 'enabled';
-
- let useExistingSignatureButton;
if (siweBackupSecrets) {
- useExistingSignatureButton = (
- <RegistrationButton
- onPress={onExistingWalletSignature}
- label="Encrypt with existing signature"
- variant="enabled"
+ return (
+ <CreateSIWEBackupMessageBase
+ onSuccessfulWalletSignature={onSuccessfulWalletSignature}
+ onExistingWalletSignature={onExistingWalletSignature}
/>
);
}
- const body = (
- <Text style={styles.body}>
- Comm encrypts user backups so that our backend is not able to see user
- data.
- </Text>
- );
-
return (
- <>
- <RegistrationContainer>
- <RegistrationContentContainer style={styles.scrollViewContentContainer}>
- <Text style={styles.header}>Encrypting your Comm Backup</Text>
- {body}
- <View style={styles.siweBackupIconContainer}>
- <Icon name="backup" size={200} style={styles.siweBackupIcon} />
- </View>
- </RegistrationContentContainer>
- <RegistrationButtonContainer>
- {useExistingSignatureButton}
- <RegistrationButton
- onPress={openPanel}
- label={newSignatureButtonText}
- variant={newSignatureButtonVariant}
- />
- </RegistrationButtonContainer>
- </RegistrationContainer>
- {siwePanel}
- </>
+ <CreateSIWEBackupMessageBase
+ onSuccessfulWalletSignature={onSuccessfulWalletSignature}
+ />
);
}
@@ -195,4 +227,4 @@
},
};
-export default CreateSIWEBackupMessage;
+export { CreateSIWEBackupMessageBase, CreateSIWEBackupMessage };

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 22, 12:07 PM (18 h, 31 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2561368
Default Alt Text
D11644.id39210.diff (8 KB)

Event Timeline