Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-09-28 17:31:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CWA-209 | applied new design to receive page

Browse source
This commit is contained in:
Oleksandr Sobol 2020-05-05 20:59:56 +03:00
parent 262e6ca156
commit 66aebb4d65
11 changed files with 279 additions and 203 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/images/2.0x/copy_content.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 517 B

BIN
assets/images/2.0x/share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 319 B

BIN
assets/images/3.0x/copy_content.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 599 B

BIN
assets/images/3.0x/share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 498 B

BIN
assets/images/copy_content.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 348 B

BIN
assets/images/share.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 277 B

7
lib/src/screens/dashboard/widgets/wallet_card.dart
View file

@ -12,7 +12,8 @@ import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/domain/common/sync_status.dart';
import 'package:cake_wallet/src/screens/receive/qr_image.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
import 'package:cake_wallet/routes.dart';
class WalletCard extends StatefulWidget {
@override
@ -425,7 +426,9 @@ class WalletCardState extends State<WalletCard> {
color: PaletteDark.walletCardSubAddressField
),
child: InkWell(
onTap: () {},
onTap: () => Navigator.of(context,
rootNavigator: true)
.pushNamed(Routes.receive),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[

2
lib/src/screens/exchange_trade/exchange_trade_page.dart
View file

@ -13,7 +13,7 @@ import 'package:cake_wallet/src/stores/send/send_store.dart';
import 'package:cake_wallet/src/stores/send/sending_state.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:cake_wallet/src/screens/exchange_trade/widgets/copy_button.dart';
import 'package:cake_wallet/src/screens/receive/qr_image.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart';
import 'package:cake_wallet/src/widgets/primary_button.dart';

471
lib/src/screens/receive/receive_page.dart
View file

@ -9,12 +9,15 @@ import 'package:cake_wallet/palette.dart';
import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:cake_wallet/src/screens/receive/qr_image.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_image.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
class ReceivePage extends BasePage {
@override
bool get isModalBackButton => true;
Color get backgroundColor => PaletteDark.mainBackgroundColor;
@override
bool get resizeToAvoidBottomPadding => false;
@override
String get title => S.current.receive;
@ -22,6 +25,7 @@ class ReceivePage extends BasePage {
@override
Widget trailing(BuildContext context) {
final walletStore = Provider.of<WalletStore>(context);
final shareImage = Image.asset('assets/images/share.png');
return SizedBox(
height: 37.0,
@ -34,17 +38,13 @@ class ReceivePage extends BasePage {
padding: EdgeInsets.all(0),
onPressed: () => Share.text(
'Share address', walletStore.subaddress.address, 'text/plain'),
child: Icon(
Icons.share,
size: 30.0,
)),
child: shareImage),
),
);
}
@override
Widget body(BuildContext context) =>
SingleChildScrollView(child: ReceiveBody());
Widget body(BuildContext context) => ReceiveBody();
}
class ReceiveBody extends StatefulWidget {
@ -67,8 +67,10 @@ class ReceiveBodyState extends State<ReceiveBody> {
final walletStore = Provider.of<WalletStore>(context);
final subaddressListStore = Provider.of<SubaddressListStore>(context);
final currentColor = Theme.of(context).selectedRowColor;
final notCurrentColor = Theme.of(context).scaffoldBackgroundColor;
final copyImage = Image.asset('assets/images/copy_content.png');
final currentColor = PaletteDark.menuList;
final notCurrentColor = Colors.transparent;
amountController.addListener(() {
if (_formKey.currentState.validate()) {
@ -78,202 +80,273 @@ class ReceiveBodyState extends State<ReceiveBody> {
}
});
return SafeArea(
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(35.0),
color: Theme.of(context).backgroundColor,
child: Column(
children: <Widget>[
Observer(builder: (_) {
return Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 2,
return Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: PaletteDark.mainBackgroundColor,
padding: EdgeInsets.only(top: 24),
child: Column(
children: <Widget>[
Flexible(
flex: 2,
child: Observer(builder: (_) {
return Row(
children: <Widget>[
Spacer(
flex: 1,
),
Flexible(
flex: 2,
child: Center(
child: AspectRatio(
aspectRatio: 1.0,
child: Container(
padding: EdgeInsets.all(5),
color: Colors.white,
child: QrImage(
data: walletStore.subaddress.address +
walletStore.amountValue,
backgroundColor: Colors.transparent,
),
),
)),
Spacer(
flex: 1,
)
],
);
}),
Observer(builder: (_) {
return Row(
children: <Widget>[
Expanded(
child: Container(
padding: EdgeInsets.all(20.0),
child: Center(
child: GestureDetector(
onTap: () {
Clipboard.setData(ClipboardData(
text: walletStore.subaddress.address));
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
S.of(context).copied_to_clipboard,
style: TextStyle(color: Colors.white),
),
backgroundColor: Colors.green,
));
},
child: Text(
walletStore.subaddress.address,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
color: Theme.of(context)
.primaryTextTheme
.title
.color),
child: QrImage(
data: walletStore.subaddress.address +
walletStore.amountValue,
backgroundColor: Colors.transparent,
foregroundColor: PaletteDark.walletCardText,
),
),
),
))
],
);
}),
Row(
children: <Widget>[
Expanded(
child: Form(
key: _formKey,
child: TextFormField(
keyboardType:
TextInputType.numberWithOptions(decimal: true),
inputFormatters: [
BlacklistingTextInputFormatter(
RegExp('[\\-|\\ |\\,]'))
],
style: TextStyle(
fontSize: 14.0,
),
decoration: InputDecoration(
hintStyle: TextStyle(
color: Theme.of(context).hintColor),
hintText: S.of(context).amount,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Palette.cakeGreen, width: 2.0)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).focusColor,
width: 1.0))),
validator: (value) {
walletStore.validateAmount(value);
return walletStore.errorMessage;
},
autovalidate: true,
controller: amountController,
)))
],
)
],
),
),
Row(
children: <Widget>[
Expanded(
child: Container(
color: Theme.of(context).accentTextTheme.headline.color,
child: Column(
children: <Widget>[
ListTile(
title: Text(
S.of(context).subaddresses,
style: TextStyle(
fontSize: 16.0,
color: Theme.of(context)
.primaryTextTheme
.headline
.color),
),
trailing: Container(
width: 28.0,
height: 28.0,
decoration: BoxDecoration(
color: Theme.of(context).selectedRowColor,
shape: BoxShape.circle),
child: InkWell(
onTap: () => Navigator.of(context)
.pushNamed(Routes.newSubaddress),
borderRadius: BorderRadius.all(Radius.circular(14.0)),
child: Icon(
Icons.add,
color: Palette.violet,
size: 22.0,
),
),
),
),
Divider(
color: Theme.of(context).dividerTheme.color,
height: 1.0,
)),
Spacer(
flex: 1,
)
],
),
))
],
),
Observer(builder: (_) {
return ListView.separated(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: subaddressListStore.subaddresses.length,
separatorBuilder: (context, i) {
return Divider(
color: Theme.of(context).dividerTheme.color,
height: 1.0,
);
},
itemBuilder: (context, i) {
return Observer(builder: (_) {
final subaddress = subaddressListStore.subaddresses[i];
final isCurrent =
walletStore.subaddress.address == subaddress.address;
final label = subaddress.label.isNotEmpty
? subaddress.label
: subaddress.address;
return InkWell(
onTap: () => walletStore.setSubaddress(subaddress),
child: Container(
color: isCurrent ? currentColor : notCurrentColor,
child: Column(children: <Widget>[
ListTile(
title: Text(
label,
style: TextStyle(
fontSize: 16.0,
color: Theme.of(context)
.primaryTextTheme
.headline
.color),
);
}),
),
Padding(
padding: EdgeInsets.all(24),
child: Row(
children: <Widget>[
Expanded(
child: Form(
key: _formKey,
child: TextFormField(
keyboardType:
TextInputType.numberWithOptions(decimal: true),
inputFormatters: [
BlacklistingTextInputFormatter(
RegExp('[\\-|\\ |\\,]'))
],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
color: Colors.white
),
)
]),
decoration: InputDecoration(
hintStyle: TextStyle(
fontSize: 20,
color: PaletteDark.walletCardText),
hintText: S.of(context).amount,
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: PaletteDark.walletCardText, width: 1.0)),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: PaletteDark.walletCardText,
width: 1.0))),
validator: (value) {
walletStore.validateAmount(value);
return walletStore.errorMessage;
},
autovalidate: true,
controller: amountController,
)))
],
),
),
Padding(
padding: EdgeInsets.only(left: 24, right: 24, bottom: 24),
child: Observer(
builder: (_) => GestureDetector(
onTap: () {
Clipboard.setData(ClipboardData(
text: walletStore.subaddress.address));
Scaffold.of(context).showSnackBar(SnackBar(
content: Text(
S.of(context).copied_to_clipboard,
style: TextStyle(color: Colors.white),
),
);
});
});
})
],
)));
backgroundColor: Colors.green,
duration: Duration(milliseconds: 500),
));
},
child: Container(
height: 54,
padding: EdgeInsets.only(left: 24, right: 24),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(27)),
color: PaletteDark.walletCardSubAddressField
),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Text(
walletStore.subaddress.address,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600,
color: Colors.white
),
),
),
Padding(
padding: EdgeInsets.only(left: 12),
child: copyImage,
)
],
),
),
)
),
),
Flexible(
flex: 3,
child: ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24),
),
child: Container(
color: PaletteDark.historyPanel,
child: Observer(
builder: (_) => ListView.separated(
separatorBuilder: (context, index) => Divider(
height: 1,
color: PaletteDark.menuList,
),
itemCount: subaddressListStore.subaddresses.length + 2,
itemBuilder: (context, index) {
if (index == 0) {
return accountTile(
onTap: () {},
title: walletStore.account.label,
icon: Icon(
Icons.arrow_forward_ios,
size: 14,
color: Colors.white,
)
);
}
if (index == 1) {
return accountTile(
onTap: () => Navigator.of(context)
.pushNamed(Routes.newSubaddress),
title: S.of(context).subaddresses,
icon: Icon(
Icons.add,
size: 20,
color: Colors.white,
)
);
}
index -= 2;
return Observer(
builder: (_) {
final subaddress = subaddressListStore.subaddresses[index];
final isCurrent =
walletStore.subaddress.address == subaddress.address;
final label = subaddress.label;
final address = subaddress.address;
return InkWell(
onTap: () => walletStore.setSubaddress(subaddress),
child: Container(
color: isCurrent ? currentColor : notCurrentColor,
padding: EdgeInsets.only(
left: 24,
right: 24,
top: 32,
bottom: 32
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
label.isNotEmpty
? Text(
label,
style: TextStyle(
fontSize: 14,
color: PaletteDark.walletCardText
),
)
: Offstage(),
Padding(
padding: label.isNotEmpty
? EdgeInsets.only(top: 10)
: EdgeInsets.only(top: 0),
child: Text(
address,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: Colors.white
),
),
)
]),
),
);
}
);
}
)
),
),
)
)
],
),
);
}
Widget accountTile({
@required VoidCallback onTap,
@required String title,
@required Icon icon
}) => GestureDetector(
onTap: onTap,
child: Container(
padding: EdgeInsets.only(
left: 24,
right: 24,
top: 32,
bottom: 32
),
color: Colors.transparent,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
title,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white
),
),
Container(
height: 32,
width: 32,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: PaletteDark.menuList
),
child: icon,
)
],
),
),
);
}

2
lib/src/screens/receive/qr_image.dart → lib/src/screens/receive/widgets/qr_image.dart
View file

@ -1,6 +1,6 @@
import 'package:flutter/material.dart';
import 'package:qr/qr.dart';
import 'package:cake_wallet/src/screens/receive/qr_painter.dart';
import 'package:cake_wallet/src/screens/receive/widgets/qr_painter.dart';
class QrImage extends StatelessWidget {
QrImage({

0
lib/src/screens/receive/qr_painter.dart → lib/src/screens/receive/widgets/qr_painter.dart
View file