desktop exchange provider options dropdown style

This commit is contained in:
julian 2022-11-18 16:05:46 -06:00
parent 9ba83f36eb
commit 16113fd1d5

View file

@ -15,7 +15,9 @@ import 'package:stackwallet/utilities/format.dart';
import 'package:stackwallet/utilities/logger.dart'; import 'package:stackwallet/utilities/logger.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart'; import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/utilities/util.dart';
import 'package:stackwallet/widgets/animated_text.dart'; import 'package:stackwallet/widgets/animated_text.dart';
import 'package:stackwallet/widgets/conditional_parent.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
class ExchangeProviderOptions extends ConsumerWidget { class ExchangeProviderOptions extends ConsumerWidget {
@ -38,353 +40,403 @@ class ExchangeProviderOptions extends ConsumerWidget {
@override @override
Widget build(BuildContext context, WidgetRef ref) { Widget build(BuildContext context, WidgetRef ref) {
final isDesktop = Util.isDesktop;
return RoundedWhiteContainer( return RoundedWhiteContainer(
padding: isDesktop ? const EdgeInsets.all(0) : const EdgeInsets.all(12),
borderColor: isDesktop
? Theme.of(context).extension<StackColors>()!.background
: null,
child: Column( child: Column(
children: [ children: [
GestureDetector( ConditionalParent(
onTap: () { condition: isDesktop,
if (ref.read(currentExchangeNameStateProvider.state).state != builder: (child) => MouseRegion(
ChangeNowExchange.exchangeName) { cursor: SystemMouseCursors.click,
ref.read(currentExchangeNameStateProvider.state).state = child: child,
ChangeNowExchange.exchangeName; ),
ref.read(exchangeFormStateProvider).exchange = child: GestureDetector(
Exchange.fromName( onTap: () {
ref.read(currentExchangeNameStateProvider.state).state); if (ref.read(currentExchangeNameStateProvider.state).state !=
} ChangeNowExchange.exchangeName) {
}, ref.read(currentExchangeNameStateProvider.state).state =
child: Container( ChangeNowExchange.exchangeName;
color: Colors.transparent, ref.read(exchangeFormStateProvider).exchange =
child: Row( Exchange.fromName(ref
crossAxisAlignment: CrossAxisAlignment.start, .read(currentExchangeNameStateProvider.state)
children: [ .state);
SizedBox( }
width: 20, },
height: 20, child: Container(
child: Radio( color: Colors.transparent,
activeColor: Theme.of(context) child: Padding(
.extension<StackColors>()! padding: isDesktop
.radioButtonIconEnabled, ? const EdgeInsets.all(16)
value: ChangeNowExchange.exchangeName, : const EdgeInsets.all(0),
groupValue: ref child: Row(
.watch(currentExchangeNameStateProvider.state) crossAxisAlignment: CrossAxisAlignment.start,
.state, children: [
onChanged: (value) { SizedBox(
if (value is String) { width: 20,
ref height: 20,
.read(currentExchangeNameStateProvider.state) child: Radio(
.state = value; activeColor: Theme.of(context)
ref.read(exchangeFormStateProvider).exchange = .extension<StackColors>()!
Exchange.fromName(ref .radioButtonIconEnabled,
value: ChangeNowExchange.exchangeName,
groupValue: ref
.watch(currentExchangeNameStateProvider.state)
.state,
onChanged: (value) {
if (value is String) {
ref
.read(currentExchangeNameStateProvider.state) .read(currentExchangeNameStateProvider.state)
.state); .state = value;
} ref.read(exchangeFormStateProvider).exchange =
}, Exchange.fromName(ref
), .read(currentExchangeNameStateProvider
), .state)
const SizedBox( .state);
width: 14, }
), },
SvgPicture.asset(
Assets.exchange.changeNow,
width: 24,
height: 24,
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ChangeNowExchange.exchangeName,
style: STextStyles.titleBold12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark2,
),
), ),
if (from != null && ),
to != null && const SizedBox(
toAmount != null && width: 14,
toAmount! > Decimal.zero && ),
fromAmount != null && SvgPicture.asset(
fromAmount! > Decimal.zero) Assets.exchange.changeNow,
FutureBuilder( width: isDesktop ? 32 : 24,
future: ChangeNowExchange().getEstimate( height: isDesktop ? 32 : 24,
from!, ),
to!, const SizedBox(
reversed ? toAmount! : fromAmount!, width: 10,
fixedRate, ),
reversed, Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
ChangeNowExchange.exchangeName,
style: STextStyles.titleBold12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark2,
),
), ),
builder: (context, if (from != null &&
AsyncSnapshot<ExchangeResponse<Estimate>> to != null &&
snapshot) { toAmount != null &&
if (snapshot.connectionState == toAmount! > Decimal.zero &&
ConnectionState.done && fromAmount != null &&
snapshot.hasData) { fromAmount! > Decimal.zero)
final estimate = snapshot.data?.value; FutureBuilder(
if (estimate != null) { future: ChangeNowExchange().getEstimate(
Decimal rate; from!,
if (estimate.reversed) { to!,
rate = reversed ? toAmount! : fromAmount!,
(toAmount! / estimate.estimatedAmount) fixedRate,
reversed,
),
builder: (context,
AsyncSnapshot<ExchangeResponse<Estimate>>
snapshot) {
if (snapshot.connectionState ==
ConnectionState.done &&
snapshot.hasData) {
final estimate = snapshot.data?.value;
if (estimate != null) {
Decimal rate;
if (estimate.reversed) {
rate = (toAmount! /
estimate.estimatedAmount)
.toDecimal( .toDecimal(
scaleOnInfinitePrecision: 12); scaleOnInfinitePrecision: 12);
} else {
rate = (estimate.estimatedAmount /
fromAmount!)
.toDecimal(
scaleOnInfinitePrecision: 12);
}
return Text(
"1 ${from!.toUpperCase()} ~ ${Format.localizedStringAsFixed(
value: rate,
locale: ref.watch(
localeServiceChangeNotifierProvider
.select(
(value) => value.locale),
),
decimalPlaces: to!.toUpperCase() ==
Coin.monero.ticker
.toUpperCase()
? Constants.decimalPlacesMonero
: Constants.decimalPlaces,
)} ${to!.toUpperCase()}",
style:
STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
} else {
Logging.instance.log(
"$runtimeType failed to fetch rate for ChangeNOW: ${snapshot.data}",
level: LogLevel.Warning,
);
return Text(
"Failed to fetch rate",
style:
STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
}
} else { } else {
rate = return AnimatedText(
(estimate.estimatedAmount / fromAmount!) stringsToLoopThrough: const [
.toDecimal( "Loading",
scaleOnInfinitePrecision: 12); "Loading.",
} "Loading..",
return Text( "Loading...",
"1 ${from!.toUpperCase()} ~ ${Format.localizedStringAsFixed( ],
value: rate, style: STextStyles.itemSubtitle12(context)
locale: ref.watch( .copyWith(
localeServiceChangeNotifierProvider color: Theme.of(context)
.select((value) => value.locale), .extension<StackColors>()!
.textSubtitle1,
), ),
decimalPlaces: to!.toUpperCase() == );
Coin.monero.ticker.toUpperCase() }
? Constants.decimalPlacesMonero },
: Constants.decimalPlaces, ),
)} ${to!.toUpperCase()}", if (!(from != null &&
style: STextStyles.itemSubtitle12(context) to != null &&
.copyWith( toAmount != null &&
color: Theme.of(context) toAmount! > Decimal.zero &&
.extension<StackColors>()! fromAmount != null &&
.textSubtitle1, fromAmount! > Decimal.zero))
), Text(
); "n/a",
} else { style: STextStyles.itemSubtitle12(context)
Logging.instance.log( .copyWith(
"$runtimeType failed to fetch rate for ChangeNOW: ${snapshot.data}", color: Theme.of(context)
level: LogLevel.Warning, .extension<StackColors>()!
); .textSubtitle1,
return Text( ),
"Failed to fetch rate", ),
style: STextStyles.itemSubtitle12(context) ],
.copyWith( ),
color: Theme.of(context) ),
.extension<StackColors>()! ],
.textSubtitle1,
),
);
}
} else {
return AnimatedText(
stringsToLoopThrough: const [
"Loading",
"Loading.",
"Loading..",
"Loading...",
],
style: STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
}
},
),
if (!(from != null &&
to != null &&
toAmount != null &&
toAmount! > Decimal.zero &&
fromAmount != null &&
fromAmount! > Decimal.zero))
Text(
"n/a",
style: STextStyles.itemSubtitle12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
],
),
), ),
], ),
), ),
), ),
), ),
const SizedBox( if (isDesktop)
height: 16, Container(
), height: 1,
GestureDetector( color: Theme.of(context).extension<StackColors>()!.background,
onTap: () { ),
if (ref.read(currentExchangeNameStateProvider.state).state != if (!isDesktop)
SimpleSwapExchange.exchangeName) { const SizedBox(
ref.read(currentExchangeNameStateProvider.state).state = height: 16,
SimpleSwapExchange.exchangeName; ),
ref.read(exchangeFormStateProvider).exchange = ConditionalParent(
Exchange.fromName( condition: isDesktop,
ref.read(currentExchangeNameStateProvider.state).state); builder: (child) => MouseRegion(
} cursor: SystemMouseCursors.click,
}, child: child,
child: Container( ),
color: Colors.transparent, child: GestureDetector(
child: Row( onTap: () {
crossAxisAlignment: CrossAxisAlignment.start, if (ref.read(currentExchangeNameStateProvider.state).state !=
children: [ SimpleSwapExchange.exchangeName) {
SizedBox( ref.read(currentExchangeNameStateProvider.state).state =
width: 20, SimpleSwapExchange.exchangeName;
height: 20, ref.read(exchangeFormStateProvider).exchange =
child: Radio( Exchange.fromName(ref
activeColor: Theme.of(context) .read(currentExchangeNameStateProvider.state)
.extension<StackColors>()! .state);
.radioButtonIconEnabled, }
value: SimpleSwapExchange.exchangeName, },
groupValue: ref child: Container(
.watch(currentExchangeNameStateProvider.state) color: Colors.transparent,
.state, child: Padding(
onChanged: (value) { padding: isDesktop
if (value is String) { ? const EdgeInsets.all(16)
ref : const EdgeInsets.all(0),
.read(currentExchangeNameStateProvider.state) child: Row(
.state = value; crossAxisAlignment: CrossAxisAlignment.start,
ref.read(exchangeFormStateProvider).exchange = children: [
Exchange.fromName(ref SizedBox(
width: 20,
height: 20,
child: Radio(
activeColor: Theme.of(context)
.extension<StackColors>()!
.radioButtonIconEnabled,
value: SimpleSwapExchange.exchangeName,
groupValue: ref
.watch(currentExchangeNameStateProvider.state)
.state,
onChanged: (value) {
if (value is String) {
ref
.read(currentExchangeNameStateProvider.state) .read(currentExchangeNameStateProvider.state)
.state); .state = value;
} ref.read(exchangeFormStateProvider).exchange =
}, Exchange.fromName(ref
), .read(currentExchangeNameStateProvider
), .state)
const SizedBox( .state);
width: 14, }
), },
SvgPicture.asset(
Assets.exchange.simpleSwap,
width: 24,
height: 24,
),
const SizedBox(
width: 10,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
SimpleSwapExchange.exchangeName,
style: STextStyles.titleBold12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark2,
),
), ),
if (from != null && ),
to != null && const SizedBox(
toAmount != null && width: 14,
toAmount! > Decimal.zero && ),
fromAmount != null && SvgPicture.asset(
fromAmount! > Decimal.zero) Assets.exchange.simpleSwap,
FutureBuilder( width: isDesktop ? 32 : 24,
future: SimpleSwapExchange().getEstimate( height: isDesktop ? 32 : 24,
from!, ),
to!, const SizedBox(
// reversed ? toAmount! : fromAmount!, width: 10,
fromAmount!, ),
fixedRate, Expanded(
// reversed, child: Column(
false, mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
SimpleSwapExchange.exchangeName,
style: STextStyles.titleBold12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark2,
),
), ),
builder: (context, if (from != null &&
AsyncSnapshot<ExchangeResponse<Estimate>> to != null &&
snapshot) { toAmount != null &&
if (snapshot.connectionState == toAmount! > Decimal.zero &&
ConnectionState.done && fromAmount != null &&
snapshot.hasData) { fromAmount! > Decimal.zero)
final estimate = snapshot.data?.value; FutureBuilder(
if (estimate != null) { future: SimpleSwapExchange().getEstimate(
Decimal rate = (estimate.estimatedAmount / from!,
fromAmount!) to!,
.toDecimal(scaleOnInfinitePrecision: 12); // reversed ? toAmount! : fromAmount!,
fromAmount!,
fixedRate,
// reversed,
false,
),
builder: (context,
AsyncSnapshot<ExchangeResponse<Estimate>>
snapshot) {
if (snapshot.connectionState ==
ConnectionState.done &&
snapshot.hasData) {
final estimate = snapshot.data?.value;
if (estimate != null) {
Decimal rate = (estimate.estimatedAmount /
fromAmount!)
.toDecimal(
scaleOnInfinitePrecision: 12);
return Text( return Text(
"1 ${from!.toUpperCase()} ~ ${Format.localizedStringAsFixed( "1 ${from!.toUpperCase()} ~ ${Format.localizedStringAsFixed(
value: rate, value: rate,
locale: ref.watch( locale: ref.watch(
localeServiceChangeNotifierProvider localeServiceChangeNotifierProvider
.select((value) => value.locale), .select(
(value) => value.locale),
),
decimalPlaces: to!.toUpperCase() ==
Coin.monero.ticker
.toUpperCase()
? Constants.decimalPlacesMonero
: Constants.decimalPlaces,
)} ${to!.toUpperCase()}",
style:
STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
} else {
Logging.instance.log(
"$runtimeType failed to fetch rate for SimpleSwap: ${snapshot.data}",
level: LogLevel.Warning,
);
return Text(
"Failed to fetch rate",
style:
STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
}
} else {
return AnimatedText(
stringsToLoopThrough: const [
"Loading",
"Loading.",
"Loading..",
"Loading...",
],
style: STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
), ),
decimalPlaces: to!.toUpperCase() == );
Coin.monero.ticker.toUpperCase() }
? Constants.decimalPlacesMonero },
: Constants.decimalPlaces, ),
)} ${to!.toUpperCase()}", // if (!(from != null &&
style: STextStyles.itemSubtitle12(context) // to != null &&
.copyWith( // (reversed
color: Theme.of(context) // ? toAmount != null && toAmount! > Decimal.zero
.extension<StackColors>()! // : fromAmount != null &&
.textSubtitle1, // fromAmount! > Decimal.zero)))
), if (!(from != null &&
); to != null &&
} else { toAmount != null &&
Logging.instance.log( toAmount! > Decimal.zero &&
"$runtimeType failed to fetch rate for SimpleSwap: ${snapshot.data}", fromAmount != null &&
level: LogLevel.Warning, fromAmount! > Decimal.zero))
); Text(
return Text( "n/a",
"Failed to fetch rate", style: STextStyles.itemSubtitle12(context)
style: STextStyles.itemSubtitle12(context) .copyWith(
.copyWith( color: Theme.of(context)
color: Theme.of(context) .extension<StackColors>()!
.extension<StackColors>()! .textSubtitle1,
.textSubtitle1, ),
), ),
); ],
} ),
} else { ),
return AnimatedText( ],
stringsToLoopThrough: const [
"Loading",
"Loading.",
"Loading..",
"Loading...",
],
style: STextStyles.itemSubtitle12(context)
.copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
);
}
},
),
// if (!(from != null &&
// to != null &&
// (reversed
// ? toAmount != null && toAmount! > Decimal.zero
// : fromAmount != null &&
// fromAmount! > Decimal.zero)))
if (!(from != null &&
to != null &&
toAmount != null &&
toAmount! > Decimal.zero &&
fromAmount != null &&
fromAmount! > Decimal.zero))
Text(
"n/a",
style: STextStyles.itemSubtitle12(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
),
],
),
), ),
], ),
), ),
), ),
), ),