fix: onboarding text layout

src/components/WalletOnboarding.tsx

@@ -24,6 +24,8 @@ const WalletOnboarding = ({
 }): ReactElement => {
 	const insets = useSafeAreaInsets();
 	const [showClose, setShowClose] = useState(!__E2E__);
+	const [rootWidth, setRootWidth] = useState(0);
+	const [textWidth, setTextWidth] = useState(0);
 
 	useEffect(() => {
 		if (__E2E__) {
@@ -36,8 +38,26 @@ const WalletOnboarding = ({
 		return [styles.root, { marginBottom: 105 + insets.bottom }];
 	}, [insets.bottom]);
 
+	const handleTextLayout = (e: any): void => {
+		if (!textWidth) {
+			setTextWidth(e.nativeEvent.layout.width);
+		}
+	};
+
+	const handleRootLayout = (e: any): void => {
+		if (!rootWidth) {
+			setRootWidth(e.nativeEvent.layout.width);
+		}
+	};
+
+	// if the text is too long, move the arrow below the text
+	const arrowAbsolute = rootWidth && textWidth && rootWidth - textWidth < 80;
+
 	return (
-		<View style={[rootStyles, style]} testID="WalletOnboarding">
+		<View
+			onLayout={handleRootLayout}
+			style={[rootStyles, style]}
+			testID="WalletOnboarding">
 			{showClose && onHide && (
 				<TouchableOpacity
 					style={styles.closeButton}
@@ -46,8 +66,10 @@ const WalletOnboarding = ({
 					<XIcon color="white50" width={16} height={16} />
 				</TouchableOpacity>
 			)}
-			<Display style={styles.text}>{text}</Display>
-			<Arrow style={styles.arrow} />
+			<Display style={styles.text} onLayout={handleTextLayout}>
+				{text}
+			</Display>
+			<Arrow style={arrowAbsolute ? styles.arrowAbsolute : styles.arrow} />
 		</View>
 	);
 };
@@ -56,7 +78,6 @@ const styles = StyleSheet.create({
 	root: {
 		flexDirection: 'row',
 		alignItems: 'flex-end',
-		// paddingHorizontal: 16,
 		marginTop: 'auto',
 	},
 	closeButton: {
@@ -70,10 +91,17 @@ const styles = StyleSheet.create({
 		zIndex: 1,
 	},
 	text: {
-		width: '61%',
+		zIndex: 101, // above arrow
 	},
 	arrow: {
 		marginBottom: 10,
+		marginLeft: -10,
+	},
+	arrowAbsolute: {
+		position: 'absolute',
+		bottom: 10,
+		right: 80,
+		zIndex: 100, // below text
 	},
 });
 

src/utils/i18n/locales/cs/onboarding.json

@@ -44,7 +44,6 @@
   "restore_failed_text": "Bitkit obnovil vaše úspory, ale nepodařilo se obnovit disponibilní zůstatek a data.",
   "restore_no_backup_button": "Pokračovat bez zálohy",
   "restore_no_backup_warn": "Pokud jste dříve měli lightning zálohu, bude přepsána a ztracena. To by mohlo vést ke ztrátě finančních prostředků.",
-  "empty_wallet": "Chcete-li začít, <accent>pošlete bitcoin</accent> do své peněženky.",
   "error_create": "Vytvoření peněženky se nezdařilo",
   "multiple_header": "<accent>Upozornění:</accent>\nvíce zařízení",
   "multiple_text": "Neinstalujte frázi pro obnovení Bitkit do více telefonů současně, protože by to mohlo poškodit vaše data."

src/utils/i18n/locales/cs/wallet.json

@@ -163,12 +163,10 @@
   "details_savings_title": "Úspory",
   "details_spending_title": "Útraty",
   "savings": {
-    "title": "Úspory",
-    "onboarding": "<accent>Pošlete bitcoin</accent> na svůj spořicí účet."
+    "title": "Úspory"
   },
   "spending": {
-    "title": "Útraty",
-    "onboarding": "<accent>Pošlete bitcoin</accent> na svůj disponibilní zůstatek."
+    "title": "Útraty"
   },
   "details_transfer_subtitle": "Příchozí převod",
   "tx_invalid": "Neplatná transakce",

src/utils/i18n/locales/en/onboarding.json

@@ -44,7 +44,7 @@
 	"restore_failed_text": "Bitkit restored your savings, but failed to restore your spending balance and data.",
 	"restore_no_backup_button": "Proceed Without Backup",
 	"restore_no_backup_warn": "If you previously had a lightning backup it will be overwritten and lost. This could result in a loss of funds.",
-	"empty_wallet": "To get started <accent>send Bitcoin</accent> to your wallet.",
+	"empty_wallet": "To get\nstarted\n<accent>send\nBitcoinnBitcoin</accent>\nto your\nwallet.",
 	"error_create": "Wallet Creation Failed",
 	"multiple_header": "<accent>Caution:</accent>\nmultiple devices",
 	"multiple_text": "Don't install your Bitkit recovery phrase into multiple phones simultaneously, as this can corrupt your data."

src/utils/i18n/locales/en/wallet.json

@@ -164,11 +164,11 @@
 	"details_spending_title": "Spending",
 	"savings": {
 		"title": "Savings",
-		"onboarding": "<accent>Send bitcoin</accent> to your savings balance."
+		"onboarding": "<accent>Send\nbitcoin</accent>\nto your\nsavings balance."
 	},
 	"spending": {
 		"title": "Spending",
-		"onboarding": "<accent>Send bitcoin</accent> to your spending balance."
+		"onboarding": "<accent>Send\nbitcoin</accent>\nto your\nspending balance."
 	},
 	"details_transfer_subtitle": "Incoming Transfer",
 	"tx_invalid": "Transaction Invalid",

src/utils/i18n/locales/it/onboarding.json

@@ -44,7 +44,6 @@
   "restore_failed_text": "Bitkit ha ripristinato i tuoi risparmi, ma non è riuscito a ripristinare il saldo delle spese e i dati.",
   "restore_no_backup_button": "Procedi Senza Backup",
   "restore_no_backup_warn": "Se in precedenza possedevi un backup lightning, questo verrà sovrascritto e perso. Ciò potrebbe causare una perdita di fondi.",
-  "empty_wallet": "Per iniziare <accent>invia Bitcoin</accent> al tuo portafoglio.",
   "error_create": "Creazione del portafoglio non riuscita",
   "multiple_header": "<accent>Attenzione:</accent>\ndispositivi multipli",
   "multiple_text": "Non installare la frase di recupero Bitkit su più telefoni contemporaneamente, per non danneggiare i dati."

src/utils/i18n/locales/it/wallet.json

@@ -161,12 +161,10 @@
   "details_savings_title": "Risparmi",
   "details_spending_title": "Spesa",
   "savings": {
-    "title": "Risparmi",
-    "onboarding": "<accent>Invia bitcoin</accent> al tuo conto di risparmio."
+    "title": "Risparmi"
   },
   "spending": {
-    "title": "Spesa",
-    "onboarding": "<accent>Invia bitcoin</accent> al tuo saldo spendibile."
+    "title": "Spesa"
   },
   "details_transfer_subtitle": "Trasferimento in entrata",
   "tx_invalid": "Transazione non valida",

src/utils/i18n/locales/ru/onboarding.json

@@ -44,7 +44,7 @@
   "restore_failed_text": "Bitkit восстановил ваши сбережения, но не смог восстановить ваш баланс для расходов и данные.",
   "restore_no_backup_button": "Игнорировать Резервную Копию",
   "restore_no_backup_warn": "Если у вас ранее была резервная копия Лайтнинг, она будет перезаписана и потеряна. Это может привести к потере средств.",
-  "empty_wallet": "Для начала <accent>отправьте биткойны</accent> на ваш кошелек.",
+  "empty_wallet": "Для\nначала\n<accent>отправьте\nбиткойны</accent>\nна ваш\nкошелек.",
   "error_create": "Ошибка Создания Кошелька",
   "multiple_header": "<accent>Предупреждение:</accent>\nнесколько устройств",
   "multiple_text": "Не устанавливайте фразу восстановления Bitkit на нескольких телефонах одновременно, так как это может привести к повреждению ваших данных."

src/utils/i18n/locales/ru/wallet.json

@@ -162,11 +162,11 @@
   "details_spending_title": "Расходы",
   "savings": {
     "title": "Сбережения",
-    "onboarding": "<accent>Отправьте биткоин</accent> на баланс сбережений."
+    "onboarding": "<accent>Отправьте\nбиткоин</accent>\nна баланс\nсбережений."
   },
   "spending": {
     "title": "Расходы",
-    "onboarding": "<accent>Отправьте биткоин</accent> на баланс расходов."
+    "onboarding": "<accent>Отправьте\nбиткоин</accent>\nна баланс\nрасходов."
   },
   "details_transfer_subtitle": "Входящий Перенос",
   "tx_invalid": "Неверная Транзакция",