From 47a7dec6c5ddde57f19b9d5a54bfbcfc26faf56b Mon Sep 17 00:00:00 2001 From: Ivan Vershigora Date: Thu, 23 May 2024 12:59:08 +0100 Subject: [PATCH] fix: onboarding text layout --- src/components/WalletOnboarding.tsx | 39 ++++++++++++++++++++--- src/screens/Lightning/Success.tsx | 2 +- src/utils/i18n/locales/cs/onboarding.json | 1 - src/utils/i18n/locales/cs/wallet.json | 6 ++-- src/utils/i18n/locales/en/lightning.json | 1 + src/utils/i18n/locales/en/onboarding.json | 2 +- src/utils/i18n/locales/en/wallet.json | 4 +-- src/utils/i18n/locales/it/onboarding.json | 1 - src/utils/i18n/locales/it/wallet.json | 6 ++-- src/utils/i18n/locales/ru/onboarding.json | 2 +- src/utils/i18n/locales/ru/wallet.json | 4 +-- 11 files changed, 46 insertions(+), 22 deletions(-) diff --git a/src/components/WalletOnboarding.tsx b/src/components/WalletOnboarding.tsx index 681fbbda3..a2d7f2e85 100644 --- a/src/components/WalletOnboarding.tsx +++ b/src/components/WalletOnboarding.tsx @@ -1,6 +1,7 @@ import React, { memo, ReactElement, useMemo, useState, useEffect } from 'react'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import { + LayoutChangeEvent, StyleProp, StyleSheet, TouchableOpacity, @@ -24,6 +25,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 +39,26 @@ const WalletOnboarding = ({ return [styles.root, { marginBottom: 105 + insets.bottom }]; }, [insets.bottom]); + const handleTextLayout = (e: LayoutChangeEvent): void => { + if (!textWidth) { + setTextWidth(e.nativeEvent.layout.width); + } + }; + + const handleRootLayout = (e: LayoutChangeEvent): 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 ( - + {showClose && onHide && ( )} - {text} - + + {text} + + ); }; @@ -56,7 +79,6 @@ const styles = StyleSheet.create({ root: { flexDirection: 'row', alignItems: 'flex-end', - // paddingHorizontal: 16, marginTop: 'auto', }, closeButton: { @@ -70,10 +92,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 }, }); diff --git a/src/screens/Lightning/Success.tsx b/src/screens/Lightning/Success.tsx index 807a9dee0..8ea4cf1fc 100644 --- a/src/screens/Lightning/Success.tsx +++ b/src/screens/Lightning/Success.tsx @@ -27,7 +27,7 @@ const Success = ({ return ( pošlete bitcoin do své peněženky.", "error_create": "Vytvoření peněženky se nezdařilo", "multiple_header": "Upozornění:\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." diff --git a/src/utils/i18n/locales/cs/wallet.json b/src/utils/i18n/locales/cs/wallet.json index 7f8e2103a..019574a14 100644 --- a/src/utils/i18n/locales/cs/wallet.json +++ b/src/utils/i18n/locales/cs/wallet.json @@ -163,12 +163,10 @@ "details_savings_title": "Úspory", "details_spending_title": "Útraty", "savings": { - "title": "Úspory", - "onboarding": "Pošlete bitcoin na svůj spořicí účet." + "title": "Úspory" }, "spending": { - "title": "Útraty", - "onboarding": "Pošlete bitcoin na svůj disponibilní zůstatek." + "title": "Útraty" }, "details_transfer_subtitle": "Příchozí převod", "tx_invalid": "Neplatná transakce", diff --git a/src/utils/i18n/locales/en/lightning.json b/src/utils/i18n/locales/en/lightning.json index ee11cd091..6ae7cc3a3 100644 --- a/src/utils/i18n/locales/en/lightning.json +++ b/src/utils/i18n/locales/en/lightning.json @@ -20,6 +20,7 @@ }, "transfer": { "nav_title": "Transfer Funds", + "nav_successful": "Transfer Successful", "title_slider": "Balance\nyour funds", "title_numpad": "Spending Balance", "title_receive": "Receiving Capacity", diff --git a/src/utils/i18n/locales/en/onboarding.json b/src/utils/i18n/locales/en/onboarding.json index 937371123..60def18d7 100644 --- a/src/utils/i18n/locales/en/onboarding.json +++ b/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 send Bitcoin to your wallet.", + "empty_wallet": "To get\nstarted\nsend\nBitcoin\nto your\nwallet.", "error_create": "Wallet Creation Failed", "multiple_header": "Caution:\nmultiple devices", "multiple_text": "Don't install your Bitkit recovery phrase into multiple phones simultaneously, as this can corrupt your data." diff --git a/src/utils/i18n/locales/en/wallet.json b/src/utils/i18n/locales/en/wallet.json index 89b1f9212..ed98b1c2f 100644 --- a/src/utils/i18n/locales/en/wallet.json +++ b/src/utils/i18n/locales/en/wallet.json @@ -164,11 +164,11 @@ "details_spending_title": "Spending", "savings": { "title": "Savings", - "onboarding": "Send bitcoin to your savings balance." + "onboarding": "Send\nbitcoin\nto your\nsavings balance." }, "spending": { "title": "Spending", - "onboarding": "Send bitcoin to your spending balance." + "onboarding": "Send\nbitcoin\nto your\nspending balance." }, "details_transfer_subtitle": "Incoming Transfer", "tx_invalid": "Transaction Invalid", diff --git a/src/utils/i18n/locales/it/onboarding.json b/src/utils/i18n/locales/it/onboarding.json index e6236d9d5..27b93c602 100644 --- a/src/utils/i18n/locales/it/onboarding.json +++ b/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 invia Bitcoin al tuo portafoglio.", "error_create": "Creazione del portafoglio non riuscita", "multiple_header": "Attenzione:\ndispositivi multipli", "multiple_text": "Non installare la frase di recupero Bitkit su più telefoni contemporaneamente, per non danneggiare i dati." diff --git a/src/utils/i18n/locales/it/wallet.json b/src/utils/i18n/locales/it/wallet.json index d8aaf04f3..149d2a07e 100644 --- a/src/utils/i18n/locales/it/wallet.json +++ b/src/utils/i18n/locales/it/wallet.json @@ -161,12 +161,10 @@ "details_savings_title": "Risparmi", "details_spending_title": "Spesa", "savings": { - "title": "Risparmi", - "onboarding": "Invia bitcoin al tuo conto di risparmio." + "title": "Risparmi" }, "spending": { - "title": "Spesa", - "onboarding": "Invia bitcoin al tuo saldo spendibile." + "title": "Spesa" }, "details_transfer_subtitle": "Trasferimento in entrata", "tx_invalid": "Transazione non valida", diff --git a/src/utils/i18n/locales/ru/onboarding.json b/src/utils/i18n/locales/ru/onboarding.json index 2c922cb96..bd72c9feb 100644 --- a/src/utils/i18n/locales/ru/onboarding.json +++ b/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": "Для начала отправьте биткойны на ваш кошелек.", + "empty_wallet": "Для\nначала\nотправьте\nбиткойны\nна ваш\nкошелек.", "error_create": "Ошибка Создания Кошелька", "multiple_header": "Предупреждение:\nнесколько устройств", "multiple_text": "Не устанавливайте фразу восстановления Bitkit на нескольких телефонах одновременно, так как это может привести к повреждению ваших данных." diff --git a/src/utils/i18n/locales/ru/wallet.json b/src/utils/i18n/locales/ru/wallet.json index b780a126f..c946158ba 100644 --- a/src/utils/i18n/locales/ru/wallet.json +++ b/src/utils/i18n/locales/ru/wallet.json @@ -162,11 +162,11 @@ "details_spending_title": "Расходы", "savings": { "title": "Сбережения", - "onboarding": "Отправьте биткоин на баланс сбережений." + "onboarding": "Отправьте\nбиткоин\nна баланс\nсбережений." }, "spending": { "title": "Расходы", - "onboarding": "Отправьте биткоин на баланс расходов." + "onboarding": "Отправьте\nбиткоин\nна баланс\nрасходов." }, "details_transfer_subtitle": "Входящий Перенос", "tx_invalid": "Неверная Транзакция",