feat(send): update Send flow

e2e/lightning.e2e.js

@@ -200,9 +200,10 @@ d('Lightning', () => {
 				memo: note2,
 			});
 			await element(by.id('Send')).tap();
+			await element(by.id('RecipientManual')).tap();
 			await element(by.id('RecipientInput')).replaceText(invoice3);
 			await element(by.id('RecipientInput')).tapReturnKey();
-			await element(by.id('ContinueRecipient')).tap();
+			await element(by.id('AddressContinue')).tap();
 			await element(
 				by.id('N1').withAncestor(by.id('SendAmountNumberPad')),
 			).multiTap(3);
@@ -223,10 +224,10 @@ d('Lightning', () => {
 				value: '1000',
 			});
 			await element(by.id('Send')).tap();
+			await element(by.id('RecipientManual')).tap();
 			await element(by.id('RecipientInput')).replaceText(invoice4);
 			await element(by.id('RecipientInput')).tapReturnKey();
-			await element(by.id('ContinueRecipient')).tap();
-			await element(by.id('ContinueAmount')).tap(); // FIXME: this should not be needed
+			await element(by.id('AddressContinue')).tap();
 
 			// Review & Send
 			await expect(element(by.id('TagsAddSend'))).toBeVisible();

e2e/onchain.e2e.js

