Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: onboarding text layout #1858

Merged
merged 1 commit into from
May 23, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 34 additions & 5 deletions src/components/WalletOnboarding.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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__) {
Expand All @@ -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 (
<View style={[rootStyles, style]} testID="WalletOnboarding">
<View
onLayout={handleRootLayout}
style={[rootStyles, style]}
testID="WalletOnboarding">
{showClose && onHide && (
<TouchableOpacity
style={styles.closeButton}
Expand All @@ -46,8 +67,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>
);
};
Expand All @@ -56,7 +79,6 @@ const styles = StyleSheet.create({
root: {
flexDirection: 'row',
alignItems: 'flex-end',
// paddingHorizontal: 16,
marginTop: 'auto',
},
closeButton: {
Expand All @@ -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
},
});

Expand Down
2 changes: 1 addition & 1 deletion src/screens/Lightning/Success.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const Success = ({

return (
<InfoScreen
navTitle={t('transfer_successful')}
navTitle={t('transfer.nav_successful')}
displayBackButton={false}
title={
<Trans
Expand Down
1 change: 0 additions & 1 deletion src/utils/i18n/locales/cs/onboarding.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
6 changes: 2 additions & 4 deletions src/utils/i18n/locales/cs/wallet.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 1 addition & 0 deletions src/utils/i18n/locales/en/lightning.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
},
"transfer": {
"nav_title": "Transfer Funds",
"nav_successful": "Transfer Successful",
"title_slider": "Balance\n<accent>your funds</accent>",
"title_numpad": "Spending <accent>Balance</accent>",
"title_receive": "Receiving <accent>Capacity</accent>",
Expand Down
2 changes: 1 addition & 1 deletion src/utils/i18n/locales/en/onboarding.json
Original file line number Diff line number Diff line change
Expand Up @@ -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\nBitcoin</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."
Expand Down
4 changes: 2 additions & 2 deletions src/utils/i18n/locales/en/wallet.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
1 change: 0 additions & 1 deletion src/utils/i18n/locales/it/onboarding.json
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
6 changes: 2 additions & 4 deletions src/utils/i18n/locales/it/wallet.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
2 changes: 1 addition & 1 deletion src/utils/i18n/locales/ru/onboarding.json
Original file line number Diff line number Diff line change
Expand Up @@ -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 на нескольких телефонах одновременно, так как это может привести к повреждению ваших данных."
Expand Down
4 changes: 2 additions & 2 deletions src/utils/i18n/locales/ru/wallet.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": "Неверная Транзакция",
Expand Down
Loading