Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2025-01-03 09:29:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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/palette.dart';
import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/generated/i18n.dart';
import 'package:cake_wallet/src/domain/common/sync_status.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 { class WalletCard extends StatefulWidget {
@override @override
@ -425,7 +426,9 @@ class WalletCardState extends State<WalletCard> {
color: PaletteDark.walletCardSubAddressField color: PaletteDark.walletCardSubAddressField
), ),
child: InkWell( child: InkWell(
onTap: () {}, onTap: () => Navigator.of(context,
rootNavigator: true)
.pushNamed(Routes.receive),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[ 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/send/sending_state.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.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/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/base_page.dart';
import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart'; import 'package:cake_wallet/src/screens/exchange_trade/widgets/timer_widget.dart';
import 'package:cake_wallet/src/widgets/primary_button.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/generated/i18n.dart';
import 'package:cake_wallet/src/stores/subaddress_list/subaddress_list_store.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/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'; import 'package:cake_wallet/src/screens/base_page.dart';
class ReceivePage extends BasePage { class ReceivePage extends BasePage {
@override @override
bool get isModalBackButton => true; Color get backgroundColor => PaletteDark.mainBackgroundColor;
@override
bool get resizeToAvoidBottomPadding => false;
@override @override
String get title => S.current.receive; String get title => S.current.receive;
@ -22,6 +25,7 @@ class ReceivePage extends BasePage {
@override @override
Widget trailing(BuildContext context) { Widget trailing(BuildContext context) {
final walletStore = Provider.of<WalletStore>(context); final walletStore = Provider.of<WalletStore>(context);
final shareImage = Image.asset('assets/images/share.png');
return SizedBox( return SizedBox(
height: 37.0, height: 37.0,
@ -34,17 +38,13 @@ class ReceivePage extends BasePage {
padding: EdgeInsets.all(0), padding: EdgeInsets.all(0),
onPressed: () => Share.text( onPressed: () => Share.text(
'Share address', walletStore.subaddress.address, 'text/plain'), 'Share address', walletStore.subaddress.address, 'text/plain'),
child: Icon( child: shareImage),
Icons.share,
size: 30.0,
)),
), ),
); );
} }
@override @override
Widget body(BuildContext context) => Widget body(BuildContext context) => ReceiveBody();
SingleChildScrollView(child: ReceiveBody());
} }
class ReceiveBody extends StatefulWidget { class ReceiveBody extends StatefulWidget {
@ -67,8 +67,10 @@ class ReceiveBodyState extends State<ReceiveBody> {
final walletStore = Provider.of<WalletStore>(context); final walletStore = Provider.of<WalletStore>(context);
final subaddressListStore = Provider.of<SubaddressListStore>(context); final subaddressListStore = Provider.of<SubaddressListStore>(context);
final currentColor = Theme.of(context).selectedRowColor; final copyImage = Image.asset('assets/images/copy_content.png');
final notCurrentColor = Theme.of(context).scaffoldBackgroundColor;
final currentColor = PaletteDark.menuList;
final notCurrentColor = Colors.transparent;
amountController.addListener(() { amountController.addListener(() {
if (_formKey.currentState.validate()) { if (_formKey.currentState.validate()) {
@ -78,202 +80,273 @@ class ReceiveBodyState extends State<ReceiveBody> {
} }
}); });
return SafeArea( return Container(
child: SingleChildScrollView( height: MediaQuery.of(context).size.height,
child: Column( width: MediaQuery.of(context).size.width,
children: <Widget>[ color: PaletteDark.mainBackgroundColor,
Container( padding: EdgeInsets.only(top: 24),
padding: EdgeInsets.all(35.0), child: Column(
color: Theme.of(context).backgroundColor, children: <Widget>[
child: Column( Flexible(
children: <Widget>[ flex: 2,
Observer(builder: (_) { child: Observer(builder: (_) {
return Row( return Row(
children: <Widget>[ children: <Widget>[
Spacer( Spacer(
flex: 1, flex: 1,
), ),
Flexible( Flexible(
flex: 2, flex: 2,
child: Center(
child: AspectRatio( child: AspectRatio(
aspectRatio: 1.0, aspectRatio: 1.0,
child: Container( child: QrImage(
padding: EdgeInsets.all(5), data: walletStore.subaddress.address +
color: Colors.white, walletStore.amountValue,
child: QrImage( backgroundColor: Colors.transparent,
data: walletStore.subaddress.address + foregroundColor: PaletteDark.walletCardText,
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),
), ),
), ),
), )),
)) Spacer(
], flex: 1,
);
}),
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,
) )
], ],
), );
)) }),
], ),
), Padding(
Observer(builder: (_) { padding: EdgeInsets.all(24),
return ListView.separated( child: Row(
shrinkWrap: true, children: <Widget>[
physics: NeverScrollableScrollPhysics(), Expanded(
itemCount: subaddressListStore.subaddresses.length, child: Form(
separatorBuilder: (context, i) { key: _formKey,
return Divider( child: TextFormField(
color: Theme.of(context).dividerTheme.color, keyboardType:
height: 1.0, TextInputType.numberWithOptions(decimal: true),
); inputFormatters: [
}, BlacklistingTextInputFormatter(
itemBuilder: (context, i) { RegExp('[\\-|\\ |\\,]'))
return Observer(builder: (_) { ],
final subaddress = subaddressListStore.subaddresses[i]; textAlign: TextAlign.center,
final isCurrent = style: TextStyle(
walletStore.subaddress.address == subaddress.address; fontSize: 20.0,
final label = subaddress.label.isNotEmpty color: Colors.white
? 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),
), ),
) 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:flutter/material.dart';
import 'package:qr/qr.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 { class QrImage extends StatelessWidget {
QrImage({ QrImage({

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