From d728031b8f63a805026d91d45600132a89e50b7b Mon Sep 17 00:00:00 2001 From: Ivan Vershigora Date: Wed, 22 May 2024 13:31:25 +0100 Subject: [PATCH] fix: onboarding text layout --- src/components/WalletOnboarding.tsx | 38 ++++++++++++++++++++--- src/utils/i18n/locales/cs/onboarding.json | 1 - src/utils/i18n/locales/cs/wallet.json | 6 ++-- 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 +-- 9 files changed, 43 insertions(+), 21 deletions(-) diff --git a/src/components/WalletOnboarding.tsx b/src/components/WalletOnboarding.tsx index 681fbbda3..3d7a4065c 100644 --- a/src/components/WalletOnboarding.tsx +++ b/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 ( - + {showClose && onHide && ( )} - {text} - + + {text} + + ); }; @@ -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 }, }); diff --git a/src/utils/i18n/locales/cs/onboarding.json b/src/utils/i18n/locales/cs/onboarding.json index 406b4b410..9bf2ef7b4 100644 --- a/src/utils/i18n/locales/cs/onboarding.json +++ b/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, 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/onboarding.json b/src/utils/i18n/locales/en/onboarding.json index 937371123..027c9db69 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\nBitcoinnBitcoin\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": "Неверная Транзакция",