Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-03-22 07:08:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CAKE-31 | applied new design to restore wallet from seed page and seed widget

Browse source
This commit is contained in:
OleksandrSobol 2020-09-02 21:31:43 +03:00
parent 9da460da48
commit 9c2d3d339f
4 changed files with 134 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
lib/router.dart
View file

@ -196,7 +196,7 @@ class Router {
? Routes.seedLanguage ? Routes.seedLanguage
: Routes.restoreWalletFromKeys; : Routes.restoreWalletFromKeys;
final args = type == WalletType.monero final args = type == WalletType.monero
? [type, Routes.restoreWalletFromSeed] ? [type, Routes.restoreWalletFromKeys]
: [type]; : [type];
Navigator.of(context).pushNamed(route, arguments: args); Navigator.of(context).pushNamed(route, arguments: args);

51
lib/src/screens/restore/restore_wallet_from_seed_page.dart
View file

@ -20,20 +20,40 @@ class RestoreWalletFromSeedPage extends BasePage {
String get title => S.current.restore_title_from_seed; String get title => S.current.restore_title_from_seed;
@override @override
Color get backgroundLightColor => Palette.lavender; Color get titleColor => Colors.white;
@override @override
Color get backgroundDarkColor => PaletteDark.lightNightBlue; Color get backgroundLightColor => Colors.transparent;
@override
Color get backgroundDarkColor => Colors.transparent;
@override
bool get resizeToAvoidBottomPadding => false;
@override @override
Widget body(BuildContext context) => Widget body(BuildContext context) =>
RestoreFromSeedForm(key: formKey, type: type, language: language); RestoreFromSeedForm(key: formKey, type: type, language: language,
leading: leading(context), middle: middle(context));
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: resizeToAvoidBottomPadding,
body: Container(
color: Theme.of(context).backgroundColor,
child: body(context)
)
);
}
} }
class RestoreFromSeedForm extends StatefulWidget { class RestoreFromSeedForm extends StatefulWidget {
RestoreFromSeedForm({Key key, this.type, this.language}) : super(key: key); RestoreFromSeedForm({Key key, this.type, this.language, this.leading, this.middle}) : super(key: key);
final WalletType type; final WalletType type;
final String language; final String language;
final Widget leading;
final Widget middle;
@override @override
_RestoreFromSeedFormState createState() => _RestoreFromSeedFormState(); _RestoreFromSeedFormState createState() => _RestoreFromSeedFormState();
@ -49,18 +69,17 @@ class _RestoreFromSeedFormState extends State<RestoreFromSeedForm> {
return GestureDetector( return GestureDetector(
onTap: () => onTap: () =>
SystemChannels.textInput.invokeMethod<void>('TextInput.hide'), SystemChannels.textInput.invokeMethod<void>('TextInput.hide'),
child: Container( child: SeedWidget(
color: Theme.of(context).backgroundColor, key: _seedKey,
child: SeedWidget( maxLength: mnemonicLength(widget.type),
key: _seedKey, onMnemonicChange: (seed) => null,
maxLength: mnemonicLength(widget.type), onFinish: () => Navigator.of(context).pushNamed(
onMnemonicChange: (seed) => null, Routes.restoreWalletFromSeedDetails,
onFinish: () => Navigator.of(context).pushNamed( arguments: [widget.type, widget.language, mnemonic()]),
Routes.restoreWalletFromSeedDetails, leading: widget.leading,
arguments: [widget.type, widget.language, mnemonic()]), middle: widget.middle,
validator: validator:
SeedValidator(type: widget.type, language: widget.language), SeedValidator(type: widget.type, language: widget.language),
),
), ),
); );
} }

170
lib/src/widgets/seed_widget.dart
View file

@ -6,6 +6,7 @@ import 'package:cake_wallet/core/seed_validator.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart';
import 'package:cake_wallet/src/domain/common/mnemonic_item.dart'; import 'package:cake_wallet/src/domain/common/mnemonic_item.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:flutter/widgets.dart';
class SeedWidget extends StatefulWidget { class SeedWidget extends StatefulWidget {
SeedWidget( SeedWidget(
@ -13,6 +14,8 @@ class SeedWidget extends StatefulWidget {
this.maxLength, this.maxLength,
this.onMnemonicChange, this.onMnemonicChange,
this.onFinish, this.onFinish,
this.leading,
this.middle,
this.validator}) this.validator})
: super(key: key); : super(key: key);
@ -20,6 +23,8 @@ class SeedWidget extends StatefulWidget {
final Function(List<MnemonicItem>) onMnemonicChange; final Function(List<MnemonicItem>) onMnemonicChange;
final Function() onFinish; final Function() onFinish;
final SeedValidator validator; final SeedValidator validator;
final Widget leading;
final Widget middle;
@override @override
SeedWidgetState createState() => SeedWidgetState(maxLength: maxLength); SeedWidgetState createState() => SeedWidgetState(maxLength: maxLength);
@ -199,74 +204,91 @@ class SeedWidgetState extends State<SeedWidget> {
child: Column(children: [ child: Column(children: [
Flexible( Flexible(
fit: FlexFit.tight, fit: FlexFit.tight,
flex: 1, flex: 2,
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: double.infinity, height: double.infinity,
padding: EdgeInsets.all(24), padding: EdgeInsets.all(0),
decoration: BoxDecoration( decoration: BoxDecoration(
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24), bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)), bottomRight: Radius.circular(24)),
color: Theme.of(context).accentTextTheme.title.backgroundColor), gradient: LinearGradient(colors: [
child: SingleChildScrollView( Theme.of(context).primaryTextTheme.subhead.color,
child: Column( Theme.of(context).primaryTextTheme.subhead.decorationColor,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
S.of(context).restore_active_seed,
style: TextStyle(
fontSize: 14,
color:
Theme.of(context).primaryTextTheme.caption.color),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Wrap(
children: items.map((item) {
final isValid = widget.validator.isValid(item);
final isSelected = selectedItem == item;
return InkWell(
onTap: () => onMnemonicTap(item),
child: Container(
decoration: BoxDecoration(
color: isValid
? Colors.transparent
: Palette.red),
margin: EdgeInsets.only(right: 7, bottom: 8),
child: Text(
item.toString(),
style: TextStyle(
color: isValid
? Theme.of(context)
.primaryTextTheme
.title
.color
: Theme.of(context)
.primaryTextTheme
.caption
.color,
fontSize: 16,
fontWeight: isSelected
? FontWeight.w900
: FontWeight.w400,
decoration: isSelected
? TextDecoration.underline
: TextDecoration.none),
)),
);
}).toList(),
))
], ],
), begin: Alignment.topLeft,
end: Alignment.bottomRight)
), ),
child: Column(
children: <Widget>[
CupertinoNavigationBar(
leading: widget.leading,
middle: widget.middle,
backgroundColor: Colors.transparent,
border: null,
),
Expanded(
child: Container(
padding: EdgeInsets.all(24),
alignment: Alignment.topLeft,
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
S.of(context).restore_active_seed,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color:
Theme.of(context).textTheme.overline.backgroundColor),
),
Padding(
padding: EdgeInsets.only(top: 5),
child: Wrap(
children: items.map((item) {
final isValid = widget.validator.isValid(item);
final isSelected = selectedItem == item;
return InkWell(
onTap: () => onMnemonicTap(item),
child: Container(
decoration: BoxDecoration(
color: isValid
? Colors.transparent
: Palette.red),
margin: EdgeInsets.only(right: 7, bottom: 8),
child: Text(
item.toString(),
style: TextStyle(
color: isValid
? Colors.white
: Colors.grey,
fontSize: 16,
fontWeight: isSelected
? FontWeight.w900
: FontWeight.w600,
decoration: isSelected
? TextDecoration.underline
: TextDecoration.none),
)),
);
}).toList(),
))
],
),
),
)
)
],
)
), ),
), ),
Flexible( Flexible(
fit: FlexFit.tight, fit: FlexFit.tight,
flex: 2, flex: 3,
child: Padding( child: Padding(
padding: padding:
EdgeInsets.only(left: 24, top: 48, right: 24, bottom: 24), EdgeInsets.only(left: 24, top: 48, right: 24, bottom: 24),
@ -277,8 +299,8 @@ class SeedWidgetState extends State<SeedWidget> {
Text( Text(
S.of(context).restore_new_seed, S.of(context).restore_new_seed,
style: TextStyle( style: TextStyle(
fontSize: 18, fontSize: 20,
fontWeight: FontWeight.bold, fontWeight: FontWeight.w500,
color: color:
Theme.of(context).primaryTextTheme.title.color), Theme.of(context).primaryTextTheme.title.color),
), ),
@ -291,6 +313,7 @@ class SeedWidgetState extends State<SeedWidget> {
: null, : null,
style: TextStyle( style: TextStyle(
fontSize: 16.0, fontSize: 16.0,
fontWeight: FontWeight.normal,
color: color:
Theme.of(context).primaryTextTheme.title.color), Theme.of(context).primaryTextTheme.title.color),
controller: _seedController, controller: _seedController,
@ -306,10 +329,11 @@ class SeedWidgetState extends State<SeedWidget> {
Text('${items.length}/$maxLength', Text('${items.length}/$maxLength',
style: TextStyle( style: TextStyle(
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme .accentTextTheme
.caption .display2
.color, .decorationColor,
fontSize: 14)), fontWeight: FontWeight.normal,
fontSize: 16)),
SizedBox(width: 10), SizedBox(width: 10),
InkWell( InkWell(
onTap: () async => onTap: () async =>
@ -322,17 +346,14 @@ class SeedWidgetState extends State<SeedWidget> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Theme.of(context) color: Theme.of(context)
.accentTextTheme .accentTextTheme
.title .caption
.backgroundColor, .color,
borderRadius: borderRadius:
BorderRadius.circular(10.0)), BorderRadius.circular(10.0)),
child: Text( child: Text(
S.of(context).paste, S.of(context).paste,
style: TextStyle( style: TextStyle(
color: Theme.of(context) color: Palette.blueCraiola),
.primaryTextTheme
.title
.color),
)), )),
) )
], ],
@ -341,20 +362,21 @@ class SeedWidgetState extends State<SeedWidget> {
), ),
hintStyle: TextStyle( hintStyle: TextStyle(
color: Theme.of(context) color: Theme.of(context)
.primaryTextTheme .accentTextTheme
.caption .display2
.color, .decorationColor,
fontWeight: FontWeight.normal,
fontSize: 16), fontSize: 16),
hintText: hintText:
S.of(context).restore_from_seed_placeholder, S.of(context).restore_from_seed_placeholder,
errorText: _errorMessage, errorText: _errorMessage,
focusedBorder: UnderlineInputBorder( focusedBorder: UnderlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme.of(context).dividerColor, color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
width: 1.0)), width: 1.0)),
enabledBorder: UnderlineInputBorder( enabledBorder: UnderlineInputBorder(
borderSide: BorderSide( borderSide: BorderSide(
color: Theme.of(context).dividerColor, color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
width: 1.0))), width: 1.0))),
enableInteractiveSelection: false, enableInteractiveSelection: false,
), ),
@ -386,7 +408,7 @@ class SeedWidgetState extends State<SeedWidget> {
onPressed: () => widget.onFinish != null onPressed: () => widget.onFinish != null
? widget.onFinish() ? widget.onFinish()
: null, : null,
color: Colors.green, color: Palette.blueCraiola,
textColor: Colors.white) textColor: Colors.white)
: PrimaryButton( : PrimaryButton(
text: selectedItem != null text: selectedItem != null
@ -397,7 +419,7 @@ class SeedWidgetState extends State<SeedWidget> {
: null, : null,
onDisabledPressed: () => showErrorIfExist(), onDisabledPressed: () => showErrorIfExist(),
isDisabled: !isCurrentMnemonicValid, isDisabled: !isCurrentMnemonicValid,
color: Colors.green, color: Palette.blueCraiola,
textColor: Colors.white), textColor: Colors.white),
), ),
) )

2
lib/themes.dart
View file

@ -154,6 +154,7 @@ class Themes {
), ),
display2: TextStyle( display2: TextStyle(
color: Palette.shadowWhite, // action button color (address text field) color: Palette.shadowWhite, // action button color (address text field)
decorationColor: Palette.darkGray // hint text (seed widget)
), ),
), ),
@ -320,6 +321,7 @@ class Themes {
), ),
display2: TextStyle( display2: TextStyle(
color: PaletteDark.nightBlue, // action button color (address text field) color: PaletteDark.nightBlue, // action button color (address text field)
decorationColor: PaletteDark.darkCyanBlue // hint text (seed widget)
), ),
), ),