Page MenuHomePhabricator
Files F3382149

D7729.id26121.diff
No OneTemporary
Actions

D7729.id26121.diff
View Options

diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/connect-ethereum.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import * as React from 'react';
+import { Text, View } from 'react-native';
+
+import RegistrationButton from './registration-button.react.js';
+import RegistrationContainer from './registration-container.react.js';
+import type { RegistrationNavigationProp } from './registration-navigator.react.js';
+import type { CoolOrNerdMode } from './registration-types.js';
+import type { NavigationRoute } from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+
+export type ConnectEthereumParams = {
+ +userSelections: {
+ +coolOrNerdMode: CoolOrNerdMode,
+ +keyserverUsername: string,
+ },
+};
+
+type Props = {
+ +navigation: RegistrationNavigationProp<'ConnectEthereum'>,
+ +route: NavigationRoute<'ConnectEthereum'>,
+};
+// eslint-disable-next-line no-unused-vars
+function ConnectEthereum(props: Props): React.Node {
+ const onConnect = React.useCallback(() => {}, []);
+ const onSkip = React.useCallback(() => {}, []);
+
+ const styles = useStyles(unboundStyles);
+ return (
+ <View style={styles.container}>
+ <RegistrationContainer>
+ <Text style={styles.header}>
+ Do you want to connect an Ethereum Wallet to your account?
+ </Text>
+ <Text style={styles.body}>
+ Connecting your Ethereum wallet allows you to cryptographically prove
+ your identity to your peers. You can use your ENS name as your
+ username and your ENS avatar as your avatar. You&apos;ll also be able
+ to secure your account with a wallet signature instead of a password.
+ </Text>
+ </RegistrationContainer>
+ <RegistrationButton
+ onPress={onConnect}
+ label="Connect Ethereum wallet"
+ variant="enabled"
+ />
+ <RegistrationButton
+ onPress={onSkip}
+ label="Do not connect"
+ variant="enabled"
+ />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ backgroundColor: 'panelBackground',
+ justifyContent: 'space-between',
+ flex: 1,
+ },
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+ body: {
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'panelForegroundSecondaryLabel',
+ paddingBottom: 16,
+ },
+};
+
+export default ConnectEthereum;
diff --git a/native/account/registration/keyserver-selection.react.js b/native/account/registration/keyserver-selection.react.js
--- a/native/account/registration/keyserver-selection.react.js
+++ b/native/account/registration/keyserver-selection.react.js
@@ -1,5 +1,6 @@
// @flow
+import invariant from 'invariant';
import * as React from 'react';
import { Text, TextInput, View } from 'react-native';
@@ -12,7 +13,10 @@
} from './registration-tile.react.js';
import type { CoolOrNerdMode } from './registration-types.js';
import CommIcon from '../../components/comm-icon.react.js';
-import type { NavigationRoute } from '../../navigation/route-names.js';
+import {
+ type NavigationRoute,
+ ConnectEthereumRouteName,
+} from '../../navigation/route-names.js';
import { useStyles, useColors } from '../../themes/colors.js';
type Selection = 'ashoat' | 'custom';
@@ -48,14 +52,27 @@
setCurrentSelection('custom');
}, []);
- let buttonState = 'disabled';
- if (
- currentSelection === 'ashoat' ||
- (currentSelection === 'custom' && customKeyserver)
- ) {
- buttonState = 'enabled';
+ let keyserverUsername;
+ if (currentSelection === 'ashoat') {
+ keyserverUsername = 'ashoat';
+ } else if (currentSelection === 'custom' && customKeyserver) {
+ keyserverUsername = customKeyserver;
}
- const onSubmit = React.useCallback(() => {}, []);
+
+ const buttonState = keyserverUsername ? 'enabled' : 'disabled';
+
+ const { navigate } = props.navigation;
+ const { coolOrNerdMode } = props.route.params.userSelections;
+ const onSubmit = React.useCallback(() => {
+ invariant(
+ keyserverUsername,
+ 'Button should be disabled if keyserverUsername is not set',
+ );
+ navigate<'ConnectEthereum'>({
+ name: ConnectEthereumRouteName,
+ params: { userSelections: { coolOrNerdMode, keyserverUsername } },
+ });
+ }, [navigate, coolOrNerdMode, keyserverUsername]);
const styles = useStyles(unboundStyles);
const colors = useColors();
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
@@ -8,12 +8,14 @@
import * as React from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
+import ConnectEthereum from './connect-ethereum.react.js';
import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
import KeyserverSelection from './keyserver-selection.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import {
KeyserverSelectionRouteName,
CoolOrNerdModeSelectionRouteName,
+ ConnectEthereumRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -59,6 +61,10 @@
name={KeyserverSelectionRouteName}
component={KeyserverSelection}
/>
+ <Registration.Screen
+ name={ConnectEthereumRouteName}
+ component={ConnectEthereum}
+ />
</Registration.Navigator>
</SafeAreaView>
);
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
@@ -4,6 +4,7 @@
import type { ActionResultModalParams } from './action-result-modal.react.js';
import type { InviteLinkModalParams } from './invite-link-modal.react';
+import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js';
import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js';
import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js';
import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js';
@@ -89,6 +90,7 @@
export const RegistrationRouteName = 'Registration';
export const KeyserverSelectionRouteName = 'KeyserverSelection';
export const CoolOrNerdModeSelectionRouteName = 'CoolOrNerdModeSelection';
+export const ConnectEthereumRouteName = 'ConnectEthereum';
export type RootParamList = {
+LoggedOutModal: void,
@@ -172,6 +174,7 @@
export type RegistrationParamList = {
+CoolOrNerdModeSelection: void,
+KeyserverSelection: KeyserverSelectionParams,
+ +ConnectEthereum: ConnectEthereumParams,
};
export type ScreenParamList = {

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 8:47 AM (20 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2596246
Default Alt Text
D7729.id26121.diff (6 KB)

Event Timeline