diff --git a/cw_core/lib/wallet_type.dart b/cw_core/lib/wallet_type.dart index e76e4539e..61a571fcf 100644 --- a/cw_core/lib/wallet_type.dart +++ b/cw_core/lib/wallet_type.dart @@ -26,7 +26,7 @@ enum WalletType { litecoin, @HiveField(4) - haven + haven, } int serializeToInt(WalletType type) { @@ -77,13 +77,13 @@ String walletTypeToString(WalletType type) { String walletTypeToDisplayName(WalletType type) { switch (type) { case WalletType.monero: - return 'Monero'; + return 'Monero (XMR)'; case WalletType.bitcoin: - return 'Bitcoin (Electrum)'; + return 'Bitcoin (BTC)'; case WalletType.litecoin: - return 'Litecoin (Electrum)'; + return 'Litecoin (LTC)'; case WalletType.haven: - return 'Haven'; + return 'Haven (XHV)'; default: return ''; } 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 e2521b95b..7c5031217 100644 --- a/lib/src/screens/new_wallet/new_wallet_type_page.dart +++ b/lib/src/screens/new_wallet/new_wallet_type_page.dart @@ -1,13 +1,14 @@ -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'; import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/screens/base_page.dart'; +import 'package:cake_wallet/src/screens/new_wallet/widgets/select_button.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/screens/new_wallet/widgets/select_button.dart'; +import 'package:cake_wallet/src/widgets/search_bar_widget.dart'; +import 'package:cake_wallet/themes/theme_base.dart'; +import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:cake_wallet/wallet_types.g.dart'; +import 'package:cw_core/wallet_type.dart'; +import 'package:flutter/material.dart'; class NewWalletTypePage extends BasePage { NewWalletTypePage({required this.onTypeSelected}); @@ -40,92 +41,82 @@ class WalletTypeFormState extends State { 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 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 TextEditingController searchController = TextEditingController(); WalletType? selected; List types; + List filteredTypes = []; @override void initState() { - types = availableWalletTypes; + types = filteredTypes = availableWalletTypes; super.initState(); + + searchController.addListener(() { + setState(() { + filteredTypes = List.from(types.where((type) => walletTypeToDisplayName(type) + .toLowerCase() + .contains(searchController.text.toLowerCase()))); + return; + }); + }); } @override Widget build(BuildContext context) { - return ScrollableWithBottomSection( - contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), - content: Center( + return 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: 48), - child: Text( - S.of(context).choose_wallet_currency, - textAlign: TextAlign.center, - style: TextStyle( - fontSize: 16, - fontWeight: FontWeight.w500, - color: Theme.of(context) - .primaryTextTheme! - .titleLarge! - .color!), + constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), + child: Column( + children: [ + 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!.titleLarge!.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)), - )) - ], - ), - ), - ), - 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! - .bodyLarge! - .color!, - textColor: Colors.white, - isDisabled: selected == null, - ), - ); - } - - Image _iconFor(WalletType type) { - switch (type) { - case WalletType.monero: - return moneroIcon; - case WalletType.bitcoin: - return bitcoinIcon; - case WalletType.litecoin: - return litecoinIcon; - case WalletType.haven: - return havenIcon; - default: - throw Exception( - '_iconFor: Incorrect Wallet Type. Cannot find icon for Wallet Type: ${type.toString()}'); - } + Padding( + padding: const EdgeInsets.fromLTRB(24, 24, 24, 12), + child: SearchBarWidget(searchController: searchController, borderRadius: 24), + ), + Expanded( + child: ScrollableWithBottomSection( + contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), + content: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ...filteredTypes.map((type) => Padding( + padding: EdgeInsets.only(top: 12), + child: SelectButton( + image: Image.asset( + walletTypeToCryptoCurrency(type).iconPath ?? '', + height: 24, + width: 24), + text: walletTypeToDisplayName(type), + showTrailingIcon: false, + height: 54, + 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!.bodyLarge!.color!, + textColor: Colors.white, + isDisabled: selected == null, + ), + ), + ), + ], + ))); } Future onTypeSelected() async { diff --git a/lib/src/screens/new_wallet/widgets/select_button.dart b/lib/src/screens/new_wallet/widgets/select_button.dart index f8f5ac41f..5d3892ede 100644 --- a/lib/src/screens/new_wallet/widgets/select_button.dart +++ b/lib/src/screens/new_wallet/widgets/select_button.dart @@ -6,12 +6,16 @@ class SelectButton extends StatelessWidget { required this.onTap, this.image, this.isSelected = false, + this.showTrailingIcon = true, + this.height = 60, }); final Image? image; final String text; final bool isSelected; final VoidCallback onTap; + final bool showTrailingIcon; + final double height; @override Widget build(BuildContext context) { @@ -44,7 +48,7 @@ class SelectButton extends StatelessWidget { onTap: onTap, child: Container( width: double.infinity, - height: 60, + height: height, padding: EdgeInsets.only(left: 30, right: 30), alignment: Alignment.center, decoration: BoxDecoration( @@ -76,7 +80,7 @@ class SelectButton extends StatelessWidget { ) ], ), - selectArrowImage + if (showTrailingIcon) selectArrowImage ], ), ), diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart index 7be1d611a..f95ad4919 100644 --- a/lib/src/widgets/picker.dart +++ b/lib/src/widgets/picker.dart @@ -1,5 +1,6 @@ // ignore_for_file: deprecated_member_use +import 'package:cake_wallet/src/widgets/search_bar_widget.dart'; import 'package:cake_wallet/utils/responsive_layout_util.dart'; import 'package:flutter/material.dart'; import 'package:cw_core/currency.dart'; @@ -158,37 +159,7 @@ class _PickerState extends State> { if (widget.hintText != null) Padding( padding: const EdgeInsets.all(16), - child: TextFormField( - controller: searchController, - style: TextStyle( - color: Theme.of(context) - .primaryTextTheme! - .titleLarge! - .color!), - decoration: InputDecoration( - hintText: widget.hintText, - prefixIcon: - Image.asset("assets/images/search_icon.png"), - filled: true, - fillColor: Theme.of(context) - .accentTextTheme! - .displaySmall! - .color!, - alignLabelWithHint: false, - contentPadding: const EdgeInsets.symmetric( - vertical: 4, horizontal: 16), - enabledBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: const BorderSide( - color: Colors.transparent, - )), - focusedBorder: OutlineInputBorder( - borderRadius: BorderRadius.circular(14), - borderSide: const BorderSide( - color: Colors.transparent, - )), - ), - ), + child: SearchBarWidget(searchController: searchController), ), Divider( color: Theme.of(context) diff --git a/lib/src/widgets/search_bar_widget.dart b/lib/src/widgets/search_bar_widget.dart new file mode 100644 index 000000000..04d687cf6 --- /dev/null +++ b/lib/src/widgets/search_bar_widget.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:cake_wallet/generated/i18n.dart'; + +class SearchBarWidget extends StatelessWidget { + const SearchBarWidget({ + required this.searchController, + this.hintText, + this.borderRadius = 14, + }); + + final TextEditingController searchController; + final String? hintText; + final double borderRadius; + + @override + Widget build(BuildContext context) { + return TextFormField( + controller: searchController, + style: TextStyle(color: Theme.of(context).primaryTextTheme!.titleLarge!.color!), + decoration: InputDecoration( + hintText: hintText ?? S.of(context).search_currency, + prefixIcon: Image.asset("assets/images/search_icon.png"), + filled: true, + fillColor: Theme.of(context).accentTextTheme!.displaySmall!.color!, + alignLabelWithHint: false, + contentPadding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16), + enabledBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(borderRadius), + borderSide: const BorderSide( + color: Colors.transparent, + )), + focusedBorder: OutlineInputBorder( + borderRadius: BorderRadius.circular(borderRadius), + borderSide: const BorderSide( + color: Colors.transparent, + )), + ), + ); + } +}