diff --git a/lib/pages/add_wallet_views/select_wallet_for_token_view.dart b/lib/pages/add_wallet_views/select_wallet_for_token_view.dart index 162c2c01c..c73393e4c 100644 --- a/lib/pages/add_wallet_views/select_wallet_for_token_view.dart +++ b/lib/pages/add_wallet_views/select_wallet_for_token_view.dart @@ -17,7 +17,10 @@ import 'package:stackwallet/utilities/util.dart'; import 'package:stackwallet/widgets/background.dart'; import 'package:stackwallet/widgets/conditional_parent.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; +import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart'; +import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart'; import 'package:stackwallet/widgets/desktop/primary_button.dart'; +import 'package:stackwallet/widgets/eth_wallet_radio.dart'; import 'package:stackwallet/widgets/rounded_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart'; @@ -159,91 +162,111 @@ class _SelectWalletForTokenViewState ), ), ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - Text( - "Select Ethereum wallet", - textAlign: TextAlign.center, - style: STextStyles.pageTitleH1(context), + child: ConditionalParent( + condition: isDesktop, + builder: (child) => DesktopScaffold( + appBar: const DesktopAppBar( + isCompactHeight: false, + leading: AppBarBackButton(), ), - const SizedBox( - height: 8, + body: SizedBox( + width: 480, + child: child, ), - Text( - "You are adding an ETH token.", - textAlign: TextAlign.center, - style: STextStyles.subtitle(context), - ), - const SizedBox( - height: 8, - ), - Text( - "You must choose an Ethereum wallet in order to use ${widget.entity.name}", - textAlign: TextAlign.center, - style: STextStyles.subtitle(context), - ), - const SizedBox( - height: 16, - ), - ethWalletIds.isEmpty - ? RoundedWhiteContainer( - child: Text( - _hasEthWallets - ? "All current Ethereum wallets already have ${widget.entity.name}" - : "You do not have any Ethereum wallets", - style: STextStyles.label(context), - ), - ) - : Expanded( - child: Column( - children: [ - RoundedWhiteContainer( - padding: const EdgeInsets.all(8), - child: ListView.separated( - itemCount: ethWalletIds.length, - shrinkWrap: true, - separatorBuilder: (_, __) => const SizedBox( - height: 6, - ), - itemBuilder: (_, index) { - return RoundedContainer( - padding: const EdgeInsets.all(8), - onPressed: () { - setState(() { - _selectedWalletId = ethWalletIds[index]; - }); - }, - color: _selectedWalletId == ethWalletIds[index] - ? Theme.of(context) - .extension()! - .highlight - : Colors.transparent, - child: WalletInfoRow( - walletId: ethWalletIds[index], - ), - ); - }, - ), - ), - ], - ), - ), - if (ethWalletIds.isEmpty) - const SizedBox( - height: 16, + ), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Text( + "Select Ethereum wallet", + textAlign: TextAlign.center, + style: STextStyles.pageTitleH1(context), ), - ethWalletIds.isEmpty - ? PrimaryButton( - label: "Add new Ethereum wallet", - onPressed: _onAddNewEthWallet, - ) - : PrimaryButton( - label: "Continue", - enabled: _selectedWalletId != null, - onPressed: _onContinue, - ), - ], + SizedBox( + height: isDesktop ? 16 : 8, + ), + Text( + "You are adding an ETH token.", + textAlign: TextAlign.center, + style: STextStyles.subtitle(context), + ), + const SizedBox( + height: 8, + ), + Text( + "You must choose an Ethereum wallet in order to use ${widget.entity.name}", + textAlign: TextAlign.center, + style: STextStyles.subtitle(context), + ), + SizedBox( + height: isDesktop ? 60 : 16, + ), + ethWalletIds.isEmpty + ? RoundedWhiteContainer( + child: Text( + _hasEthWallets + ? "All current Ethereum wallets already have ${widget.entity.name}" + : "You do not have any Ethereum wallets", + style: STextStyles.label(context), + ), + ) + : Expanded( + child: Column( + children: [ + RoundedWhiteContainer( + padding: const EdgeInsets.all(8), + child: ListView.separated( + itemCount: ethWalletIds.length, + shrinkWrap: true, + separatorBuilder: (_, __) => SizedBox( + height: isDesktop ? 12 : 6, + ), + itemBuilder: (_, index) { + return RoundedContainer( + padding: const EdgeInsets.all(8), + onPressed: () { + setState(() { + _selectedWalletId = ethWalletIds[index]; + }); + }, + color: isDesktop + ? Colors.transparent + : _selectedWalletId == ethWalletIds[index] + ? Theme.of(context) + .extension()! + .highlight + : Colors.transparent, + child: isDesktop + ? EthWalletRadio( + walletId: ethWalletIds[index], + selectedWalletId: _selectedWalletId, + ) + : WalletInfoRow( + walletId: ethWalletIds[index], + ), + ); + }, + ), + ), + ], + ), + ), + if (ethWalletIds.isEmpty) + const SizedBox( + height: 16, + ), + ethWalletIds.isEmpty + ? PrimaryButton( + label: "Add new Ethereum wallet", + onPressed: _onAddNewEthWallet, + ) + : PrimaryButton( + label: "Continue", + enabled: _selectedWalletId != null, + onPressed: _onContinue, + ), + ], + ), ), ), ); diff --git a/lib/widgets/eth_wallet_radio.dart b/lib/widgets/eth_wallet_radio.dart new file mode 100644 index 000000000..c20a4cbb9 --- /dev/null +++ b/lib/widgets/eth_wallet_radio.dart @@ -0,0 +1,77 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_riverpod/flutter_riverpod.dart'; +import 'package:stackwallet/providers/providers.dart'; +import 'package:stackwallet/utilities/text_styles.dart'; +import 'package:stackwallet/utilities/theme/stack_colors.dart'; +import 'package:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_balance_future.dart'; +import 'package:stackwallet/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart'; + +class EthWalletRadio extends ConsumerStatefulWidget { + const EthWalletRadio({ + Key? key, + required this.walletId, + this.selectedWalletId, + }) : super(key: key); + + final String walletId; + final String? selectedWalletId; + + @override + ConsumerState createState() => _EthWalletRadioState(); +} + +class _EthWalletRadioState extends ConsumerState { + @override + Widget build(BuildContext context) { + final manager = ref.watch(walletsChangeNotifierProvider + .select((value) => value.getManager(widget.walletId))); + + return Padding( + padding: EdgeInsets.zero, + child: Container( + color: Colors.transparent, + child: Row( + children: [ + IgnorePointer( + child: Radio( + value: widget.walletId, + groupValue: widget.selectedWalletId, + onChanged: (_) { + // do nothing since changing updating the ui is already + // done elsewhere + }, + ), + ), + const SizedBox( + width: 12, + ), + WalletInfoCoinIcon( + coin: manager.coin, + size: 40, + ), + const SizedBox( + width: 12, + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + Text( + manager.walletName, + style: STextStyles.desktopTextExtraSmall(context).copyWith( + color: + Theme.of(context).extension()!.textDark, + ), + ), + WalletInfoRowBalance( + walletId: widget.walletId, + ), + ], + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart index a0ebceb12..afe47e250 100644 --- a/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart +++ b/lib/widgets/wallet_info_row/sub_widgets/wallet_info_row_coin_icon.dart @@ -13,11 +13,13 @@ class WalletInfoCoinIcon extends StatelessWidget { const WalletInfoCoinIcon({ Key? key, required this.coin, + this.size = 32, this.contractAddress, }) : super(key: key); final Coin coin; final String? contractAddress; + final double size; @override Widget build(BuildContext context) { @@ -37,6 +39,8 @@ class WalletInfoCoinIcon extends StatelessWidget { } return Container( + width: size, + height: size, decoration: BoxDecoration( color: Theme.of(context) .extension()! @@ -47,7 +51,7 @@ class WalletInfoCoinIcon extends StatelessWidget { ), ), child: Padding( - padding: const EdgeInsets.all(6), + padding: EdgeInsets.all(size / 5), child: currency != null && currency.image.isNotEmpty ? SvgPicture.network( currency.image,