Page MenuHomePhabricator

D11644.id39126.diff
No OneTemporary

D11644.id39126.diff

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
@@ -24,6 +24,87 @@
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,
+};
+
+const CreateSIWEBackupMessageBase: React.ComponentType<CreateSIWEBackupMessageBaseProps> =
+ React.memo<CreateSIWEBackupMessageBaseProps>(
+ function CreateSIWEBackupMessageBase(
+ props: CreateSIWEBackupMessageBaseProps,
+ ): React.Node {
+ const { onSuccessfulWalletSignature } = props;
+ const styles = useStyles(unboundStyles);
+
+ const secureWithEthereumWalletText = 'Secure with Ethereum Wallet';
+ const secureWithEthereumWalletVariant = 'enabled';
+ 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 body = (
+ <Text style={styles.body}>
+ Comm encrypts user backup so that out 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}
+ </RegistrationContentContainer>
+ <RegistrationButtonContainer>
+ <RegistrationButton
+ label={secureWithEthereumWalletText}
+ variant={secureWithEthereumWalletVariant}
+ onPress={openPanel}
+ />
+ </RegistrationButtonContainer>
+ </RegistrationContainer>
+ {siwePanel}
+ </>
+ );
+ },
+ );
+
export type CreateSIWEBackupMessageParams = {
+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,
@@ -34,8 +115,6 @@
},
};
-type PanelState = 'closed' | 'opening' | 'open' | 'closing';
-
type Props = {
+navigation: RegistrationNavigationProp<'CreateSIWEBackupMessage'>,
+route: NavigationRoute<'CreateSIWEBackupMessage'>,
@@ -44,32 +123,6 @@
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<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 { setCachedSelections } = registrationContext;
@@ -89,43 +142,10 @@
[navigate, params, setCachedSelections],
);
- let siwePanel;
- if (panelState !== 'closed') {
- siwePanel = (
- <SIWEPanel
- onClosing={onPanelClosing}
- onClosed={onPanelClosed}
- closing={panelState === 'closing'}
- onSuccessfulWalletSignature={onSuccessfulWalletSignature}
- siweMessageType={SIWEMessageTypes.MSG_BACKUP}
- setLoading={siwePanelSetLoading}
- />
- );
- }
- const body = (
- <Text style={styles.body}>
- Comm encrypts user backup so that out 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}
- </RegistrationContentContainer>
- <RegistrationButtonContainer>
- <RegistrationButton
- label={secureWithEthereumWalletText}
- variant={secureWithEthereumWalletVariant}
- onPress={openPanel}
- />
- </RegistrationButtonContainer>
- </RegistrationContainer>
- {siwePanel}
- </>
+ <CreateSIWEBackupMessageBase
+ onSuccessfulWalletSignature={onSuccessfulWalletSignature}
+ />
);
}
@@ -147,4 +167,4 @@
},
};
-export default CreateSIWEBackupMessage;
+export { CreateSIWEBackupMessageBase, CreateSIWEBackupMessage };

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 22, 11:57 AM (18 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2561359
Default Alt Text
D11644.id39126.diff (6 KB)

Event Timeline