@@ -97,10 +97,10 @@ d('Onchain', () => {
 
 			const coreAddress = await rpc.getNewAddress();
 			await element(by.id('Send')).tap();
-			await sleep(1000); // animation
+			await element(by.id('RecipientManual')).tap();
 			await element(by.id('RecipientInput')).replaceText(coreAddress);
 			await element(by.id('RecipientInput')).tapReturnKey();
-			await element(by.id('ContinueRecipient')).tap();
+			await element(by.id('AddressContinue')).tap();
 
 			// Amount / NumberPad
 			await element(by.id('SendNumberPadMax')).tap();
@@ -261,10 +261,10 @@ d('Onchain', () => {
 			await element(by.id('NavigationClose')).tap();
 
 			await element(by.id('Send')).tap();
-			await sleep(1000); // animation
+			await element(by.id('RecipientManual')).tap();
 			await element(by.id('RecipientInput')).replaceText(coreAddress);
 			await element(by.id('RecipientInput')).tapReturnKey();
-			await element(by.id('ContinueRecipient')).tap();
+			await element(by.id('AddressContinue')).tap();
 
 			// enter amount that would leave dust
 			let { label: amount } = await element(

src/components/AuthWidget.tsx

@@ -51,7 +51,7 @@ const AuthWidget = ({
 			const message =
 				e.message === 'channel closed'
 					? t('auth_error_peer')
-					: `An error occured: ${e.message}`;
+					: `An error occurred: ${e.message}`;
 
 			showToast({
 				type: 'error',

src/components/ContactImage.tsx

@@ -0,0 +1,21 @@
+import React, { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useProfile2 } from '../hooks/slashtags2';
+import ProfileImage from './ProfileImage';
+
+const ContactImage = ({
+	url,
+	size = 24,
+	style,
+}: {
+	url: string;
+	size?: number;
+	style?: StyleProp<ViewStyle>;
+}): ReactElement => {
+	const { profile } = useProfile2(url);
+	return (
+		<ProfileImage style={style} url={url} image={profile.image} size={size} />
+	);
+};
+
+export default ContactImage;

src/components/NavigationHeader.tsx

@@ -87,14 +87,14 @@ const NavigationHeader = ({
 	const showBack = Boolean(displayBackButton && navigation.canGoBack());
 
 	const numberOfActions = useMemo(() => {
-		if (onActionPress && onClosePress) {
+		if (actionIcon && onClosePress) {
 			return 2;
-		} else if (showBack || onActionPress || onClosePress) {
+		} else if (showBack || actionIcon || onClosePress) {
 			return 1;
 		} else {
 			return 0;
 		}
-	}, [onActionPress, onClosePress, showBack]);
+	}, [actionIcon, onClosePress, showBack]);
 
 	const actionColumn = useMemo(
 		() => [
@@ -123,7 +123,7 @@ const NavigationHeader = ({
 				</Text>
 			</View>
 			<View style={actionColumn}>
-				{onActionPress && (
+				{actionIcon && (
 					<ActionButton
 						style={styles.actionRight}
 						testID="NavigationAction"

src/components/ProfileImage.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Image, View, ViewStyle } from 'react-native';
+import { Image, StyleProp, View, ViewStyle } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 
 import { BasicProfile } from '../store/types/slashtags';
@@ -14,7 +14,7 @@ const ProfileImage = ({
 }: {
 	url?: string;
 	image?: BasicProfile['image'];
-	style?: ViewStyle;
+	style?: StyleProp<ViewStyle>;
 	size: number;
 }): JSX.Element => {
 	const { gray5 } = useColors();
@@ -38,13 +38,12 @@ const ProfileImage = ({
 			overflow: 'hidden',
 			height: size,
 			width: size,
-			...style,
 		}),
-		[xml, size, style, gray5],
+		[xml, gray5, size],
 	);
 
 	return (
-		<View style={_style}>
+		<View style={[_style, style]}>
 			{xml ? (
 				<SvgXml width={size} height={size} xml={xml} />
 			) : image ? (

src/components/SlashtagsProvider2.tsx

@@ -129,7 +129,7 @@ export const SlashtagsProvider2 = ({
 					type: 'error',
 					title: 'Data Connection Issue',
 					description:
-						'An error occured: Could not load primary key from keychain.',
+						'An error occurred: Could not load primary key from keychain.',
 				});
 				return;
 			}

src/navigation/bottom-sheet/SendNavigation.tsx

@@ -17,8 +17,9 @@ import Tags from '../../screens/Wallets/Send/Tags';
 import AutoRebalance from '../../screens/Wallets/Send/AutoRebalance';
 import PinCheck from '../../screens/Wallets/Send/PinCheck';
 import Result from '../../screens/Wallets/Send/Result';
-import Scanner from '../../screens/Wallets/Send/Scanner';
 import Contacts from '../../screens/Wallets/Send/Contacts';
+import Address from '../../screens/Wallets/Send/Address';
+import Scanner from '../../screens/Wallets/Send/Scanner';
 import CoinSelection from '../../screens/Wallets/Send/CoinSelection';
 import { NavigationContainer } from '../../styles/components';
 import { TProcessedData } from '../../utils/scanner';
@@ -42,9 +43,10 @@ export type SendNavigationProp = NativeStackNavigationProp<SendStackParamList>;
 export type SendStackParamList = {
 	PinCheck: { onSuccess: () => void };
 	Recipient: undefined;
-	Amount: undefined;
-	Scanner: { onScan: (data: TProcessedData) => void } | undefined;
 	Contacts: undefined;
+	Address: undefined;
+	Scanner: { onScan: (data: TProcessedData) => void } | undefined;
+	Amount: undefined;
 	CoinSelection: undefined;
 	FeeRate: undefined;
 	FeeCustom: undefined;
@@ -127,8 +129,9 @@ const SendNavigation = (): ReactElement => {
 					initialRouteName={initialRouteName}
 					screenOptions={screenOptions}>
 					<Stack.Screen name="Recipient" component={Recipient} />
-					<Stack.Screen name="Scanner" component={Scanner} />
 					<Stack.Screen name="Contacts" component={Contacts} />
+					<Stack.Screen name="Address" component={Address} />
+					<Stack.Screen name="Scanner" component={Scanner} />
 					<Stack.Screen name="Amount" component={Amount} />
 					<Stack.Screen name="CoinSelection" component={CoinSelection} />
 					<Stack.Screen name="FeeRate" component={FeeRate} />

src/screens/Scanner/MainScanner.tsx

@@ -65,7 +65,7 @@ const ScannerScreen = ({
 				<SafeAreaInset type="top" />
 				<NavigationHeader
 					style={styles.navigationHeader}
-					title={t('qr_scan_any')}
+					title={t('qr_scan')}
 				/>
 			</ScannerComponent>
 		</DetectSwipe>

src/screens/Scanner/ScannerComponent.tsx

@@ -100,7 +100,9 @@ const ScannerComponent = ({
 			}
 		} catch (err) {
 			console.error('Failed to open image file: ', err);
-			showError('Sorry. An error occured when trying to open this image file.');
+			showError(
+				'Sorry. An error occurred when trying to open this image file.',
+			);
 		} finally {
 			setIsChoosingFile(false);
 		}
@@ -114,6 +116,7 @@ const ScannerComponent = ({
 
 	const TopBackground = bottomSheet ? GradientView : BlurView;
 	const Background = bottomSheet ? View : BlurView;
+	const size = dimensions.width - 16 * 2;
 
 	return (
 		<Camera
@@ -127,11 +130,8 @@ const ScannerComponent = ({
 					<TopBackground style={backgroundStyles} />
 					<View style={styles.maskCenter}>
 						<Background style={backgroundStyles} />
-						<View
-							style={{
-								height: dimensions.height / 2.4,
-								width: dimensions.width - 16 * 2,
-							}}>
+						<View style={{ height: size, width: size }}>
+							{bottomSheet && <View style={styles.maskRing} />}
 							<View style={styles.actionsRow}>
 								<TouchableOpacity
 									style={[styles.actionButton, { backgroundColor: white08 }]}
@@ -196,10 +196,20 @@ const styles = StyleSheet.create({
 	background: {
 		flex: 1,
 		alignItems: 'center',
+		zIndex: -1,
 	},
 	maskCenter: {
 		flexDirection: 'row',
 	},
+	maskRing: {
+		position: 'absolute',
+		top: -16,
+		bottom: -16,
+		left: -16,
+		right: -16,
+		borderRadius: 30,
+		borderWidth: 16,
+	},
 	actionsRow: {
 		flexDirection: 'row',
 		justifyContent: 'space-between',

src/screens/Settings/AddressViewer/index.tsx

@@ -716,7 +716,7 @@ const AddressViewer = ({
 			});
 			updateUi({ fromAddressViewer: true });
 			sendMax({ selectedWallet, selectedNetwork });
-			showBottomSheet('sendNavigation');
+			showBottomSheet('sendNavigation', { screen: 'ReviewAndSend' });
 		},
 		[selectedNetwork, selectedUtxos, selectedWallet, utxos],
 	);