CW-427-Refactor-wallet-type-selection-UI ()

* refactor the asset selection screen

* formatting

* ui fixes

* remove Ethereum related
This commit is contained in:
Serhii 2023-07-10 18:12:15 +03:00 committed by GitHub
parent 49e2e05a72
commit c01321008b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 122 additions and 116 deletions

View file

@ -26,7 +26,7 @@ enum WalletType {
litecoin, litecoin,
@HiveField(4) @HiveField(4)
haven haven,
} }
int serializeToInt(WalletType type) { int serializeToInt(WalletType type) {
@ -77,13 +77,13 @@ String walletTypeToString(WalletType type) {
String walletTypeToDisplayName(WalletType type) { String walletTypeToDisplayName(WalletType type) {
switch (type) { switch (type) {
case WalletType.monero: case WalletType.monero:
return 'Monero'; return 'Monero (XMR)';
case WalletType.bitcoin: case WalletType.bitcoin:
return 'Bitcoin (Electrum)'; return 'Bitcoin (BTC)';
case WalletType.litecoin: case WalletType.litecoin:
return 'Litecoin (Electrum)'; return 'Litecoin (LTC)';
case WalletType.haven: case WalletType.haven:
return 'Haven'; return 'Haven (XHV)';
default: default:
return ''; return '';
} }

View file

@ -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/generated/i18n.dart';
import 'package:cake_wallet/src/screens/base_page.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/primary_button.dart';
import 'package:cake_wallet/src/widgets/scollable_with_bottom_section.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:cake_wallet/wallet_types.g.dart';
import 'package:cw_core/wallet_type.dart';
import 'package:flutter/material.dart';
class NewWalletTypePage extends BasePage { class NewWalletTypePage extends BasePage {
NewWalletTypePage({required this.onTypeSelected}); NewWalletTypePage({required this.onTypeSelected});
@ -40,92 +41,82 @@ class WalletTypeFormState extends State<WalletTypeForm> {
static const aspectRatioImage = 1.22; static const aspectRatioImage = 1.22;
final moneroIcon = Image.asset('assets/images/monero_logo.png', height: 24, width: 24); final TextEditingController searchController = TextEditingController();
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);
WalletType? selected; WalletType? selected;
List<WalletType> types; List<WalletType> types;
List<WalletType> filteredTypes = [];
@override @override
void initState() { void initState() {
types = availableWalletTypes; types = filteredTypes = availableWalletTypes;
super.initState(); super.initState();
searchController.addListener(() {
setState(() {
filteredTypes = List.from(types.where((type) => walletTypeToDisplayName(type)
.toLowerCase()
.contains(searchController.text.toLowerCase())));
return;
});
});
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return ScrollableWithBottomSection( return Center(
contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
content: Center(
child: ConstrainedBox( child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint), constraints: BoxConstraints(maxWidth: ResponsiveLayoutUtil.kDesktopMaxWidthConstraint),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.center, children: [
children: <Widget>[ Padding(
Padding( padding: EdgeInsets.only(top: 48),
padding: EdgeInsets.only(left: 12, right: 12), child: Text(
child: AspectRatio( S.of(context).choose_wallet_currency,
aspectRatio: aspectRatioImage, textAlign: TextAlign.center,
child: FittedBox(child: widget.walletImage, fit: BoxFit.fill)), style: TextStyle(
), fontSize: 16,
Padding( fontWeight: FontWeight.w500,
padding: EdgeInsets.only(top: 48), color: Theme.of(context).primaryTextTheme!.titleLarge!.color!),
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!),
), ),
), Padding(
...types.map((type) => Padding( padding: const EdgeInsets.fromLTRB(24, 24, 24, 12),
padding: EdgeInsets.only(top: 24), child: SearchBarWidget(searchController: searchController, borderRadius: 24),
child: SelectButton( ),
image: _iconFor(type), Expanded(
text: walletTypeToDisplayName(type), child: ScrollableWithBottomSection(
isSelected: selected == type, contentPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
onTap: () => setState(() => selected = type)), content: Column(
)) crossAxisAlignment: CrossAxisAlignment.center,
], children: <Widget>[
), ...filteredTypes.map((type) => Padding(
), padding: EdgeInsets.only(top: 12),
), child: SelectButton(
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24), image: Image.asset(
bottomSection: PrimaryButton( walletTypeToCryptoCurrency(type).iconPath ?? '',
onPressed: () => onTypeSelected(), height: 24,
text: S.of(context).seed_language_next, width: 24),
color: Theme.of(context) text: walletTypeToDisplayName(type),
.accentTextTheme! showTrailingIcon: false,
.bodyLarge! height: 54,
.color!, isSelected: selected == type,
textColor: Colors.white, onTap: () => setState(() => selected = type)),
isDisabled: selected == null, ))
), ],
); ),
} bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
bottomSection: PrimaryButton(
Image _iconFor(WalletType type) { onPressed: () => onTypeSelected(),
switch (type) { text: S.of(context).seed_language_next,
case WalletType.monero: color: Theme.of(context).accentTextTheme!.bodyLarge!.color!,
return moneroIcon; textColor: Colors.white,
case WalletType.bitcoin: isDisabled: selected == null,
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()}');
}
} }
Future<void> onTypeSelected() async { Future<void> onTypeSelected() async {

View file

@ -6,12 +6,16 @@ class SelectButton extends StatelessWidget {
required this.onTap, required this.onTap,
this.image, this.image,
this.isSelected = false, this.isSelected = false,
this.showTrailingIcon = true,
this.height = 60,
}); });
final Image? image; final Image? image;
final String text; final String text;
final bool isSelected; final bool isSelected;
final VoidCallback onTap; final VoidCallback onTap;
final bool showTrailingIcon;
final double height;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -44,7 +48,7 @@ class SelectButton extends StatelessWidget {
onTap: onTap, onTap: onTap,
child: Container( child: Container(
width: double.infinity, width: double.infinity,
height: 60, height: height,
padding: EdgeInsets.only(left: 30, right: 30), padding: EdgeInsets.only(left: 30, right: 30),
alignment: Alignment.center, alignment: Alignment.center,
decoration: BoxDecoration( decoration: BoxDecoration(
@ -76,7 +80,7 @@ class SelectButton extends StatelessWidget {
) )
], ],
), ),
selectArrowImage if (showTrailingIcon) selectArrowImage
], ],
), ),
), ),

View file

@ -1,5 +1,6 @@
// ignore_for_file: deprecated_member_use // 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:cake_wallet/utils/responsive_layout_util.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cw_core/currency.dart'; import 'package:cw_core/currency.dart';
@ -158,37 +159,7 @@ class _PickerState<Item> extends State<Picker<Item>> {
if (widget.hintText != null) if (widget.hintText != null)
Padding( Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: TextFormField( child: SearchBarWidget(searchController: searchController),
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,
)),
),
),
), ),
Divider( Divider(
color: Theme.of(context) color: Theme.of(context)

View file

@ -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,
)),
),
);
}
}