WIP desktop add eth token to wallet gui

This commit is contained in:
julian 2023-03-31 14:38:04 -06:00
parent f4f58b0473
commit 2458d2912b
3 changed files with 187 additions and 83 deletions

View file

@ -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<StackColors>()!
.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<StackColors>()!
.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,
),
],
),
),
),
);

View file

@ -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<EthWalletRadio> createState() => _EthWalletRadioState();
}
class _EthWalletRadioState extends ConsumerState<EthWalletRadio> {
@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<StackColors>()!.textDark,
),
),
WalletInfoRowBalance(
walletId: widget.walletId,
),
],
),
),
],
),
),
);
}
}

View file

@ -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<StackColors>()!
@ -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,