mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-03-22 07:08:49 +00:00
CWA-212 | applied new design to exchange page; reworked exchange card; added new properties to address_text_field, base_text_form_field and top_panel
This commit is contained in:
parent
38d7dbcb33
commit
16dfb3a2d5
5 changed files with 484 additions and 199 deletions
|
@ -1,4 +1,6 @@
|
||||||
import 'dart:ui';
|
import 'dart:ui';
|
||||||
|
import 'package:dotted_border/dotted_border.dart';
|
||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:flutter_mobx/flutter_mobx.dart';
|
import 'package:flutter_mobx/flutter_mobx.dart';
|
||||||
import 'package:mobx/mobx.dart';
|
import 'package:mobx/mobx.dart';
|
||||||
|
@ -19,16 +21,17 @@ import 'package:cake_wallet/src/screens/exchange/widgets/exchange_card.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/picker.dart';
|
import 'package:cake_wallet/src/widgets/picker.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/widgets/top_panel.dart';
|
||||||
|
|
||||||
class ExchangePage extends BasePage {
|
class ExchangePage extends BasePage {
|
||||||
@override
|
@override
|
||||||
String get title => S.current.exchange;
|
String get title => S.current.exchange;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
bool get isModalBackButton => true;
|
Color get backgroundColor => PaletteDark.walletCardSubAddressField;
|
||||||
|
|
||||||
final Image arrowBottomPurple =
|
final Image arrowBottom =
|
||||||
Image.asset('assets/images/arrow_bottom_purple_icon.png', height: 8);
|
Image.asset('assets/images/arrow_bottom_purple_icon.png', color: Colors.white, height: 6);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget middle(BuildContext context) {
|
Widget middle(BuildContext context) {
|
||||||
|
@ -38,31 +41,34 @@ class ExchangePage extends BasePage {
|
||||||
onPressed: () => _presentProviderPicker(context),
|
onPressed: () => _presentProviderPicker(context),
|
||||||
highlightColor: Colors.transparent,
|
highlightColor: Colors.transparent,
|
||||||
splashColor: Colors.transparent,
|
splashColor: Colors.transparent,
|
||||||
child: Column(
|
child: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
mainAxisSize: MainAxisSize.min,
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Row(
|
Column(
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: [
|
children: <Widget>[
|
||||||
Text(S.of(context).exchange,
|
Text(S.of(context).exchange,
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 16.0,
|
|
||||||
fontWeight: FontWeight.w400,
|
|
||||||
color: Theme.of(context).primaryTextTheme.title.color)),
|
|
||||||
SizedBox(width: 5),
|
|
||||||
arrowBottomPurple
|
|
||||||
]),
|
|
||||||
Observer(
|
|
||||||
builder: (_) => Text('${exchangeStore.provider.title}',
|
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 10.0,
|
fontSize: 16.0,
|
||||||
fontWeight: FontWeight.w400,
|
fontWeight: FontWeight.w400,
|
||||||
color:
|
color: Colors.white)),
|
||||||
Theme.of(context).primaryTextTheme.headline.color)))
|
Observer(
|
||||||
|
builder: (_) => Text('${exchangeStore.provider.title}',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 10.0,
|
||||||
|
fontWeight: FontWeight.w400,
|
||||||
|
color:PaletteDark.walletCardText)))
|
||||||
|
],
|
||||||
|
),
|
||||||
|
SizedBox(width: 5),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(top: 8),
|
||||||
|
child: arrowBottom,
|
||||||
|
)
|
||||||
],
|
],
|
||||||
),
|
)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -72,14 +78,16 @@ class ExchangePage extends BasePage {
|
||||||
|
|
||||||
return ButtonTheme(
|
return ButtonTheme(
|
||||||
minWidth: double.minPositive,
|
minWidth: double.minPositive,
|
||||||
|
highlightColor: Colors.transparent,
|
||||||
|
splashColor: Colors.transparent,
|
||||||
child: FlatButton(
|
child: FlatButton(
|
||||||
padding: EdgeInsets.all(0),
|
padding: EdgeInsets.all(0),
|
||||||
child: Text(
|
child: Text(
|
||||||
S.of(context).clear,
|
S.of(context).clear,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
color: Theme.of(context).accentTextTheme.caption.color,
|
color: PaletteDark.walletCardText,
|
||||||
fontWeight: FontWeight.w500,
|
fontWeight: FontWeight.w500,
|
||||||
fontSize: 16),
|
fontSize: 14),
|
||||||
),
|
),
|
||||||
onPressed: () => exchangeStore.reset()),
|
onPressed: () => exchangeStore.reset()),
|
||||||
);
|
);
|
||||||
|
@ -117,10 +125,12 @@ class ExchangeFormState extends State<ExchangeForm> {
|
||||||
|
|
||||||
final Image arrowBottomPurple = Image.asset(
|
final Image arrowBottomPurple = Image.asset(
|
||||||
'assets/images/arrow_bottom_purple_icon.png',
|
'assets/images/arrow_bottom_purple_icon.png',
|
||||||
|
color: Colors.white,
|
||||||
height: 8,
|
height: 8,
|
||||||
);
|
);
|
||||||
final Image arrowBottomCakeGreen = Image.asset(
|
final Image arrowBottomCakeGreen = Image.asset(
|
||||||
'assets/images/arrow_bottom_cake_green.png',
|
'assets/images/arrow_bottom_cake_green.png',
|
||||||
|
color: Colors.white,
|
||||||
height: 8,
|
height: 8,
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -141,156 +151,309 @@ class ExchangeFormState extends State<ExchangeForm> {
|
||||||
WidgetsBinding.instance.addPostFrameCallback(
|
WidgetsBinding.instance.addPostFrameCallback(
|
||||||
(_) => _setReactions(context, exchangeStore, walletStore));
|
(_) => _setReactions(context, exchangeStore, walletStore));
|
||||||
|
|
||||||
return Form(
|
return Container(
|
||||||
key: _formKey,
|
color: PaletteDark.historyPanel,
|
||||||
child: ScrollableWithBottomSection(
|
child: Form(
|
||||||
contentPadding: EdgeInsets.only(left: 20, right: 20),
|
key: _formKey,
|
||||||
content: SingleChildScrollView(
|
child: ScrollableWithBottomSection(
|
||||||
child: Column(
|
contentPadding: EdgeInsets.only(bottom: 24),
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
content: Column(
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
|
TopPanel(
|
||||||
|
color: PaletteDark.menuList,
|
||||||
|
edgeInsets: EdgeInsets.only(bottom: 24),
|
||||||
|
widget: Column(
|
||||||
|
children: <Widget>[
|
||||||
|
TopPanel(
|
||||||
|
color: PaletteDark.walletCardSubAddressField,
|
||||||
|
widget: Observer(
|
||||||
|
builder: (_) => ExchangeCard(
|
||||||
|
key: depositKey,
|
||||||
|
title: S.of(context).you_will_send,
|
||||||
|
initialCurrency: exchangeStore.depositCurrency,
|
||||||
|
initialWalletName: depositWalletName,
|
||||||
|
initialAddress:
|
||||||
|
exchangeStore.depositCurrency == walletStore.type
|
||||||
|
? walletStore.address
|
||||||
|
: null,
|
||||||
|
initialIsAmountEditable: true,
|
||||||
|
initialIsAddressEditable: true,
|
||||||
|
isAmountEstimated: false,
|
||||||
|
currencies: CryptoCurrency.all,
|
||||||
|
onCurrencySelected: (currency) =>
|
||||||
|
exchangeStore.changeDepositCurrency(currency: currency),
|
||||||
|
imageArrow: arrowBottomPurple,
|
||||||
|
currencyButtonColor: PaletteDark.walletCardSubAddressField,
|
||||||
|
currencyValueValidator: (value) {
|
||||||
|
exchangeStore.validateCryptoCurrency(value);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
addressTextFieldValidator: (value) {
|
||||||
|
exchangeStore.validateAddress(value,
|
||||||
|
cryptoCurrency: exchangeStore.depositCurrency);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(top: 32, left: 24, right: 24),
|
||||||
|
child: Observer(
|
||||||
|
builder: (_) => ExchangeCard(
|
||||||
|
key: receiveKey,
|
||||||
|
title: S.of(context).you_will_get,
|
||||||
|
initialCurrency: exchangeStore.receiveCurrency,
|
||||||
|
initialWalletName: receiveWalletName,
|
||||||
|
initialAddress:
|
||||||
|
exchangeStore.receiveCurrency == walletStore.type
|
||||||
|
? walletStore.address
|
||||||
|
: null,
|
||||||
|
initialIsAmountEditable: false,
|
||||||
|
initialIsAddressEditable: true,
|
||||||
|
isAmountEstimated: true,
|
||||||
|
currencies: CryptoCurrency.all,
|
||||||
|
onCurrencySelected: (currency) => exchangeStore
|
||||||
|
.changeReceiveCurrency(currency: currency),
|
||||||
|
imageArrow: arrowBottomCakeGreen,
|
||||||
|
currencyButtonColor: PaletteDark.menuList,
|
||||||
|
currencyValueValidator: (value) {
|
||||||
|
exchangeStore.validateCryptoCurrency(value);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
addressTextFieldValidator: (value) {
|
||||||
|
exchangeStore.validateAddress(value,
|
||||||
|
cryptoCurrency: exchangeStore.receiveCurrency);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
)),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
)
|
||||||
|
),
|
||||||
Padding(
|
Padding(
|
||||||
padding: EdgeInsets.only(top: 10, bottom: 20),
|
padding: EdgeInsets.only(
|
||||||
child: Text(
|
top: 32,
|
||||||
S.of(context).you_will_send,
|
left: 24,
|
||||||
style: TextStyle(
|
bottom: 24
|
||||||
fontWeight: FontWeight.bold,
|
),
|
||||||
fontSize: 18,
|
child: Row(
|
||||||
height: 1.1,
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
color: Theme.of(context).primaryTextTheme.title.color),
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
S.of(context).send_templates,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: PaletteDark.walletCardText
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
ExchangeCard(
|
Container(
|
||||||
key: depositKey,
|
height: 40,
|
||||||
initialCurrency: exchangeStore.depositCurrency,
|
width: double.infinity,
|
||||||
initialWalletName: depositWalletName,
|
padding: EdgeInsets.only(left: 24),
|
||||||
initialAddress:
|
child: Observer(
|
||||||
exchangeStore.depositCurrency == walletStore.type
|
builder: (_) {
|
||||||
? walletStore.address
|
|
||||||
: null,
|
return ListView.builder(
|
||||||
initialIsAmountEditable: true,
|
scrollDirection: Axis.horizontal,
|
||||||
initialIsAddressEditable: true,
|
itemCount: 1,
|
||||||
isAmountEstimated: false,
|
itemBuilder: (context, index) {
|
||||||
currencies: CryptoCurrency.all,
|
|
||||||
onCurrencySelected: (currency) =>
|
if (index == 0) {
|
||||||
exchangeStore.changeDepositCurrency(currency: currency),
|
return GestureDetector(
|
||||||
imageArrow: arrowBottomPurple,
|
onTap: () {},
|
||||||
currencyValueValidator: (value) {
|
child: Container(
|
||||||
exchangeStore.validateCryptoCurrency(value);
|
padding: EdgeInsets.only(right: 10),
|
||||||
return exchangeStore.errorMessage;
|
child: DottedBorder(
|
||||||
},
|
borderType: BorderType.RRect,
|
||||||
addressTextFieldValidator: (value) {
|
dashPattern: [8, 4],
|
||||||
exchangeStore.validateAddress(value,
|
color: PaletteDark.menuList,
|
||||||
cryptoCurrency: exchangeStore.depositCurrency);
|
strokeWidth: 2,
|
||||||
return exchangeStore.errorMessage;
|
radius: Radius.circular(20),
|
||||||
},
|
child: Container(
|
||||||
),
|
height: 40,
|
||||||
SizedBox(height: 35),
|
width: 75,
|
||||||
Padding(
|
padding: EdgeInsets.only(left: 10, right: 10),
|
||||||
padding: EdgeInsets.only(bottom: 20),
|
alignment: Alignment.center,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(20)),
|
||||||
|
color: Colors.transparent,
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
S.of(context).send_new,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
color: PaletteDark.walletCardText
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
index -= 1;
|
||||||
|
|
||||||
|
return Container();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
|
||||||
|
/*SingleChildScrollView(
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||||||
|
children: <Widget>[
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(top: 10, bottom: 20),
|
||||||
child: Text(
|
child: Text(
|
||||||
S.of(context).you_will_get,
|
S.of(context).you_will_send,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontWeight: FontWeight.bold,
|
fontWeight: FontWeight.bold,
|
||||||
fontSize: 18,
|
fontSize: 18,
|
||||||
height: 1.1,
|
height: 1.1,
|
||||||
color:
|
color: Theme.of(context).primaryTextTheme.title.color),
|
||||||
Theme.of(context).primaryTextTheme.title.color),
|
),
|
||||||
)),
|
),
|
||||||
Observer(
|
ExchangeCard(
|
||||||
builder: (_) => ExchangeCard(
|
key: depositKey,
|
||||||
key: receiveKey,
|
initialCurrency: exchangeStore.depositCurrency,
|
||||||
initialCurrency: exchangeStore.receiveCurrency,
|
initialWalletName: depositWalletName,
|
||||||
initialWalletName: receiveWalletName,
|
initialAddress:
|
||||||
initialAddress:
|
exchangeStore.depositCurrency == walletStore.type
|
||||||
exchangeStore.receiveCurrency == walletStore.type
|
? walletStore.address
|
||||||
? walletStore.address
|
: null,
|
||||||
: null,
|
initialIsAmountEditable: true,
|
||||||
initialIsAmountEditable: false,
|
initialIsAddressEditable: true,
|
||||||
initialIsAddressEditable: true,
|
isAmountEstimated: false,
|
||||||
isAmountEstimated: true,
|
currencies: CryptoCurrency.all,
|
||||||
currencies: CryptoCurrency.all,
|
/*onCurrencySelected: (currency) =>
|
||||||
onCurrencySelected: (currency) => exchangeStore
|
exchangeStore.changeDepositCurrency(currency: currency),*/
|
||||||
.changeReceiveCurrency(currency: currency),
|
imageArrow: arrowBottomPurple,
|
||||||
imageArrow: arrowBottomCakeGreen,
|
currencyValueValidator: (value) {
|
||||||
currencyValueValidator: (value) {
|
exchangeStore.validateCryptoCurrency(value);
|
||||||
exchangeStore.validateCryptoCurrency(value);
|
return exchangeStore.errorMessage;
|
||||||
return exchangeStore.errorMessage;
|
},
|
||||||
},
|
addressTextFieldValidator: (value) {
|
||||||
addressTextFieldValidator: (value) {
|
exchangeStore.validateAddress(value,
|
||||||
exchangeStore.validateAddress(value,
|
cryptoCurrency: exchangeStore.depositCurrency);
|
||||||
cryptoCurrency: exchangeStore.receiveCurrency);
|
return exchangeStore.errorMessage;
|
||||||
return exchangeStore.errorMessage;
|
},
|
||||||
},
|
),
|
||||||
)),
|
SizedBox(height: 35),
|
||||||
],
|
Padding(
|
||||||
),
|
padding: EdgeInsets.only(bottom: 20),
|
||||||
),
|
child: Text(
|
||||||
bottomSectionPadding: EdgeInsets.only(top: 35, left: 20, right: 20),
|
S.of(context).you_will_get,
|
||||||
bottomSection: Column(children: <Widget>[
|
style: TextStyle(
|
||||||
Padding(
|
fontWeight: FontWeight.bold,
|
||||||
padding: EdgeInsets.only(bottom: 15),
|
fontSize: 18,
|
||||||
child: Observer(builder: (_) {
|
height: 1.1,
|
||||||
final description =
|
color:
|
||||||
exchangeStore.provider is XMRTOExchangeProvider
|
Theme.of(context).primaryTextTheme.title.color),
|
||||||
? S.of(context).amount_is_guaranteed
|
)),
|
||||||
: S.of(context).amount_is_estimate;
|
Observer(
|
||||||
return Center(
|
builder: (_) => ExchangeCard(
|
||||||
child: Text(
|
key: receiveKey,
|
||||||
description,
|
initialCurrency: exchangeStore.receiveCurrency,
|
||||||
style: TextStyle(color: Palette.blueGrey, fontSize: 12),
|
initialWalletName: receiveWalletName,
|
||||||
|
initialAddress:
|
||||||
|
exchangeStore.receiveCurrency == walletStore.type
|
||||||
|
? walletStore.address
|
||||||
|
: null,
|
||||||
|
initialIsAmountEditable: false,
|
||||||
|
initialIsAddressEditable: true,
|
||||||
|
isAmountEstimated: true,
|
||||||
|
currencies: CryptoCurrency.all,
|
||||||
|
/*onCurrencySelected: (currency) => exchangeStore
|
||||||
|
.changeReceiveCurrency(currency: currency),*/
|
||||||
|
imageArrow: arrowBottomCakeGreen,
|
||||||
|
currencyValueValidator: (value) {
|
||||||
|
exchangeStore.validateCryptoCurrency(value);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
addressTextFieldValidator: (value) {
|
||||||
|
exchangeStore.validateAddress(value,
|
||||||
|
cryptoCurrency: exchangeStore.receiveCurrency);
|
||||||
|
return exchangeStore.errorMessage;
|
||||||
|
},
|
||||||
|
)),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),*/
|
||||||
|
bottomSectionPadding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
|
||||||
|
bottomSection: Column(children: <Widget>[
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(bottom: 15),
|
||||||
|
child: Observer(builder: (_) {
|
||||||
|
final description =
|
||||||
|
exchangeStore.provider is XMRTOExchangeProvider
|
||||||
|
? S.of(context).amount_is_guaranteed
|
||||||
|
: S.of(context).amount_is_estimate;
|
||||||
|
return Center(
|
||||||
|
child: Text(
|
||||||
|
description,
|
||||||
|
style: TextStyle(
|
||||||
|
color: PaletteDark.walletCardText,
|
||||||
|
fontSize: 12
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
Observer(
|
||||||
|
builder: (_) => LoadingPrimaryButton(
|
||||||
|
text: S.of(context).exchange,
|
||||||
|
onPressed: () {
|
||||||
|
if (_formKey.currentState.validate()) {
|
||||||
|
exchangeStore.createTrade();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: Colors.blue,
|
||||||
|
textColor: Colors.white,
|
||||||
|
isLoading: exchangeStore.tradeState is TradeIsCreating,
|
||||||
|
)),
|
||||||
|
/*Observer(builder: (_) {
|
||||||
|
final title = exchangeStore.provider.description.title;
|
||||||
|
var imageSrc = '';
|
||||||
|
|
||||||
|
switch (exchangeStore.provider.description) {
|
||||||
|
case ExchangeProviderDescription.xmrto:
|
||||||
|
imageSrc = 'assets/images/xmr_btc.png';
|
||||||
|
break;
|
||||||
|
case ExchangeProviderDescription.changeNow:
|
||||||
|
imageSrc = 'assets/images/change_now.png';
|
||||||
|
break;
|
||||||
|
case ExchangeProviderDescription.morphToken:
|
||||||
|
imageSrc = 'assets/images/morph_icon.png';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return Padding(
|
||||||
|
padding: EdgeInsets.only(top: 20, bottom: 20),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.center,
|
||||||
|
children: <Widget>[
|
||||||
|
Image.asset(imageSrc),
|
||||||
|
SizedBox(width: 10),
|
||||||
|
Text(
|
||||||
|
S.of(context).powered_by(title),
|
||||||
|
style: TextStyle(fontSize: 14, color: Palette.powered),
|
||||||
|
)
|
||||||
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}),
|
})*/
|
||||||
),
|
]),
|
||||||
Observer(
|
)),
|
||||||
builder: (_) => LoadingPrimaryButton(
|
);
|
||||||
text: S.of(context).exchange,
|
|
||||||
onPressed: () {
|
|
||||||
if (_formKey.currentState.validate()) {
|
|
||||||
exchangeStore.createTrade();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
color: Theme.of(context)
|
|
||||||
.primaryTextTheme
|
|
||||||
.button
|
|
||||||
.backgroundColor,
|
|
||||||
textColor: Theme.of(context).primaryTextTheme.button.color,
|
|
||||||
isLoading: exchangeStore.tradeState is TradeIsCreating,
|
|
||||||
)),
|
|
||||||
Observer(builder: (_) {
|
|
||||||
final title = exchangeStore.provider.description.title;
|
|
||||||
var imageSrc = '';
|
|
||||||
|
|
||||||
switch (exchangeStore.provider.description) {
|
|
||||||
case ExchangeProviderDescription.xmrto:
|
|
||||||
imageSrc = 'assets/images/xmr_btc.png';
|
|
||||||
break;
|
|
||||||
case ExchangeProviderDescription.changeNow:
|
|
||||||
imageSrc = 'assets/images/change_now.png';
|
|
||||||
break;
|
|
||||||
case ExchangeProviderDescription.morphToken:
|
|
||||||
imageSrc = 'assets/images/morph_icon.png';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return Padding(
|
|
||||||
padding: EdgeInsets.only(top: 20, bottom: 20),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.center,
|
|
||||||
children: <Widget>[
|
|
||||||
Image.asset(imageSrc),
|
|
||||||
SizedBox(width: 10),
|
|
||||||
Text(
|
|
||||||
S.of(context).powered_by(title),
|
|
||||||
style: TextStyle(fontSize: 14, color: Palette.powered),
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
);
|
|
||||||
})
|
|
||||||
]),
|
|
||||||
));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
void _setReactions(
|
void _setReactions(
|
||||||
|
|
|
@ -5,10 +5,12 @@ import 'package:cake_wallet/generated/i18n.dart';
|
||||||
import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
|
import 'package:cake_wallet/src/domain/common/crypto_currency.dart';
|
||||||
import 'package:cake_wallet/src/widgets/picker.dart';
|
import 'package:cake_wallet/src/widgets/picker.dart';
|
||||||
import 'package:cake_wallet/src/widgets/address_text_field.dart';
|
import 'package:cake_wallet/src/widgets/address_text_field.dart';
|
||||||
|
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
|
||||||
|
|
||||||
class ExchangeCard extends StatefulWidget {
|
class ExchangeCard extends StatefulWidget {
|
||||||
ExchangeCard(
|
ExchangeCard(
|
||||||
{Key key,
|
{Key key,
|
||||||
|
this.title = '',
|
||||||
this.initialCurrency,
|
this.initialCurrency,
|
||||||
this.initialAddress,
|
this.initialAddress,
|
||||||
this.initialWalletName,
|
this.initialWalletName,
|
||||||
|
@ -18,12 +20,14 @@ class ExchangeCard extends StatefulWidget {
|
||||||
this.currencies,
|
this.currencies,
|
||||||
this.onCurrencySelected,
|
this.onCurrencySelected,
|
||||||
this.imageArrow,
|
this.imageArrow,
|
||||||
|
this.currencyButtonColor = Colors.transparent,
|
||||||
this.currencyValueValidator,
|
this.currencyValueValidator,
|
||||||
this.addressTextFieldValidator})
|
this.addressTextFieldValidator})
|
||||||
: super(key: key);
|
: super(key: key);
|
||||||
|
|
||||||
final List<CryptoCurrency> currencies;
|
final List<CryptoCurrency> currencies;
|
||||||
final Function(CryptoCurrency) onCurrencySelected;
|
final Function(CryptoCurrency) onCurrencySelected;
|
||||||
|
final String title;
|
||||||
final CryptoCurrency initialCurrency;
|
final CryptoCurrency initialCurrency;
|
||||||
final String initialWalletName;
|
final String initialWalletName;
|
||||||
final String initialAddress;
|
final String initialAddress;
|
||||||
|
@ -31,6 +35,7 @@ class ExchangeCard extends StatefulWidget {
|
||||||
final bool initialIsAddressEditable;
|
final bool initialIsAddressEditable;
|
||||||
final bool isAmountEstimated;
|
final bool isAmountEstimated;
|
||||||
final Image imageArrow;
|
final Image imageArrow;
|
||||||
|
final Color currencyButtonColor;
|
||||||
final FormFieldValidator<String> currencyValueValidator;
|
final FormFieldValidator<String> currencyValueValidator;
|
||||||
final FormFieldValidator<String> addressTextFieldValidator;
|
final FormFieldValidator<String> addressTextFieldValidator;
|
||||||
|
|
||||||
|
@ -42,6 +47,7 @@ class ExchangeCardState extends State<ExchangeCard> {
|
||||||
final addressController = TextEditingController();
|
final addressController = TextEditingController();
|
||||||
final amountController = TextEditingController();
|
final amountController = TextEditingController();
|
||||||
|
|
||||||
|
String _title;
|
||||||
String _min;
|
String _min;
|
||||||
String _max;
|
String _max;
|
||||||
CryptoCurrency _selectedCurrency;
|
CryptoCurrency _selectedCurrency;
|
||||||
|
@ -52,6 +58,7 @@ class ExchangeCardState extends State<ExchangeCard> {
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
|
_title = widget.title;
|
||||||
_isAmountEditable = widget.initialIsAmountEditable;
|
_isAmountEditable = widget.initialIsAmountEditable;
|
||||||
_isAddressEditable = widget.initialIsAddressEditable;
|
_isAddressEditable = widget.initialIsAddressEditable;
|
||||||
_walletName = widget.initialWalletName;
|
_walletName = widget.initialWalletName;
|
||||||
|
@ -103,33 +110,117 @@ class ExchangeCardState extends State<ExchangeCard> {
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
padding: EdgeInsets.fromLTRB(22, 15, 22, 30),
|
|
||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
decoration: BoxDecoration(
|
color: Colors.transparent,
|
||||||
color: Theme.of(context).cardColor,
|
child: Column(
|
||||||
borderRadius: BorderRadius.all(Radius.circular(12))),
|
children: <Widget>[
|
||||||
child: Column(children: <Widget>[
|
Row(
|
||||||
_isAmountEstimated != null && _isAmountEstimated
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
? Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[
|
children: <Widget>[
|
||||||
SizedBox(
|
Text(
|
||||||
height: 30,
|
_title,
|
||||||
child: Container(
|
style: TextStyle(
|
||||||
padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
|
fontSize: 18,
|
||||||
decoration: BoxDecoration(
|
fontWeight: FontWeight.w600,
|
||||||
color: Palette.lightGrey,
|
color: PaletteDark.walletCardText
|
||||||
borderRadius: BorderRadius.circular(10.0)),
|
),
|
||||||
child: Text(
|
)
|
||||||
S.of(context).estimated,
|
],
|
||||||
style: TextStyle(
|
),
|
||||||
fontSize: 14,
|
Padding(
|
||||||
color: Palette.wildDarkBlue,
|
padding: EdgeInsets.only(top: 10),
|
||||||
fontWeight: FontWeight.bold),
|
child: Stack(
|
||||||
),
|
children: <Widget>[
|
||||||
|
BaseTextFormField(
|
||||||
|
controller: amountController,
|
||||||
|
enabled: _isAmountEditable,
|
||||||
|
textAlign: TextAlign.left,
|
||||||
|
keyboardType: TextInputType.numberWithOptions(
|
||||||
|
signed: false, decimal: true),
|
||||||
|
inputFormatters: [
|
||||||
|
BlacklistingTextInputFormatter(
|
||||||
|
RegExp('[\\-|\\ |\\,]'))
|
||||||
|
],
|
||||||
|
hintText: '0.0000',
|
||||||
|
borderColor: PaletteDark.borderCardColor,
|
||||||
|
validator: widget.currencyValueValidator
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
bottom: 8,
|
||||||
|
right: 0,
|
||||||
|
child: Container(
|
||||||
|
height: 32,
|
||||||
|
padding: EdgeInsets.only(left: 10),
|
||||||
|
color: widget.currencyButtonColor,
|
||||||
|
child: InkWell(
|
||||||
|
onTap: () => _presentPicker(context),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
_selectedCurrency.toString(),
|
||||||
|
style: TextStyle(
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
fontSize: 16,
|
||||||
|
color: Colors.white)),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(left: 5),
|
||||||
|
child: widget.imageArrow,
|
||||||
|
)
|
||||||
|
]),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
])
|
)
|
||||||
: Container(),
|
],
|
||||||
Container(
|
)
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(top: 5),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
_min != null
|
||||||
|
? Text(
|
||||||
|
S.of(context).min_value(
|
||||||
|
_min, _selectedCurrency.toString()),
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 10,
|
||||||
|
height: 1.2,
|
||||||
|
color: PaletteDark.walletCardText),
|
||||||
|
)
|
||||||
|
: Offstage(),
|
||||||
|
_min != null ? SizedBox(width: 10) : Offstage(),
|
||||||
|
_max != null
|
||||||
|
? Text(
|
||||||
|
S.of(context).max_value(
|
||||||
|
_max, _selectedCurrency.toString()),
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 10,
|
||||||
|
height: 1.2,
|
||||||
|
color: PaletteDark.walletCardText))
|
||||||
|
: Offstage(),
|
||||||
|
]),
|
||||||
|
),
|
||||||
|
Padding(
|
||||||
|
padding: EdgeInsets.only(top: 10),
|
||||||
|
child: AddressTextField(
|
||||||
|
controller: addressController,
|
||||||
|
isActive: _isAddressEditable,
|
||||||
|
options: _isAddressEditable
|
||||||
|
? _walletName != null
|
||||||
|
? []
|
||||||
|
: [
|
||||||
|
AddressTextFieldOption.qrCode,
|
||||||
|
AddressTextFieldOption.addressBook,
|
||||||
|
]
|
||||||
|
: [],
|
||||||
|
isBorderExist: false,
|
||||||
|
validator: widget.addressTextFieldValidator,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
/*Container(
|
||||||
child: Row(
|
child: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
|
@ -254,7 +345,7 @@ class ExchangeCardState extends State<ExchangeCard> {
|
||||||
]
|
]
|
||||||
: [],
|
: [],
|
||||||
validator: widget.addressTextFieldValidator,
|
validator: widget.addressTextFieldValidator,
|
||||||
)
|
)*/
|
||||||
]),
|
]),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,7 @@ class AddressTextField extends StatelessWidget {
|
||||||
],
|
],
|
||||||
this.onURIScanned,
|
this.onURIScanned,
|
||||||
this.focusNode,
|
this.focusNode,
|
||||||
|
this.isBorderExist = true,
|
||||||
this.validator});
|
this.validator});
|
||||||
|
|
||||||
static const prefixIconWidth = 34.0;
|
static const prefixIconWidth = 34.0;
|
||||||
|
@ -31,6 +32,7 @@ class AddressTextField extends StatelessWidget {
|
||||||
final Function(Uri) onURIScanned;
|
final Function(Uri) onURIScanned;
|
||||||
final List<AddressTextFieldOption> options;
|
final List<AddressTextFieldOption> options;
|
||||||
final FormFieldValidator<String> validator;
|
final FormFieldValidator<String> validator;
|
||||||
|
final bool isBorderExist;
|
||||||
FocusNode focusNode;
|
FocusNode focusNode;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
@ -114,13 +116,17 @@ class AddressTextField extends StatelessWidget {
|
||||||
color: PaletteDark.walletCardText
|
color: PaletteDark.walletCardText
|
||||||
),
|
),
|
||||||
hintText: placeholder ?? S.current.widgets_address,
|
hintText: placeholder ?? S.current.widgets_address,
|
||||||
focusedBorder: UnderlineInputBorder(
|
focusedBorder: isBorderExist
|
||||||
|
? UnderlineInputBorder(
|
||||||
borderSide: BorderSide(
|
borderSide: BorderSide(
|
||||||
color: PaletteDark.walletCardSubAddressField,
|
color: PaletteDark.walletCardSubAddressField,
|
||||||
width: 1.0)),
|
width: 1.0))
|
||||||
enabledBorder: UnderlineInputBorder(
|
: InputBorder.none,
|
||||||
|
enabledBorder: isBorderExist
|
||||||
|
? UnderlineInputBorder(
|
||||||
borderSide:
|
borderSide:
|
||||||
BorderSide(color: PaletteDark.walletCardSubAddressField, width: 1.0)),
|
BorderSide(color: PaletteDark.walletCardSubAddressField, width: 1.0))
|
||||||
|
: InputBorder.none,
|
||||||
),
|
),
|
||||||
validator: validator,
|
validator: validator,
|
||||||
);
|
);
|
||||||
|
|
|
@ -15,6 +15,9 @@ class BaseTextFormField extends StatelessWidget {
|
||||||
this.textColor = Colors.white,
|
this.textColor = Colors.white,
|
||||||
this.hintColor = PaletteDark.walletCardText,
|
this.hintColor = PaletteDark.walletCardText,
|
||||||
this.borderColor = PaletteDark.menuList,
|
this.borderColor = PaletteDark.menuList,
|
||||||
|
this.prefix,
|
||||||
|
this.suffix,
|
||||||
|
this.enabled = true,
|
||||||
this.validator
|
this.validator
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -29,6 +32,9 @@ class BaseTextFormField extends StatelessWidget {
|
||||||
final Color textColor;
|
final Color textColor;
|
||||||
final Color hintColor;
|
final Color hintColor;
|
||||||
final Color borderColor;
|
final Color borderColor;
|
||||||
|
final Widget prefix;
|
||||||
|
final Widget suffix;
|
||||||
|
final bool enabled;
|
||||||
final FormFieldValidator<String> validator;
|
final FormFieldValidator<String> validator;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
|
@ -41,11 +47,14 @@ class BaseTextFormField extends StatelessWidget {
|
||||||
autovalidate: autovalidate,
|
autovalidate: autovalidate,
|
||||||
maxLines: maxLines,
|
maxLines: maxLines,
|
||||||
inputFormatters: inputFormatters,
|
inputFormatters: inputFormatters,
|
||||||
|
enabled: enabled,
|
||||||
style: TextStyle(
|
style: TextStyle(
|
||||||
fontSize: 16.0,
|
fontSize: 16.0,
|
||||||
color: textColor
|
color: textColor
|
||||||
),
|
),
|
||||||
decoration: InputDecoration(
|
decoration: InputDecoration(
|
||||||
|
prefix: prefix,
|
||||||
|
suffix: suffix,
|
||||||
hintStyle: TextStyle(
|
hintStyle: TextStyle(
|
||||||
color: hintColor,
|
color: hintColor,
|
||||||
fontSize: 16
|
fontSize: 16
|
||||||
|
|
|
@ -1,24 +1,40 @@
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
class TopPanel extends StatelessWidget {
|
class TopPanel extends StatefulWidget {
|
||||||
TopPanel({@required this.color, @required this.widget});
|
TopPanel({
|
||||||
|
@required this.color,
|
||||||
|
@required this.widget,
|
||||||
|
this.edgeInsets = const EdgeInsets.all(24)
|
||||||
|
});
|
||||||
|
|
||||||
final Color color;
|
final Color color;
|
||||||
final Widget widget;
|
final Widget widget;
|
||||||
|
final EdgeInsets edgeInsets;
|
||||||
|
|
||||||
|
@override
|
||||||
|
TopPanelState createState() => TopPanelState(color, widget, edgeInsets);
|
||||||
|
}
|
||||||
|
|
||||||
|
class TopPanelState extends State<TopPanel> {
|
||||||
|
TopPanelState(this._color, this._widget, this._edgeInsets);
|
||||||
|
|
||||||
|
final Color _color;
|
||||||
|
final Widget _widget;
|
||||||
|
final EdgeInsets _edgeInsets;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
width: double.infinity,
|
width: double.infinity,
|
||||||
padding: EdgeInsets.all(24),
|
padding: _edgeInsets,
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
borderRadius: BorderRadius.only(
|
borderRadius: BorderRadius.only(
|
||||||
bottomLeft: Radius.circular(24),
|
bottomLeft: Radius.circular(24),
|
||||||
bottomRight: Radius.circular(24)
|
bottomRight: Radius.circular(24)
|
||||||
),
|
),
|
||||||
color: color
|
color: _color
|
||||||
),
|
),
|
||||||
child: widget,
|
child: _widget,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in a new issue