feat: beta migration

__mocks__/react-native-exit-app/index.js

@@ -0,0 +1 @@
+module.exports = jest.mock('react-native-exit-app');

__tests__/todos.ts

@@ -17,6 +17,7 @@ import {
 	slashtagsProfileTodo,
 	transferPendingTodo,
 	transferClosingChannelTodo,
+	upgradeTodo,
 } from '../src/store/shapes/todos';
 import { createNewWallet } from '../src/utils/startup';
 import { EAvailableNetwork } from '../src/utils/networks';
@@ -38,6 +39,7 @@ describe('Todos selector', () => {
 
 	it('should return default set of todos', () => {
 		assert.deepEqual(todosFullSelector(s), [
+			upgradeTodo,
 			backupSeedPhraseTodo,
 			lightningTodo,
 			pinTodo,
@@ -88,6 +90,7 @@ describe('Todos selector', () => {
 		state.blocktank.orders = [order];
 
 		state.todos.hide = {
+			upgrade: +new Date(),
 			backupSeedPhrase: +new Date(),
 			btFailed: +new Date(),
 			buyBitcoin: +new Date(),
@@ -149,20 +152,6 @@ describe('Todos selector', () => {
 		);
 	});
 
-	it('should return transferPendingTodo if there is a transfer to savings', () => {
-		const state = cloneDeep(s);
-		state.wallet.wallets.wallet0.transfers.bitcoinRegtest.push({
-			txId: 'txid',
-			type: ETransferType.coopClose,
-			status: ETransferStatus.pending,
-			amount: 100000,
-			confirmations: 1,
-		});
-		expect(todosFullSelector(state)).toEqual(
-			expect.arrayContaining([{ ...transferPendingTodo, duration: 50 }]),
-		);
-	});
-
 	it('should return lightningReadyTodo if there is a new open channel', () => {
 		const state = cloneDeep(s);
 

ios/Podfile.lock

@@ -1634,6 +1634,6 @@ SPEC CHECKSUMS:
   Yoga: 805bf71192903b20fc14babe48080582fee65a80
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 
-PODFILE CHECKSUM: cfff77e82df814cd659ff975f089a1e36e95b1b1
+PODFILE CHECKSUM: 36b98823c4a3ba66ee1a0fe7afdf6d3486c78651
 
 COCOAPODS: 1.15.2

ios/bitkit/Info.plist

@@ -68,10 +68,13 @@
 	<string>The photo library is used to scan qrcodes in order to import or send Bitcoin and assets.</string>
 	<key>UIAppFonts</key>
 	<array>
-		<string>InterTight-Bold.ttf</string>
-		<string>InterTight-Medium.ttf</string>
+		<string>Damion-Regular.ttf</string>
 		<string>InterTight-Regular.ttf</string>
+		<string>InterTight-Medium.ttf</string>
 		<string>InterTight-SemiBold.ttf</string>
+		<string>InterTight-Bold.ttf</string>
+		<string>InterTight-ExtraBold.ttf</string>
+		<string>InterTight-Black.ttf</string>
 	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen.storyboard</string>

src/components/AssetCard.tsx

@@ -22,8 +22,7 @@ const AssetCard = ({
 	testID?: string;
 	onPress: (event: GestureResponderEvent) => void;
 }): ReactElement => {
-	const { balanceInTransferToSpending, balanceInTransferToSavings } =
-		useBalance();
+	const { balanceInTransferToSpending } = useBalance();
 
 	return (
 		<View style={styles.container}>
@@ -42,9 +41,6 @@ const AssetCard = ({
 						{balanceInTransferToSpending !== 0 && (
 							<TransferIcon color="purple" />
 						)}
-						{balanceInTransferToSavings !== 0 && (
-							<TransferIcon color="orange" />
-						)}
 						<Money
 							style={styles.primaryAmount}
 							sats={satoshis}

src/components/AuthWidget.tsx

@@ -11,12 +11,13 @@ import { useTranslation } from 'react-i18next';
 
 import { Text01M } from '../styles/text';
 import { TouchableOpacity } from '../styles/components';
-import { KeyIcon, ListIcon, TrashIcon } from '../styles/icons';
+import { InfoIcon, KeyIcon, ListIcon, TrashIcon } from '../styles/icons';
 import { useAppDispatch } from '../hooks/redux';
 import { useProfile, useSelectedSlashtag } from '../hooks/slashtags';
 import { showToast } from '../utils/notifications';
 import { TAuthWidget } from '../store/types/widgets';
 import { deleteWidget } from '../store/slices/widgets';
+import { showBottomSheet } from '../store/utils/ui';
 import Button from './Button';
 import Dialog from './Dialog';
 import ProfileImage from './ProfileImage';
@@ -81,6 +82,10 @@ const AuthWidget = ({
 		setShowDialog(true);
 	};
 
+	const onNotePress = (): void => {
+		showBottomSheet('slashauthWarning');
+	};
+
 	return (
 		<>
 			<TouchableOpacity
@@ -137,6 +142,17 @@ const AuthWidget = ({
 				</View>
 			</TouchableOpacity>
 
+			<TouchableOpacity
+				style={styles.note}
+				activeOpacity={0.9}
+				color="yellow16"
+				onPress={onNotePress}>
+				<Text01M style={styles.name} color="yellow" numberOfLines={1}>
+					This widget will stop working
+				</Text01M>
+				<InfoIcon color="yellow" width={20} height={20} />
+			</TouchableOpacity>
+
 			<Dialog
 				visible={showDialog}
 				title={t('widget_delete_title')}
@@ -156,7 +172,8 @@ const AuthWidget = ({
 
 const styles = StyleSheet.create({
 	root: {
-		borderRadius: 16,
+		borderTopLeftRadius: 16,
+		borderTopRightRadius: 16,
 		padding: 16,
 	},
 	header: {
@@ -201,6 +218,14 @@ const styles = StyleSheet.create({
 		paddingHorizontal: 16,
 		minWidth: 0,
 	},
+	note: {
+		borderBottomLeftRadius: 16,
+		borderBottomRightRadius: 16,
+		padding: 16,
+		flexDirection: 'row',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+	},
 });
 
 export default memo(AuthWidget);

src/components/BalanceHeader.tsx

@@ -16,7 +16,7 @@ import { hideBalanceSelector } from '../store/reselect/settings';
 const BalanceHeader = (): ReactElement => {
 	const { t } = useTranslation('wallet');
 	const onSwitchUnit = useSwitchUnitAnnounced();
-	const { totalBalance, pendingPaymentsBalance, balanceInTransfer } =
+	const { totalBalance, pendingPaymentsBalance, balanceInTransferToSpending } =
 		useBalance();
 	const dispatch = useAppDispatch();
 	const hideBalance = useAppSelector(hideBalanceSelector);
@@ -28,7 +28,7 @@ const BalanceHeader = (): ReactElement => {
 	return (
 		<View style={styles.container}>
 			<View style={styles.totalBalanceRow}>
-				{balanceInTransfer ? (
+				{balanceInTransferToSpending ? (
 					<Trans
 						t={t}
 						i18nKey="balance_total_transferring"
@@ -38,7 +38,7 @@ const BalanceHeader = (): ReactElement => {
 								<Money
 									color="gray1"
 									size="caption13Up"
-									sats={balanceInTransfer}
+									sats={balanceInTransferToSpending}
 									enableHide={true}
 									symbol={false}
 								/>

src/components/BottomSheetScreen.tsx

@@ -0,0 +1,120 @@
+import React, { memo, ReactElement, useState } from 'react';
+import {
+	Image,
+	ImageSourcePropType,
+	LayoutChangeEvent,
+	StyleSheet,
+	View,
+} from 'react-native';
+
+import { BodyM, Display } from '../styles/text2';
+import BottomSheetNavigationHeader from '../components/BottomSheetNavigationHeader';
+import SafeAreaInset from '../components/SafeAreaInset';
+import Button from '../components/Button';
+
+const BottomSheetScreen = ({
+	navTitle,
+	title,
+	description,
+	image,
+	continueText,
+	cancelText,
+	isLoading,
+	testID,
+	onCancel,
+	onContinue,
+}: {
+	navTitle: string;
+	title: string | ReactElement;
+	description: string | ReactElement;
+	image: ImageSourcePropType;
+	continueText: string;
+	cancelText?: string;
+	isLoading?: boolean;
+	testID?: string;
+	onCancel?: () => void;
+	onContinue: () => void;
+}): ReactElement => {
+	const [isLarge, setIsLarge] = useState(false);
+
+	const onLayout = (event: LayoutChangeEvent): void => {
+		// add margin to the image container if the sheet is large
+		if (event.nativeEvent.layout.height > 700) {
+			setIsLarge(true);
+		}
+	};
+
+	return (
+		<View style={styles.root} testID={testID} onLayout={onLayout}>
+			<BottomSheetNavigationHeader title={navTitle} displayBackButton={false} />
+			<View style={styles.content}>
+				<View
+					// eslint-disable-next-line react-native/no-inline-styles
+					style={[styles.imageContainer, { marginBottom: isLarge ? 32 : 0 }]}>
+					<Image style={styles.image} source={image} />
+				</View>
+				<Display>{title}</Display>
+				<View style={styles.text}>
+					<BodyM color="white64">{description}</BodyM>
+				</View>
+				<View style={styles.buttonContainer}>
+					{cancelText && (
+						<Button
+							style={styles.button}
+							variant="secondary"
+							size="large"
+							text={cancelText}
+							testID={`${testID}-button-cancel`}
+							onPress={onCancel}
+						/>
+					)}
+					<Button
+						style={styles.button}
+						size="large"
+						text={continueText}
+						loading={isLoading}
+						testID={`${testID}-button-continue`}
+						onPress={onContinue}
+					/>
+				</View>
+			</View>
+			<SafeAreaInset type="bottom" minPadding={16} />
+		</View>
+	);
+};
+
+const styles = StyleSheet.create({
+	root: {
+		flex: 1,
+	},
+	content: {
+		flex: 1,
+		paddingHorizontal: 32,
+	},
+	imageContainer: {
+		flexShrink: 1,
+		alignItems: 'center',
+		alignSelf: 'center',
+		width: '80%',
+		aspectRatio: 1,
+		marginTop: 'auto',
+	},
+	image: {
+		flex: 1,
+		resizeMode: 'contain',
+	},
+	text: {
+		minHeight: 66,
+	},
+	buttonContainer: {
+		flexDirection: 'row',
+		justifyContent: 'center',
+		marginTop: 32,
+		gap: 16,
+	},
+	button: {
+		flex: 1,
+	},
+});
+
+export default memo(BottomSheetScreen);

src/components/HourglassSpinner2.tsx

@@ -0,0 +1,57 @@
+import React, { ReactElement } from 'react';
+import { StyleSheet, StyleProp, ViewStyle, Image } from 'react-native';
+import { withRepeat, withTiming } from 'react-native-reanimated';
+
+import { AnimatedView } from '../styles/components';
+import { __E2E__ } from '../constants/env';
+
+const imageSrc = require('../assets/illustrations/hourglass.png');
+
+const HourglassSpinner = ({
+	style,
+}: {
+	style?: StyleProp<ViewStyle>;
+}): ReactElement => {
+	const entering = (): { initialValues: {}; animations: {} } => {
+		'worklet';
+		const initialValues = {
+			transform: [{ rotate: '-10deg' }],
+		};
+		const animations = {
+			transform: [
+				{
+					rotate: withRepeat(withTiming('40deg', { duration: 3000 }), -1, true),
+				},
+			],
+		};
+
+		return {
+			initialValues,
+			animations,
+		};
+	};
+
+	return (
+		<AnimatedView
+			style={[styles.container, style]}
+			entering={__E2E__ ? undefined : entering}
+			color="transparent"
+			testID="HourglassSpinner">
+			<Image style={styles.image} source={imageSrc} />
+		</AnimatedView>
+	);
+};
+
+const styles = StyleSheet.create({
+	container: {
+		flex: 1,
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+	image: {
+		height: 300,
+		resizeMode: 'contain',
+	},
+});
+
+export default HourglassSpinner;

src/components/Suggestions.tsx

@@ -103,6 +103,10 @@ const Suggestions = (): ReactElement => {
 					params: { showClosed: true },
 				});
 			}
+
+			if (id === 'upgrade') {
+				showBottomSheet('upgrade');
+			}
 		},
 		[onchainBalance, navigation, pinTodoDone],
 	);