From 150d43b2da1d64a409829adc395e932481f415cd Mon Sep 17 00:00:00 2001 From: Godwin Asuquo Date: Thu, 9 Feb 2023 20:11:20 +0200 Subject: [PATCH 01/19] constraint images and pincoded box --- .../screens/new_wallet/new_wallet_page.dart | 63 ++-- .../new_wallet/new_wallet_type_page.dart | 40 +-- lib/src/screens/pin_code/pin_code_widget.dart | 276 +++++++++--------- 3 files changed, 174 insertions(+), 205 deletions(-) diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 9e0cd898c..5f7494559 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -24,18 +24,14 @@ class NewWalletPage extends BasePage { final walletNameImage = Image.asset('assets/images/wallet_name.png'); - final walletNameLightImage = - Image.asset('assets/images/wallet_name_light.png'); + final walletNameLightImage = Image.asset('assets/images/wallet_name_light.png'); @override String get title => S.current.new_wallet; @override Widget body(BuildContext context) => WalletNameForm( - _walletNewVM, - currentTheme.type == ThemeType.dark - ? walletNameImage - : walletNameLightImage); + _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage); } class WalletNameForm extends StatefulWidget { @@ -50,11 +46,11 @@ class WalletNameForm extends StatefulWidget { class _WalletNameFormState extends State { _WalletNameFormState(this._walletNewVM) - : _formKey = GlobalKey(), - _languageSelectorKey = GlobalKey(), - _controller = TextEditingController(); + : _formKey = GlobalKey(), + _languageSelectorKey = GlobalKey(), + _controller = TextEditingController(); - static const aspectRatioImage = 1.22; + // static const aspectRatioImage = 1.22; final GlobalKey _formKey; final GlobalKey _languageSelectorKey; @@ -64,11 +60,9 @@ class _WalletNameFormState extends State { @override void initState() { - _stateReaction ??= - reaction((_) => _walletNewVM.state, (ExecutionState state) { + _stateReaction ??= reaction((_) => _walletNewVM.state, (ExecutionState state) { if (state is ExecutedSuccessfullyState) { - Navigator.of(context) - .pushNamed(Routes.preSeed, arguments: _walletNewVM.type); + Navigator.of(context).pushNamed(Routes.preSeed, arguments: _walletNewVM.type); } if (state is FailureState) { @@ -94,14 +88,12 @@ class _WalletNameFormState extends State { padding: EdgeInsets.only(top: 24), child: ScrollableWithBottomSection( contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: - Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ + content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( padding: EdgeInsets.only(left: 12, right: 12), - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: - FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + child: SizedBox( + height: MediaQuery.of(context).size.height * 0.4, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), ), Padding( padding: EdgeInsets.only(top: 24), @@ -117,30 +109,21 @@ class _WalletNameFormState extends State { style: TextStyle( fontSize: 20.0, fontWeight: FontWeight.w600, - color: - Theme.of(context).primaryTextTheme!.headline6!.color!), + color: Theme.of(context).primaryTextTheme!.headline6!.color!), decoration: InputDecoration( hintStyle: TextStyle( fontSize: 18.0, fontWeight: FontWeight.w500, - color: Theme.of(context) - .accentTextTheme! - .headline2! - .color!), + color: Theme.of(context).accentTextTheme!.headline2!.color!), hintText: S.of(context).wallet_name, focusedBorder: UnderlineInputBorder( borderSide: BorderSide( - color: Theme.of(context) - .accentTextTheme! - .headline2! - .decorationColor!, + color: + Theme.of(context).accentTextTheme!.headline2!.decorationColor!, width: 1.0)), enabledBorder: UnderlineInputBorder( borderSide: BorderSide( - color: Theme.of(context) - .accentTextTheme! - .headline2! - .decorationColor!, + color: Theme.of(context).accentTextTheme!.headline2!.decorationColor!, width: 1.0), ), suffixIcon: IconButton( @@ -165,10 +148,8 @@ class _WalletNameFormState extends State { height: 34, child: Image.asset( 'assets/images/refresh_icon.png', - color: Theme.of(context) - .primaryTextTheme! - .headline4! - .decorationColor!, + color: + Theme.of(context).primaryTextTheme!.headline4!.decorationColor!, ), ), ), @@ -194,13 +175,11 @@ class _WalletNameFormState extends State { Padding( padding: EdgeInsets.only(top: 24), child: SeedLanguageSelector( - key: _languageSelectorKey, - initialSelected: defaultSeedLanguage), + key: _languageSelectorKey, initialSelected: defaultSeedLanguage), ) ] ]), - bottomSectionPadding: - EdgeInsets.all(24), + bottomSectionPadding: EdgeInsets.all(24), bottomSection: Column( children: [ Observer( diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 41179f34c..34ab99453 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -13,23 +13,19 @@ class NewWalletTypePage extends BasePage { final void Function(BuildContext, WalletType) onTypeSelected; final walletTypeImage = Image.asset('assets/images/wallet_type.png'); - final walletTypeLightImage = - Image.asset('assets/images/wallet_type_light.png'); + final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png'); @override String get title => S.current.wallet_list_restore_wallet; @override Widget body(BuildContext context) => WalletTypeForm( - onTypeSelected: onTypeSelected, - walletImage: currentTheme.type == ThemeType.dark - ? walletTypeImage - : walletTypeLightImage); + onTypeSelected: onTypeSelected, + walletImage: currentTheme.type == ThemeType.dark ? walletTypeImage : walletTypeLightImage); } class WalletTypeForm extends StatefulWidget { - WalletTypeForm({required this.onTypeSelected, - required this.walletImage}); + WalletTypeForm({required this.onTypeSelected, required this.walletImage}); final void Function(BuildContext, WalletType) onTypeSelected; final Image walletImage; @@ -39,22 +35,16 @@ class WalletTypeForm extends StatefulWidget { } class WalletTypeFormState extends State { - WalletTypeFormState() - : types = availableWalletTypes; + WalletTypeFormState() : types = availableWalletTypes; static const aspectRatioImage = 1.22; - final moneroIcon = - Image.asset('assets/images/monero_logo.png', height: 24, width: 24); - final bitcoinIcon = - Image.asset('assets/images/bitcoin.png', height: 24, width: 24); - final litecoinIcon = - Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24); + final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24); + final bitcoinIcon = Image.asset('assets/images/bitcoin.png', height: 24, width: 24); + final litecoinIcon = Image.asset('assets/images/litecoin_icon.png', height: 24, width: 24); final walletTypeImage = Image.asset('assets/images/wallet_type.png'); - final walletTypeLightImage = - Image.asset('assets/images/wallet_type_light.png'); - final havenIcon = - Image.asset('assets/images/haven_logo.png', height: 24, width: 24); + final walletTypeLightImage = Image.asset('assets/images/wallet_type_light.png'); + final havenIcon = Image.asset('assets/images/haven_logo.png', height: 24, width: 24); WalletType? selected; List types; @@ -74,9 +64,10 @@ class WalletTypeFormState extends State { children: [ Padding( padding: EdgeInsets.only(left: 12, right: 12), - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + child: SizedBox( + height: MediaQuery.of(context).size.height * 0.4, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fitWidth), + ), ), Padding( padding: EdgeInsets.only(top: 48), @@ -121,7 +112,8 @@ class WalletTypeFormState extends State { case WalletType.haven: return havenIcon; default: - throw Exception('_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}'); + throw Exception( + '_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}'); } } diff --git a/lib/src/screens/pin_code/pin_code_widget.dart b/lib/src/screens/pin_code/pin_code_widget.dart index a647f3d95..ea12dac13 100644 --- a/lib/src/screens/pin_code/pin_code_widget.dart +++ b/lib/src/screens/pin_code/pin_code_widget.dart @@ -4,14 +4,14 @@ import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; class PinCodeWidget extends StatefulWidget { - PinCodeWidget( - {required Key key, - required this.onFullPin, - required this.initialPinLength, - required this.onChangedPin, - required this.hasLengthSwitcher, - this.onChangedPinLength,}) - : super(key: key); + PinCodeWidget({ + required Key key, + required this.onFullPin, + required this.initialPinLength, + required this.onChangedPin, + required this.hasLengthSwitcher, + this.onChangedPinLength, + }) : super(key: key); final void Function(String pin, PinCodeState state) onFullPin; final void Function(String pin) onChangedPin; @@ -25,10 +25,10 @@ class PinCodeWidget extends StatefulWidget { class PinCodeState extends State { PinCodeState() - : _aspectRatio = 0, - pinLength = 0, - pin = '', - title = ''; + : _aspectRatio = 0, + pinLength = 0, + pin = '', + title = ''; static const defaultPinLength = fourPinLength; static const sixPinLength = 6; static const fourPinLength = 4; @@ -75,8 +75,7 @@ class PinCodeState extends State { void setDefaultPinLength() => changePinLength(widget.initialPinLength); void calculateAspectRatio() { - final renderBox = - _gridViewKey.currentContext!.findRenderObject() as RenderBox; + final renderBox = _gridViewKey.currentContext!.findRenderObject() as RenderBox; final cellWidth = renderBox.size.width / 3; final cellHeight = renderBox.size.height / 4; @@ -89,8 +88,7 @@ class PinCodeState extends State { void changeProcessText(String text) { hideProgressText(); - _progressBar = createBar(text, duration: null) - ..show(_key.currentContext!); + _progressBar = createBar(text, duration: null)..show(_key.currentContext!); } void close() { @@ -104,8 +102,8 @@ class PinCodeState extends State { } @override - Widget build(BuildContext context) => Scaffold( - key: _key, body: body(context), resizeToAvoidBottomInset: false); + Widget build(BuildContext context) => + Scaffold(key: _key, body: body(context), resizeToAvoidBottomInset: false); Widget body(BuildContext context) { final deleteIconImage = Image.asset( @@ -120,41 +118,38 @@ class PinCodeState extends State { return Container( color: Theme.of(context).backgroundColor, padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), - child: Column(children: [ - Spacer(flex: 2), - Text(title, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!)), - Spacer(flex: 3), - Container( - width: 180, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: List.generate(pinLength, (index) { - const size = 10.0; - final isFilled = pin.length > index ? pin[index] != null : false; + child: Column( + children: [ + Spacer(flex: 2), + Text(title, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!)), + Spacer(flex: 3), + Container( + width: 180, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: List.generate(pinLength, (index) { + const size = 10.0; + final isFilled = pin.length > index ? pin[index] != null : false; - return Container( - width: size, - height: size, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: isFilled - ? Theme.of(context).primaryTextTheme!.headline6!.color! - : Theme.of(context) - .accentTextTheme! - .bodyText2! - .color! - .withOpacity(0.25), - )); - }), + return Container( + width: size, + height: size, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: isFilled + ? Theme.of(context).primaryTextTheme!.headline6!.color! + : Theme.of(context).accentTextTheme!.bodyText2!.color!.withOpacity(0.25), + )); + }), + ), ), - ), - Spacer(flex: 2), - if (widget.hasLengthSwitcher) ...[ - TextButton( + Spacer(flex: 2), + if (widget.hasLengthSwitcher) ...[ + TextButton( onPressed: () { changePinLength(pinLength == PinCodeState.fourPinLength ? PinCodeState.sixPinLength @@ -165,109 +160,112 @@ class PinCodeState extends State { style: TextStyle( fontSize: 14.0, fontWeight: FontWeight.normal, - color: Theme.of(context) - .accentTextTheme! - .bodyText2! - .decorationColor!), - )) - ], - Spacer(flex: 1), - Flexible( + color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!), + ), + ) + ], + Spacer(flex: 1), + Flexible( flex: 24, - child: Container( + child: Center( + child: Container( + height: MediaQuery.of(context).size.height * 0.6, + width: MediaQuery.of(context).size.height * 0.6, key: _gridViewKey, child: _aspectRatio > 0 - ? GridView.count( - shrinkWrap: true, - crossAxisCount: 3, - childAspectRatio: _aspectRatio, - physics: const NeverScrollableScrollPhysics(), - children: List.generate(12, (index) { - const double marginRight = 15; - const double marginLeft = 15; + ? ScrollConfiguration( + behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), + child: GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: _aspectRatio, + physics: const NeverScrollableScrollPhysics(), + children: List.generate(12, (index) { + const double marginRight = 15; + const double marginLeft = 15; - if (index == 9) { - return Container( - margin: EdgeInsets.only( - left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => null, - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? null - // : () { - // FIXME -// if (authStore != null) { -// WidgetsBinding.instance.addPostFrameCallback((_) { -// final biometricAuth = BiometricAuth(); -// biometricAuth.isAuthenticated().then( -// (isAuth) { -// if (isAuth) { -// authStore.biometricAuth(); -// _key.currentState.showSnackBar( -// SnackBar( -// content: Text(S.of(context).authenticated), -// backgroundColor: Colors.green, -// ), -// ); -// } -// } -// ); -// }); -// } -// }, + if (index == 9) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => null, + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? null + // : () { + // FIXME + // if (authStore != null) { + // WidgetsBinding.instance.addPostFrameCallback((_) { + // final biometricAuth = BiometricAuth(); + // biometricAuth.isAuthenticated().then( + // (isAuth) { + // if (isAuth) { + // authStore.biometricAuth(); + // _key.currentState.showSnackBar( + // SnackBar( + // content: Text(S.of(context).authenticated), + // backgroundColor: Colors.green, + // ), + // ); + // } + // } + // ); + // }); + // } + // }, + // FIX-ME: Style + //color: Theme.of(context).backgroundColor, + //shape: CircleBorder(), + child: Container() + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? Offstage() + // : faceImage, + ), + ); + } else if (index == 10) { + index = 0; + } else if (index == 11) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _pop(), // FIX-ME: Style //color: Theme.of(context).backgroundColor, //shape: CircleBorder(), - child: Container() - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? Offstage() - // : faceImage, - ), - ); - } else if (index == 10) { - index = 0; - } else if (index == 11) { + child: deleteIconImage, + ), + ); + } else { + index++; + } + return Container( - margin: EdgeInsets.only( - left: marginLeft, right: marginRight), + margin: EdgeInsets.only(left: marginLeft, right: marginRight), child: TextButton( - onPressed: () => _pop(), + onPressed: () => _push(index), // FIX-ME: Style //color: Theme.of(context).backgroundColor, //shape: CircleBorder(), - child: deleteIconImage, + child: Text('$index', + style: TextStyle( + fontSize: 30.0, + fontWeight: FontWeight.w600, + color: + Theme.of(context).primaryTextTheme!.headline6!.color!)), ), ); - } else { - index++; - } - - return Container( - margin: EdgeInsets.only( - left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _push(index), - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: Text('$index', - style: TextStyle( - fontSize: 30.0, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline6! - .color!)), - ), - ); - }), + }), + ), ) - : null)) - ]), + : null, + ), + ), + ) + ], + ), ); } From 677305f6257669dea097e8c82f8d019621f1cf93 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Thu, 9 Feb 2023 22:53:02 +0200 Subject: [PATCH 02/19] - Listen to keyboard events in PIN screen - Fix PIN buttons style --- lib/src/screens/pin_code/pin_code_widget.dart | 263 ++++++++++-------- 1 file changed, 141 insertions(+), 122 deletions(-) diff --git a/lib/src/screens/pin_code/pin_code_widget.dart b/lib/src/screens/pin_code/pin_code_widget.dart index a647f3d95..2792474b2 100644 --- a/lib/src/screens/pin_code/pin_code_widget.dart +++ b/lib/src/screens/pin_code/pin_code_widget.dart @@ -2,6 +2,7 @@ import 'package:cake_wallet/utils/show_bar.dart'; import 'package:another_flushbar/flushbar.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/generated/i18n.dart'; +import 'package:flutter/services.dart'; class PinCodeWidget extends StatefulWidget { PinCodeWidget( @@ -117,87 +118,102 @@ class PinCodeState extends State { color: Theme.of(context).primaryTextTheme!.headline6!.color!, ); - return Container( - color: Theme.of(context).backgroundColor, - padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), - child: Column(children: [ - Spacer(flex: 2), - Text(title, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!)), - Spacer(flex: 3), - Container( - width: 180, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: List.generate(pinLength, (index) { - const size = 10.0; - final isFilled = pin.length > index ? pin[index] != null : false; + return RawKeyboardListener( + focusNode: FocusNode(), + autofocus: true, + onKey: (keyEvent) { + if (keyEvent is RawKeyDownEvent) { + if (keyEvent.logicalKey.keyLabel == "Backspace") { + _pop(); + return; + } + int? number = int.tryParse(keyEvent.character ?? ''); + if (number != null) { + _push(number); + } + } + }, + child: Container( + color: Theme.of(context).backgroundColor, + padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), + child: Column(children: [ + Spacer(flex: 2), + Text(title, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!)), + Spacer(flex: 3), + Container( + width: 180, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: List.generate(pinLength, (index) { + const size = 10.0; + final isFilled = pin.length > index ? pin[index] != null : false; - return Container( - width: size, - height: size, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: isFilled - ? Theme.of(context).primaryTextTheme!.headline6!.color! - : Theme.of(context) - .accentTextTheme! - .bodyText2! - .color! - .withOpacity(0.25), - )); - }), + return Container( + width: size, + height: size, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: isFilled + ? Theme.of(context).primaryTextTheme!.headline6!.color! + : Theme.of(context) + .accentTextTheme! + .bodyText2! + .color! + .withOpacity(0.25), + )); + }), + ), ), - ), - Spacer(flex: 2), - if (widget.hasLengthSwitcher) ...[ - TextButton( - onPressed: () { - changePinLength(pinLength == PinCodeState.fourPinLength - ? PinCodeState.sixPinLength - : PinCodeState.fourPinLength); - }, - child: Text( - _changePinLengthText(), - style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .accentTextTheme! - .bodyText2! - .decorationColor!), - )) - ], - Spacer(flex: 1), - Flexible( - flex: 24, - child: Container( - key: _gridViewKey, - child: _aspectRatio > 0 - ? GridView.count( - shrinkWrap: true, - crossAxisCount: 3, - childAspectRatio: _aspectRatio, - physics: const NeverScrollableScrollPhysics(), - children: List.generate(12, (index) { - const double marginRight = 15; - const double marginLeft = 15; + Spacer(flex: 2), + if (widget.hasLengthSwitcher) ...[ + TextButton( + onPressed: () { + changePinLength(pinLength == PinCodeState.fourPinLength + ? PinCodeState.sixPinLength + : PinCodeState.fourPinLength); + }, + child: Text( + _changePinLengthText(), + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.normal, + color: Theme.of(context) + .accentTextTheme! + .bodyText2! + .decorationColor!), + )) + ], + Spacer(flex: 1), + Flexible( + flex: 24, + child: Container( + key: _gridViewKey, + child: _aspectRatio > 0 + ? GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: _aspectRatio, + physics: const NeverScrollableScrollPhysics(), + children: List.generate(12, (index) { + const double marginRight = 15; + const double marginLeft = 15; - if (index == 9) { - return Container( - margin: EdgeInsets.only( - left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => null, - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? null - // : () { - // FIXME + if (index == 9) { + return Container( + margin: EdgeInsets.only( + left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => null, + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? null + // : () { + // FIXME // if (authStore != null) { // WidgetsBinding.instance.addPostFrameCallback((_) { // final biometricAuth = BiometricAuth(); @@ -217,57 +233,60 @@ class PinCodeState extends State { // }); // } // }, - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: Container() - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? Offstage() - // : faceImage, + // FIX-ME: Style + //color: Theme.of(context).backgroundColor, + //shape: CircleBorder(), + child: Container() + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? Offstage() + // : faceImage, + ), + ); + } else if (index == 10) { + index = 0; + } else if (index == 11) { + return Container( + margin: EdgeInsets.only( + left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _pop(), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), ), - ); - } else if (index == 10) { - index = 0; - } else if (index == 11) { + child: deleteIconImage, + ), + ); + } else { + index++; + } + return Container( margin: EdgeInsets.only( left: marginLeft, right: marginRight), child: TextButton( - onPressed: () => _pop(), - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: deleteIconImage, + onPressed: () => _push(index), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), + ), + child: Text('$index', + style: TextStyle( + fontSize: 30.0, + fontWeight: FontWeight.w600, + color: Theme.of(context) + .primaryTextTheme! + .headline6! + .color!)), ), ); - } else { - index++; - } - - return Container( - margin: EdgeInsets.only( - left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _push(index), - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: Text('$index', - style: TextStyle( - fontSize: 30.0, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline6! - .color!)), - ), - ); - }), - ) - : null)) - ]), + }), + ) + : null)) + ]), + ), ); } From 2ea360d81de9cca608e02cbc9577daa998727ca2 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Fri, 10 Feb 2023 18:15:05 +0200 Subject: [PATCH 03/19] Fix desktop nav bar UI --- lib/src/widgets/nav_bar.dart | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 657031bfa..fcea49656 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -74,7 +74,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { children: [ if (leading != null) Flexible(child: leading!), if (middle != null) middle!, - if (trailing != null) trailing!, + trailing ?? const SizedBox(), ], ), ), From 6d49e6a5433495f9054dc26953dc065d84bf33f8 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Fri, 10 Feb 2023 18:40:50 +0200 Subject: [PATCH 04/19] Add Marketplace to dashboard view --- .../dashboard/desktop_widgets/desktop_dashboard_actions.dart | 4 ++++ lib/src/widgets/market_place_item.dart | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart index 3e6b8afd9..d97ce8cd1 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart @@ -1,5 +1,6 @@ import 'package:cake_wallet/entities/main_actions.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_action_button.dart'; +import 'package:cake_wallet/src/screens/dashboard/widgets/market_place_page.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:flutter/material.dart'; @@ -65,6 +66,9 @@ class DesktopDashboardActions extends StatelessWidget { ), ], ), + Expanded( + child: MarketPlacePage(dashboardViewModel: dashboardViewModel), + ), ], ); } diff --git a/lib/src/widgets/market_place_item.dart b/lib/src/widgets/market_place_item.dart index 8049a6346..8b8963bbe 100644 --- a/lib/src/widgets/market_place_item.dart +++ b/lib/src/widgets/market_place_item.dart @@ -15,7 +15,7 @@ class MarketPlaceItem extends StatelessWidget { @override Widget build(BuildContext context) { - return InkWell( + return GestureDetector( onTap: onTap, child: Stack( children: [ From 32d2bf2c850fa9d81d86f9363a3d1681fdefa296 Mon Sep 17 00:00:00 2001 From: Godwin Asuquo Date: Fri, 10 Feb 2023 20:07:53 +0200 Subject: [PATCH 05/19] Update widget contraints --- .../screens/new_wallet/new_wallet_page.dart | 240 +++++++++--------- .../new_wallet/new_wallet_type_page.dart | 80 +++--- 2 files changed, 168 insertions(+), 152 deletions(-) diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 5f7494559..175663d93 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -50,7 +50,7 @@ class _WalletNameFormState extends State { _languageSelectorKey = GlobalKey(), _controller = TextEditingController(); - // static const aspectRatioImage = 1.22; + static const aspectRatioImage = 1.22; final GlobalKey _formKey; final GlobalKey _languageSelectorKey; @@ -84,126 +84,138 @@ class _WalletNameFormState extends State { @override Widget build(BuildContext context) { - return Container( + return Padding( padding: EdgeInsets.only(top: 24), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ - Padding( - padding: EdgeInsets.only(left: 12, right: 12), - child: SizedBox( - height: MediaQuery.of(context).size.height * 0.4, - child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: Form( - key: _formKey, - child: Stack( - alignment: Alignment.centerRight, - children: [ - TextFormField( - onChanged: (value) => _walletNewVM.name = value, - controller: _controller, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 20.0, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), - decoration: InputDecoration( - hintStyle: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).accentTextTheme!.headline2!.color!), - hintText: S.of(context).wallet_name, - focusedBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: - Theme.of(context).accentTextTheme!.headline2!.decorationColor!, - width: 1.0)), - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Theme.of(context).accentTextTheme!.headline2!.decorationColor!, - width: 1.0), - ), - suffixIcon: IconButton( - onPressed: () async { - final rName = await generateName(); - FocusManager.instance.primaryFocus?.unfocus(); - - setState(() { - _controller.text = rName; - _walletNewVM.name = rName; - _controller.selection = TextSelection.fromPosition( - TextPosition(offset: _controller.text.length)); - }); - }, - icon: Container( - padding: const EdgeInsets.all(8), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(6.0), - color: Theme.of(context).hintColor, + child: Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 600), + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ + Padding( + padding: EdgeInsets.only(left: 12, right: 12), + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: Form( + key: _formKey, + child: Stack( + alignment: Alignment.centerRight, + children: [ + TextFormField( + onChanged: (value) => _walletNewVM.name = value, + controller: _controller, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20.0, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + decoration: InputDecoration( + hintStyle: TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).accentTextTheme!.headline2!.color!), + hintText: S.of(context).wallet_name, + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Theme.of(context) + .accentTextTheme! + .headline2! + .decorationColor!, + width: 1.0)), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Theme.of(context) + .accentTextTheme! + .headline2! + .decorationColor!, + width: 1.0), ), - width: 34, - height: 34, - child: Image.asset( - 'assets/images/refresh_icon.png', - color: - Theme.of(context).primaryTextTheme!.headline4!.decorationColor!, + suffixIcon: IconButton( + onPressed: () async { + final rName = await generateName(); + FocusManager.instance.primaryFocus?.unfocus(); + + setState(() { + _controller.text = rName; + _walletNewVM.name = rName; + _controller.selection = TextSelection.fromPosition( + TextPosition(offset: _controller.text.length)); + }); + }, + icon: Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(6.0), + color: Theme.of(context).hintColor, + ), + width: 34, + height: 34, + child: Image.asset( + 'assets/images/refresh_icon.png', + color: Theme.of(context) + .primaryTextTheme! + .headline4! + .decorationColor!, + ), + ), ), ), + validator: WalletNameValidator(), ), - ), - validator: WalletNameValidator(), + ], ), - ], + ), ), - ), - ), - if (_walletNewVM.hasLanguageSelector) ...[ - Padding( - padding: EdgeInsets.only(top: 40), - child: Text( - S.of(context).seed_language_choose, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), - ), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: SeedLanguageSelector( - key: _languageSelectorKey, initialSelected: defaultSeedLanguage), - ) - ] - ]), - bottomSectionPadding: EdgeInsets.all(24), - bottomSection: Column( - children: [ - Observer( - builder: (context) { - return LoadingPrimaryButton( - onPressed: _confirmForm, - text: S.of(context).seed_language_next, - color: Colors.green, - textColor: Colors.white, - isLoading: _walletNewVM.state is IsExecutingState, - isDisabled: _walletNewVM.name.isEmpty, - ); - }, - ), - const SizedBox(height: 25), - GestureDetector( - onTap: () { - Navigator.of(context) - .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); - }, - child: Text(S.of(context).advanced_privacy_settings), - ), - ], - )), + if (_walletNewVM.hasLanguageSelector) ...[ + Padding( + padding: EdgeInsets.only(top: 40), + child: Text( + S.of(context).seed_language_choose, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + ), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: SeedLanguageSelector( + key: _languageSelectorKey, initialSelected: defaultSeedLanguage), + ) + ] + ]), + bottomSectionPadding: EdgeInsets.all(24), + bottomSection: Column( + children: [ + Observer( + builder: (context) { + return LoadingPrimaryButton( + onPressed: _confirmForm, + text: S.of(context).seed_language_next, + color: Colors.green, + textColor: Colors.white, + isLoading: _walletNewVM.state is IsExecutingState, + isDisabled: _walletNewVM.name.isEmpty, + ); + }, + ), + const SizedBox(height: 25), + GestureDetector( + onTap: () { + Navigator.of(context) + .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); + }, + child: Text(S.of(context).advanced_privacy_settings), + ), + ], + )), + ), + ), ); } diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 34ab99453..e7bd19992 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -57,46 +57,50 @@ class WalletTypeFormState extends State { @override Widget build(BuildContext context) { - return ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Padding( - padding: EdgeInsets.only(left: 12, right: 12), - child: SizedBox( - height: MediaQuery.of(context).size.height * 0.4, - child: FittedBox(child: widget.walletImage, fit: BoxFit.fitWidth), - ), + return Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 600), + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.only(left: 12, right: 12), + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + ), + Padding( + padding: EdgeInsets.only(top: 48), + child: Text( + S.of(context).choose_wallet_currency, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme.headline6!.color!), + ), + ), + ...types.map((type) => Padding( + padding: EdgeInsets.only(top: 24), + child: SelectButton( + image: _iconFor(type), + text: walletTypeToDisplayName(type), + isSelected: selected == type, + onTap: () => setState(() => selected = type)), + )) + ], ), - Padding( - padding: EdgeInsets.only(top: 48), - child: Text( - S.of(context).choose_wallet_currency, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme.headline6!.color!), - ), + bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + bottomSection: PrimaryButton( + onPressed: () => onTypeSelected(), + text: S.of(context).seed_language_next, + color: Theme.of(context).accentTextTheme.bodyText1!.color!, + textColor: Colors.white, + isDisabled: selected == null, ), - ...types.map((type) => Padding( - padding: EdgeInsets.only(top: 24), - child: SelectButton( - image: _iconFor(type), - text: walletTypeToDisplayName(type), - isSelected: selected == type, - onTap: () => setState(() => selected = type)), - )) - ], - ), - bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: PrimaryButton( - onPressed: () => onTypeSelected(), - text: S.of(context).seed_language_next, - color: Theme.of(context).accentTextTheme.bodyText1!.color!, - textColor: Colors.white, - isDisabled: selected == null, + ), ), ); } From eb3b24643746e81ac4eb5f95879488cb4a92a8a1 Mon Sep 17 00:00:00 2001 From: Godwin Asuquo Date: Fri, 10 Feb 2023 20:19:13 +0200 Subject: [PATCH 06/19] Add empty trailing to center page title on desktop --- lib/src/screens/new_wallet/new_wallet_page.dart | 3 +++ lib/src/screens/new_wallet/new_wallet_type_page.dart | 3 +++ 2 files changed, 6 insertions(+) diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 175663d93..7c1e9a88d 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -29,6 +29,9 @@ class NewWalletPage extends BasePage { @override String get title => S.current.new_wallet; + @override + Widget trailing(BuildContext context) => SizedBox.shrink(); + @override Widget body(BuildContext context) => WalletNameForm( _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage); diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index e7bd19992..8c81952bf 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -18,6 +18,9 @@ class NewWalletTypePage extends BasePage { @override String get title => S.current.wallet_list_restore_wallet; + @override + Widget trailing(BuildContext context) => SizedBox.shrink(); + @override Widget body(BuildContext context) => WalletTypeForm( onTypeSelected: onTypeSelected, From 2b2bebe98f45b30bcd7eaaf74c40fb79ab49f845 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Fri, 10 Feb 2023 20:26:07 +0200 Subject: [PATCH 07/19] Refresh desktop dashboard actions on wallet change --- .../desktop_dashboard_actions.dart | 109 +++++++++--------- 1 file changed, 57 insertions(+), 52 deletions(-) diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart index 3e6b8afd9..1227ea478 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_actions.dart @@ -2,6 +2,7 @@ import 'package:cake_wallet/entities/main_actions.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_action_button.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_mobx/flutter_mobx.dart'; class DesktopDashboardActions extends StatelessWidget { final DashboardViewModel dashboardViewModel; @@ -10,62 +11,66 @@ class DesktopDashboardActions extends StatelessWidget { @override Widget build(BuildContext context) { - return Column( - children: [ - const SizedBox(height: 16), - DesktopActionButton( - title: MainActions.exchangeAction.name(context), - image: MainActions.exchangeAction.image, - canShow: MainActions.exchangeAction.canShow?.call(dashboardViewModel), - isEnabled: MainActions.exchangeAction.isEnabled?.call(dashboardViewModel), - onTap: () async => await MainActions.exchangeAction.onTap(context, dashboardViewModel), - ), - Row( + return Observer( + builder: (_) { + return Column( children: [ - Expanded( - child: DesktopActionButton( - title: MainActions.receiveAction.name(context), - image: MainActions.receiveAction.image, - canShow: MainActions.receiveAction.canShow?.call(dashboardViewModel), - isEnabled: MainActions.receiveAction.isEnabled?.call(dashboardViewModel), - onTap: () async => - await MainActions.receiveAction.onTap(context, dashboardViewModel), - ), + const SizedBox(height: 16), + DesktopActionButton( + title: MainActions.exchangeAction.name(context), + image: MainActions.exchangeAction.image, + canShow: MainActions.exchangeAction.canShow?.call(dashboardViewModel), + isEnabled: MainActions.exchangeAction.isEnabled?.call(dashboardViewModel), + onTap: () async => await MainActions.exchangeAction.onTap(context, dashboardViewModel), ), - Expanded( - child: DesktopActionButton( - title: MainActions.sendAction.name(context), - image: MainActions.sendAction.image, - canShow: MainActions.sendAction.canShow?.call(dashboardViewModel), - isEnabled: MainActions.sendAction.isEnabled?.call(dashboardViewModel), - onTap: () async => await MainActions.sendAction.onTap(context, dashboardViewModel), - ), + Row( + children: [ + Expanded( + child: DesktopActionButton( + title: MainActions.receiveAction.name(context), + image: MainActions.receiveAction.image, + canShow: MainActions.receiveAction.canShow?.call(dashboardViewModel), + isEnabled: MainActions.receiveAction.isEnabled?.call(dashboardViewModel), + onTap: () async => + await MainActions.receiveAction.onTap(context, dashboardViewModel), + ), + ), + Expanded( + child: DesktopActionButton( + title: MainActions.sendAction.name(context), + image: MainActions.sendAction.image, + canShow: MainActions.sendAction.canShow?.call(dashboardViewModel), + isEnabled: MainActions.sendAction.isEnabled?.call(dashboardViewModel), + onTap: () async => await MainActions.sendAction.onTap(context, dashboardViewModel), + ), + ), + ], + ), + Row( + children: [ + Expanded( + child: DesktopActionButton( + title: MainActions.buyAction.name(context), + image: MainActions.buyAction.image, + canShow: MainActions.buyAction.canShow?.call(dashboardViewModel), + isEnabled: MainActions.buyAction.isEnabled?.call(dashboardViewModel), + onTap: () async => await MainActions.buyAction.onTap(context, dashboardViewModel), + ), + ), + Expanded( + child: DesktopActionButton( + title: MainActions.sellAction.name(context), + image: MainActions.sellAction.image, + canShow: MainActions.sellAction.canShow?.call(dashboardViewModel), + isEnabled: MainActions.sellAction.isEnabled?.call(dashboardViewModel), + onTap: () async => await MainActions.sellAction.onTap(context, dashboardViewModel), + ), + ), + ], ), ], - ), - Row( - children: [ - Expanded( - child: DesktopActionButton( - title: MainActions.buyAction.name(context), - image: MainActions.buyAction.image, - canShow: MainActions.buyAction.canShow?.call(dashboardViewModel), - isEnabled: MainActions.buyAction.isEnabled?.call(dashboardViewModel), - onTap: () async => await MainActions.buyAction.onTap(context, dashboardViewModel), - ), - ), - Expanded( - child: DesktopActionButton( - title: MainActions.sellAction.name(context), - image: MainActions.sellAction.image, - canShow: MainActions.sellAction.canShow?.call(dashboardViewModel), - isEnabled: MainActions.sellAction.isEnabled?.call(dashboardViewModel), - onTap: () async => await MainActions.sellAction.onTap(context, dashboardViewModel), - ), - ), - ], - ), - ], + ); + } ); } } From 887afdadd002c7f73786b7c67ac5f49cfb23a811 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Fri, 10 Feb 2023 20:39:23 +0200 Subject: [PATCH 08/19] Change ionia welcome page animation --- lib/router.dart | 5 ++++- lib/src/widgets/market_place_item.dart | 5 ++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/lib/router.dart b/lib/router.dart index 83d247e76..0e0d82ff6 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -444,7 +444,10 @@ Route createRoute(RouteSettings settings) { )); case Routes.ioniaWelcomePage: - return CupertinoPageRoute(builder: (_) => getIt.get()); + return CupertinoPageRoute( + fullscreenDialog: true, + builder: (_) => getIt.get(), + ); case Routes.ioniaLoginPage: return CupertinoPageRoute( builder: (_) => getIt.get()); diff --git a/lib/src/widgets/market_place_item.dart b/lib/src/widgets/market_place_item.dart index 8b8963bbe..438391c97 100644 --- a/lib/src/widgets/market_place_item.dart +++ b/lib/src/widgets/market_place_item.dart @@ -15,8 +15,11 @@ class MarketPlaceItem extends StatelessWidget { @override Widget build(BuildContext context) { - return GestureDetector( + return InkWell( onTap: onTap, + hoverColor: Colors.transparent, + splashColor: Colors.transparent, + highlightColor: Colors.transparent, child: Stack( children: [ Container( From 5fa50c76684e6b784c96e28121912d9948c958a5 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Fri, 10 Feb 2023 23:27:19 +0200 Subject: [PATCH 09/19] Fix Constrained width screens UI --- .../screens/new_wallet/new_wallet_page.dart | 243 +++++++------- .../new_wallet/new_wallet_type_page.dart | 35 +- lib/src/screens/pin_code/pin_code_widget.dart | 300 +++++++++--------- lib/utils/responsive_layout_util.dart | 1 + 4 files changed, 299 insertions(+), 280 deletions(-) diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 7c1e9a88d..054961c44 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/entities/generate_name.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:mobx/mobx.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -29,9 +30,6 @@ class NewWalletPage extends BasePage { @override String get title => S.current.new_wallet; - @override - Widget trailing(BuildContext context) => SizedBox.shrink(); - @override Widget body(BuildContext context) => WalletNameForm( _walletNewVM, currentTheme.type == ThemeType.dark ? walletNameImage : walletNameLightImage); @@ -89,136 +87,143 @@ class _WalletNameFormState extends State { Widget build(BuildContext context) { return Padding( padding: EdgeInsets.only(top: 24), - child: Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 600), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [ - Padding( - padding: EdgeInsets.only(left: 12, right: 12), - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: Form( - key: _formKey, - child: Stack( - alignment: Alignment.centerRight, - children: [ - TextFormField( - onChanged: (value) => _walletNewVM.name = value, - controller: _controller, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 20.0, - fontWeight: FontWeight.w600, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), - decoration: InputDecoration( - hintStyle: TextStyle( - fontSize: 18.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).accentTextTheme!.headline2!.color!), - hintText: S.of(context).wallet_name, - focusedBorder: UnderlineInputBorder( + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Center( + child: ConstrainedBox( + constraints: + BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.only(left: 12, right: 12), + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: Form( + key: _formKey, + child: Stack( + alignment: Alignment.centerRight, + children: [ + TextFormField( + onChanged: (value) => _walletNewVM.name = value, + controller: _controller, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20.0, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + decoration: InputDecoration( + hintStyle: TextStyle( + fontSize: 18.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).accentTextTheme!.headline2!.color!), + hintText: S.of(context).wallet_name, + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: Theme.of(context) + .accentTextTheme! + .headline2! + .decorationColor!, + width: 1.0)), + enabledBorder: UnderlineInputBorder( borderSide: BorderSide( color: Theme.of(context) .accentTextTheme! .headline2! .decorationColor!, - width: 1.0)), - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Theme.of(context) - .accentTextTheme! - .headline2! - .decorationColor!, - width: 1.0), - ), - suffixIcon: IconButton( - onPressed: () async { - final rName = await generateName(); - FocusManager.instance.primaryFocus?.unfocus(); + width: 1.0), + ), + suffixIcon: IconButton( + onPressed: () async { + final rName = await generateName(); + FocusManager.instance.primaryFocus?.unfocus(); - setState(() { - _controller.text = rName; - _walletNewVM.name = rName; - _controller.selection = TextSelection.fromPosition( - TextPosition(offset: _controller.text.length)); - }); - }, - icon: Container( - padding: const EdgeInsets.all(8), - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(6.0), - color: Theme.of(context).hintColor, - ), - width: 34, - height: 34, - child: Image.asset( - 'assets/images/refresh_icon.png', - color: Theme.of(context) - .primaryTextTheme! - .headline4! - .decorationColor!, + setState(() { + _controller.text = rName; + _walletNewVM.name = rName; + _controller.selection = TextSelection.fromPosition( + TextPosition(offset: _controller.text.length)); + }); + }, + icon: Container( + padding: const EdgeInsets.all(8), + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(6.0), + color: Theme.of(context).hintColor, + ), + width: 34, + height: 34, + child: Image.asset( + 'assets/images/refresh_icon.png', + color: Theme.of(context) + .primaryTextTheme! + .headline4! + .decorationColor!, + ), ), ), ), + validator: WalletNameValidator(), ), - validator: WalletNameValidator(), - ), - ], + ], + ), ), ), - ), - if (_walletNewVM.hasLanguageSelector) ...[ - Padding( - padding: EdgeInsets.only(top: 40), - child: Text( - S.of(context).seed_language_choose, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16.0, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!), + if (_walletNewVM.hasLanguageSelector) ...[ + Padding( + padding: EdgeInsets.only(top: 40), + child: Text( + S.of(context).seed_language_choose, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!), + ), ), - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: SeedLanguageSelector( - key: _languageSelectorKey, initialSelected: defaultSeedLanguage), - ) - ] - ]), - bottomSectionPadding: EdgeInsets.all(24), - bottomSection: Column( - children: [ - Observer( - builder: (context) { - return LoadingPrimaryButton( - onPressed: _confirmForm, - text: S.of(context).seed_language_next, - color: Colors.green, - textColor: Colors.white, - isLoading: _walletNewVM.state is IsExecutingState, - isDisabled: _walletNewVM.name.isEmpty, - ); - }, - ), - const SizedBox(height: 25), - GestureDetector( - onTap: () { - Navigator.of(context) - .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); - }, - child: Text(S.of(context).advanced_privacy_settings), - ), + Padding( + padding: EdgeInsets.only(top: 24), + child: SeedLanguageSelector( + key: _languageSelectorKey, initialSelected: defaultSeedLanguage), + ) + ] ], - )), - ), - ), + ), + ), + ), + bottomSectionPadding: EdgeInsets.all(24), + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + children: [ + Observer( + builder: (context) { + return LoadingPrimaryButton( + onPressed: _confirmForm, + text: S.of(context).seed_language_next, + color: Colors.green, + textColor: Colors.white, + isLoading: _walletNewVM.state is IsExecutingState, + isDisabled: _walletNewVM.name.isEmpty, + ); + }, + ), + const SizedBox(height: 25), + GestureDetector( + onTap: () { + Navigator.of(context) + .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); + }, + child: Text(S.of(context).advanced_privacy_settings), + ), + ], + ), + )), ); } diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 8c81952bf..3493f60e0 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/themes/theme_base.dart'; import 'package:flutter/material.dart'; @@ -18,9 +19,6 @@ class NewWalletTypePage extends BasePage { @override String get title => S.current.wallet_list_restore_wallet; - @override - Widget trailing(BuildContext context) => SizedBox.shrink(); - @override Widget body(BuildContext context) => WalletTypeForm( onTypeSelected: onTypeSelected, @@ -60,12 +58,12 @@ class WalletTypeFormState extends State { @override Widget build(BuildContext context) { - return Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 600), - child: ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Column( + return ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Padding( @@ -95,14 +93,17 @@ class WalletTypeFormState extends State { )) ], ), - bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: PrimaryButton( - onPressed: () => onTypeSelected(), - text: S.of(context).seed_language_next, - color: Theme.of(context).accentTextTheme.bodyText1!.color!, - textColor: Colors.white, - isDisabled: selected == null, - ), + ), + ), + bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: PrimaryButton( + onPressed: () => onTypeSelected(), + text: S.of(context).seed_language_next, + color: Theme.of(context).accentTextTheme.bodyText1!.color!, + textColor: Colors.white, + isDisabled: selected == null, ), ), ); diff --git a/lib/src/screens/pin_code/pin_code_widget.dart b/lib/src/screens/pin_code/pin_code_widget.dart index e0d1360d0..8f30136d0 100644 --- a/lib/src/screens/pin_code/pin_code_widget.dart +++ b/lib/src/screens/pin_code/pin_code_widget.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/utils/show_bar.dart'; import 'package:another_flushbar/flushbar.dart'; import 'package:flutter/material.dart'; @@ -134,154 +135,165 @@ class PinCodeState extends State { child: Container( color: Theme.of(context).backgroundColor, padding: EdgeInsets.only(left: 40.0, right: 40.0, bottom: 40.0), - child: Column(children: [ - Spacer(flex: 2), - Text(title, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.w500, - color: Theme.of(context).primaryTextTheme!.headline6!.color!)), - Spacer(flex: 3), - Container( - width: 180, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: List.generate(pinLength, (index) { - const size = 10.0; - final isFilled = pin.length > index ? pin[index] != null : false; - - return Container( - width: size, - height: size, - decoration: BoxDecoration( - shape: BoxShape.circle, - color: isFilled - ? Theme.of(context).primaryTextTheme!.headline6!.color! - : Theme.of(context).accentTextTheme!.bodyText2!.color!.withOpacity(0.25), - )); - }), - ), - ), - Spacer(flex: 2), - if (widget.hasLengthSwitcher) ...[ - TextButton( - onPressed: () { - changePinLength(pinLength == PinCodeState.fourPinLength - ? PinCodeState.sixPinLength - : PinCodeState.fourPinLength); - }, - child: Text( - _changePinLengthText(), + child: Column( + children: [ + Spacer(flex: 2), + Text(title, style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.normal, - color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!), + fontSize: 20, + fontWeight: FontWeight.w500, + color: Theme.of(context).primaryTextTheme!.headline6!.color!)), + Spacer(flex: 3), + Container( + width: 180, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: List.generate(pinLength, (index) { + const size = 10.0; + final isFilled = pin.length > index ? pin[index] != null : false; + + return Container( + width: size, + height: size, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: isFilled + ? Theme.of(context).primaryTextTheme!.headline6!.color! + : Theme.of(context) + .accentTextTheme! + .bodyText2! + .color! + .withOpacity(0.25), + )); + }), + ), + ), + Spacer(flex: 2), + if (widget.hasLengthSwitcher) ...[ + TextButton( + onPressed: () { + changePinLength(pinLength == PinCodeState.fourPinLength + ? PinCodeState.sixPinLength + : PinCodeState.fourPinLength); + }, + child: Text( + _changePinLengthText(), + style: TextStyle( + fontSize: 14.0, + fontWeight: FontWeight.normal, + color: Theme.of(context).accentTextTheme!.bodyText2!.decorationColor!), + ), + ) + ], + Spacer(flex: 1), + Flexible( + flex: 24, + child: Center( + child: ConstrainedBox( + constraints: BoxConstraints( + maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint, + ), + child: Container( + key: _gridViewKey, + child: _aspectRatio > 0 + ? ScrollConfiguration( + behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), + child: GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: _aspectRatio, + physics: const NeverScrollableScrollPhysics(), + children: List.generate(12, (index) { + const double marginRight = 15; + const double marginLeft = 15; + + if (index == 9) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => null, + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? null + // : () { + // FIXME + // if (authStore != null) { + // WidgetsBinding.instance.addPostFrameCallback((_) { + // final biometricAuth = BiometricAuth(); + // biometricAuth.isAuthenticated().then( + // (isAuth) { + // if (isAuth) { + // authStore.biometricAuth(); + // _key.currentState.showSnackBar( + // SnackBar( + // content: Text(S.of(context).authenticated), + // backgroundColor: Colors.green, + // ), + // ); + // } + // } + // ); + // }); + // } + // }, + // FIX-ME: Style + //color: Theme.of(context).backgroundColor, + //shape: CircleBorder(), + child: Container() + // (widget.hasLengthSwitcher || + // !settingsStore + // .allowBiometricalAuthentication) + // ? Offstage() + // : faceImage, + ), + ); + } else if (index == 10) { + index = 0; + } else if (index == 11) { + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _pop(), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), + ), + child: deleteIconImage, + ), + ); + } else { + index++; + } + + return Container( + margin: EdgeInsets.only(left: marginLeft, right: marginRight), + child: TextButton( + onPressed: () => _push(index), + style: TextButton.styleFrom( + backgroundColor: Theme.of(context).backgroundColor, + shape: CircleBorder(), + ), + child: Text('$index', + style: TextStyle( + fontSize: 30.0, + fontWeight: FontWeight.w600, + color: Theme.of(context) + .primaryTextTheme! + .headline6! + .color!)), + ), + ); + }), + ), + ) + : null, + ), + ), ), ) ], - Spacer(flex: 1), - Flexible( - flex: 24, - child: Center( - child: Container( - height: MediaQuery.of(context).size.height * 0.6, - width: MediaQuery.of(context).size.height * 0.6, - key: _gridViewKey, - child: _aspectRatio > 0 - ? ScrollConfiguration( - behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false), - child: GridView.count( - shrinkWrap: true, - crossAxisCount: 3, - childAspectRatio: _aspectRatio, - physics: const NeverScrollableScrollPhysics(), - children: List.generate(12, (index) { - const double marginRight = 15; - const double marginLeft = 15; - - if (index == 9) { - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => null, - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? null - // : () { - // FIXME - // if (authStore != null) { - // WidgetsBinding.instance.addPostFrameCallback((_) { - // final biometricAuth = BiometricAuth(); - // biometricAuth.isAuthenticated().then( - // (isAuth) { - // if (isAuth) { - // authStore.biometricAuth(); - // _key.currentState.showSnackBar( - // SnackBar( - // content: Text(S.of(context).authenticated), - // backgroundColor: Colors.green, - // ), - // ); - // } - // } - // ); - // }); - // } - // }, - // FIX-ME: Style - //color: Theme.of(context).backgroundColor, - //shape: CircleBorder(), - child: Container() - // (widget.hasLengthSwitcher || - // !settingsStore - // .allowBiometricalAuthentication) - // ? Offstage() - // : faceImage, - ), - ); - } else if (index == 10) { - index = 0; - } else if (index == 11) { - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _pop(), - style: TextButton.styleFrom( - backgroundColor: Theme.of(context).backgroundColor, - shape: CircleBorder(), - ), - child: deleteIconImage, - ), - ); - } else { - index++; - } - - return Container( - margin: EdgeInsets.only(left: marginLeft, right: marginRight), - child: TextButton( - onPressed: () => _push(index), - style: TextButton.styleFrom( - backgroundColor: Theme.of(context).backgroundColor, - shape: CircleBorder(), - ), - child: Text('$index', - style: TextStyle( - fontSize: 30.0, - fontWeight: FontWeight.w600, - color: - Theme.of(context).primaryTextTheme!.headline6!.color!)), - ), - ); - }), - ), - ) - : null, - ), - ), - ) - ], + ), ), ); } diff --git a/lib/utils/responsive_layout_util.dart b/lib/utils/responsive_layout_util.dart index c1e59722c..d685b40d2 100644 --- a/lib/utils/responsive_layout_util.dart +++ b/lib/utils/responsive_layout_util.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; class ResponsiveLayoutUtil { static const double _kMobileThreshold = 900; + static const double kDesktopMaxWidthConstraint = 400; const ResponsiveLayoutUtil._(); From dd13172cfeb701dcccf0d9809bc0744632aa0ef4 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Sat, 11 Feb 2023 00:41:48 +0200 Subject: [PATCH 10/19] Add max width constrain to Welcome page --- lib/src/screens/welcome/welcome_page.dart | 256 ++++++++++------------ 1 file changed, 111 insertions(+), 145 deletions(-) diff --git a/lib/src/screens/welcome/welcome_page.dart b/lib/src/screens/welcome/welcome_page.dart index a50d8ba8c..86e1cbcf1 100644 --- a/lib/src/screens/welcome/welcome_page.dart +++ b/lib/src/screens/welcome/welcome_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; @@ -19,7 +20,7 @@ class WelcomePage extends BasePage { if (isHaven) { return S.of(context).haven_app; } - + return S.of(context).cake_wallet; } @@ -31,172 +32,137 @@ class WelcomePage extends BasePage { if (isHaven) { return S.of(context).haven_app_wallet_text; } - + return S.of(context).first_wallet_text; } @override Widget build(BuildContext context) { return Scaffold( - backgroundColor: Theme - .of(context) - .backgroundColor, + backgroundColor: Theme.of(context).backgroundColor, resizeToAvoidBottomInset: false, body: body(context)); } @override Widget body(BuildContext context) { - final welcomeImage = currentTheme.type == ThemeType.dark - ? welcomeImageDark : welcomeImageLight; + final welcomeImage = currentTheme.type == ThemeType.dark ? welcomeImageDark : welcomeImageLight; final newWalletImage = Image.asset('assets/images/new_wallet.png', height: 12, width: 12, - color: Theme - .of(context) - .accentTextTheme! - .headline5! - .decorationColor!); + color: Theme.of(context).accentTextTheme!.headline5!.decorationColor!); final restoreWalletImage = Image.asset('assets/images/restore_wallet.png', - height: 12, - width: 12, - color: Theme.of(context) - .primaryTextTheme! - .headline6! - .color!); + height: 12, width: 12, color: Theme.of(context).primaryTextTheme!.headline6!.color!); - return WillPopScope(onWillPop: () async => false, child: Container( - padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24), - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Flexible( - flex: 2, - child: AspectRatio( - aspectRatio: aspectRatioImage, - child: FittedBox(child: welcomeImage, fit: BoxFit.fill) - ) - ), - Flexible( - flex: 3, + return WillPopScope( + onWillPop: () async => false, + child: Container( + padding: EdgeInsets.only(top: 64, bottom: 24, left: 24, right: 24), + child: Center( + child: ConstrainedBox( + constraints: + BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ - Column( - children: [ - Padding( - padding: EdgeInsets.only(top: 24), - child: Text( - S - .of(context) - .welcome, - style: TextStyle( - fontSize: 18, - fontWeight: FontWeight.w500, - color: Theme - .of(context) - .accentTextTheme! - .headline2! - .color!, + Flexible( + flex: 2, + child: AspectRatio( + aspectRatio: aspectRatioImage, + child: FittedBox(child: welcomeImage, fit: BoxFit.fill))), + Flexible( + flex: 3, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 24), + child: Text( + S.of(context).welcome, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w500, + color: Theme.of(context).accentTextTheme!.headline2!.color!, + ), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: EdgeInsets.only(top: 5), + child: Text( + appTitle(context), + style: TextStyle( + fontSize: 36, + fontWeight: FontWeight.bold, + color: Theme.of(context).primaryTextTheme!.headline6!.color!, + ), + textAlign: TextAlign.center, + ), + ), + Padding( + padding: EdgeInsets.only(top: 5), + child: Text( + appDescription(context), + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Theme.of(context).accentTextTheme!.headline2!.color!, + ), + textAlign: TextAlign.center, + ), + ), + ], ), - textAlign: TextAlign.center, - ), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Text( - appTitle(context), - style: TextStyle( - fontSize: 36, - fontWeight: FontWeight.bold, - color: Theme.of(context) - .primaryTextTheme! - .headline6! - .color!, - ), - textAlign: TextAlign.center, - ), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Text( - appDescription(context), - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Theme - .of(context) - .accentTextTheme! - .headline2! - .color!, - ), - textAlign: TextAlign.center, - ), - ), - ], - ), - Column( - children: [ - Text( - S - .of(context) - .please_make_selection, - style: TextStyle( - fontSize: 12, - fontWeight: FontWeight.normal, - color: Theme.of(context) - .accentTextTheme! - .headline2! - .color!, - ), - textAlign: TextAlign.center, - ), - Padding( - padding: EdgeInsets.only(top: 24), - child: PrimaryImageButton( - onPressed: () => - Navigator.pushNamed(context, - Routes.newWalletFromWelcome), - image: newWalletImage, - text: S.of(context).create_new, - color: Theme.of(context) - .accentTextTheme! - .subtitle2! - .decorationColor!, - textColor: Theme - .of(context) - .accentTextTheme! - .headline5! - .decorationColor!, - ), - ), - Padding( - padding: EdgeInsets.only(top: 10), - child: PrimaryImageButton( - onPressed: () { - Navigator.pushNamed(context, Routes.restoreOptions); - }, - image: restoreWalletImage, - text: S - .of(context) - .restore_wallet, - color: Theme.of(context) - .accentTextTheme! - .caption! - .color!, - textColor: Theme.of(context) - .primaryTextTheme! - .headline6! - .color!), - ) - ], - ) + Column( + children: [ + Text( + S.of(context).please_make_selection, + style: TextStyle( + fontSize: 12, + fontWeight: FontWeight.normal, + color: Theme.of(context).accentTextTheme!.headline2!.color!, + ), + textAlign: TextAlign.center, + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: PrimaryImageButton( + onPressed: () => + Navigator.pushNamed(context, Routes.newWalletFromWelcome), + image: newWalletImage, + text: S.of(context).create_new, + color: Theme.of(context) + .accentTextTheme! + .subtitle2! + .decorationColor!, + textColor: Theme.of(context) + .accentTextTheme! + .headline5! + .decorationColor!, + ), + ), + Padding( + padding: EdgeInsets.only(top: 10), + child: PrimaryImageButton( + onPressed: () { + Navigator.pushNamed(context, Routes.restoreOptions); + }, + image: restoreWalletImage, + text: S.of(context).restore_wallet, + color: Theme.of(context).accentTextTheme!.caption!.color!, + textColor: + Theme.of(context).primaryTextTheme!.headline6!.color!), + ) + ], + ) + ], + )) ], - ) - ) - ], - ) - )); + ), + ), + ))); } } From bd04383b7c68ba055cf352bee458ea2f8280208b Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 01:36:34 +0200 Subject: [PATCH 11/19] Change Exchange page UI depending on platform --- .../desktop_sidebar_wrapper.dart | 6 +- lib/src/screens/exchange/exchange_page.dart | 484 ++++++++---------- .../desktop_exchange_cards_section.dart | 28 + .../mobile_exchange_cards_section.dart | 58 +++ lib/src/widgets/nav_bar.dart | 52 +- macos/Runner.xcodeproj/project.pbxproj | 71 ++- macos/Runner/InfoBase.plist | 2 + scripts/macos/app_env.sh | 2 +- 8 files changed, 362 insertions(+), 341 deletions(-) create mode 100644 lib/src/screens/exchange/widgets/desktop_exchange_cards_section.dart create mode 100644 lib/src/screens/exchange/widgets/mobile_exchange_cards_section.dart diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart index d93df1994..19e417211 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart @@ -33,11 +33,7 @@ class DesktopSidebarWrapper extends StatelessWidget { Navigator.of(desktopKey.currentContext!).pop(); } - pageController.animateToPage( - page.index, - duration: Duration(milliseconds: 300), - curve: Curves.easeInOut, - ); + pageController.jumpToPage(page.index); }); return Row( diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 744848156..7952665b2 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -1,13 +1,14 @@ -import 'dart:ui'; import 'package:cake_wallet/di.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/mobile_exchange_cards_section.dart'; import 'package:cake_wallet/utils/debounce.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/sync_status.dart'; import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/entities/parse_address_from_domain.dart'; import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.dart'; import 'package:cake_wallet/src/widgets/standard_checkbox.dart'; import 'package:dotted_border/dotted_border.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; @@ -35,7 +36,14 @@ import 'package:cake_wallet/src/screens/exchange/widgets/present_provider_picker import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart'; class ExchangePage extends BasePage { - ExchangePage(this.exchangeViewModel); + ExchangePage(this.exchangeViewModel) { + depositWalletName = exchangeViewModel.depositCurrency == CryptoCurrency.xmr + ? exchangeViewModel.wallet.name + : null; + receiveWalletName = exchangeViewModel.receiveCurrency == CryptoCurrency.xmr + ? exchangeViewModel.wallet.name + : null; + } final ExchangeViewModel exchangeViewModel; final depositKey = GlobalKey(); @@ -50,6 +58,20 @@ class ExchangePage extends BasePage { final _depositAmountDebounce = Debounce(Duration(milliseconds: 500)); var _isReactionsSet = false; + final arrowBottomPurple = Image.asset( + 'assets/images/arrow_bottom_purple_icon.png', + color: Colors.white, + height: 8, + ); + final arrowBottomCakeGreen = Image.asset( + 'assets/images/arrow_bottom_cake_green.png', + color: Colors.white, + height: 8, + ); + + late final String? depositWalletName; + late final String? receiveWalletName; + @override String get title => S.current.exchange; @@ -88,26 +110,6 @@ class ExchangePage extends BasePage { @override Widget body(BuildContext context) { - final arrowBottomPurple = Image.asset( - 'assets/images/arrow_bottom_purple_icon.png', - color: Colors.white, - height: 8, - ); - final arrowBottomCakeGreen = Image.asset( - 'assets/images/arrow_bottom_cake_green.png', - color: Colors.white, - height: 8, - ); - - final depositWalletName = - exchangeViewModel.depositCurrency == CryptoCurrency.xmr - ? exchangeViewModel.wallet.name - : null; - final receiveWalletName = - exchangeViewModel.receiveCurrency == CryptoCurrency.xmr - ? exchangeViewModel.wallet.name - : null; - WidgetsBinding.instance .addPostFrameCallback((_) => _setReactions(context, exchangeViewModel)); @@ -138,201 +140,7 @@ class ExchangePage extends BasePage { contentPadding: EdgeInsets.only(bottom: 24), content: Observer(builder: (_) => Column( children: [ - Container( - padding: EdgeInsets.only(bottom: 32), - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(24), - bottomRight: Radius.circular(24)), - gradient: LinearGradient( - colors: [ - Theme.of(context).primaryTextTheme!.bodyText2!.color!, - Theme.of(context) - .primaryTextTheme! - .bodyText2! - .decorationColor!, - ], - stops: [ - 0.35, - 1.0 - ], - begin: Alignment.topLeft, - end: Alignment.bottomRight), - ), - child: Column( - children: [ - Container( - decoration: BoxDecoration( - borderRadius: BorderRadius.only( - bottomLeft: Radius.circular(24), - bottomRight: Radius.circular(24)), - gradient: LinearGradient( - colors: [ - Theme.of(context) - .primaryTextTheme! - .subtitle2! - .color!, - Theme.of(context) - .primaryTextTheme! - .subtitle2! - .decorationColor!, - ], - begin: Alignment.topLeft, - end: Alignment.bottomRight), - ), - padding: EdgeInsets.fromLTRB(24, 100, 24, 32), - child: Observer( - builder: (_) => ExchangeCard( - onDispose: disposeBestRateSync, - hasAllAmount: exchangeViewModel.hasAllAmount, - allAmount: exchangeViewModel.hasAllAmount - ? () => exchangeViewModel - .calculateDepositAllAmount() - : null, - amountFocusNode: _depositAmountFocus, - addressFocusNode: _depositAddressFocus, - key: depositKey, - title: S.of(context).you_will_send, - initialCurrency: - exchangeViewModel.depositCurrency, - initialWalletName: depositWalletName ?? '', - initialAddress: - exchangeViewModel.depositCurrency == - exchangeViewModel.wallet.currency - ? exchangeViewModel.wallet.walletAddresses.address - : exchangeViewModel.depositAddress, - initialIsAmountEditable: true, - initialIsAddressEditable: - exchangeViewModel.isDepositAddressEnabled, - isAmountEstimated: false, - hasRefundAddress: true, - isMoneroWallet: exchangeViewModel.isMoneroWallet, - currencies: exchangeViewModel.depositCurrencies, - onCurrencySelected: (currency) { - // FIXME: need to move it into view model - if (currency == CryptoCurrency.xmr && - exchangeViewModel.wallet.type != - WalletType.monero) { - showPopUp( - context: context, - builder: (dialogContext) { - return AlertWithOneAction( - alertTitle: S.of(context).error, - alertContent: S - .of(context) - .exchange_incorrect_current_wallet_for_xmr, - buttonText: S.of(context).ok, - buttonAction: () => - Navigator.of(dialogContext) - .pop()); - }); - return; - } - - exchangeViewModel.changeDepositCurrency( - currency: currency); - }, - imageArrow: arrowBottomPurple, - currencyButtonColor: Colors.transparent, - addressButtonsColor: - Theme.of(context).focusColor!, - borderColor: Theme.of(context) - .primaryTextTheme! - .bodyText1! - .color!, - currencyValueValidator: AmountValidator( - type: exchangeViewModel.wallet.type), - addressTextFieldValidator: AddressValidator( - type: exchangeViewModel.depositCurrency), - onPushPasteButton: (context) async { - final domain = - exchangeViewModel.depositAddress; - final ticker = exchangeViewModel - .depositCurrency.title.toLowerCase(); - exchangeViewModel.depositAddress = - await fetchParsedAddress( - context, domain, ticker); - }, - onPushAddressBookButton: (context) async { - final domain = - exchangeViewModel.depositAddress; - final ticker = exchangeViewModel - .depositCurrency.title.toLowerCase(); - exchangeViewModel.depositAddress = - await fetchParsedAddress( - context, domain, ticker); - }, - ), - ), - ), - Padding( - padding: - EdgeInsets.only(top: 29, left: 24, right: 24), - child: Observer( - builder: (_) => ExchangeCard( - onDispose: disposeBestRateSync, - amountFocusNode: _receiveAmountFocus, - addressFocusNode: _receiveAddressFocus, - key: receiveKey, - title: S.of(context).you_will_get, - initialCurrency: - exchangeViewModel.receiveCurrency, - initialWalletName: receiveWalletName ?? '', - initialAddress: exchangeViewModel - .receiveCurrency == - exchangeViewModel.wallet.currency - ? exchangeViewModel.wallet.walletAddresses.address - : exchangeViewModel.receiveAddress, - initialIsAmountEditable: exchangeViewModel - .isReceiveAmountEditable, - initialIsAddressEditable: - exchangeViewModel - .isReceiveAddressEnabled, - isAmountEstimated: true, - isMoneroWallet: exchangeViewModel.isMoneroWallet, - currencies: - exchangeViewModel.receiveCurrencies, - onCurrencySelected: (currency) => - exchangeViewModel - .changeReceiveCurrency( - currency: currency), - imageArrow: arrowBottomCakeGreen, - currencyButtonColor: Colors.transparent, - addressButtonsColor: - Theme.of(context).focusColor!, - borderColor: Theme.of(context) - .primaryTextTheme! - .bodyText1! - .decorationColor!, - currencyValueValidator: AmountValidator( - type: exchangeViewModel.wallet.type), - addressTextFieldValidator: - AddressValidator( - type: exchangeViewModel - .receiveCurrency), - onPushPasteButton: (context) async { - final domain = - exchangeViewModel.receiveAddress; - final ticker = exchangeViewModel - .receiveCurrency.title.toLowerCase(); - exchangeViewModel.receiveAddress = - await fetchParsedAddress( - context, domain, ticker); - }, - onPushAddressBookButton: (context) async { - final domain = - exchangeViewModel.receiveAddress; - final ticker = exchangeViewModel - .receiveCurrency.title.toLowerCase(); - exchangeViewModel.receiveAddress = - await fetchParsedAddress( - context, domain, ticker); - }, - )), - ) - ], - ), - ), + _exchangeCardsSection(context), Padding( padding: EdgeInsets.only(top: 12, left: 24), child: Row( @@ -355,63 +163,67 @@ class ExchangePage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: Column(children: [ - Padding( - padding: EdgeInsets.only(bottom: 15), - child: Observer(builder: (_) { - final description = exchangeViewModel.isFixedRateMode - ? exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_guaranteed - : S.of(context).fixed_pair_not_supported - : exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_estimate - : S.of(context).variable_pair_not_supported; - return Center( - child: Text( - description, - textAlign: TextAlign.center, - style: TextStyle( - color: Theme.of(context) - .primaryTextTheme! - .headline1! - .decorationColor!, - fontWeight: FontWeight.w500, - fontSize: 12), - ), - ); - }), - ), - Observer( - builder: (_) => LoadingPrimaryButton( - text: S.of(context).exchange, - onPressed: () { - if (_formKey.currentState != null && _formKey.currentState!.validate()) { - if ((exchangeViewModel.depositCurrency == - CryptoCurrency.xmr) && - (!(exchangeViewModel.status - is SyncedSyncStatus))) { - showPopUp( - context: context, - builder: (BuildContext context) { - return AlertWithOneAction( - alertTitle: S.of(context).exchange, - alertContent: S - .of(context) - .exchange_sync_alert_content, - buttonText: S.of(context).ok, - buttonAction: () => - Navigator.of(context).pop()); - }); - } else { - exchangeViewModel.createTrade(); + bottomSection: ConstrainedBox( + constraints: + BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column(children: [ + Padding( + padding: EdgeInsets.only(bottom: 15), + child: Observer(builder: (_) { + final description = exchangeViewModel.isFixedRateMode + ? exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_guaranteed + : S.of(context).fixed_pair_not_supported + : exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_estimate + : S.of(context).variable_pair_not_supported; + return Center( + child: Text( + description, + textAlign: TextAlign.center, + style: TextStyle( + color: Theme.of(context) + .primaryTextTheme! + .headline1! + .decorationColor!, + fontWeight: FontWeight.w500, + fontSize: 12), + ), + ); + }), + ), + Observer( + builder: (_) => LoadingPrimaryButton( + text: S.of(context).exchange, + onPressed: () { + if (_formKey.currentState != null && _formKey.currentState!.validate()) { + if ((exchangeViewModel.depositCurrency == + CryptoCurrency.xmr) && + (!(exchangeViewModel.status + is SyncedSyncStatus))) { + showPopUp( + context: context, + builder: (BuildContext context) { + return AlertWithOneAction( + alertTitle: S.of(context).exchange, + alertContent: S + .of(context) + .exchange_sync_alert_content, + buttonText: S.of(context).ok, + buttonAction: () => + Navigator.of(context).pop()); + }); + } else { + exchangeViewModel.createTrade(); + } } - } - }, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isDisabled: exchangeViewModel.selectedProviders.isEmpty, - isLoading: exchangeViewModel.tradeState is TradeIsCreating)), - ]), + }, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isDisabled: exchangeViewModel.selectedProviders.isEmpty, + isLoading: exchangeViewModel.tradeState is TradeIsCreating)), + ]), + ), )), )); } @@ -445,7 +257,8 @@ class ExchangePage extends BasePage { radius: Radius.circular(20), child: Container( height: 34, - padding: EdgeInsets.only(left: 10, right: 10), + padding: EdgeInsets.symmetric( + horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30), alignment: Alignment.center, decoration: BoxDecoration( borderRadius: BorderRadius.all(Radius.circular(20)), @@ -816,5 +629,124 @@ class ExchangePage extends BasePage { } } - void disposeBestRateSync() => exchangeViewModel.bestRateSync?.cancel(); + void disposeBestRateSync() => exchangeViewModel.bestRateSync.cancel(); + + Widget _exchangeCardsSection(BuildContext context) { + final firstExchangeCard = Observer(builder: (_) => ExchangeCard( + onDispose: disposeBestRateSync, + hasAllAmount: exchangeViewModel.hasAllAmount, + allAmount: exchangeViewModel.hasAllAmount + ? () => exchangeViewModel.calculateDepositAllAmount() + : null, + amountFocusNode: _depositAmountFocus, + addressFocusNode: _depositAddressFocus, + key: depositKey, + title: S.of(context).you_will_send, + initialCurrency: exchangeViewModel.depositCurrency, + initialWalletName: depositWalletName ?? '', + initialAddress: + exchangeViewModel.depositCurrency == exchangeViewModel.wallet.currency + ? exchangeViewModel.wallet.walletAddresses.address + : exchangeViewModel.depositAddress, + initialIsAmountEditable: true, + initialIsAddressEditable: exchangeViewModel.isDepositAddressEnabled, + isAmountEstimated: false, + hasRefundAddress: true, + isMoneroWallet: exchangeViewModel.isMoneroWallet, + currencies: exchangeViewModel.depositCurrencies, + onCurrencySelected: (currency) { + // FIXME: need to move it into view model + if (currency == CryptoCurrency.xmr && + exchangeViewModel.wallet.type != WalletType.monero) { + showPopUp( + context: context, + builder: (dialogContext) { + return AlertWithOneAction( + alertTitle: S.of(context).error, + alertContent: + S.of(context).exchange_incorrect_current_wallet_for_xmr, + buttonText: S.of(context).ok, + buttonAction: () => Navigator.of(dialogContext).pop()); + }); + return; + } + + exchangeViewModel.changeDepositCurrency(currency: currency); + }, + imageArrow: arrowBottomPurple, + currencyButtonColor: Colors.transparent, + addressButtonsColor: Theme.of(context).focusColor!, + borderColor: Theme.of(context).primaryTextTheme!.bodyText1!.color!, + currencyValueValidator: + AmountValidator(type: exchangeViewModel.wallet.type), + addressTextFieldValidator: + AddressValidator(type: exchangeViewModel.depositCurrency), + onPushPasteButton: (context) async { + final domain = exchangeViewModel.depositAddress; + final ticker = exchangeViewModel.depositCurrency.title.toLowerCase(); + exchangeViewModel.depositAddress = + await fetchParsedAddress(context, domain, ticker); + }, + onPushAddressBookButton: (context) async { + final domain = exchangeViewModel.depositAddress; + final ticker = exchangeViewModel.depositCurrency.title.toLowerCase(); + exchangeViewModel.depositAddress = + await fetchParsedAddress(context, domain, ticker); + }, + )); + + final secondExchangeCard = Observer(builder: (_) => ExchangeCard( + onDispose: disposeBestRateSync, + amountFocusNode: _receiveAmountFocus, + addressFocusNode: _receiveAddressFocus, + key: receiveKey, + title: S.of(context).you_will_get, + initialCurrency: exchangeViewModel.receiveCurrency, + initialWalletName: receiveWalletName ?? '', + initialAddress: + exchangeViewModel.receiveCurrency == exchangeViewModel.wallet.currency + ? exchangeViewModel.wallet.walletAddresses.address + : exchangeViewModel.receiveAddress, + initialIsAmountEditable: exchangeViewModel.isReceiveAmountEditable, + initialIsAddressEditable: exchangeViewModel.isReceiveAddressEnabled, + isAmountEstimated: true, + isMoneroWallet: exchangeViewModel.isMoneroWallet, + currencies: exchangeViewModel.receiveCurrencies, + onCurrencySelected: (currency) => + exchangeViewModel.changeReceiveCurrency(currency: currency), + imageArrow: arrowBottomCakeGreen, + currencyButtonColor: Colors.transparent, + addressButtonsColor: Theme.of(context).focusColor!, + borderColor: + Theme.of(context).primaryTextTheme!.bodyText1!.decorationColor!, + currencyValueValidator: + AmountValidator(type: exchangeViewModel.wallet.type), + addressTextFieldValidator: + AddressValidator(type: exchangeViewModel.receiveCurrency), + onPushPasteButton: (context) async { + final domain = exchangeViewModel.receiveAddress; + final ticker = exchangeViewModel.receiveCurrency.title.toLowerCase(); + exchangeViewModel.receiveAddress = + await fetchParsedAddress(context, domain, ticker); + }, + onPushAddressBookButton: (context) async { + final domain = exchangeViewModel.receiveAddress; + final ticker = exchangeViewModel.receiveCurrency.title.toLowerCase(); + exchangeViewModel.receiveAddress = + await fetchParsedAddress(context, domain, ticker); + }, + )); + + if (ResponsiveLayoutUtil.instance.isMobile(context)) { + return MobileExchangeCardsSection( + firstExchangeCard: firstExchangeCard, + secondExchangeCard: secondExchangeCard, + ); + } + + return DesktopExchangeCardsSection( + firstExchangeCard: firstExchangeCard, + secondExchangeCard: secondExchangeCard, + ); + } } diff --git a/lib/src/screens/exchange/widgets/desktop_exchange_cards_section.dart b/lib/src/screens/exchange/widgets/desktop_exchange_cards_section.dart new file mode 100644 index 000000000..2dc91624d --- /dev/null +++ b/lib/src/screens/exchange/widgets/desktop_exchange_cards_section.dart @@ -0,0 +1,28 @@ +import 'package:flutter/material.dart'; + +class DesktopExchangeCardsSection extends StatelessWidget { + final Widget firstExchangeCard; + final Widget secondExchangeCard; + + const DesktopExchangeCardsSection({ + Key? key, + required this.firstExchangeCard, + required this.secondExchangeCard, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 55, left: 24, right: 24), + child: firstExchangeCard, + ), + Padding( + padding: EdgeInsets.only(top: 29, left: 24, right: 24), + child: secondExchangeCard, + ), + ], + ); + } +} diff --git a/lib/src/screens/exchange/widgets/mobile_exchange_cards_section.dart b/lib/src/screens/exchange/widgets/mobile_exchange_cards_section.dart new file mode 100644 index 000000000..762c36a55 --- /dev/null +++ b/lib/src/screens/exchange/widgets/mobile_exchange_cards_section.dart @@ -0,0 +1,58 @@ +import 'package:flutter/material.dart'; + +class MobileExchangeCardsSection extends StatelessWidget { + final Widget firstExchangeCard; + final Widget secondExchangeCard; + + const MobileExchangeCardsSection({ + Key? key, + required this.firstExchangeCard, + required this.secondExchangeCard, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + padding: EdgeInsets.only(bottom: 32), + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(24), + bottomRight: Radius.circular(24), + ), + gradient: LinearGradient( + colors: [ + Theme.of(context).primaryTextTheme.bodyText2!.color!, + Theme.of(context).primaryTextTheme.bodyText2!.decorationColor!, + ], + stops: [0.35, 1.0], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + child: Column( + children: [ + Container( + decoration: BoxDecoration( + borderRadius: BorderRadius.only( + bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)), + gradient: LinearGradient( + colors: [ + Theme.of(context).primaryTextTheme.subtitle2!.color!, + Theme.of(context).primaryTextTheme.subtitle2!.decorationColor!, + ], + begin: Alignment.topLeft, + end: Alignment.bottomRight, + ), + ), + padding: EdgeInsets.fromLTRB(24, 100, 24, 32), + child: firstExchangeCard, + ), + Padding( + padding: EdgeInsets.only(top: 29, left: 24, right: 24), + child: secondExchangeCard, + ) + ], + ), + ); + } +} diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index fcea49656..517d0540f 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -2,12 +2,7 @@ import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/cupertino.dart'; class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { - factory NavBar( - {Widget? leading, - Widget? middle, - Widget? trailing, - Color? backgroundColor}) { - + factory NavBar({Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) { return NavBar._internal( leading: leading, middle: middle, @@ -17,11 +12,7 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { } factory NavBar.withShadow( - {Widget? leading, - Widget? middle, - Widget? trailing, - Color? backgroundColor}) { - + {Widget? leading, Widget? middle, Widget? trailing, Color? backgroundColor}) { return NavBar._internal( leading: leading, middle: middle, @@ -29,13 +20,15 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { height: 80, backgroundColor: backgroundColor, decoration: BoxDecoration( - color: backgroundColor, - boxShadow: [ - BoxShadow( - color: Color.fromRGBO(132, 141, 198, 0.11), - blurRadius: 8, - offset: Offset(0, 2)) - ]), + color: backgroundColor, + boxShadow: [ + BoxShadow( + color: Color.fromRGBO(132, 141, 198, 0.11), + blurRadius: 8, + offset: Offset(0, 2), + ), + ], + ), ); } @@ -64,19 +57,16 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { final _paddingBottom = (pad / 2); if (!ResponsiveLayoutUtil.instance.isMobile(context)) { - return PreferredSize( - preferredSize: Size.fromHeight(height), - child: Padding( - padding: const EdgeInsetsDirectional.only(end: 24), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - if (leading != null) Flexible(child: leading!), - if (middle != null) middle!, - trailing ?? const SizedBox(), - ], - ), + return Padding( + padding: const EdgeInsetsDirectional.only(end: 24, top: 8, bottom: 8), + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + if (leading != null) Flexible(child: leading!) else const SizedBox(), + if (middle != null) middle!, + trailing ?? const SizedBox(), + ], ), ); } diff --git a/macos/Runner.xcodeproj/project.pbxproj b/macos/Runner.xcodeproj/project.pbxproj index db962261a..a1baaa904 100644 --- a/macos/Runner.xcodeproj/project.pbxproj +++ b/macos/Runner.xcodeproj/project.pbxproj @@ -21,14 +21,14 @@ /* End PBXAggregateTarget section */ /* Begin PBXBuildFile section */ - 260A2F3C8557E98408EEF103 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */; }; + 328F945957E1041662291EC5 /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C84AA35EA80D710889C68D81 /* Pods_Runner.framework */; }; 335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */ = {isa = PBXBuildFile; fileRef = 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */; }; 33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC10F02044A3C60003C045 /* AppDelegate.swift */; }; 33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F22044A3C60003C045 /* Assets.xcassets */; }; 33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; }; 33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; }; - 5A1F888E2993FFF400619FD4 /* secRandom.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A1F888D2993FFF400619FD4 /* secRandom.swift */; }; - 5A1F88902994000F00619FD4 /* decrypt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5A1F888F2994000F00619FD4 /* decrypt.swift */; }; + 9F565D5929954F53009A75FB /* secRandom.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9F565D5729954F53009A75FB /* secRandom.swift */; }; + 9F565D5A29954F53009A75FB /* decrypt.swift in Sources */ = {isa = PBXBuildFile; fileRef = 9F565D5829954F53009A75FB /* decrypt.swift */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ @@ -56,7 +56,7 @@ /* Begin PBXFileReference section */ 0C090639294D3AAC00954DC9 /* libiconv.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libiconv.tbd; path = usr/lib/libiconv.tbd; sourceTree = SDKROOT; }; - 2A2C063A3322F546C19D07F5 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = ""; }; + 135D3AD0276D31F62BBEDDBF /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = ""; }; 333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = ""; }; 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = ""; }; 33CC10ED2044A3C60003C045 /* Cake Wallet.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "Cake Wallet.app"; sourceTree = BUILT_PRODUCTS_DIR; }; @@ -71,13 +71,13 @@ 33E51913231747F40026EE4D /* DebugProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = DebugProfile.entitlements; sourceTree = ""; }; 33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = ""; }; 33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = ""; }; - 4BBFB4E6C5ECED3763C70B52 /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = ""; }; - 5A1F888D2993FFF400619FD4 /* secRandom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = secRandom.swift; path = CakeWallet/secRandom.swift; sourceTree = ""; }; - 5A1F888F2994000F00619FD4 /* decrypt.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = decrypt.swift; path = CakeWallet/decrypt.swift; sourceTree = ""; }; + 359F2F22842E234537DED5E3 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = ""; }; 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = ""; }; 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = ""; }; - D4FCC525D86B82897EAA2C70 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = ""; }; - E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + 9F565D5729954F53009A75FB /* secRandom.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = secRandom.swift; path = CakeWallet/secRandom.swift; sourceTree = ""; }; + 9F565D5829954F53009A75FB /* decrypt.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; name = decrypt.swift; path = CakeWallet/decrypt.swift; sourceTree = ""; }; + C84AA35EA80D710889C68D81 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; }; + FF499CFF131B036E3C5638D0 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -85,7 +85,7 @@ isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( - 260A2F3C8557E98408EEF103 /* Pods_Runner.framework in Frameworks */, + 328F945957E1041662291EC5 /* Pods_Runner.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -106,8 +106,8 @@ 33CC10E42044A3C60003C045 = { isa = PBXGroup; children = ( - 5A1F888F2994000F00619FD4 /* decrypt.swift */, - 5A1F888D2993FFF400619FD4 /* secRandom.swift */, + 9F565D5829954F53009A75FB /* decrypt.swift */, + 9F565D5729954F53009A75FB /* secRandom.swift */, 33FAB671232836740065AC1E /* Runner */, 33CEB47122A05771004F2AC0 /* Flutter */, 33CC10EE2044A3C60003C045 /* Products */, @@ -162,9 +162,9 @@ 9B6E7CA3983216A9E173F00F /* Pods */ = { isa = PBXGroup; children = ( - D4FCC525D86B82897EAA2C70 /* Pods-Runner.debug.xcconfig */, - 4BBFB4E6C5ECED3763C70B52 /* Pods-Runner.release.xcconfig */, - 2A2C063A3322F546C19D07F5 /* Pods-Runner.profile.xcconfig */, + 359F2F22842E234537DED5E3 /* Pods-Runner.debug.xcconfig */, + 135D3AD0276D31F62BBEDDBF /* Pods-Runner.release.xcconfig */, + FF499CFF131B036E3C5638D0 /* Pods-Runner.profile.xcconfig */, ); path = Pods; sourceTree = ""; @@ -173,7 +173,7 @@ isa = PBXGroup; children = ( 0C090639294D3AAC00954DC9 /* libiconv.tbd */, - E5FF9F6DDBDD4B4CF8CF6283 /* Pods_Runner.framework */, + C84AA35EA80D710889C68D81 /* Pods_Runner.framework */, ); name = Frameworks; sourceTree = ""; @@ -185,13 +185,13 @@ isa = PBXNativeTarget; buildConfigurationList = 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */; buildPhases = ( - 8E34FE8A171861D3E5428EEA /* [CP] Check Pods Manifest.lock */, + 8AB41FC42599228A92F51A44 /* [CP] Check Pods Manifest.lock */, 33CC10E92044A3C60003C045 /* Sources */, 33CC10EA2044A3C60003C045 /* Frameworks */, 33CC10EB2044A3C60003C045 /* Resources */, 33CC110E2044A8840003C045 /* Bundle Framework */, 3399D490228B24CF009A79C7 /* ShellScript */, - C20EA636086D5486C5C91CF2 /* [CP] Embed Pods Frameworks */, + F015812745AAC61FF550BB30 /* [CP] Embed Pods Frameworks */, ); buildRules = ( ); @@ -299,7 +299,7 @@ shellPath = /bin/sh; shellScript = "\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh && touch Flutter/ephemeral/tripwire"; }; - 8E34FE8A171861D3E5428EEA /* [CP] Check Pods Manifest.lock */ = { + 8AB41FC42599228A92F51A44 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -321,7 +321,7 @@ shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - C20EA636086D5486C5C91CF2 /* [CP] Embed Pods Frameworks */ = { + F015812745AAC61FF550BB30 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( @@ -345,8 +345,8 @@ isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( - 5A1F88902994000F00619FD4 /* decrypt.swift in Sources */, - 5A1F888E2993FFF400619FD4 /* secRandom.swift in Sources */, + 9F565D5929954F53009A75FB /* secRandom.swift in Sources */, + 9F565D5A29954F53009A75FB /* decrypt.swift in Sources */, 33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */, 33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */, 335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */, @@ -414,7 +414,7 @@ GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; - MACOSX_DEPLOYMENT_TARGET = 12.0; + MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = macosx; SWIFT_COMPILATION_MODE = wholemodule; @@ -426,19 +426,24 @@ isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { - ARCHS = x86_64; + ARCHS = arm64; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements; "CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development"; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; + CURRENT_PROJECT_VERSION = 2; DEVELOPMENT_TEAM = 32J6BB6VUS; INFOPLIST_FILE = Runner/Info.plist; + INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet"; + INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance"; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); + MACOSX_DEPLOYMENT_TARGET = 12; + MARKETING_VERSION = 1.0.0; PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_VERSION = 5.0; }; @@ -496,7 +501,7 @@ GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; - MACOSX_DEPLOYMENT_TARGET = 12.0; + MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; SDKROOT = macosx; @@ -543,7 +548,7 @@ GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; - MACOSX_DEPLOYMENT_TARGET = 12.0; + MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = macosx; SWIFT_COMPILATION_MODE = wholemodule; @@ -555,19 +560,24 @@ isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { - ARCHS = x86_64; + ARCHS = arm64; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements; "CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development"; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; + CURRENT_PROJECT_VERSION = 2; DEVELOPMENT_TEAM = 32J6BB6VUS; INFOPLIST_FILE = Runner/Info.plist; + INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet"; + INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance"; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); + MACOSX_DEPLOYMENT_TARGET = 12; + MARKETING_VERSION = 1.0.0; PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; @@ -578,19 +588,24 @@ isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { - ARCHS = x86_64; + ARCHS = arm64; ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/Release.entitlements; "CODE_SIGN_IDENTITY[sdk=macosx*]" = "Apple Development"; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; + CURRENT_PROJECT_VERSION = 2; DEVELOPMENT_TEAM = 32J6BB6VUS; INFOPLIST_FILE = Runner/Info.plist; + INFOPLIST_KEY_CFBundleDisplayName = "Cake Wallet"; + INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.finance"; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); + MACOSX_DEPLOYMENT_TARGET = 12; + MARKETING_VERSION = 1.0.0; PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_VERSION = 5.0; }; diff --git a/macos/Runner/InfoBase.plist b/macos/Runner/InfoBase.plist index 4789daa6a..98d0ea9ee 100644 --- a/macos/Runner/InfoBase.plist +++ b/macos/Runner/InfoBase.plist @@ -28,5 +28,7 @@ MainMenu NSPrincipalClass NSApplication + LSApplicationCategoryType + public.app-category.finance diff --git a/scripts/macos/app_env.sh b/scripts/macos/app_env.sh index 8b0329ba3..31a3efdf1 100755 --- a/scripts/macos/app_env.sh +++ b/scripts/macos/app_env.sh @@ -16,7 +16,7 @@ fi CAKEWALLET_NAME="Cake Wallet" CAKEWALLET_VERSION="1.0.0" -CAKEWALLET_BUILD_NUMBER=1 +CAKEWALLET_BUILD_NUMBER=4 CAKEWALLET_BUNDLE_ID="com.fotolockr.cakewallet" if ! [[ " ${TYPES[*]} " =~ " ${APP_MACOS_TYPE} " ]]; then From 8f762329370914070edcaf6ea11b3543fac471b6 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 17:21:09 +0200 Subject: [PATCH 12/19] - Change design/paddings for Send page on desktop view - Make AddTemplateButton instead of having it duplicated in send/exchange --- lib/src/screens/exchange/exchange_page.dart | 53 +----- lib/src/screens/send/send_page.dart | 201 +++++++++----------- lib/src/screens/send/widgets/send_card.dart | 12 +- lib/src/widgets/add_template_button.dart | 52 +++++ 4 files changed, 152 insertions(+), 166 deletions(-) create mode 100644 lib/src/widgets/add_template_button.dart diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 7952665b2..0a1cd27e8 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/src/screens/exchange/widgets/desktop_exchange_cards_section.dart'; import 'package:cake_wallet/src/screens/exchange/widgets/mobile_exchange_cards_section.dart'; +import 'package:cake_wallet/src/widgets/add_template_button.dart'; import 'package:cake_wallet/utils/debounce.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/sync_status.dart'; @@ -8,7 +9,6 @@ import 'package:cw_core/wallet_type.dart'; import 'package:cake_wallet/entities/parse_address_from_domain.dart'; import 'package:cake_wallet/src/screens/send/widgets/extract_address_from_parsed.dart'; import 'package:cake_wallet/src/widgets/standard_checkbox.dart'; -import 'package:dotted_border/dotted_border.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:keyboard_actions/keyboard_actions.dart'; @@ -164,8 +164,7 @@ class ExchangePage extends BasePage { bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), bottomSection: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column(children: [ Padding( padding: EdgeInsets.only(bottom: 15), @@ -241,51 +240,9 @@ class ExchangePage extends BasePage { return Row( children: [ - GestureDetector( - onTap: () => - Navigator.of(context).pushNamed(Routes.exchangeTemplate), - child: Container( - padding: EdgeInsets.only(left: 1, right: 10), - child: DottedBorder( - borderType: BorderType.RRect, - dashPattern: [6, 4], - color: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - strokeWidth: 2, - radius: Radius.circular(20), - child: Container( - height: 34, - padding: EdgeInsets.symmetric( - horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30), - alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: BorderRadius.all(Radius.circular(20)), - color: Colors.transparent, - ), - child: templates.length >= 1 - ? Icon( - Icons.add, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ) - : Text( - S.of(context).new_template, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ), - ), - ), - ), - ), + AddTemplateButton( + onTap: () => Navigator.of(context).pushNamed(Routes.exchangeTemplate), + currentTemplatesLength: templates.length, ), ListView.builder( scrollDirection: Axis.horizontal, diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 2cd849f34..0ddaaf83e 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -1,10 +1,12 @@ import 'package:cake_wallet/entities/fiat_currency.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/sync_indicator_icon.dart'; import 'package:cake_wallet/src/screens/send/widgets/send_card.dart'; +import 'package:cake_wallet/src/widgets/add_template_button.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; import 'package:cake_wallet/src/widgets/picker.dart'; import 'package:cake_wallet/src/widgets/template_tile.dart'; import 'package:cake_wallet/utils/payment_request.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/view_model/send/output.dart'; import 'package:flutter/material.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; @@ -19,7 +21,6 @@ import 'package:cake_wallet/src/widgets/trail_button.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/send/send_view_model_state.dart'; import 'package:cake_wallet/generated/i18n.dart'; -import 'package:dotted_border/dotted_border.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart'; import 'package:smooth_page_indicator/smooth_page_indicator.dart'; @@ -53,6 +54,15 @@ class SendPage extends BasePage { @override AppBarStyle get appBarStyle => AppBarStyle.transparent; + double _sendCardHeight(BuildContext context) { + final double initialHeight = sendViewModel.isElectrumWallet ? 490 : 465; + + if (!ResponsiveLayoutUtil.instance.isMobile(context)) { + return initialHeight - 77; + } + return initialHeight; + } + @override void onClose(BuildContext context) { sendViewModel.onClose(); @@ -107,7 +117,7 @@ class SendPage extends BasePage { content: Column( children: [ Container( - height: sendViewModel.isElectrumWallet ? 490 : 465, + height: _sendCardHeight(context), child: Observer( builder: (_) { return PageView.builder( @@ -172,51 +182,9 @@ class SendPage extends BasePage { return Row( children: [ - GestureDetector( - onTap: () => Navigator.of(context) - .pushNamed(Routes.sendTemplate), - child: Container( - padding: EdgeInsets.only(left: 1, right: 10), - child: DottedBorder( - borderType: BorderType.RRect, - dashPattern: [6, 4], - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .decorationColor!, - strokeWidth: 2, - radius: Radius.circular(20), - child: Container( - height: 34, - padding: EdgeInsets.only(left: 10, right: 10), - alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: - BorderRadius.all(Radius.circular(20)), - color: Colors.transparent, - ), - child: templates.length >= 1 - ? Icon( - Icons.add, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ) - : Text( - S.of(context).new_template, - style: TextStyle( - fontSize: 14, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme! - .headline2! - .color!, - ), - ), - ), - ), - ), + AddTemplateButton( + onTap: () => Navigator.of(context).pushNamed(Routes.sendTemplate), + currentTemplatesLength: templates.length, ), ListView.builder( scrollDirection: Axis.horizontal, @@ -279,80 +247,83 @@ class SendPage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: Column( - children: [ - if (sendViewModel.hasCurrecyChanger) - Observer(builder: (_) => - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () => presentCurrencyPicker(context), - text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, + bottomSection: ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + children: [ + if (sendViewModel.hasCurrecyChanger) + Observer(builder: (_) => + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () => presentCurrencyPicker(context), + text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + ) ) - ) - ), - if (sendViewModel.hasMultiRecipient) - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () { - sendViewModel.addOutput(); - Future.delayed(const Duration(milliseconds: 250), () { - controller.jumpToPage(sendViewModel.outputs.length - 1); - }); - }, - text: S.of(context).add_receiver, - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - isDottedBorder: true, - borderColor: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - )), - Observer( - builder: (_) { - return LoadingPrimaryButton( - onPressed: () async { - if (_formKey.currentState != null && !_formKey.currentState!.validate()) { - if (sendViewModel.outputs.length > 1) { - showErrorValidationAlert(context); + ), + if (sendViewModel.hasMultiRecipient) + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () { + sendViewModel.addOutput(); + Future.delayed(const Duration(milliseconds: 250), () { + controller.jumpToPage(sendViewModel.outputs.length - 1); + }); + }, + text: S.of(context).add_receiver, + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + isDottedBorder: true, + borderColor: Theme.of(context) + .primaryTextTheme! + .headline3! + .decorationColor!, + )), + Observer( + builder: (_) { + return LoadingPrimaryButton( + onPressed: () async { + if (_formKey.currentState != null && !_formKey.currentState!.validate()) { + if (sendViewModel.outputs.length > 1) { + showErrorValidationAlert(context); + } + + return; } - return; - } + final notValidItems = sendViewModel.outputs + .where((item) => + item.address.isEmpty || item.cryptoAmount.isEmpty) + .toList(); - final notValidItems = sendViewModel.outputs - .where((item) => - item.address.isEmpty || item.cryptoAmount.isEmpty) - .toList(); + if (notValidItems?.isNotEmpty ?? false) { + showErrorValidationAlert(context); + return; + } - if (notValidItems?.isNotEmpty ?? false) { - showErrorValidationAlert(context); - return; - } - - await sendViewModel.createTransaction(); + await sendViewModel.createTransaction(); - }, - text: S.of(context).send, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isLoading: sendViewModel.state is IsExecutingState || - sendViewModel.state is TransactionCommitting, - isDisabled: !sendViewModel.isReadyForSend, - ); - }, - ) - ], + }, + text: S.of(context).send, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isLoading: sendViewModel.state is IsExecutingState || + sendViewModel.state is TransactionCommitting, + isDisabled: !sendViewModel.isReadyForSend, + ); + }, + ) + ], + ), )), ); } diff --git a/lib/src/screens/send/widgets/send_card.dart b/lib/src/screens/send/widgets/send_card.dart index 082067d95..cdae9a8df 100644 --- a/lib/src/screens/send/widgets/send_card.dart +++ b/lib/src/screens/send/widgets/send_card.dart @@ -1,6 +1,7 @@ import 'package:cake_wallet/entities/priority_for_wallet_type.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/utils/payment_request.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cw_core/transaction_priority.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/widgets/keyboard_done_button.dart'; @@ -119,7 +120,7 @@ class SendCardState extends State color: Colors.transparent, )), Container( - decoration: BoxDecoration( + decoration: ResponsiveLayoutUtil.instance.isMobile(context) ? BoxDecoration( borderRadius: BorderRadius.only( bottomLeft: Radius.circular(24), bottomRight: Radius.circular(24)), @@ -130,9 +131,14 @@ class SendCardState extends State .subtitle1! .decorationColor!, ], begin: Alignment.topLeft, end: Alignment.bottomRight), - ), + ) : null, child: Padding( - padding: EdgeInsets.fromLTRB(24, 100, 24, 32), + padding: EdgeInsets.fromLTRB( + 24, + ResponsiveLayoutUtil.instance.isMobile(context) ? 100 : 55, + 24, + ResponsiveLayoutUtil.instance.isMobile(context) ? 32 : 0, + ), child: SingleChildScrollView( child: Observer(builder: (_) => Column( mainAxisSize: MainAxisSize.min, diff --git a/lib/src/widgets/add_template_button.dart b/lib/src/widgets/add_template_button.dart new file mode 100644 index 000000000..249c493a6 --- /dev/null +++ b/lib/src/widgets/add_template_button.dart @@ -0,0 +1,52 @@ +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; +import 'package:dotted_border/dotted_border.dart'; +import 'package:flutter/material.dart'; + +class AddTemplateButton extends StatelessWidget { + final Function() onTap; + final int currentTemplatesLength; + + const AddTemplateButton({Key? key, required this.onTap, required this.currentTemplatesLength}) + : super(key: key); + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: onTap, + child: Container( + padding: EdgeInsets.only(left: 1, right: 10), + child: DottedBorder( + borderType: BorderType.RRect, + dashPattern: [6, 4], + color: Theme.of(context).primaryTextTheme.headline3!.decorationColor!, + strokeWidth: 2, + radius: Radius.circular(20), + child: Container( + height: 34, + padding: EdgeInsets.symmetric( + horizontal: ResponsiveLayoutUtil.instance.isMobile(context) ? 10 : 30), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(20)), + color: Colors.transparent, + ), + child: currentTemplatesLength >= 1 + ? Icon( + Icons.add, + color: Theme.of(context).primaryTextTheme.headline2!.color!, + ) + : Text( + S.of(context).new_template, + style: TextStyle( + fontSize: 14, + fontWeight: FontWeight.w600, + color: Theme.of(context).primaryTextTheme.headline2!.color!, + ), + ), + ), + ), + ), + ); + } +} From fb5efc04295c48ded179e4eb638b1c98d2222d91 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 18:01:24 +0200 Subject: [PATCH 13/19] Fix Desktop dashboard actions background color --- lib/router.dart | 6 ++-- .../dashboard/desktop_dashboard_page.dart | 32 +++++++++++++---- .../desktop_dashboard_view.dart | 35 ------------------- .../desktop_sidebar_wrapper.dart | 6 ++-- .../dashboard/widgets/balance_page.dart | 3 -- 5 files changed, 33 insertions(+), 49 deletions(-) delete mode 100644 lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart diff --git a/lib/router.dart b/lib/router.dart index a253eea22..91a5ac4e1 100644 --- a/lib/router.dart +++ b/lib/router.dart @@ -520,8 +520,10 @@ Route createRoute(RouteSettings settings) { )); case Routes.desktop_actions: - return CupertinoPageRoute( - builder: (_) => DesktopDashboardActions(getIt())); + return PageRouteBuilder( + opaque: false, + pageBuilder: (_, __, ___) => DesktopDashboardActions(getIt()), + ); case Routes.desktop_settings_page: return CupertinoPageRoute( diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index ac5700af4..1ab45fc7c 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -1,7 +1,6 @@ import 'dart:async'; import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/yat_emoji_id.dart'; @@ -18,6 +17,7 @@ import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_v import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:mobx/mobx.dart'; import 'package:cake_wallet/main.dart'; +import 'package:cake_wallet/router.dart' as Router; class DesktopDashboardPage extends BasePage { DesktopDashboardPage({ @@ -27,6 +27,8 @@ class DesktopDashboardPage extends BasePage { required this.desktopSidebarViewModel, }); + static final GlobalKey desktopKey = GlobalKey(); + @override Color get backgroundLightColor => currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @@ -73,13 +75,12 @@ class DesktopDashboardPage extends BasePage { }); if (currentPath == Routes.transactionsPage) { - desktopSidebarViewModel.resetSidebar(); - return; - } + desktopSidebarViewModel.resetSidebar(); + return; + } desktopSidebarViewModel.onPageChange(SidebarItem.transactions); desktopKey.currentState!.pushNamed(Routes.transactionsPage); - }, child: Observer( builder: (_) { @@ -105,7 +106,26 @@ class DesktopDashboardPage extends BasePage { Widget body(BuildContext context) { _setEffects(context); - return DesktopDashboardView(balancePage); + return Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + flex: 3, + child: balancePage, + ), + Expanded( + flex: 5, + child: Navigator( + key: desktopKey, + initialRoute: Routes.desktop_actions, + onGenerateRoute: (settings) => Router.createRoute(settings), + onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { + return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; + }, + ), + ), + ], + ); } void _setEffects(BuildContext context) async { diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart deleted file mode 100644 index 7e2bba777..000000000 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart +++ /dev/null @@ -1,35 +0,0 @@ -import 'package:cake_wallet/routes.dart'; -import 'package:flutter/material.dart'; -import 'package:cake_wallet/router.dart' as Router; - -GlobalKey desktopKey = GlobalKey(); - -class DesktopDashboardView extends StatelessWidget { - final Widget balancePage; - - const DesktopDashboardView(this.balancePage, {Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return Row( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - flex: 3, - child: balancePage, - ), - Expanded( - flex: 5, - child: Navigator( - key: desktopKey, - initialRoute: Routes.desktop_actions, - onGenerateRoute: (settings) => Router.createRoute(settings), - onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { - return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; - }, - ), - ), - ], - ); - } -} diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart index 19e417211..81dd8243f 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart @@ -1,5 +1,5 @@ import 'package:cake_wallet/routes.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; +import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart'; import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart'; @@ -21,7 +21,7 @@ class DesktopSidebarWrapper extends StatelessWidget { reaction((_) => desktopSidebarViewModel.currentPage, (page) { String? currentPath; - desktopKey.currentState?.popUntil((route) { + DesktopDashboardPage.desktopKey.currentState?.popUntil((route) { currentPath = route.settings.name; return true; }); @@ -30,7 +30,7 @@ class DesktopSidebarWrapper extends StatelessWidget { } if (currentPath == Routes.transactionsPage) { - Navigator.of(desktopKey.currentContext!).pop(); + Navigator.of(DesktopDashboardPage.desktopKey.currentContext!).pop(); } pageController.jumpToPage(page.index); diff --git a/lib/src/screens/dashboard/widgets/balance_page.dart b/lib/src/screens/dashboard/widgets/balance_page.dart index 48eaa0a3e..fe750538b 100644 --- a/lib/src/screens/dashboard/widgets/balance_page.dart +++ b/lib/src/screens/dashboard/widgets/balance_page.dart @@ -16,9 +16,6 @@ class BalancePage extends StatelessWidget{ final DashboardViewModel dashboardViewModel; final SettingsStore settingsStore; - - Color get backgroundLightColor => - settingsStore.currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @override Widget build(BuildContext context) { From 02fe3c008f932a5f98a25c8febace2de4eb7e0e5 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Tue, 14 Feb 2023 18:05:44 +0200 Subject: [PATCH 14/19] Constrain primary Buttons width --- lib/src/screens/exchange/exchange_page.dart | 115 +++++----- lib/src/screens/send/send_page.dart | 147 ++++++------- lib/src/widgets/primary_button.dart | 229 +++++++++++--------- 3 files changed, 249 insertions(+), 242 deletions(-) diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 0a1cd27e8..8a6509a0d 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -163,66 +163,63 @@ class ExchangePage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column(children: [ - Padding( - padding: EdgeInsets.only(bottom: 15), - child: Observer(builder: (_) { - final description = exchangeViewModel.isFixedRateMode - ? exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_guaranteed - : S.of(context).fixed_pair_not_supported - : exchangeViewModel.isAvailableInSelected - ? S.of(context).amount_is_estimate - : S.of(context).variable_pair_not_supported; - return Center( - child: Text( - description, - textAlign: TextAlign.center, - style: TextStyle( - color: Theme.of(context) - .primaryTextTheme! - .headline1! - .decorationColor!, - fontWeight: FontWeight.w500, - fontSize: 12), - ), - ); - }), - ), - Observer( - builder: (_) => LoadingPrimaryButton( - text: S.of(context).exchange, - onPressed: () { - if (_formKey.currentState != null && _formKey.currentState!.validate()) { - if ((exchangeViewModel.depositCurrency == - CryptoCurrency.xmr) && - (!(exchangeViewModel.status - is SyncedSyncStatus))) { - showPopUp( - context: context, - builder: (BuildContext context) { - return AlertWithOneAction( - alertTitle: S.of(context).exchange, - alertContent: S - .of(context) - .exchange_sync_alert_content, - buttonText: S.of(context).ok, - buttonAction: () => - Navigator.of(context).pop()); - }); - } else { - exchangeViewModel.createTrade(); - } + bottomSection: Column(children: [ + Padding( + padding: EdgeInsets.only(bottom: 15), + child: Observer(builder: (_) { + final description = exchangeViewModel.isFixedRateMode + ? exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_guaranteed + : S.of(context).fixed_pair_not_supported + : exchangeViewModel.isAvailableInSelected + ? S.of(context).amount_is_estimate + : S.of(context).variable_pair_not_supported; + return Center( + child: Text( + description, + textAlign: TextAlign.center, + style: TextStyle( + color: Theme.of(context) + .primaryTextTheme! + .headline1! + .decorationColor!, + fontWeight: FontWeight.w500, + fontSize: 12), + ), + ); + }), + ), + Observer( + builder: (_) => LoadingPrimaryButton( + text: S.of(context).exchange, + onPressed: () { + if (_formKey.currentState != null && _formKey.currentState!.validate()) { + if ((exchangeViewModel.depositCurrency == + CryptoCurrency.xmr) && + (!(exchangeViewModel.status + is SyncedSyncStatus))) { + showPopUp( + context: context, + builder: (BuildContext context) { + return AlertWithOneAction( + alertTitle: S.of(context).exchange, + alertContent: S + .of(context) + .exchange_sync_alert_content, + buttonText: S.of(context).ok, + buttonAction: () => + Navigator.of(context).pop()); + }); + } else { + exchangeViewModel.createTrade(); } - }, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isDisabled: exchangeViewModel.selectedProviders.isEmpty, - isLoading: exchangeViewModel.tradeState is TradeIsCreating)), - ]), - ), + } + }, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isDisabled: exchangeViewModel.selectedProviders.isEmpty, + isLoading: exchangeViewModel.tradeState is TradeIsCreating)), + ]), )), )); } diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 0ddaaf83e..5727c1e15 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -247,83 +247,80 @@ class SendPage extends BasePage { ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column( - children: [ - if (sendViewModel.hasCurrecyChanger) - Observer(builder: (_) => - Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () => presentCurrencyPicker(context), - text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - ) - ) - ), - if (sendViewModel.hasMultiRecipient) + bottomSection: Column( + children: [ + if (sendViewModel.hasCurrecyChanger) + Observer(builder: (_) => Padding( - padding: EdgeInsets.only(bottom: 12), - child: PrimaryButton( - onPressed: () { - sendViewModel.addOutput(); - Future.delayed(const Duration(milliseconds: 250), () { - controller.jumpToPage(sendViewModel.outputs.length - 1); - }); - }, - text: S.of(context).add_receiver, - color: Colors.transparent, - textColor: Theme.of(context) - .accentTextTheme! - .headline3! - .decorationColor!, - isDottedBorder: true, - borderColor: Theme.of(context) - .primaryTextTheme! - .headline3! - .decorationColor!, - )), - Observer( - builder: (_) { - return LoadingPrimaryButton( - onPressed: () async { - if (_formKey.currentState != null && !_formKey.currentState!.validate()) { - if (sendViewModel.outputs.length > 1) { - showErrorValidationAlert(context); - } - - return; - } - - final notValidItems = sendViewModel.outputs - .where((item) => - item.address.isEmpty || item.cryptoAmount.isEmpty) - .toList(); - - if (notValidItems?.isNotEmpty ?? false) { - showErrorValidationAlert(context); - return; - } - - await sendViewModel.createTransaction(); - + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () => presentCurrencyPicker(context), + text: 'Change your asset (${sendViewModel.selectedCryptoCurrency})', + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + ) + ) + ), + if (sendViewModel.hasMultiRecipient) + Padding( + padding: EdgeInsets.only(bottom: 12), + child: PrimaryButton( + onPressed: () { + sendViewModel.addOutput(); + Future.delayed(const Duration(milliseconds: 250), () { + controller.jumpToPage(sendViewModel.outputs.length - 1); + }); }, - text: S.of(context).send, - color: Theme.of(context).accentTextTheme!.bodyText1!.color!, - textColor: Colors.white, - isLoading: sendViewModel.state is IsExecutingState || - sendViewModel.state is TransactionCommitting, - isDisabled: !sendViewModel.isReadyForSend, - ); - }, - ) - ], - ), + text: S.of(context).add_receiver, + color: Colors.transparent, + textColor: Theme.of(context) + .accentTextTheme! + .headline3! + .decorationColor!, + isDottedBorder: true, + borderColor: Theme.of(context) + .primaryTextTheme! + .headline3! + .decorationColor!, + )), + Observer( + builder: (_) { + return LoadingPrimaryButton( + onPressed: () async { + if (_formKey.currentState != null && !_formKey.currentState!.validate()) { + if (sendViewModel.outputs.length > 1) { + showErrorValidationAlert(context); + } + + return; + } + + final notValidItems = sendViewModel.outputs + .where((item) => + item.address.isEmpty || item.cryptoAmount.isEmpty) + .toList(); + + if (notValidItems?.isNotEmpty ?? false) { + showErrorValidationAlert(context); + return; + } + + await sendViewModel.createTransaction(); + + }, + text: S.of(context).send, + color: Theme.of(context).accentTextTheme!.bodyText1!.color!, + textColor: Colors.white, + isLoading: sendViewModel.state is IsExecutingState || + sendViewModel.state is TransactionCommitting, + isDisabled: !sendViewModel.isReadyForSend, + ); + }, + ) + ], )), ); } diff --git a/lib/src/widgets/primary_button.dart b/lib/src/widgets/primary_button.dart index a563319c5..c27169894 100644 --- a/lib/src/widgets/primary_button.dart +++ b/lib/src/widgets/primary_button.dart @@ -1,3 +1,4 @@ +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:dotted_border/dotted_border.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; @@ -24,28 +25,31 @@ class PrimaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - final content = SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: isDisabled - ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), + final content = ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: isDisabled + ? (onDisabledPressed != null ? onDisabledPressed : null) : onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), + ), ), - ), - overlayColor: MaterialStateProperty.all(Colors.transparent)), - child: Text(text, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 15.0, - fontWeight: FontWeight.w600, - color: isDisabled - ? textColor.withOpacity(0.5) - : textColor)), - )); + overlayColor: MaterialStateProperty.all(Colors.transparent)), + child: Text(text, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 15.0, + fontWeight: FontWeight.w600, + color: isDisabled + ? textColor.withOpacity(0.5) + : textColor)), + )), + ); return isDottedBorder ? DottedBorder( @@ -77,29 +81,32 @@ class LoadingPrimaryButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: (isLoading || isDisabled) ? null : onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), - ), - )), - - child: isLoading - ? CupertinoActivityIndicator(animating: true) - : Text(text, - style: TextStyle( - fontSize: 15.0, - fontWeight: FontWeight.w600, - color: isDisabled - ? textColor.withOpacity(0.5) - : textColor + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: (isLoading || isDisabled) ? null : onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(isDisabled ? color.withOpacity(0.5) : color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), + ), )), - )); + + child: isLoading + ? CupertinoActivityIndicator(animating: true) + : Text(text, + style: TextStyle( + fontSize: 15.0, + fontWeight: FontWeight.w600, + color: isDisabled + ? textColor.withOpacity(0.5) + : textColor + )), + )), + ); } } @@ -130,45 +137,48 @@ class PrimaryIconButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(radius), - ), - )), - child: Stack( - children: [ - Row( - mainAxisAlignment: mainAxisAlignment, - children: [ - Container( - width: 26.0, - height: 52.0, - decoration: BoxDecoration( - shape: BoxShape.circle, color: iconBackgroundColor), - child: Center( - child: Icon(iconData, color: iconColor, size: 22.0) - ), + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(radius), ), - ], - ), - Container( - height: 52.0, - child: Center( - child: Text(text, - style: TextStyle( - fontSize: 16.0, - color: textColor)), + )), + child: Stack( + children: [ + Row( + mainAxisAlignment: mainAxisAlignment, + children: [ + Container( + width: 26.0, + height: 52.0, + decoration: BoxDecoration( + shape: BoxShape.circle, color: iconBackgroundColor), + child: Center( + child: Icon(iconData, color: iconColor, size: 22.0) + ), + ), + ], ), - ) - ], - ), - )); + Container( + height: 52.0, + child: Center( + child: Text(text, + style: TextStyle( + fontSize: 16.0, + color: textColor)), + ), + ) + ], + ), + )), + ); } } @@ -190,34 +200,37 @@ class PrimaryImageButton extends StatelessWidget { @override Widget build(BuildContext context) { - return SizedBox( - width: double.infinity, - height: 52.0, - child: TextButton( - onPressed: onPressed, - style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), - shape: MaterialStateProperty.all( - RoundedRectangleBorder( - borderRadius: BorderRadius.circular(26.0), - ), - )), - child:Center( - child: Row( - mainAxisSize: MainAxisSize.min, - children: [ - image, - SizedBox(width: 15), - Text( - text, - style: TextStyle( - fontSize: 15, - fontWeight: FontWeight.w600, - color: textColor + return ConstrainedBox( + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: SizedBox( + width: double.infinity, + height: 52.0, + child: TextButton( + onPressed: onPressed, + style: ButtonStyle(backgroundColor: MaterialStateProperty.all(color), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(26.0), ), - ) - ], - ), - ) - )); + )), + child:Center( + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + image, + SizedBox(width: 15), + Text( + text, + style: TextStyle( + fontSize: 15, + fontWeight: FontWeight.w600, + color: textColor + ), + ) + ], + ), + ) + )), + ); } } From 843db65603337a51056548b1ea414ea2e39fc2d5 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Wed, 15 Feb 2023 01:28:10 +0200 Subject: [PATCH 15/19] Add width constraints to desktop dashboard --- .../dashboard/desktop_dashboard_page.dart | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index 1ab45fc7c..a5b5470e2 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -109,19 +109,24 @@ class DesktopDashboardPage extends BasePage { return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Expanded( - flex: 3, + Container( + width: 400, child: balancePage, ), Expanded( - flex: 5, - child: Navigator( - key: desktopKey, - initialRoute: Routes.desktop_actions, - onGenerateRoute: (settings) => Router.createRoute(settings), - onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { - return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; - }, + flex: 4, + child: Center( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 500), + child: Navigator( + key: desktopKey, + initialRoute: Routes.desktop_actions, + onGenerateRoute: (settings) => Router.createRoute(settings), + onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { + return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; + }, + ), + ), ), ), ], From f8d70e7ce6c4e6eb06bf3c4a3ef33fda01a525f9 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Wed, 15 Feb 2023 16:07:46 +0200 Subject: [PATCH 16/19] Fix UI issues, paddings and alignments --- .../dashboard/desktop_dashboard_page.dart | 54 +++++++------------ .../desktop_sidebar_wrapper.dart | 11 ++-- .../dashboard/widgets/balance_page.dart | 6 +-- lib/src/widgets/nav_bar.dart | 27 ++++++---- 4 files changed, 44 insertions(+), 54 deletions(-) diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index eb307e9ac..5b957ba19 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -1,23 +1,19 @@ import 'dart:async'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/yat_emoji_id.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; -import 'package:cake_wallet/themes/theme_base.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; -import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart'; import 'package:cake_wallet/view_model/wallet_address_list/wallet_address_list_view_model.dart'; import 'package:mobx/mobx.dart'; import 'package:cake_wallet/main.dart'; import 'package:cake_wallet/router.dart' as Router; -class DesktopDashboardPage extends BasePage { +class DesktopDashboardPage extends StatelessWidget { DesktopDashboardPage({ required this.balancePage, required this.walletViewModel, @@ -25,32 +21,18 @@ class DesktopDashboardPage extends BasePage { required this.desktopSidebarViewModel, }); - static final GlobalKey desktopKey = GlobalKey(); - - @override - Color get backgroundLightColor => - currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; - - @override - Color get backgroundDarkColor => Colors.transparent; - - - @override - bool get resizeToAvoidBottomInset => false; - - - - final BalancePage balancePage; final DashboardViewModel walletViewModel; final WalletAddressListViewModel addressListViewModel; final DesktopSidebarViewModel desktopSidebarViewModel; + static final GlobalKey desktopKey = GlobalKey(); + bool _isEffectsInstalled = false; StreamSubscription? _onInactiveSub; @override - Widget body(BuildContext context) { + Widget build(BuildContext context) { _setEffects(context); return Row( @@ -60,19 +42,18 @@ class DesktopDashboardPage extends BasePage { width: 400, child: balancePage, ), - Expanded( - flex: 4, - child: Center( - child: ConstrainedBox( - constraints: BoxConstraints(maxWidth: 500), - child: Navigator( - key: desktopKey, - initialRoute: Routes.desktop_actions, - onGenerateRoute: (settings) => Router.createRoute(settings), - onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { - return [navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))!]; - }, - ), + Flexible( + child: ConstrainedBox( + constraints: BoxConstraints(maxWidth: 500), + child: Navigator( + key: desktopKey, + initialRoute: Routes.desktop_actions, + onGenerateRoute: (settings) => Router.createRoute(settings), + onGenerateInitialRoutes: (NavigatorState navigator, String initialRouteName) { + return [ + navigator.widget.onGenerateRoute!(RouteSettings(name: initialRouteName))! + ]; + }, ), ), ), @@ -128,3 +109,4 @@ class DesktopDashboardPage extends BasePage { }); } } + diff --git a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart index 02b8ef62b..ec6ff1a32 100644 --- a/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart +++ b/lib/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart @@ -2,7 +2,6 @@ import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_dashboard_view.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar/side_menu_item.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; @@ -31,12 +30,16 @@ class DesktopSidebarWrapper extends BasePage { currentTheme.type == ThemeType.bright ? Colors.transparent : Colors.white; @override - Color get backgroundDarkColor => Colors.transparent; + Color get backgroundDarkColor => Colors.black.withOpacity(0.1); + + @override + bool get resizeToAvoidBottomInset => false; final pageController = PageController(); final selectedIconPath = 'assets/images/desktop_transactions_solid_icon.png'; final unselectedIconPath = 'assets/images/desktop_transactions_outline_icon.png'; + double get sideMenuWidth => 76.0; @override @@ -75,7 +78,7 @@ class DesktopSidebarWrapper extends BasePage { onTap: () { String? currentPath; - desktopKey.currentState?.popUntil((route) { + DesktopDashboardPage.desktopKey.currentState?.popUntil((route) { currentPath = route.settings.name; return true; }); @@ -88,7 +91,7 @@ class DesktopSidebarWrapper extends BasePage { desktopSidebarViewModel.resetSidebar(); Future.delayed(Duration(milliseconds: 10), () { desktopSidebarViewModel.onPageChange(SidebarItem.transactions); - desktopKey.currentState?.pushNamed(Routes.transactionsPage); + DesktopDashboardPage.desktopKey.currentState?.pushNamed(Routes.transactionsPage); }); } }, diff --git a/lib/src/screens/dashboard/widgets/balance_page.dart b/lib/src/screens/dashboard/widgets/balance_page.dart index fe750538b..bf8b1ae17 100644 --- a/lib/src/screens/dashboard/widgets/balance_page.dart +++ b/lib/src/screens/dashboard/widgets/balance_page.dart @@ -1,10 +1,8 @@ -import 'package:cake_wallet/di.dart'; -import 'package:cake_wallet/src/widgets/standard_list.dart'; import 'package:cake_wallet/store/settings_store.dart'; import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; -import 'package:flutter/scheduler.dart'; import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:auto_size_text/auto_size_text.dart'; import 'package:cake_wallet/src/widgets/introducing_card.dart'; @@ -26,7 +24,7 @@ class BalancePage extends StatelessWidget{ child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - SizedBox(height: 56), + SizedBox(height: ResponsiveLayoutUtil.instance.isMobile(context) ? 56 : 16), Container( margin: const EdgeInsets.only(left: 24, bottom: 16), child: Observer(builder: (_) { diff --git a/lib/src/widgets/nav_bar.dart b/lib/src/widgets/nav_bar.dart index 517d0540f..230e0caad 100644 --- a/lib/src/widgets/nav_bar.dart +++ b/lib/src/widgets/nav_bar.dart @@ -52,21 +52,28 @@ class NavBar extends StatelessWidget implements ObstructingPreferredSizeWidget { @override Widget build(BuildContext context) { + if (leading == null && middle == null && trailing == null) { + return const SizedBox(); + } + final pad = height - _originalHeight; final paddingTop = pad / 2; final _paddingBottom = (pad / 2); if (!ResponsiveLayoutUtil.instance.isMobile(context)) { - return Padding( - padding: const EdgeInsetsDirectional.only(end: 24, top: 8, bottom: 8), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - if (leading != null) Flexible(child: leading!) else const SizedBox(), - if (middle != null) middle!, - trailing ?? const SizedBox(), - ], + return Container( + padding: const EdgeInsetsDirectional.only(end: 24), + color: backgroundColor, + child: Center( + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + if (leading != null) Flexible(child: leading!) else const SizedBox(), + if (middle != null) middle!, + trailing ?? const SizedBox(), + ], + ), ), ); } From 8de9c80fe1f13668d21e781801c05c073746cede Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Wed, 15 Feb 2023 20:55:06 +0200 Subject: [PATCH 17/19] Rename misleading variable Change initial mac window size --- lib/di.dart | 2 +- lib/src/screens/dashboard/dashboard_page.dart | 11 +++++------ lib/src/screens/dashboard/desktop_dashboard_page.dart | 10 +++++----- macos/Runner/Base.lproj/MainMenu.xib | 10 +++++----- 4 files changed, 16 insertions(+), 17 deletions(-) diff --git a/lib/di.dart b/lib/di.dart index 37e547b93..fd397cb40 100644 --- a/lib/di.dart +++ b/lib/di.dart @@ -371,7 +371,7 @@ Future setup( getIt.registerFactory(() => DashboardPage( balancePage: getIt.get(), - walletViewModel: getIt.get(), + dashboardViewModel: getIt.get(), addressListViewModel: getIt.get(), desktopSidebarViewModel: getIt.get(), )); diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 0557f0415..59e7ca313 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -1,5 +1,4 @@ import 'dart:async'; -import 'package:cake_wallet/di.dart'; import 'package:cake_wallet/entities/main_actions.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_sidebar_wrapper.dart'; @@ -30,13 +29,13 @@ import 'package:cake_wallet/router.dart' as Router; class DashboardPage extends StatelessWidget { DashboardPage({ required this.balancePage, - required this.walletViewModel, + required this.dashboardViewModel, required this.addressListViewModel, required this.desktopSidebarViewModel, }); final BalancePage balancePage; - final DashboardViewModel walletViewModel; + final DashboardViewModel dashboardViewModel; final WalletAddressListViewModel addressListViewModel; final DesktopSidebarViewModel desktopSidebarViewModel; @@ -46,16 +45,16 @@ class DashboardPage extends StatelessWidget { body: ResponsiveLayoutUtil.instance.isMobile(context) ? _DashboardPageView( balancePage: balancePage, - walletViewModel: walletViewModel, + walletViewModel: dashboardViewModel, addressListViewModel: addressListViewModel, ) : DesktopSidebarWrapper( desktopSidebarViewModel: desktopSidebarViewModel, - dashboardViewModel: walletViewModel, + dashboardViewModel: dashboardViewModel, child: DesktopDashboardPage( desktopSidebarViewModel: desktopSidebarViewModel, balancePage: balancePage, - walletViewModel: walletViewModel, + dashboardViewModel: dashboardViewModel, addressListViewModel: addressListViewModel, ), ), diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index 5b957ba19..382a7be90 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -16,13 +16,13 @@ import 'package:cake_wallet/router.dart' as Router; class DesktopDashboardPage extends StatelessWidget { DesktopDashboardPage({ required this.balancePage, - required this.walletViewModel, + required this.dashboardViewModel, required this.addressListViewModel, required this.desktopSidebarViewModel, }); final BalancePage balancePage; - final DashboardViewModel walletViewModel; + final DashboardViewModel dashboardViewModel; final WalletAddressListViewModel addressListViewModel; final DesktopSidebarViewModel desktopSidebarViewModel; @@ -68,7 +68,7 @@ class DesktopDashboardPage extends StatelessWidget { _isEffectsInstalled = true; autorun((_) async { - if (!walletViewModel.isOutdatedElectrumWallet) { + if (!dashboardViewModel.isOutdatedElectrumWallet) { return; } @@ -94,13 +94,13 @@ class DesktopDashboardPage extends StatelessWidget { Future.delayed(Duration(milliseconds: 500)).then((_) { showPopUp( context: navigatorKey.currentContext!, - builder: (_) => YatEmojiId(walletViewModel.yatStore.emoji)); + builder: (_) => YatEmojiId(dashboardViewModel.yatStore.emoji)); needToPresentYat = false; }); } }); - walletViewModel.yatStore.emojiIncommingStream.listen((String emoji) { + dashboardViewModel.yatStore.emojiIncommingStream.listen((String emoji) { if (!_isEffectsInstalled || emoji.isEmpty) { return; } diff --git a/macos/Runner/Base.lproj/MainMenu.xib b/macos/Runner/Base.lproj/MainMenu.xib index 871d31ce7..a6981c270 100644 --- a/macos/Runner/Base.lproj/MainMenu.xib +++ b/macos/Runner/Base.lproj/MainMenu.xib @@ -1,8 +1,8 @@ - + - + @@ -332,13 +332,13 @@ - + - + - + From 5296a2118a6a72861a7af119085567ad88a87de6 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Wed, 15 Feb 2023 23:50:15 +0200 Subject: [PATCH 18/19] Remove duplicated constrains --- .../screens/new_wallet/new_wallet_page.dart | 52 +++++++++---------- .../new_wallet/new_wallet_type_page.dart | 15 +++--- 2 files changed, 30 insertions(+), 37 deletions(-) diff --git a/lib/src/screens/new_wallet/new_wallet_page.dart b/lib/src/screens/new_wallet/new_wallet_page.dart index 054961c44..44d0ed3f8 100644 --- a/lib/src/screens/new_wallet/new_wallet_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_page.dart @@ -91,8 +91,7 @@ class _WalletNameFormState extends State { contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), content: Center( child: ConstrainedBox( - constraints: - BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ @@ -197,32 +196,29 @@ class _WalletNameFormState extends State { ), ), bottomSectionPadding: EdgeInsets.all(24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: Column( - children: [ - Observer( - builder: (context) { - return LoadingPrimaryButton( - onPressed: _confirmForm, - text: S.of(context).seed_language_next, - color: Colors.green, - textColor: Colors.white, - isLoading: _walletNewVM.state is IsExecutingState, - isDisabled: _walletNewVM.name.isEmpty, - ); - }, - ), - const SizedBox(height: 25), - GestureDetector( - onTap: () { - Navigator.of(context) - .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); - }, - child: Text(S.of(context).advanced_privacy_settings), - ), - ], - ), + bottomSection: Column( + children: [ + Observer( + builder: (context) { + return LoadingPrimaryButton( + onPressed: _confirmForm, + text: S.of(context).seed_language_next, + color: Colors.green, + textColor: Colors.white, + isLoading: _walletNewVM.state is IsExecutingState, + isDisabled: _walletNewVM.name.isEmpty, + ); + }, + ), + const SizedBox(height: 25), + GestureDetector( + onTap: () { + Navigator.of(context) + .pushNamed(Routes.advancedPrivacySettings, arguments: _walletNewVM.type); + }, + child: Text(S.of(context).advanced_privacy_settings), + ), + ], )), ); } diff --git a/lib/src/screens/new_wallet/new_wallet_type_page.dart b/lib/src/screens/new_wallet/new_wallet_type_page.dart index 3493f60e0..407582923 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -96,15 +96,12 @@ class WalletTypeFormState extends State { ), ), bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - bottomSection: ConstrainedBox( - constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), - child: PrimaryButton( - onPressed: () => onTypeSelected(), - text: S.of(context).seed_language_next, - color: Theme.of(context).accentTextTheme.bodyText1!.color!, - textColor: Colors.white, - isDisabled: selected == null, - ), + bottomSection: PrimaryButton( + onPressed: () => onTypeSelected(), + text: S.of(context).seed_language_next, + color: Theme.of(context).accentTextTheme.bodyText1!.color!, + textColor: Colors.white, + isDisabled: selected == null, ), ); } From 55bf964a27bb102670cb12b91f9941afe763f495 Mon Sep 17 00:00:00 2001 From: OmarHatem Date: Thu, 16 Feb 2023 17:51:52 +0200 Subject: [PATCH 19/19] - Use close icon on main screens - Minor UI fixes --- lib/di.dart | 1 - lib/src/screens/base_page.dart | 23 +++++++++++-------- lib/src/screens/dashboard/dashboard_page.dart | 2 -- .../dashboard/desktop_dashboard_page.dart | 3 --- .../dashboard/widgets/address_page.dart | 22 +++--------------- lib/src/screens/exchange/exchange_page.dart | 3 +++ lib/src/screens/send/send_page.dart | 5 +++- 7 files changed, 24 insertions(+), 35 deletions(-) diff --git a/lib/di.dart b/lib/di.dart index fd397cb40..a520c9b4c 100644 --- a/lib/di.dart +++ b/lib/di.dart @@ -7,7 +7,6 @@ import 'package:cake_wallet/ionia/ionia_anypay.dart'; import 'package:cake_wallet/ionia/ionia_gift_card.dart'; import 'package:cake_wallet/ionia/ionia_tip.dart'; import 'package:cake_wallet/src/screens/buy/onramper_page.dart'; -import 'package:cake_wallet/src/screens/dashboard/desktop_dashboard_page.dart'; import 'package:cake_wallet/src/screens/dashboard/desktop_widgets/desktop_wallet_selection_dropdown.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/transactions_page.dart'; import 'package:cake_wallet/src/screens/settings/display_settings_page.dart'; diff --git a/lib/src/screens/base_page.dart b/lib/src/screens/base_page.dart index 92bf56eaf..4dd065d37 100644 --- a/lib/src/screens/base_page.dart +++ b/lib/src/screens/base_page.dart @@ -1,4 +1,5 @@ import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; @@ -20,7 +21,7 @@ abstract class BasePage extends StatelessWidget { String? get title => null; - bool get isModalBackButton => false; + bool get canUseCloseIcon => false; Color get backgroundLightColor => Colors.white; @@ -50,23 +51,27 @@ abstract class BasePage extends StatelessWidget { } final _backButton = Icon(Icons.arrow_back_ios, - color: titleColor ?? Theme.of(context).primaryTextTheme!.headline6!.color!, + color: titleColor ?? Theme.of(context).primaryTextTheme.headline6!.color!, size: 16,); final _closeButton = currentTheme.type == ThemeType.dark ? closeButtonImageDarkTheme : closeButtonImage; + bool isMobileView = ResponsiveLayoutUtil.instance.isMobile(context); + return SizedBox( - height: 37, - width: 37, + height: isMobileView ? 37 : 45, + width: isMobileView ? 37 : 45, child: ButtonTheme( minWidth: double.minPositive, child: TextButton( - // FIX-ME: Style - //highlightColor: Colors.transparent, - //splashColor: Colors.transparent, - //padding: EdgeInsets.all(0), + style: ButtonStyle( + overlayColor: MaterialStateColor.resolveWith((states) => Colors.transparent), + ), onPressed: () => onClose(context), - child: isModalBackButton ? _closeButton : _backButton), + child: canUseCloseIcon && !isMobileView + ? _closeButton + : _backButton, + ), ), ); } diff --git a/lib/src/screens/dashboard/dashboard_page.dart b/lib/src/screens/dashboard/dashboard_page.dart index 59e7ca313..cd0c7d06a 100644 --- a/lib/src/screens/dashboard/dashboard_page.dart +++ b/lib/src/screens/dashboard/dashboard_page.dart @@ -24,7 +24,6 @@ import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:mobx/mobx.dart'; import 'package:smooth_page_indicator/smooth_page_indicator.dart'; import 'package:cake_wallet/main.dart'; -import 'package:cake_wallet/router.dart' as Router; class DashboardPage extends StatelessWidget { DashboardPage({ @@ -52,7 +51,6 @@ class DashboardPage extends StatelessWidget { desktopSidebarViewModel: desktopSidebarViewModel, dashboardViewModel: dashboardViewModel, child: DesktopDashboardPage( - desktopSidebarViewModel: desktopSidebarViewModel, balancePage: balancePage, dashboardViewModel: dashboardViewModel, addressListViewModel: addressListViewModel, diff --git a/lib/src/screens/dashboard/desktop_dashboard_page.dart b/lib/src/screens/dashboard/desktop_dashboard_page.dart index 382a7be90..f79d2f9e2 100644 --- a/lib/src/screens/dashboard/desktop_dashboard_page.dart +++ b/lib/src/screens/dashboard/desktop_dashboard_page.dart @@ -4,7 +4,6 @@ import 'package:cake_wallet/routes.dart'; import 'package:cake_wallet/src/screens/yat_emoji_id.dart'; import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/utils/show_pop_up.dart'; -import 'package:cake_wallet/view_model/dashboard/desktop_sidebar_view_model.dart'; import 'package:flutter/material.dart'; import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart'; import 'package:cake_wallet/src/screens/dashboard/widgets/balance_page.dart'; @@ -18,13 +17,11 @@ class DesktopDashboardPage extends StatelessWidget { required this.balancePage, required this.dashboardViewModel, required this.addressListViewModel, - required this.desktopSidebarViewModel, }); final BalancePage balancePage; final DashboardViewModel dashboardViewModel; final WalletAddressListViewModel addressListViewModel; - final DesktopSidebarViewModel desktopSidebarViewModel; static final GlobalKey desktopKey = GlobalKey(); diff --git a/lib/src/screens/dashboard/widgets/address_page.dart b/lib/src/screens/dashboard/widgets/address_page.dart index 9a06dc39d..9183ad156 100644 --- a/lib/src/screens/dashboard/widgets/address_page.dart +++ b/lib/src/screens/dashboard/widgets/address_page.dart @@ -42,26 +42,10 @@ class AddressPage extends BasePage { bool get resizeToAvoidBottomInset => false; @override - Widget leading(BuildContext context) { - final _backButton = Icon(Icons.arrow_back_ios, - color: Theme.of(context).accentTextTheme!.headline2!.backgroundColor!, - size: 16,); + Color get titleColor => Colors.white; - return SizedBox( - height: 37, - width: 37, - child: ButtonTheme( - minWidth: double.minPositive, - child: TextButton( - // FIX-ME: Style - //highlightColor: Colors.transparent, - //splashColor: Colors.transparent, - //padding: EdgeInsets.all(0), - onPressed: () => onClose(context), - child: _backButton), - ), - ); - } + @override + bool get canUseCloseIcon => true; @override Widget middle(BuildContext context) { diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 8a6509a0d..288d3d632 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -108,6 +108,9 @@ class ExchangePage extends BasePage { exchangeViewModel.reset(); }); + @override + bool get canUseCloseIcon => true; + @override Widget body(BuildContext context) { WidgetsBinding.instance diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 5727c1e15..5d1f378d1 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -51,6 +51,9 @@ class SendPage extends BasePage { @override bool get extendBodyBehindAppBar => true; + @override + bool get canUseCloseIcon => true; + @override AppBarStyle get appBarStyle => AppBarStyle.transparent; @@ -58,7 +61,7 @@ class SendPage extends BasePage { final double initialHeight = sendViewModel.isElectrumWallet ? 490 : 465; if (!ResponsiveLayoutUtil.instance.isMobile(context)) { - return initialHeight - 77; + return initialHeight - 66; } return initialHeight; }