Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2025-01-11 05:04:35 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

exchange amount field re style

Browse source
This commit is contained in:
julian 2022-11-22 14:42:24 -06:00
parent 9a47ce349e
commit 8e2ff3883d
2 changed files with 424 additions and 322 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

360
lib/pages/exchange_view/exchange_form.dart
View file

@ -2,7 +2,6 @@ import 'dart:async';
import 'package:decimal/decimal.dart'; import 'package:decimal/decimal.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter_svg/svg.dart'; import 'package:flutter_svg/svg.dart';
@ -25,6 +24,7 @@ import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/services/exchange/change_now/change_now_exchange.dart'; import 'package:stackwallet/services/exchange/change_now/change_now_exchange.dart';
import 'package:stackwallet/services/exchange/simpleswap/simpleswap_exchange.dart'; import 'package:stackwallet/services/exchange/simpleswap/simpleswap_exchange.dart';
import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/enums/coin_enum.dart'; import 'package:stackwallet/utilities/enums/coin_enum.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';
@ -37,10 +37,10 @@ import 'package:stackwallet/widgets/desktop/desktop_dialog_close_button.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart'; import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/desktop/simple_desktop_dialog.dart'; import 'package:stackwallet/widgets/desktop/simple_desktop_dialog.dart';
import 'package:stackwallet/widgets/loading_indicator.dart';
import 'package:stackwallet/widgets/rounded_container.dart'; import 'package:stackwallet/widgets/rounded_container.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart'; import 'package:stackwallet/widgets/rounded_white_container.dart';
import 'package:stackwallet/widgets/stack_dialog.dart'; import 'package:stackwallet/widgets/stack_dialog.dart';
import 'package:stackwallet/widgets/textfields/exchange_textfield.dart';
import 'package:tuple/tuple.dart'; import 'package:tuple/tuple.dart';
class ExchangeForm extends ConsumerStatefulWidget { class ExchangeForm extends ConsumerStatefulWidget {
@ -1226,146 +1226,33 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
SizedBox( SizedBox(
height: isDesktop ? 10 : 4, height: isDesktop ? 10 : 4,
), ),
TextFormField( ExchangeTextField(
style: STextStyles.smallMed14(context).copyWith( controller: _sendController,
focusNode: _sendFocusNode,
textStyle: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context).extension<StackColors>()!.textDark, color: Theme.of(context).extension<StackColors>()!.textDark,
), ),
focusNode: _sendFocusNode, buttonColor:
controller: _sendController, Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
textAlign: TextAlign.right, borderRadius: Constants.size.circularBorderRadius,
enableSuggestions: false, background:
autocorrect: false, Theme.of(context).extension<StackColors>()!.textFieldDefaultBG,
onTap: () { onTap: () {
if (_sendController.text == "-") { if (_sendController.text == "-") {
_sendController.text = ""; _sendController.text = "";
} }
}, },
onChanged: sendFieldOnChanged, onChanged: sendFieldOnChanged,
keyboardType: const TextInputType.numberWithOptions( onButtonTap: selectSendCurrency,
signed: false, isWalletCoin: isWalletCoin(coin, true),
decimal: true, image: _fetchIconUrlFromTicker(ref.watch(
exchangeFormStateProvider.select((value) => value.fromTicker))),
ticker: ref.watch(
exchangeFormStateProvider.select((value) => value.fromTicker)),
), ),
inputFormatters: [ SizedBox(
// regex to validate a crypto amount with 8 decimal places height: isDesktop ? 10 : 4,
TextInputFormatter.withFunction((oldValue, newValue) =>
RegExp(r'^([0-9]*[,.]?[0-9]{0,8}|[,.][0-9]{0,8})$')
.hasMatch(newValue.text)
? newValue
: oldValue),
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 12,
right: 12,
), ),
hintText: "0",
hintStyle: STextStyles.fieldLabel(context).copyWith(
fontSize: 14,
),
prefixIcon: FittedBox(
fit: BoxFit.scaleDown,
alignment: Alignment.centerLeft,
child: GestureDetector(
onTap: selectSendCurrency,
child: Container(
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
children: [
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
),
child: Builder(
builder: (context) {
final image = _fetchIconUrlFromTicker(ref.watch(
exchangeFormStateProvider
.select((value) => value.fromTicker)));
if (image != null && image.isNotEmpty) {
return Center(
child: SvgPicture.network(
image,
height: 18,
placeholderBuilder: (_) => Container(
width: 18,
height: 18,
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
borderRadius: BorderRadius.circular(
18,
),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(
18,
),
child: const LoadingIndicator(),
),
),
),
);
} else {
return Container(
width: 18,
height: 18,
decoration: BoxDecoration(
// color: Theme.of(context).extension<StackColors>()!.accentColorDark
borderRadius: BorderRadius.circular(18),
),
child: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
),
);
}
},
),
),
const SizedBox(
width: 6,
),
Text(
ref.watch(exchangeFormStateProvider.select((value) =>
value.fromTicker?.toUpperCase())) ??
"-",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
if (!isWalletCoin(coin, true))
const SizedBox(
width: 6,
),
if (!isWalletCoin(coin, true))
SvgPicture.asset(
Assets.svg.chevronDown,
width: 5,
height: 2.5,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
],
),
),
),
),
),
),
),
SizedBox( SizedBox(
height: isDesktop ? 10 : 4, height: isDesktop ? 10 : 4,
), ),
@ -1422,79 +1309,20 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
), ),
], ],
), ),
// Stack(
// children: [
// Positioned.fill(
// child: Align(
// alignment: Alignment.bottomLeft,
// child: Text(
// "You will receive",
// style: STextStyles.itemSubtitle(context).copyWith(
// color:
// Theme.of(context).extension<StackColors>()!.textDark3,
// ),
// ),
// ),
// ),
// Center(
// child: Column(
// children: [
// const SizedBox(
// height: 6,
// ),
// GestureDetector(
// onTap: () async {
// await _swap();
// },
// child: Padding(
// padding: const EdgeInsets.all(4),
// child: SvgPicture.asset(
// Assets.svg.swap,
// width: 20,
// height: 20,
// color: Theme.of(context)
// .extension<StackColors>()!
// .accentColorDark,
// ),
// ),
// ),
// const SizedBox(
// height: 6,
// ),
// ],
// ),
// ),
// Positioned.fill(
// child: Align(
// alignment: ref.watch(exchangeFormStateProvider
// .select((value) => value.reversed))
// ? Alignment.bottomRight
// : Alignment.topRight,
// child: Text(
// ref.watch(exchangeFormStateProvider
// .select((value) => value.warning)),
// style: STextStyles.errorSmall(context),
// ),
// ),
// ),
// ],
// ),
SizedBox( SizedBox(
height: isDesktop ? 10 : 4, height: isDesktop ? 10 : 4,
), ),
TextFormField( ExchangeTextField(
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context).extension<StackColors>()!.textDark,
),
focusNode: _receiveFocusNode, focusNode: _receiveFocusNode,
controller: _receiveController, controller: _receiveController,
enableSuggestions: false, textStyle: STextStyles.smallMed14(context).copyWith(
autocorrect: false, color: Theme.of(context).extension<StackColors>()!.textDark,
readOnly: ref.watch(prefsChangeNotifierProvider ),
.select((value) => value.exchangeRateType)) == buttonColor:
ExchangeRateType.estimated || Theme.of(context).extension<StackColors>()!.buttonBackSecondary,
ref.watch(exchangeProvider).name == borderRadius: Constants.size.circularBorderRadius,
SimpleSwapExchange.exchangeName, background:
Theme.of(context).extension<StackColors>()!.textFieldDefaultBG,
onTap: () { onTap: () {
if (!(ref.read(prefsChangeNotifierProvider).exchangeRateType == if (!(ref.read(prefsChangeNotifierProvider).exchangeRateType ==
ExchangeRateType.estimated) && ExchangeRateType.estimated) &&
@ -1503,127 +1331,17 @@ class _ExchangeFormState extends ConsumerState<ExchangeForm> {
} }
}, },
onChanged: receiveFieldOnChanged, onChanged: receiveFieldOnChanged,
textAlign: TextAlign.right, onButtonTap: selectReceiveCurrency,
keyboardType: const TextInputType.numberWithOptions( isWalletCoin: isWalletCoin(coin, true),
signed: false, image: _fetchIconUrlFromTicker(ref.watch(
decimal: true, exchangeFormStateProvider.select((value) => value.toTicker))),
), ticker: ref.watch(
inputFormatters: [ exchangeFormStateProvider.select((value) => value.toTicker)),
// regex to validate a crypto amount with 8 decimal places readOnly: ref.watch(prefsChangeNotifierProvider
TextInputFormatter.withFunction((oldValue, newValue) => .select((value) => value.exchangeRateType)) ==
RegExp(r'^([0-9]*[,.]?[0-9]{0,8}|[,.][0-9]{0,8})$') ExchangeRateType.estimated ||
.hasMatch(newValue.text) ref.watch(exchangeProvider).name ==
? newValue SimpleSwapExchange.exchangeName,
: oldValue),
],
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 12,
right: 12,
),
hintText: "0",
hintStyle: STextStyles.fieldLabel(context).copyWith(
fontSize: 14,
),
prefixIcon: FittedBox(
fit: BoxFit.scaleDown,
child: GestureDetector(
onTap: selectReceiveCurrency,
child: Container(
color: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(12),
child: Row(
children: [
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
),
child: Builder(
builder: (context) {
final image = _fetchIconUrlFromTicker(ref.watch(
exchangeFormStateProvider
.select((value) => value.toTicker)));
if (image != null && image.isNotEmpty) {
return Center(
child: SvgPicture.network(
image,
height: 18,
placeholderBuilder: (_) => Container(
width: 18,
height: 18,
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
borderRadius: BorderRadius.circular(18),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(
18,
),
child: const LoadingIndicator(),
),
),
),
);
} else {
return Container(
width: 18,
height: 18,
decoration: BoxDecoration(
// color: Theme.of(context).extension<StackColors>()!.accentColorDark
borderRadius: BorderRadius.circular(18),
),
child: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
),
);
}
},
),
),
const SizedBox(
width: 6,
),
Text(
ref.watch(exchangeFormStateProvider.select(
(value) => value.toTicker?.toUpperCase())) ??
"-",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
if (!isWalletCoin(coin, false))
const SizedBox(
width: 6,
),
if (!isWalletCoin(coin, false))
SvgPicture.asset(
Assets.svg.chevronDown,
width: 5,
height: 2.5,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
],
),
),
),
),
),
),
), ),
if (ref if (ref
.watch( .watch(

384
lib/widgets/textfields/exchange_textfield.dart Normal file
View file

@ -0,0 +1,384 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/loading_indicator.dart';
class ExchangeTextField extends StatefulWidget {
const ExchangeTextField({
Key? key,
this.borderRadius = 0,
this.background,
required this.controller,
this.buttonColor,
required this.focusNode,
this.buttonContent,
required this.textStyle,
this.onButtonTap,
this.onChanged,
this.onSubmitted,
this.onTap,
required this.isWalletCoin,
this.image,
this.ticker,
this.readOnly = false,
}) : super(key: key);
final double borderRadius;
final Color? background;
final Color? buttonColor;
final Widget? buttonContent;
final TextEditingController controller;
final FocusNode focusNode;
final TextStyle textStyle;
final VoidCallback? onTap;
final VoidCallback? onButtonTap;
final void Function(String)? onChanged;
final void Function(String)? onSubmitted;
final bool isWalletCoin;
final bool readOnly;
final String? image;
final String? ticker;
@override
State<ExchangeTextField> createState() => _ExchangeTextFieldState();
}
class _ExchangeTextFieldState extends State<ExchangeTextField> {
late final TextEditingController controller;
late final FocusNode focusNode;
late final TextStyle textStyle;
late final double borderRadius;
late final Color? background;
late final Color? buttonColor;
late final Widget? buttonContent;
late final VoidCallback? onButtonTap;
late final VoidCallback? onTap;
late final void Function(String)? onChanged;
late final void Function(String)? onSubmitted;
@override
void initState() {
borderRadius = widget.borderRadius;
background = widget.background;
buttonColor = widget.buttonColor;
controller = widget.controller;
focusNode = widget.focusNode;
buttonContent = widget.buttonContent;
textStyle = widget.textStyle;
onButtonTap = widget.onButtonTap;
onChanged = widget.onChanged;
onSubmitted = widget.onSubmitted;
onTap = widget.onTap;
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: background,
borderRadius: BorderRadius.circular(borderRadius),
),
child: IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextField(
style: textStyle,
controller: controller,
focusNode: focusNode,
onChanged: onChanged,
onTap: onTap,
enableSuggestions: false,
autocorrect: false,
readOnly: widget.readOnly,
keyboardType: const TextInputType.numberWithOptions(
signed: false,
decimal: true,
),
decoration: InputDecoration(
contentPadding: const EdgeInsets.only(
top: 12,
left: 12,
),
hintText: "0",
hintStyle: STextStyles.fieldLabel(context).copyWith(
fontSize: 14,
),
),
inputFormatters: [
// regex to validate a crypto amount with 8 decimal places
TextInputFormatter.withFunction((oldValue, newValue) =>
RegExp(r'^([0-9]*[,.]?[0-9]{0,8}|[,.][0-9]{0,8})$')
.hasMatch(newValue.text)
? newValue
: oldValue),
],
),
),
MouseRegion(
cursor: SystemMouseCursors.click,
child: GestureDetector(
onTap: () => onButtonTap?.call(),
child: Container(
decoration: BoxDecoration(
color: buttonColor,
borderRadius: BorderRadius.horizontal(
right: Radius.circular(
borderRadius,
),
),
),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16,
),
child: Row(
children: [
Container(
width: 18,
height: 18,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(18),
),
child: Builder(
builder: (context) {
final image = widget.image;
if (image != null && image.isNotEmpty) {
return Center(
child: SvgPicture.network(
image,
height: 18,
placeholderBuilder: (_) => Container(
width: 18,
height: 18,
decoration: BoxDecoration(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
borderRadius: BorderRadius.circular(
18,
),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(
18,
),
child: const LoadingIndicator(),
),
),
),
);
} else {
return Container(
width: 18,
height: 18,
decoration: BoxDecoration(
// color: Theme.of(context).extension<StackColors>()!.accentColorDark
borderRadius: BorderRadius.circular(18),
),
child: SvgPicture.asset(
Assets.svg.circleQuestion,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
),
);
}
},
),
),
const SizedBox(
width: 6,
),
Text(
widget.ticker ?? "-",
style: STextStyles.smallMed14(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
),
if (!widget.isWalletCoin)
const SizedBox(
width: 6,
),
if (!widget.isWalletCoin)
SvgPicture.asset(
Assets.svg.chevronDown,
width: 5,
height: 2.5,
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
),
],
),
),
),
),
),
],
),
),
);
}
}
// experimental UNUSED
// class ExchangeTextField extends StatefulWidget {
// const ExchangeTextField({
// Key? key,
// this.borderRadius = 0,
// this.background,
// required this.controller,
// this.buttonColor,
// required this.focusNode,
// this.buttonContent,
// required this.textStyle,
// this.onButtonTap,
// this.onChanged,
// this.onSubmitted,
// }) : super(key: key);
//
// final double borderRadius;
// final Color? background;
// final Color? buttonColor;
// final Widget? buttonContent;
// final TextEditingController controller;
// final FocusNode focusNode;
// final TextStyle textStyle;
// final VoidCallback? onButtonTap;
// final void Function(String)? onChanged;
// final void Function(String)? onSubmitted;
//
// @override
// State<ExchangeTextField> createState() => _ExchangeTextFieldState();
// }
//
// class _ExchangeTextFieldState extends State<ExchangeTextField> {
// late final TextEditingController controller;
// late final FocusNode focusNode;
// late final TextStyle textStyle;
//
// late final double borderRadius;
//
// late final Color? background;
// late final Color? buttonColor;
// late final Widget? buttonContent;
// late final VoidCallback? onButtonTap;
// late final void Function(String)? onChanged;
// late final void Function(String)? onSubmitted;
//
// @override
// void initState() {
// borderRadius = widget.borderRadius;
// background = widget.background;
// buttonColor = widget.buttonColor;
// controller = widget.controller;
// focusNode = widget.focusNode;
// buttonContent = widget.buttonContent;
// textStyle = widget.textStyle;
// onButtonTap = widget.onButtonTap;
// onChanged = widget.onChanged;
// onSubmitted = widget.onSubmitted;
//
// super.initState();
// }
//
// @override
// Widget build(BuildContext context) {
// return Container(
// decoration: BoxDecoration(
// color: background,
// borderRadius: BorderRadius.circular(borderRadius),
// ),
// child: IntrinsicHeight(
// child: Row(
// crossAxisAlignment: CrossAxisAlignment.stretch,
// children: [
// Expanded(
// child: MouseRegion(
// cursor: SystemMouseCursors.text,
// child: GestureDetector(
// onTap: () {
// //
// },
// child: Padding(
// padding: const EdgeInsets.only(
// left: 16,
// top: 18,
// bottom: 17,
// ),
// child: IgnorePointer(
// ignoring: true,
// child: EditableText(
// controller: controller,
// focusNode: focusNode,
// style: textStyle,
// onChanged: onChanged,
// onSubmitted: onSubmitted,
// onEditingComplete: () => print("lol"),
// autocorrect: false,
// enableSuggestions: false,
// keyboardType: const TextInputType.numberWithOptions(
// signed: false,
// decimal: true,
// ),
// inputFormatters: [
// // regex to validate a crypto amount with 8 decimal places
// TextInputFormatter.withFunction((oldValue,
// newValue) =>
// RegExp(r'^([0-9]*[,.]?[0-9]{0,8}|[,.][0-9]{0,8})$')
// .hasMatch(newValue.text)
// ? newValue
// : oldValue),
// ],
// cursorColor: textStyle.color ??
// Theme.of(context).backgroundColor,
// backgroundCursorColor: background ?? Colors.transparent,
// ),
// ),
// ),
// ),
// ),
// ),
// MouseRegion(
// cursor: SystemMouseCursors.click,
// child: GestureDetector(
// onTap: () => onButtonTap?.call(),
// child: Container(
// decoration: BoxDecoration(
// color: buttonColor,
// borderRadius: BorderRadius.horizontal(
// right: Radius.circular(
// borderRadius,
// ),
// ),
// ),
// child: Padding(
// padding: const EdgeInsets.symmetric(
// horizontal: 16,
// ),
// child: buttonContent,
// ),
// ),
// ),
// ),
// ],
// ),
// ),
// );
// }
// }