mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-19 05:58:50 +02:00
CWA-204 | applied new design to seed language picker; added wallet creation alert dialog
This commit is contained in:
@@ -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))
|
||||
],
|
||||
);*/
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user