From 714661e91b545cc14c5a97f30565746add196751 Mon Sep 17 00:00:00 2001 From: Oleksandr Sobol Date: Wed, 13 May 2020 21:26:15 +0300 Subject: [PATCH] CWA-212 | created currency picker and provider picker; moved template tile to widgets directory; created exchange template page --- lib/src/screens/exchange/exchange_page.dart | 5 +- .../exchange/exchange_template_page.dart | 104 +++++++++++++++ .../exchange/widgets/currency_picker.dart | 119 ++++++++++++++++++ .../exchange/widgets/exchange_card.dart | 15 ++- .../exchange/widgets/provider_picker.dart | 111 ++++++++++++++++ lib/src/screens/send/send_page.dart | 6 +- lib/src/widgets/address_text_field.dart | 8 +- .../send => }/widgets/template_tile.dart | 12 +- 8 files changed, 360 insertions(+), 20 deletions(-) create mode 100644 lib/src/screens/exchange/exchange_template_page.dart create mode 100644 lib/src/screens/exchange/widgets/currency_picker.dart create mode 100644 lib/src/screens/exchange/widgets/provider_picker.dart rename lib/src/{screens/send => }/widgets/template_tile.dart (92%) diff --git a/lib/src/screens/exchange/exchange_page.dart b/lib/src/screens/exchange/exchange_page.dart index 92e4bbd7b..54069c4f8 100644 --- a/lib/src/screens/exchange/exchange_page.dart +++ b/lib/src/screens/exchange/exchange_page.dart @@ -19,9 +19,9 @@ import 'package:cake_wallet/src/stores/exchange/exchange_store.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; import 'package:cake_wallet/src/screens/exchange/widgets/exchange_card.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; -import 'package:cake_wallet/src/widgets/picker.dart'; import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; import 'package:cake_wallet/src/widgets/top_panel.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/provider_picker.dart'; class ExchangePage extends BasePage { @override @@ -102,7 +102,7 @@ class ExchangePage extends BasePage { final selectedItem = items.indexOf(exchangeStore.provider); showDialog( - builder: (_) => Picker( + builder: (_) => ProviderPicker( items: items, selectedAtIndex: selectedItem, title: S.of(context).change_exchange_provider, @@ -184,6 +184,7 @@ class ExchangeFormState extends State { exchangeStore.changeDepositCurrency(currency: currency), imageArrow: arrowBottomPurple, currencyButtonColor: PaletteDark.walletCardSubAddressField, + addressButtonsColor: PaletteDark.menuList, currencyValueValidator: (value) { exchangeStore.validateCryptoCurrency(value); return exchangeStore.errorMessage; diff --git a/lib/src/screens/exchange/exchange_template_page.dart b/lib/src/screens/exchange/exchange_template_page.dart new file mode 100644 index 000000000..e8d8dd613 --- /dev/null +++ b/lib/src/screens/exchange/exchange_template_page.dart @@ -0,0 +1,104 @@ +import 'dart:ui'; +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:mobx/mobx.dart'; +import 'package:provider/provider.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/routes.dart'; +import 'package:cake_wallet/generated/i18n.dart'; +import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; +import 'package:cake_wallet/src/domain/exchange/exchange_provider.dart'; +import 'package:cake_wallet/src/domain/exchange/exchange_provider_description.dart'; +import 'package:cake_wallet/src/domain/exchange/xmrto/xmrto_exchange_provider.dart'; +import 'package:cake_wallet/src/stores/exchange/exchange_trade_state.dart'; +import 'package:cake_wallet/src/stores/exchange/limits_state.dart'; +import 'package:cake_wallet/src/stores/wallet/wallet_store.dart'; +import 'package:cake_wallet/src/stores/exchange/exchange_store.dart'; +import 'package:cake_wallet/src/screens/base_page.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/exchange_card.dart'; +import 'package:cake_wallet/src/widgets/primary_button.dart'; +import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.dart'; +import 'package:cake_wallet/src/widgets/top_panel.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/provider_picker.dart'; + +class ExchangeTemplatePage extends BasePage { + @override + String get title => 'New template'; + + @override + Color get backgroundColor => PaletteDark.walletCardSubAddressField; + + final Image arrowBottom = + Image.asset('assets/images/arrow_bottom_purple_icon.png', color: Colors.white, height: 8); + + @override + Widget trailing(BuildContext context) { + final exchangeStore = Provider.of(context); + + return FlatButton( + onPressed: () => _presentProviderPicker(context), + highlightColor: Colors.transparent, + splashColor: Colors.transparent, + child: Row( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: [ + Text(S.of(context).exchange, + style: TextStyle( + fontSize: 16.0, + fontWeight: FontWeight.w400, + color: Colors.white)), + Observer( + builder: (_) => Text('${exchangeStore.provider.title}', + style: TextStyle( + fontSize: 10.0, + fontWeight: FontWeight.w400, + color:PaletteDark.walletCardText))) + ], + ), + SizedBox(width: 5), + Padding( + padding: EdgeInsets.only(top: 8), + child: arrowBottom, + ) + ], + ) + ); + } + + void _presentProviderPicker(BuildContext context) { + final exchangeStore = Provider.of(context); + final items = exchangeStore.providersForCurrentPair(); + final selectedItem = items.indexOf(exchangeStore.provider); + + showDialog( + builder: (_) => ProviderPicker( + items: items, + selectedAtIndex: selectedItem, + title: S.of(context).change_exchange_provider, + onItemSelected: (ExchangeProvider provider) => + exchangeStore.changeProvider(provider: provider)), + context: context); + } + + @override + Widget body(BuildContext context) => ExchangeTemplateForm(); +} + +class ExchangeTemplateForm extends StatefulWidget{ + @override + ExchangeTemplateFormState createState() => ExchangeTemplateFormState(); +} + +class ExchangeTemplateFormState extends State { + @override + Widget build(BuildContext context) { + return Container(); + } +} \ No newline at end of file diff --git a/lib/src/screens/exchange/widgets/currency_picker.dart b/lib/src/screens/exchange/widgets/currency_picker.dart new file mode 100644 index 000000000..f245c145e --- /dev/null +++ b/lib/src/screens/exchange/widgets/currency_picker.dart @@ -0,0 +1,119 @@ +import 'dart:ui'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; + +class CurrencyPicker extends StatelessWidget { + CurrencyPicker({ + @required this.selectedAtIndex, + @required this.items, + @required this.title, + @required this.onItemSelected, + }); + + final int selectedAtIndex; + final List items; + final String title; + final Function(CryptoCurrency) onItemSelected; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () => Navigator.of(context).pop(), + child: Container( + color: Colors.transparent, + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), + child: Container( + decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)), + child: Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 24, right: 24), + child: Text( + title, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: Colors.white + ), + ), + ), + Padding( + padding: EdgeInsets.only(top: 24), + child: GestureDetector( + onTap: () => null, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(14)), + child: Container( + height: 400, + width: 300, + color: PaletteDark.walletCardSubAddressField, + child: GridView.count( + shrinkWrap: true, + crossAxisCount: 3, + childAspectRatio: 1.25, + physics: const NeverScrollableScrollPhysics(), + crossAxisSpacing: 1, + mainAxisSpacing: 1, + children: List.generate(15, (index) { + + if (index == 14) { + return Container( + color: PaletteDark.menuList, + ); + } + + final item = items[index]; + final isItemSelected = index == selectedAtIndex; + + final color = isItemSelected + ? PaletteDark.historyPanel + : PaletteDark.menuList; + final textColor = isItemSelected + ? Colors.blue + : Colors.white; + + return GestureDetector( + onTap: () { + if (onItemSelected == null) { + return; + } + Navigator.of(context).pop(); + onItemSelected(item); + }, + child: Container( + color: color, + child: Center( + child: Text( + item.toString(), + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: textColor + ), + ), + ), + ), + ); + }) + ), + ), + ), + ), + ) + ], + ), + ) + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/exchange/widgets/exchange_card.dart b/lib/src/screens/exchange/widgets/exchange_card.dart index 06430f074..15abbf4e9 100644 --- a/lib/src/screens/exchange/widgets/exchange_card.dart +++ b/lib/src/screens/exchange/widgets/exchange_card.dart @@ -3,9 +3,9 @@ import 'package:flutter/material.dart'; import 'package:cake_wallet/palette.dart'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/domain/common/crypto_currency.dart'; -import 'package:cake_wallet/src/widgets/picker.dart'; import 'package:cake_wallet/src/widgets/address_text_field.dart'; import 'package:cake_wallet/src/widgets/base_text_form_field.dart'; +import 'package:cake_wallet/src/screens/exchange/widgets/currency_picker.dart'; class ExchangeCard extends StatefulWidget { ExchangeCard( @@ -21,6 +21,7 @@ class ExchangeCard extends StatefulWidget { this.onCurrencySelected, this.imageArrow, this.currencyButtonColor = Colors.transparent, + this.addressButtonsColor = PaletteDark.walletCardSubAddressField, this.currencyValueValidator, this.addressTextFieldValidator}) : super(key: key); @@ -36,6 +37,7 @@ class ExchangeCard extends StatefulWidget { final bool isAmountEstimated; final Image imageArrow; final Color currencyButtonColor; + final Color addressButtonsColor; final FormFieldValidator currencyValueValidator; final FormFieldValidator addressTextFieldValidator; @@ -216,6 +218,7 @@ class ExchangeCardState extends State { ] : [], isBorderExist: false, + buttonColor: widget.addressButtonsColor, validator: widget.addressTextFieldValidator, ), ) @@ -352,14 +355,14 @@ class ExchangeCardState extends State { void _presentPicker(BuildContext context) { showDialog( - builder: (_) => Picker( - items: widget.currencies, + builder: (_) => CurrencyPicker( selectedAtIndex: widget.currencies.indexOf(_selectedCurrency), + items: widget.currencies, title: S.of(context).change_currency, onItemSelected: (CryptoCurrency item) => - widget.onCurrencySelected != null - ? widget.onCurrencySelected(item) - : null), + widget.onCurrencySelected != null + ? widget.onCurrencySelected(item) + : null), context: context); } } diff --git a/lib/src/screens/exchange/widgets/provider_picker.dart b/lib/src/screens/exchange/widgets/provider_picker.dart new file mode 100644 index 000000000..637312076 --- /dev/null +++ b/lib/src/screens/exchange/widgets/provider_picker.dart @@ -0,0 +1,111 @@ +import 'dart:ui'; +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:cake_wallet/palette.dart'; +import 'package:cake_wallet/src/domain/exchange/exchange_provider.dart'; + +class ProviderPicker extends StatelessWidget { + ProviderPicker({ + @required this.selectedAtIndex, + @required this.items, + @required this.title, + @required this.onItemSelected, + }); + + final int selectedAtIndex; + final List items; + final String title; + final Function(ExchangeProvider) onItemSelected; + + @override + Widget build(BuildContext context) { + return GestureDetector( + onTap: () => Navigator.of(context).pop(), + child: Container( + color: Colors.transparent, + child: BackdropFilter( + filter: ImageFilter.blur(sigmaX: 3.0, sigmaY: 3.0), + child: Container( + decoration: BoxDecoration(color: PaletteDark.historyPanel.withOpacity(0.75)), + child: Center( + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + padding: EdgeInsets.only(left: 24, right: 24), + child: Text( + title, + textAlign: TextAlign.center, + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + decoration: TextDecoration.none, + color: Colors.white + ), + ), + ), + Padding( + padding: EdgeInsets.only(left: 24, right: 24, top: 24), + child: GestureDetector( + onTap: () => null, + child: ClipRRect( + borderRadius: BorderRadius.all(Radius.circular(14)), + child: Container( + height: 233, + color: PaletteDark.menuList, + child: ListView.separated( + separatorBuilder: (context, index) => Divider( + color: PaletteDark.mainBackgroundColor, + height: 1, + ), + itemCount: items == null ? 0 : items.length, + itemBuilder: (context, index) { + final item = items[index]; + final isItemSelected = index == selectedAtIndex; + + final color = isItemSelected + ? PaletteDark.menuHeader + : Colors.transparent; + final textColor = isItemSelected + ? Colors.blue + : Colors.white; + + return GestureDetector( + onTap: () { + if (onItemSelected == null) { + return; + } + Navigator.of(context).pop(); + onItemSelected(item); + }, + child: Container( + height: 77, + padding: EdgeInsets.only(left: 24, right: 24), + alignment: Alignment.center, + color: color, + child: Text( + item.toString(), + style: TextStyle( + fontSize: 18, + fontWeight: FontWeight.bold, + color: textColor, + decoration: TextDecoration.none, + ), + ), + ), + ); + }, + ) + ), + ), + ), + ) + ], + ), + ) + ), + ), + ), + ); + } +} \ No newline at end of file diff --git a/lib/src/screens/send/send_page.dart b/lib/src/screens/send/send_page.dart index 1881e891c..23f32c5a5 100644 --- a/lib/src/screens/send/send_page.dart +++ b/lib/src/screens/send/send_page.dart @@ -27,7 +27,7 @@ import 'package:cake_wallet/src/widgets/alert_with_one_action.dart'; import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart'; import 'package:cake_wallet/src/screens/send/widgets/confirm_sending_alert.dart'; import 'package:cake_wallet/src/screens/send/widgets/sending_alert.dart'; -import 'package:cake_wallet/src/screens/send/widgets/template_tile.dart'; +import 'package:cake_wallet/src/widgets/template_tile.dart'; import 'package:cake_wallet/src/stores/send_template/send_template_store.dart'; class SendPage extends BasePage { @@ -394,9 +394,9 @@ class SendFormState extends State { final template = sendTemplateStore.templates[index]; return TemplateTile( - name: template.name, + to: template.name, amount: template.amount, - cryptoCurrency: template.cryptoCurrency, + from: template.cryptoCurrency, onTap: () { _addressController.text = template.address; _cryptoAmountController.text = template.amount; diff --git a/lib/src/widgets/address_text_field.dart b/lib/src/widgets/address_text_field.dart index 6051cb826..647dd80ba 100644 --- a/lib/src/widgets/address_text_field.dart +++ b/lib/src/widgets/address_text_field.dart @@ -20,6 +20,7 @@ class AddressTextField extends StatelessWidget { this.onURIScanned, this.focusNode, this.isBorderExist = true, + this.buttonColor = PaletteDark.walletCardSubAddressField, this.validator}); static const prefixIconWidth = 34.0; @@ -33,6 +34,7 @@ class AddressTextField extends StatelessWidget { final List options; final FormFieldValidator validator; final bool isBorderExist; + final Color buttonColor; FocusNode focusNode; @override @@ -64,7 +66,7 @@ class AddressTextField extends StatelessWidget { child: Container( padding: EdgeInsets.all(8), decoration: BoxDecoration( - color: PaletteDark.walletCardSubAddressField, + color: buttonColor, borderRadius: BorderRadius.all(Radius.circular(6))), child: Image.asset('assets/images/qr_code_icon.png')), @@ -82,7 +84,7 @@ class AddressTextField extends StatelessWidget { child: Container( padding: EdgeInsets.all(8), decoration: BoxDecoration( - color: PaletteDark.walletCardSubAddressField, + color: buttonColor, borderRadius: BorderRadius.all(Radius.circular(6))), child: Image.asset( @@ -101,7 +103,7 @@ class AddressTextField extends StatelessWidget { child: Container( padding: EdgeInsets.all(8), decoration: BoxDecoration( - color: PaletteDark.walletCardSubAddressField, + color: buttonColor, borderRadius: BorderRadius.all(Radius.circular(6))), child: Image.asset( diff --git a/lib/src/screens/send/widgets/template_tile.dart b/lib/src/widgets/template_tile.dart similarity index 92% rename from lib/src/screens/send/widgets/template_tile.dart rename to lib/src/widgets/template_tile.dart index ff3bac513..63cf9b3b0 100644 --- a/lib/src/screens/send/widgets/template_tile.dart +++ b/lib/src/widgets/template_tile.dart @@ -3,15 +3,15 @@ import 'package:cake_wallet/palette.dart'; class TemplateTile extends StatelessWidget { TemplateTile({ - @required this.name, + @required this.to, @required this.amount, - @required this.cryptoCurrency, + @required this.from, @required this.onTap }); - final String name; + final String to; final String amount; - final String cryptoCurrency; + final String from; final VoidCallback onTap; final toIcon = Image.asset('assets/images/to_icon.png'); @@ -44,7 +44,7 @@ class TemplateTile extends StatelessWidget { Padding( padding: EdgeInsets.only(left: 5), child: Text( - cryptoCurrency, + from, style: TextStyle( fontSize: 16, fontWeight: FontWeight.w600, @@ -59,7 +59,7 @@ class TemplateTile extends StatelessWidget { Padding( padding: EdgeInsets.only(left: 5), child: Text( - name, + to, style: TextStyle( fontSize: 16, fontWeight: FontWeight.w600,