CWA-204 | applied new design to seed language picker; added wallet creation alert dialog

This commit is contained in:
Oleksandr Sobol
2020-04-29 22:57:54 +03:00
parent d9f8ddb141
commit ecca26bb58
53 changed files with 408 additions and 122 deletions
@@ -86,25 +86,6 @@ class WalletMenu {
},
reconnectActionRight: () => Navigator.of(context).pop()
);
/*AlertDialog(
title: Text(
S.of(context).reconnection,
textAlign: TextAlign.center,
),
content: Text(S.of(context).reconnect_alert_text),
actions: <Widget>[
FlatButton(
onPressed: () => Navigator.of(context).pop(),
child: Text(S.of(context).cancel)),
FlatButton(
onPressed: () {
walletStore.reconnect();
Navigator.of(context).pop();
},
child: Text(S.of(context).ok))
],
);*/
});
}
}
+22 -42
View File
@@ -15,6 +15,8 @@ import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.dart';
import 'package:cake_wallet/src/screens/seed_language/widgets/seed_language_picker.dart';
import 'package:cake_wallet/src/screens/new_wallet/widgets/wallet_creation_dialog.dart';
class NewWalletPage extends BasePage {
NewWalletPage(
@@ -44,40 +46,10 @@ class WalletNameForm extends StatefulWidget {
class _WalletNameFormState extends State<WalletNameForm> {
static const aspectRatioImage = 1.22;
final List<String> seedLocales = [
S.current.seed_language_english,
S.current.seed_language_chinese,
S.current.seed_language_dutch,
S.current.seed_language_german,
S.current.seed_language_japanese,
S.current.seed_language_portuguese,
S.current.seed_language_russian,
S.current.seed_language_spanish
];
final _formKey = GlobalKey<FormState>();
final nameController = TextEditingController();
final walletNameImage = Image.asset('assets/images/wallet_name.png');
bool isDisabledButton;
@override
void initState() {
isDisabledButton = true;
nameController.addListener(() {
if (nameController.text.isNotEmpty) {
isDisabledButton = false;
} else {
isDisabledButton = true;
}
setState(() {});
});
super.initState();
}
@override
void dispose() {
nameController.dispose();
@@ -89,24 +61,29 @@ class _WalletNameFormState extends State<WalletNameForm> {
final walletCreationStore = Provider.of<WalletCreationStore>(context);
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
nameController.addListener(() {
if (nameController.text.isNotEmpty) {
walletCreationStore.setDisabledStatus(false);
} else {
walletCreationStore.setDisabledStatus(true);
}
});
reaction((_) => walletCreationStore.state, (WalletCreationState state) {
if (state is WalletCreatedSuccessfully) {
Navigator.of(context).popUntil((route) => route.isFirst);
}
if (state is WalletCreationFailure) { // FIXME: apply new alert dialog
if (state is WalletCreationFailure) {
WidgetsBinding.instance.addPostFrameCallback((_) {
showDialog<void>(
context: context,
builder: (BuildContext context) {
return AlertDialog(
content: Text(state.error),
actions: <Widget>[
FlatButton(
child: Text(S.of(context).ok),
onPressed: () => Navigator.of(context).pop(),
),
],
builder: (_) {
return WalletCreationDialog(
dialogTitle: S.current.new_wallet,
dialogContent: state.error,
dialogButtonText: S.of(context).ok,
dialogButtonAction: () => Navigator.of(context).pop()
);
});
});
@@ -176,7 +153,10 @@ class _WalletNameFormState extends State<WalletNameForm> {
text: seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
color: PaletteDark.menuList,
textColor: Colors.white,
onTap: () {} // FIXME: apply picker
onTap: () async => await showDialog(
context: context,
builder: (BuildContext context) => SeedLanguagePicker()
)
)
),
)
@@ -195,7 +175,7 @@ class _WalletNameFormState extends State<WalletNameForm> {
color: Colors.green,
textColor: Colors.white,
isLoading: walletCreationStore.state is WalletIsCreating,
isDisabled: isDisabledButton,
isDisabled: walletCreationStore.isDisabledStatus,
);
},
)),
@@ -73,7 +73,7 @@ class WalletTypeFormState extends State<WalletTypeForm> {
Padding(
padding: EdgeInsets.only(top: 48),
child: Text(
'Please choose wallet currency:',
S.of(context).choose_wallet_currency,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 16,
@@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
import 'package:cake_wallet/src/widgets/base_alert_dialog.dart';
class WalletCreationDialog extends BaseAlertDialog {
WalletCreationDialog({
@required this.dialogTitle,
@required this.dialogContent,
@required this.dialogButtonText,
@required this.dialogButtonAction,
});
final String dialogTitle;
final String dialogContent;
final String dialogButtonText;
final VoidCallback dialogButtonAction;
@override
String get titleText => dialogTitle;
@override
String get contentText => dialogContent;
@override
Widget actionButtons(BuildContext context) {
return Container(
width: 300,
height: 52,
padding: EdgeInsets.only(left: 12, right: 12),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)
),
color: Colors.white
),
child: ButtonTheme(
minWidth: double.infinity,
child: FlatButton(
onPressed: dialogButtonAction,
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
child: Text(
dialogButtonText,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: Colors.blue,
decoration: TextDecoration.none,
),
)),
),
);
}
}
@@ -1,55 +1,245 @@
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cake_wallet/palette.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/src/stores/seed_language/seed_language_store.dart';
import 'package:cake_wallet/src/widgets/present_picker.dart';
import 'package:cake_wallet/generated/i18n.dart';
class SeedLanguagePicker extends StatelessWidget {
List<String> seedLocales = [
S.current.seed_language_english,
S.current.seed_language_chinese,
S.current.seed_language_dutch,
S.current.seed_language_german,
S.current.seed_language_japanese,
S.current.seed_language_portuguese,
S.current.seed_language_russian,
S.current.seed_language_spanish
];
List<String> seedLocales = [
S.current.seed_language_english,
S.current.seed_language_chinese,
S.current.seed_language_dutch,
S.current.seed_language_german,
S.current.seed_language_japanese,
S.current.seed_language_portuguese,
S.current.seed_language_russian,
S.current.seed_language_spanish
];
List<Image> flagImages = [
Image.asset('assets/images/usa.png'),
Image.asset('assets/images/china.png'),
Image.asset('assets/images/holland.png'),
Image.asset('assets/images/germany.png'),
Image.asset('assets/images/japan.png'),
Image.asset('assets/images/portugal.png'),
Image.asset('assets/images/russia.png'),
Image.asset('assets/images/spain.png'),
];
List<String> languageCodes = [
'Eng',
'Chi',
'Ned',
'Ger',
'Jap',
'Por',
'Rus',
'Esp',
];
enum Places {topLeft, topRight, bottomLeft, bottomRight, inside}
class SeedLanguagePicker extends StatefulWidget {
@override
SeedLanguagePickerState createState() => SeedLanguagePickerState();
}
class SeedLanguagePickerState extends State<SeedLanguagePicker> {
@override
Widget build(BuildContext context) {
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
return Observer(
builder: (_) => InkWell(
onTap: () => _setSeedLanguage(context),
return GestureDetector(
onTap: () => Navigator.of(context).pop(),
child: Container(
color: Colors.transparent,
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0),
child: Container(
padding: EdgeInsets.all(8.0),
//width: double.infinity,
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).dividerTheme.color
),
borderRadius: BorderRadius.circular(8.0)
),
child: Text(seedLocales[seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage)],
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16.0, color: Palette.lightBlue),
decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 24, right: 24),
child: Text(
S.of(context).seed_choose,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: Colors.white
),
),
),
Padding(
padding: EdgeInsets.only(top: 24),
child: GestureDetector(
onTap: () => null,
child: Container(
height: 300,
width: 300,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(14)),
color: PaletteDark.walletCardSubAddressField
),
child: GridView.count(
shrinkWrap: true,
crossAxisCount: 3,
childAspectRatio: 1,
physics: const NeverScrollableScrollPhysics(),
crossAxisSpacing: 1,
mainAxisSpacing: 1,
children: List.generate(9, (index) {
if (index == 8) {
return gridTile(
isCurrent: false,
place: Places.bottomRight,
image: null,
text: '',
onTap: null);
} else {
final code = languageCodes[index];
final flag = flagImages[index];
final isCurrent = index == seedLanguages.indexOf(seedLanguageStore.selectedSeedLanguage);
if (index == 0) {
return gridTile(
isCurrent: isCurrent,
place: Places.topLeft,
image: flag,
text: code,
onTap: () {
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
Navigator.of(context).pop();
}
);
}
if (index == 2) {
return gridTile(
isCurrent: isCurrent,
place: Places.topRight,
image: flag,
text: code,
onTap: () {
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
Navigator.of(context).pop();
}
);
}
if (index == 6) {
return gridTile(
isCurrent: isCurrent,
place: Places.bottomLeft,
image: flag,
text: code,
onTap: () {
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
Navigator.of(context).pop();
}
);
}
return gridTile(
isCurrent: isCurrent,
place: Places.inside,
image: flag,
text: code,
onTap: () {
seedLanguageStore.setSelectedSeedLanguage(seedLanguages[index]);
Navigator.of(context).pop();
}
);
}
}),
),
),
),
)
],
),
),
),
));
),
),
);
}
Future<void> _setSeedLanguage(BuildContext context) async {
final seedLanguageStore = Provider.of<SeedLanguageStore>(context);
String selectedSeedLanguage =
await presentPicker(context, seedLocales);
Widget gridTile({
@required bool isCurrent,
@required Places place,
@required Image image,
@required String text,
@required VoidCallback onTap}) {
if (selectedSeedLanguage != null) {
selectedSeedLanguage = seedLanguages[seedLocales.indexOf(selectedSeedLanguage)];
seedLanguageStore.setSelectedSeedLanguage(selectedSeedLanguage);
BorderRadius borderRadius;
final color = isCurrent ? PaletteDark.historyPanel : PaletteDark.menuList;
final textColor = isCurrent ? Colors.blue : Colors.white;
switch (place) {
case Places.topLeft:
borderRadius = BorderRadius.only(topLeft: Radius.circular(14));
break;
case Places.topRight:
borderRadius = BorderRadius.only(topRight: Radius.circular(14));
break;
case Places.bottomLeft:
borderRadius = BorderRadius.only(bottomLeft: Radius.circular(14));
break;
case Places.bottomRight:
borderRadius = BorderRadius.only(bottomRight: Radius.circular(14));
break;
case Places.inside:
borderRadius = BorderRadius.all(Radius.circular(0));
break;
}
return GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: borderRadius,
color: color
),
child: Center(
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
image != null
? image
: Offstage(),
Padding(
padding: image != null
? EdgeInsets.only(left: 10)
: EdgeInsets.only(left: 0),
child: Text(
text,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
decoration: TextDecoration.none,
color: textColor
),
),
)
],
),
),
)
);
}
}
@@ -152,7 +152,7 @@ class WalletListBodyState extends State<WalletListBody> {
),
bottomSection: Column(children: <Widget>[
PrimaryImageButton(
onPressed: () => Navigator.of(context).pushNamed(Routes.newWallet),
onPressed: () => Navigator.of(context).pushNamed(Routes.newWalletType),
image: newWalletImage,
text: S.of(context).wallet_list_create_new_wallet,
color: Colors.white,
@@ -16,6 +16,7 @@ abstract class WalletCreationStoreBase with Store {
@required this.walletListService,
@required this.sharedPreferences}) {
state = WalletCreationStateInitial();
isDisabledStatus = true;
}
final AuthenticationStore authStore;
@@ -31,6 +32,9 @@ abstract class WalletCreationStoreBase with Store {
@observable
bool isValid;
@observable
bool isDisabledStatus;
@action
Future create({String name, String language}) async {
state = WalletCreationStateInitial();
@@ -45,6 +49,11 @@ abstract class WalletCreationStoreBase with Store {
}
}
@action
void setDisabledStatus(bool isDisabled) {
isDisabledStatus = isDisabled;
}
void validateWalletName(String value) {
const pattern = '^[a-zA-Z0-9_]{1,15}\$';
final regExp = RegExp(pattern);