diff --git a/assets/images/2.0x/copy_content.png b/assets/images/2.0x/copy_content.png new file mode 100644 index 000000000..cf639846a Binary files /dev/null and b/assets/images/2.0x/copy_content.png differ diff --git a/assets/images/2.0x/share.png b/assets/images/2.0x/share.png new file mode 100644 index 000000000..dc4610066 Binary files /dev/null and b/assets/images/2.0x/share.png differ diff --git a/assets/images/3.0x/copy_content.png b/assets/images/3.0x/copy_content.png new file mode 100644 index 000000000..eb5f094b6 Binary files /dev/null and b/assets/images/3.0x/copy_content.png differ diff --git a/assets/images/3.0x/share.png b/assets/images/3.0x/share.png new file mode 100644 index 000000000..8958ae5ed Binary files /dev/null and b/assets/images/3.0x/share.png differ diff --git a/assets/images/copy_content.png b/assets/images/copy_content.png new file mode 100644 index 000000000..9a433437a Binary files /dev/null and b/assets/images/copy_content.png differ diff --git a/assets/images/share.png b/assets/images/share.png new file mode 100644 index 000000000..da95e38ba Binary files /dev/null and b/assets/images/share.png differ diff --git a/lib/src/screens/dashboard/widgets/wallet_card.dart b/lib/src/screens/dashboard/widgets/wallet_card.dart index 4c4f7a511..a1bd18528 100644 --- a/lib/src/screens/dashboard/widgets/wallet_card.dart +++ b/lib/src/screens/dashboard/widgets/wallet_card.dart @@ -12,7 +12,8 @@ import 'package:flutter_mobx/flutter_mobx.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/domain/common/sync_status.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; +import 'package:cake_wallet/routes.dart'; class WalletCard extends StatefulWidget { @override @@ -425,7 +426,9 @@ class WalletCardState extends State { color: PaletteDark.walletCardSubAddressField ), child: InkWell( - onTap: () {}, + onTap: () => Navigator.of(context, + rootNavigator: true) + .pushNamed(Routes.receive), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ diff --git a/lib/src/screens/exchange_trade/exchange_trade_page.dart b/lib/src/screens/exchange_trade/exchange_trade_page.dart index 418b4e7d9..8409f9838 100644 --- a/lib/src/screens/exchange_trade/exchange_trade_page.dart +++ b/lib/src/screens/exchange_trade/exchange_trade_page.dart @@ -13,7 +13,7 @@ import 'package:cake_wallet/src/stores/send/send_store.dart'; import 'package:cake_wallet/src/stores/send/sending_state.dart'; import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; import 'package:cake_wallet/src/screens/exchange_trade/widgets/copy_button.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; diff --git a/lib/src/screens/receive/receive_page.dart b/lib/src/screens/receive/receive_page.dart index 718f2bb1c..b7f7fb33c 100644 --- a/lib/src/screens/receive/receive_page.dart +++ b/lib/src/screens/receive/receive_page.dart @@ -9,12 +9,15 @@ import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.dart'; import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; -import 'package:cake_wallet/src/screens/receive/qr_image.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; class ReceivePage extends BasePage { @override - bool get isModalBackButton => true; + Color get backgroundColor => PaletteDark.mainBackgroundColor; + + @override + bool get resizeToAvoidBottomPadding => false; @override String get title => S.current.receive; @@ -22,6 +25,7 @@ class ReceivePage extends BasePage { @override Widget trailing(BuildContext context) { final walletStore = Provider.of(context); + final shareImage = Image.asset('assets/images/share.png'); return SizedBox( height: 37.0, @@ -34,17 +38,13 @@ class ReceivePage extends BasePage { padding: EdgeInsets.all(0), onPressed: () => Share.text( 'Share address', walletStore.subaddress.address, 'text/plain'), - child: Icon( - Icons.share, - size: 30.0, - )), + child: shareImage), ), ); } @override - Widget body(BuildContext context) => - SingleChildScrollView(child: ReceiveBody()); + Widget body(BuildContext context) => ReceiveBody(); } class ReceiveBody extends StatefulWidget { @@ -67,8 +67,10 @@ class ReceiveBodyState extends State { final walletStore = Provider.of(context); final subaddressListStore = Provider.of(context); - final currentColor = Theme.of(context).selectedRowColor; - final notCurrentColor = Theme.of(context).scaffoldBackgroundColor; + final copyImage = Image.asset('assets/images/copy_content.png'); + + final currentColor = PaletteDark.menuList; + final notCurrentColor = Colors.transparent; amountController.addListener(() { if (_formKey.currentState.validate()) { @@ -78,202 +80,273 @@ class ReceiveBodyState extends State { } }); - return SafeArea( - child: SingleChildScrollView( - child: Column( - children: [ - Container( - padding: EdgeInsets.all(35.0), - color: Theme.of(context).backgroundColor, - child: Column( - children: [ - Observer(builder: (_) { - return Row( - children: [ - Spacer( - flex: 1, - ), - Flexible( - flex: 2, + return Container( + height: MediaQuery.of(context).size.height, + width: MediaQuery.of(context).size.width, + color: PaletteDark.mainBackgroundColor, + padding: EdgeInsets.only(top: 24), + child: Column( + children: [ + Flexible( + flex: 2, + child: Observer(builder: (_) { + return Row( + children: [ + Spacer( + flex: 1, + ), + Flexible( + flex: 2, + child: Center( child: AspectRatio( aspectRatio: 1.0, - child: Container( - padding: EdgeInsets.all(5), - color: Colors.white, - child: QrImage( - data: walletStore.subaddress.address + - walletStore.amountValue, - backgroundColor: Colors.transparent, - ), - ), - )), - Spacer( - flex: 1, - ) - ], - ); - }), - Observer(builder: (_) { - return Row( - children: [ - Expanded( - child: Container( - padding: EdgeInsets.all(20.0), - child: Center( - child: GestureDetector( - onTap: () { - Clipboard.setData(ClipboardData( - text: walletStore.subaddress.address)); - Scaffold.of(context).showSnackBar(SnackBar( - content: Text( - S.of(context).copied_to_clipboard, - style: TextStyle(color: Colors.white), - ), - backgroundColor: Colors.green, - )); - }, - child: Text( - walletStore.subaddress.address, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 14.0, - fontWeight: FontWeight.w600, - color: Theme.of(context) - .primaryTextTheme - .title - .color), + child: QrImage( + data: walletStore.subaddress.address + + walletStore.amountValue, + backgroundColor: Colors.transparent, + foregroundColor: PaletteDark.walletCardText, ), ), - ), - )) - ], - ); - }), - Row( - children: [ - Expanded( - child: Form( - key: _formKey, - child: TextFormField( - keyboardType: - TextInputType.numberWithOptions(decimal: true), - inputFormatters: [ - BlacklistingTextInputFormatter( - RegExp('[\\-|\\ |\\,]')) - ], - style: TextStyle( - fontSize: 14.0, - ), - decoration: InputDecoration( - hintStyle: TextStyle( - color: Theme.of(context).hintColor), - hintText: S.of(context).amount, - focusedBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Palette.cakeGreen, width: 2.0)), - enabledBorder: UnderlineInputBorder( - borderSide: BorderSide( - color: Theme.of(context).focusColor, - width: 1.0))), - validator: (value) { - walletStore.validateAmount(value); - return walletStore.errorMessage; - }, - autovalidate: true, - controller: amountController, - ))) - ], - ) - ], - ), - ), - Row( - children: [ - Expanded( - child: Container( - color: Theme.of(context).accentTextTheme.headline.color, - child: Column( - children: [ - ListTile( - title: Text( - S.of(context).subaddresses, - style: TextStyle( - fontSize: 16.0, - color: Theme.of(context) - .primaryTextTheme - .headline - .color), - ), - trailing: Container( - width: 28.0, - height: 28.0, - decoration: BoxDecoration( - color: Theme.of(context).selectedRowColor, - shape: BoxShape.circle), - child: InkWell( - onTap: () => Navigator.of(context) - .pushNamed(Routes.newSubaddress), - borderRadius: BorderRadius.all(Radius.circular(14.0)), - child: Icon( - Icons.add, - color: Palette.violet, - size: 22.0, - ), - ), - ), - ), - Divider( - color: Theme.of(context).dividerTheme.color, - height: 1.0, + )), + Spacer( + flex: 1, ) ], - ), - )) - ], - ), - Observer(builder: (_) { - return ListView.separated( - shrinkWrap: true, - physics: NeverScrollableScrollPhysics(), - itemCount: subaddressListStore.subaddresses.length, - separatorBuilder: (context, i) { - return Divider( - color: Theme.of(context).dividerTheme.color, - height: 1.0, - ); - }, - itemBuilder: (context, i) { - return Observer(builder: (_) { - final subaddress = subaddressListStore.subaddresses[i]; - final isCurrent = - walletStore.subaddress.address == subaddress.address; - final label = subaddress.label.isNotEmpty - ? subaddress.label - : subaddress.address; - - return InkWell( - onTap: () => walletStore.setSubaddress(subaddress), - child: Container( - color: isCurrent ? currentColor : notCurrentColor, - child: Column(children: [ - ListTile( - title: Text( - label, - style: TextStyle( - fontSize: 16.0, - color: Theme.of(context) - .primaryTextTheme - .headline - .color), + ); + }), + ), + Padding( + padding: EdgeInsets.all(24), + child: Row( + children: [ + Expanded( + child: Form( + key: _formKey, + child: TextFormField( + keyboardType: + TextInputType.numberWithOptions(decimal: true), + inputFormatters: [ + BlacklistingTextInputFormatter( + RegExp('[\\-|\\ |\\,]')) + ], + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 20.0, + color: Colors.white ), - ) - ]), + decoration: InputDecoration( + hintStyle: TextStyle( + fontSize: 20, + color: PaletteDark.walletCardText), + hintText: S.of(context).amount, + focusedBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: PaletteDark.walletCardText, width: 1.0)), + enabledBorder: UnderlineInputBorder( + borderSide: BorderSide( + color: PaletteDark.walletCardText, + width: 1.0))), + validator: (value) { + walletStore.validateAmount(value); + return walletStore.errorMessage; + }, + autovalidate: true, + controller: amountController, + ))) + ], + ), + ), + Padding( + padding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + child: Observer( + builder: (_) => GestureDetector( + onTap: () { + Clipboard.setData(ClipboardData( + text: walletStore.subaddress.address)); + Scaffold.of(context).showSnackBar(SnackBar( + content: Text( + S.of(context).copied_to_clipboard, + style: TextStyle(color: Colors.white), ), - ); - }); - }); - }) - ], - ))); + backgroundColor: Colors.green, + duration: Duration(milliseconds: 500), + )); + }, + child: Container( + height: 54, + padding: EdgeInsets.only(left: 24, right: 24), + decoration: BoxDecoration( + borderRadius: BorderRadius.all(Radius.circular(27)), + color: PaletteDark.walletCardSubAddressField + ), + child: Row( + mainAxisSize: MainAxisSize.max, + children: [ + Expanded( + child: Text( + walletStore.subaddress.address, + maxLines: 1, + overflow: TextOverflow.ellipsis, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.w600, + color: Colors.white + ), + ), + ), + Padding( + padding: EdgeInsets.only(left: 12), + child: copyImage, + ) + ], + ), + ), + ) + ), + ), + Flexible( + flex: 3, + child: ClipRRect( + borderRadius: BorderRadius.only( + topLeft: Radius.circular(24), + topRight: Radius.circular(24), + ), + child: Container( + color: PaletteDark.historyPanel, + child: Observer( + builder: (_) => ListView.separated( + separatorBuilder: (context, index) => Divider( + height: 1, + color: PaletteDark.menuList, + ), + itemCount: subaddressListStore.subaddresses.length + 2, + itemBuilder: (context, index) { + + if (index == 0) { + return accountTile( + onTap: () {}, + title: walletStore.account.label, + icon: Icon( + Icons.arrow_forward_ios, + size: 14, + color: Colors.white, + ) + ); + } + + if (index == 1) { + return accountTile( + onTap: () => Navigator.of(context) + .pushNamed(Routes.newSubaddress), + title: S.of(context).subaddresses, + icon: Icon( + Icons.add, + size: 20, + color: Colors.white, + ) + ); + } + + index -= 2; + + return Observer( + builder: (_) { + final subaddress = subaddressListStore.subaddresses[index]; + final isCurrent = + walletStore.subaddress.address == subaddress.address; + + final label = subaddress.label; + final address = subaddress.address; + + return InkWell( + onTap: () => walletStore.setSubaddress(subaddress), + child: Container( + color: isCurrent ? currentColor : notCurrentColor, + padding: EdgeInsets.only( + left: 24, + right: 24, + top: 32, + bottom: 32 + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + label.isNotEmpty + ? Text( + label, + style: TextStyle( + fontSize: 14, + color: PaletteDark.walletCardText + ), + ) + : Offstage(), + Padding( + padding: label.isNotEmpty + ? EdgeInsets.only(top: 10) + : EdgeInsets.only(top: 0), + child: Text( + address, + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w600, + color: Colors.white + ), + ), + ) + ]), + ), + ); + } + ); + } + ) + ), + ), + ) + ) + ], + ), + ); } + + Widget accountTile({ + @required VoidCallback onTap, + @required String title, + @required Icon icon + }) => GestureDetector( + onTap: onTap, + child: Container( + padding: EdgeInsets.only( + left: 24, + right: 24, + top: 32, + bottom: 32 + ), + color: Colors.transparent, + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + title, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + color: Colors.white + ), + ), + Container( + height: 32, + width: 32, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: PaletteDark.menuList + ), + child: icon, + ) + ], + ), + ), + ); } diff --git a/lib/src/screens/receive/qr_image.dart b/lib/src/screens/receive/widgets/qr_image.dart similarity index 90% rename from lib/src/screens/receive/qr_image.dart rename to lib/src/screens/receive/widgets/qr_image.dart index 7beb689d2..fceb61518 100644 --- a/lib/src/screens/receive/qr_image.dart +++ b/lib/src/screens/receive/widgets/qr_image.dart @@ -1,6 +1,6 @@ import 'package:flutter/material.dart'; import 'package:qr/qr.dart'; -import 'package:cake_wallet/src/screens/receive/qr_painter.dart'; +import 'package:cake_wallet/src/screens/receive/widgets/qr_painter.dart'; class QrImage extends StatelessWidget { QrImage({ diff --git a/lib/src/screens/receive/qr_painter.dart b/lib/src/screens/receive/widgets/qr_painter.dart similarity index 100% rename from lib/src/screens/receive/qr_painter.dart rename to lib/src/screens/receive/widgets/qr_painter.dart