Skip to content

Commit

Permalink
CW-703: Better Seed UI/UX (#1868)
Browse files Browse the repository at this point in the history 
* feat: Switch UI for seeds display

* feat: Add localization for disclaimer text

* fix: Modify color for warning on seeds screen

* Fix: Adjust UI styling for seed page

* chore: Revert podfile.lock

* Fix column colors

* Fix more colors

---------

Co-authored-by: tuxpizza <[email protected]>
  • Loading branch information
@Blazebrain @tuxpizza
Blazebrain and tuxpizza authored Dec 11, 2024
1 parent 699f591 commit 329a1fd
Show file tree
Hide file tree
Showing 30 changed files with 196 additions and 102 deletions.
266 changes: 164 additions & 102 deletions lib/src/screens/seed/wallet_seed_page.dart
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
import 'package:cake_wallet/themes/extensions/dashboard_page_theme.dart';
import 'package:cake_wallet/themes/extensions/pin_code_theme.dart';
import 'package:cake_wallet/themes/theme_base.dart';
import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
Expand All @@ -15,7 +15,8 @@ import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/view_model/wallet_seed_view_model.dart';
import 'package:cake_wallet/themes/extensions/transaction_trade_theme.dart';

import '../../../themes/extensions/menu_theme.dart';

class WalletSeedPage extends BasePage {
WalletSeedPage(this.walletSeedViewModel, {required this.isNewWalletCreated});
Expand Down Expand Up @@ -92,118 +93,179 @@ class WalletSeedPage extends BasePage {

@override
Widget body(BuildContext context) {
final image = currentTheme.type == ThemeType.dark ? imageDark : imageLight;

return WillPopScope(
onWillPop: () async => false,
child: Container(
padding: EdgeInsets.all(24),
alignment: Alignment.center,
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ConstrainedBox(
constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.3),
child: AspectRatio(aspectRatio: 1, child: image),
),
Observer(builder: (_) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text(
key: ValueKey('wallet_seed_page_wallet_name_text_key'),
walletSeedViewModel.name,
style: TextStyle(
onWillPop: () async => false,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 8),
alignment: Alignment.center,
child: ConstrainedBox(
constraints:
BoxConstraints(maxWidth: ResponsiveLayoutUtilBase.kDesktopMaxWidthConstraint),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Observer(
builder: (_) {
return Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: currentTheme.type == ThemeType.dark
? Color.fromRGBO(126, 116, 59, 1)
: Color.fromRGBO(189, 169, 90, 1),
borderRadius: BorderRadius.all(Radius.circular(12)),
border: Border.all(
color: currentTheme.type == ThemeType.dark
? Color.fromRGBO(171, 171, 41, 1)
: Color.fromRGBO(125, 122, 15, 1),
width: 2.0,
)),
child: Row(
children: [
Icon(
Icons.warning_amber_rounded,
size: 64,
color: Colors.white.withOpacity(0.75),
),
SizedBox(width: 8),
Expanded(
child: Text(
S.current.cake_seeds_save_disclaimer,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w800,
color: currentTheme.type == ThemeType.dark
? Colors.white.withOpacity(0.75)
: Colors.white.withOpacity(0.85),
),
),
),
],
),
),
SizedBox(height: 32),
Text(
key: ValueKey('wallet_seed_page_wallet_name_text_key'),
walletSeedViewModel.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
color: Theme.of(context).extension<CakeTextTheme>()!.titleColor),
),
Padding(
padding: EdgeInsets.only(top: 20, left: 16, right: 16),
child: Text(
key: ValueKey('wallet_seed_page_wallet_seed_text_key'),
walletSeedViewModel.seed,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.normal,
color:
Theme.of(context).extension<CakeTextTheme>()!.secondaryTextColor),
color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
),
),
)
],
);
}),
Column(
children: <Widget>[
isNewWalletCreated
? Padding(
padding: EdgeInsets.only(bottom: 43, left: 43, right: 43),
child: Text(
key: ValueKey(
'wallet_seed_page_wallet_seed_reminder_text_key',
),
S.of(context).seed_reminder,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.normal,
color: Theme.of(context)
.extension<TransactionTradeTheme>()!
.detailsTitlesColor,
),
SizedBox(height: 24),
Expanded(
child: GridView.builder(
padding: const EdgeInsets.symmetric(horizontal: 4),
itemCount: walletSeedViewModel.seedSplit.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: walletSeedViewModel.columnCount,
childAspectRatio: 3.6,
mainAxisSpacing: 8.0,
crossAxisSpacing: 8.0,
),
)
: Offstage(),
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: PrimaryButton(
key: ValueKey('wallet_seed_page_save_seeds_button_key'),
itemBuilder: (context, index) {
final item = walletSeedViewModel.seedSplit[index];
final numberCount = index + 1;

return Container(
padding: const EdgeInsets.symmetric(horizontal: 4),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Theme.of(context).cardColor,
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 20,
child: Text(
numberCount.toString(),
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: Theme.of(context).extension<CakeTextTheme>()!.buttonTextColor.withOpacity(0.5)
),
),
),
const SizedBox(width: 8),
Text(
'${item[0].toUpperCase()}${item.substring(1)}',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
color: Theme.of(context).extension<CakeTextTheme>()!.buttonTextColor
),
),
],
),
);
},
),
),
],
),
);
},
),
Column(
children: <Widget>[
Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
child: Container(
padding: EdgeInsets.only(right: 8.0),
child: PrimaryButton(
key: ValueKey('wallet_seed_page_save_seeds_button_key'),
onPressed: () {
ShareUtil.share(
text: walletSeedViewModel.seed,
context: context,
);
},
text: S.of(context).save,
color: Theme.of(context).cardColor,
textColor: currentTheme.type == ThemeType.dark
? Theme.of(context).extension<DashboardPageTheme>()!.textColor
: Theme.of(context).extension<CakeTextTheme>()!.buttonTextColor,
),
),
),
Flexible(
child: Container(
padding: EdgeInsets.only(left: 8.0),
child: Builder(
builder: (context) => PrimaryButton(
key: ValueKey('wallet_seed_page_copy_seeds_button_key'),
onPressed: () {
ShareUtil.share(
text: walletSeedViewModel.seed,
context: context,
ClipboardUtil.setSensitiveDataToClipboard(
ClipboardData(text: walletSeedViewModel.seed),
);
showBar<void>(context, S.of(context).copied_to_clipboard);
},
text: S.of(context).save,
color: Colors.green,
text: S.of(context).copy,
color: Theme.of(context).primaryColor,
textColor: Colors.white,
),
),
),
Flexible(
child: Container(
padding: EdgeInsets.only(left: 8.0),
child: Builder(
builder: (context) => PrimaryButton(
key: ValueKey('wallet_seed_page_copy_seeds_button_key'),
onPressed: () {
ClipboardUtil.setSensitiveDataToClipboard(
ClipboardData(text: walletSeedViewModel.seed),
);
showBar<void>(context, S.of(context).copied_to_clipboard);
},
text: S.of(context).copy,
color: Theme.of(context).extension<PinCodeTheme>()!.indicatorsColor,
textColor: Colors.white,
),
),
),
)
],
)
],
)
],
),
)
],
),
SizedBox(height: 24),
],
)
],
),
));
),
),
);
}
}
4 changes: 4 additions & 0 deletions lib/view_model/wallet_seed_view_model.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,8 @@ abstract class WalletSeedViewModelBase with Store {

@observable
String seed;

List<String> get seedSplit => seed.split(' ');

int get columnCount => seedSplit.length <= 16 ? 2 : 3;
}
1 change: 1 addition & 0 deletions res/values/strings_ar.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "شراء بطاقات مسبقة الدفع وبطاقات الهدايا في جميع أنحاء العالم",
"cake_pay_web_cards_subtitle": "اشتري بطاقات مدفوعة مسبقا وبطاقات هدايا في جميع أنحاء العالم",
"cake_pay_web_cards_title": "بطاقات Cake Pay Web",
"cake_seeds_save_disclaimer": "يرجى حفظ هذه الكلمات في مكان آمن! إذا فقدت الوصول إلى محفظتك ، فإن دعم محفظة الكيك لا يمكن أن يساعدك",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "آسف ، بطاقة الهدايا هذه غير متوفرة على iOS. يمكنك شرائه على Android أو من خلال موقعنا بدلاً من ذلك.",
"cakepay_prepaid_card": "بطاقة ائتمان CakePay مسبقة الدفع",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_bg.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Купете предплатени карти и карти за подаръци в световен мащаб",
"cake_pay_web_cards_subtitle": "Купете световно признати предплатени и гифт карти",
"cake_pay_web_cards_title": "Cake Pay Онлайн Карти",
"cake_seeds_save_disclaimer": "Моля, запазете тези думи на сигурно място! Ако загубите достъп до портфейла си, поддръжката на портфейла за торти не може да ви помогне",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "За съжаление тази карта за подарък не се предлага в iOS. Можете да го закупите на Android или чрез нашия уебсайт вместо това.",
"cakepay_prepaid_card": "CakePay предплатена дебитна карта",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_cs.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Kupte si celosvětové předplacené karty a dárkové karty",
"cake_pay_web_cards_subtitle": "Kupte si celosvětové předplacené a dárkové karty",
"cake_pay_web_cards_title": "Cake Pay webové karty",
"cake_seeds_save_disclaimer": "Uložte tato slova na bezpečném místě! Pokud ztratíte přístup k vaší peněžence, podpora peněženky dortu vám nemůže pomoci",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "Je nám líto, tato dárková karta není k dispozici na iOS. Místo toho si jej můžete zakoupit na Androidu nebo prostřednictvím našeho webu.",
"cakepay_prepaid_card": "CakePay předplacená debetní karta",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_de.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Kaufen Sie weltweite Prepaid-Karten und Geschenkkarten",
"cake_pay_web_cards_subtitle": "Kaufen Sie weltweit Prepaid-Karten und Geschenkkarten",
"cake_pay_web_cards_title": "Cake Pay-Webkarten",
"cake_seeds_save_disclaimer": "Bitte speichern Sie diese Wörter an einem sicheren Ort! Wenn Sie den Zugang zu Ihrer Brieftasche verlieren, kann Ihnen die Stütze der Kuchenbrieftasche nicht helfen",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "Entschuldigung, diese Geschenkkarte ist auf iOS nicht erhältlich. Sie können es stattdessen auf Android oder über unsere Website kaufen.",
"cakepay_prepaid_card": "CakePay-Prepaid-Debitkarte",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_en.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Buy worldwide prepaid cards and gift cards",
"cake_pay_web_cards_subtitle": "Buy worldwide prepaid cards and gift cards",
"cake_pay_web_cards_title": "Cake Pay Web Cards",
"cake_seeds_save_disclaimer": "Please save these words in a secure place! If you lose access to your wallet, Cake Wallet support CANNOT help you",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "Sorry, this gift card is not available on iOS. You can purchase it on Android or through our website instead.",
"cakepay_prepaid_card": "CakePay Prepaid Debit Card",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_es.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Compra tarjetas prepagadas y tarjetas de regalo en todo el mundo",
"cake_pay_web_cards_subtitle": "Compra tarjetas de prepago y tarjetas de regalo en todo el mundo",
"cake_pay_web_cards_title": "Tarjetas Web Cake Pay",
"cake_seeds_save_disclaimer": "¡Guarde estas palabras en un lugar seguro! Si pierde acceso a su billetera, el soporte de la billetera de pastel no puede ayudarlo",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "Lo siento, esta tarjeta de regalo no está disponible en iOS. Puede comprarlo en Android o a través de nuestro sitio web.",
"cakepay_prepaid_card": "Tarjeta de Débito Prepago CakePay",
Expand Down
1 change: 1 addition & 0 deletions res/values/strings_fr.arb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@
"cake_pay_subtitle": "Achetez des cartes et des cartes-cadeaux prépayées mondiales",
"cake_pay_web_cards_subtitle": "Achetez des cartes prépayées et des cartes-cadeaux dans le monde entier",
"cake_pay_web_cards_title": "Cartes Web Cake Pay",
"cake_seeds_save_disclaimer": "Veuillez enregistrer ces mots dans un endroit sécurisé! Si vous perdez accès à votre portefeuille, le support de portefeuille à gâteau ne peut pas vous aider",
"cake_wallet": "Cake Wallet",
"cakepay_ios_not_available": "Désolé, cette carte-cadeau n'est pas disponible sur iOS. Vous pouvez l'acheter sur Android ou via notre site Web à la place.",
"cakepay_prepaid_card": "Carte de débit prépayée Cake Pay",
Expand Down
Loading

0 comments on commit 329a1fd

Please sign in to comment.