Differential D7890 Diff 26710 native/account/registration/keyserver-selection.react.js

Changeset View

Standalone View

native/account/registration/keyserver-selection.react.js

Show First 20 Lines • Show All 44 Lines • ▼ Show 20 Lines	function KeyserverSelection(props: Props): React.Node {
}, []);		}, []);
const customKeyserverEmpty = !customKeyserver;		const customKeyserverEmpty = !customKeyserver;
const selectCustom = React.useCallback(() => {		const selectCustom = React.useCallback(() => {
setCurrentSelection('custom');		setCurrentSelection('custom');
if (customKeyserverEmpty) {		if (customKeyserverEmpty) {
customKeyserverTextInputRef.current?.focus();		customKeyserverTextInputRef.current?.focus();
}		}
}, [customKeyserverEmpty]);		}, [customKeyserverEmpty]);

		const [customKeyserverInputFocused, setCustomKeyserverInputFocused] =
		React.useState(false);
const onCustomKeyserverFocus = React.useCallback(() => {		const onCustomKeyserverFocus = React.useCallback(() => {
setCurrentSelection('custom');		setCurrentSelection('custom');
		setCustomKeyserverInputFocused(true);
		}, []);
		const onCustomKeyserverBlur = React.useCallback(() => {
		setCustomKeyserverInputFocused(false);
}, []);		}, []);

let keyserverUsername;		let keyserverUsername;
if (currentSelection === 'ashoat') {		if (currentSelection === 'ashoat') {
keyserverUsername = 'ashoat';		keyserverUsername = 'ashoat';
} else if (currentSelection === 'custom' && customKeyserver) {		} else if (currentSelection === 'custom' && customKeyserver) {
keyserverUsername = customKeyserver;		keyserverUsername = customKeyserver;
}		}
Show All 9 Lines	const onSubmit = React.useCallback(() => {
);		);
navigate<'ConnectEthereum'>({		navigate<'ConnectEthereum'>({
name: ConnectEthereumRouteName,		name: ConnectEthereumRouteName,
params: { userSelections: { coolOrNerdMode, keyserverUsername } },		params: { userSelections: { coolOrNerdMode, keyserverUsername } },
});		});
}, [navigate, coolOrNerdMode, keyserverUsername]);		}, [navigate, coolOrNerdMode, keyserverUsername]);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
		const keyserverInputStyle = React.useMemo(
		() =>
		customKeyserverInputFocused
		? [styles.keyserverInput, styles.focusedKeyserverInput]
		: styles.keyserverInput,
		[
		customKeyserverInputFocused,
		styles.keyserverInput,
		styles.focusedKeyserverInput,
		],
		);

const colors = useColors();		const colors = useColors();
return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer>		<RegistrationContentContainer>
<Text style={styles.header}>Select a keyserver to join</Text>		<Text style={styles.header}>Select a keyserver to join</Text>
<Text style={styles.body}>		<Text style={styles.body}>
Chat communities on Comm are hosted on keyservers, which are		Chat communities on Comm are hosted on keyservers, which are
user-operated backends.		user-operated backends.
Show All 25 Lines	<RegistrationContainer>
onSelect={selectCustom}		onSelect={selectCustom}
>		>
<RegistrationTileHeader>		<RegistrationTileHeader>
<Text style={styles.tileTitleText}>Enter a keyserver</Text>		<Text style={styles.tileTitleText}>Enter a keyserver</Text>
</RegistrationTileHeader>		</RegistrationTileHeader>
<TextInput		<TextInput
value={customKeyserver}		value={customKeyserver}
onChangeText={setCustomKeyserver}		onChangeText={setCustomKeyserver}
style={styles.keyserverInput}		style={keyserverInputStyle}
placeholderTextColor={colors.panelSecondaryForegroundBorder}		placeholderTextColor={colors.panelSecondaryForegroundBorder}
placeholder="Keyserver"		placeholder="Keyserver"
onFocus={onCustomKeyserverFocus}		onFocus={onCustomKeyserverFocus}
		onBlur={onCustomKeyserverBlur}
ref={customKeyserverTextInputRef}		ref={customKeyserverTextInputRef}
/>		/>
</RegistrationTile>		</RegistrationTile>
</RegistrationContentContainer>		</RegistrationContentContainer>
<RegistrationButtonContainer>		<RegistrationButtonContainer>
<RegistrationButton		<RegistrationButton
onPress={onSubmit}		onPress={onSubmit}
label="Next"		label="Next"
Show All 30 Lines	const unboundStyles = {
},		},
keyserverInput: {		keyserverInput: {
color: 'panelForegroundLabel',		color: 'panelForegroundLabel',
borderColor: 'panelSecondaryForegroundBorder',		borderColor: 'panelSecondaryForegroundBorder',
borderWidth: 1,		borderWidth: 1,
borderRadius: 4,		borderRadius: 4,
padding: 12,		padding: 12,
},		},
		focusedKeyserverInput: {
		borderColor: 'panelForegroundLabel',
		},
};		};

export default KeyserverSelection;		export default KeyserverSelection;