diff --git a/native/account/registration/connect-ethereum.react.js b/native/account/registration/connect-ethereum.react.js index f33cef8cb..52a7a0f7e 100644 --- a/native/account/registration/connect-ethereum.react.js +++ b/native/account/registration/connect-ethereum.react.js @@ -1,83 +1,139 @@ // @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'; import EthereumLogoDark from '../../vectors/ethereum-logo-dark.react.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 isNerdMode = + props.route.params.userSelections.coolOrNerdMode === 'nerd'; const styles = useStyles(unboundStyles); + + let body; + if (!isNerdMode) { + body = ( + + Connecting your Ethereum wallet allows you to use your ENS name and + avatar in the app. You'll also be able to log in with your wallet + instead of a password. + + ); + } else { + body = ( + <> + + Connecting your Ethereum wallet has three benefits: + + + + {'1. '} + + Your peers will be able to cryptographically verify that your Comm + account is associated with your Ethereum wallet. + + + + {'2. '} + + You'll be able to use your ENS name and avatar in the app. + + + + {'3. '} + + You can choose to skip setting a password, and to log in with your + Ethereum wallet instead. + + + + + ); + } + return ( Do you want to connect an Ethereum Wallet to your account? - - 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'll also be able - to secure your account with a wallet signature instead of a password. - + {body} ); } 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, }, ethereumLogoContainer: { alignItems: 'center', }, + list: { + paddingBottom: 16, + }, + listItem: { + flexDirection: 'row', + }, + listItemNumber: { + fontWeight: 'bold', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + }, + listItemContent: { + flexShrink: 1, + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + }, }; export default ConnectEthereum;