Ecosystem/cake_wallet
1
0
Fork 0
mirror of https://github.com/cake-tech/cake_wallet.git synced 2024-12-22 11:39:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

CWA-198 | created front and back sides of wallet card

Browse source
This commit is contained in:
Oleksandr Sobol 2020-04-15 19:33:41 +03:00
parent 93b8bd8a35
commit fc8c632e21
19 changed files with 398 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 244 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 268 B

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

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 186 B

23
lib/generated/i18n.dart
View file

@ -40,6 +40,7 @@ class S implements WidgetsLocalizations {
String get available_balance => "Available Balance";
String get biometric_auth_reason => "Scan your fingerprint to authenticate";
String get cancel => "Cancel";
String get card_address => "Address:";
String get change => "Change";
String get change_currency => "Change Currency";
String get change_exchange_provider => "Change Exchange Provider";
@ -362,6 +363,8 @@ class $de extends S {
@override
String get wallet_list_create_new_wallet => "Neue Wallet erstellen";
@override
String get card_address => "Adresse:";
@override
String get seed_language_portuguese => "Portugiesisch";
@override
String get setup_pin => "PIN einrichten";
@ -930,6 +933,8 @@ class $hi extends S {
@override
String get wallet_list_create_new_wallet => "नया बटुआ बनाएँ";
@override
String get card_address => "पता:";
@override
String get seed_language_portuguese => "पुर्तगाली";
@override
String get setup_pin => "पिन सेट करें";
@ -1498,6 +1503,8 @@ class $ru extends S {
@override
String get wallet_list_create_new_wallet => "Создать новый кошелёк";
@override
String get card_address => "Адрес:";
@override
String get seed_language_portuguese => "Португальский";
@override
String get setup_pin => "Настроить PIN";
@ -2066,6 +2073,8 @@ class $ko extends S {
@override
String get wallet_list_create_new_wallet => "새 월렛 만들기";
@override
String get card_address => "주소:";
@override
String get seed_language_portuguese => "포르투갈 인";
@override
String get setup_pin => "설정 PIN";
@ -2634,6 +2643,8 @@ class $pt extends S {
@override
String get wallet_list_create_new_wallet => "Criar nova carteira";
@override
String get card_address => "Endereço:";
@override
String get seed_language_portuguese => "Português";
@override
String get setup_pin => "Configurar PIN";
@ -3202,6 +3213,8 @@ class $uk extends S {
@override
String get wallet_list_create_new_wallet => "Створити новий гаманець";
@override
String get card_address => "Адреса:";
@override
String get seed_language_portuguese => "Португальська";
@override
String get setup_pin => "Встановити PIN";
@ -3770,6 +3783,8 @@ class $ja extends S {
@override
String get wallet_list_create_new_wallet => "新しいウォレットを作成";
@override
String get card_address => "住所:";
@override
String get seed_language_portuguese => "ポルトガル語";
@override
String get setup_pin => "PINのセットアップ";
@ -4342,6 +4357,8 @@ class $pl extends S {
@override
String get wallet_list_create_new_wallet => "Utwórz nowy portfel";
@override
String get card_address => "Adres:";
@override
String get seed_language_portuguese => "Portugalski";
@override
String get setup_pin => "Ustaw PIN";
@ -4910,6 +4927,8 @@ class $es extends S {
@override
String get wallet_list_create_new_wallet => "Crear nueva billetera";
@override
String get card_address => "Dirección:";
@override
String get seed_language_portuguese => "Portugués";
@override
String get setup_pin => "PIN de configuración";
@ -5478,6 +5497,8 @@ class $nl extends S {
@override
String get wallet_list_create_new_wallet => "Maak een nieuwe portemonnee";
@override
String get card_address => "Adres:";
@override
String get seed_language_portuguese => "Portugees";
@override
String get setup_pin => "PIN instellen";
@ -6046,6 +6067,8 @@ class $zh extends S {
@override
String get wallet_list_create_new_wallet => "创建新钱包";
@override
String get card_address => "地址:";
@override
String get seed_language_portuguese => "葡萄牙語";
@override
String get setup_pin => "设定PIN码";

4
lib/palette.dart
View file

@ -78,4 +78,8 @@ class PaletteDark {
static const Color walletCardBottomStartSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardTopEndSync = Color.fromRGBO(70, 85, 133, 1.0);
static const Color walletCardBottomEndSync = Color.fromRGBO(45, 56, 95, 1.0);
static const Color walletCardText = Color.fromRGBO(140, 153, 201, 1.0);
static const Color walletCardAddressField = Color.fromRGBO(51, 63, 104, 1.0);
static const Color walletCardAddressText = Color.fromRGBO(183, 197, 242, 1.0);
static const Color walletCardSubAddressField = Color.fromRGBO(63, 77, 122, 1.0);
}

4
lib/src/screens/dashboard/dashboard_page.dart
View file

@ -114,12 +114,12 @@ class DashboardPageBody extends StatefulWidget {
}
class DashboardPageBodyState extends State<DashboardPageBody> {
final _connectionStatusObserverKey = GlobalKey();
/*final _connectionStatusObserverKey = GlobalKey();
final _balanceObserverKey = GlobalKey();
final _balanceTitleObserverKey = GlobalKey();
final _syncingObserverKey = GlobalKey();
final _listObserverKey = GlobalKey();
final _listKey = GlobalKey();
final _listKey = GlobalKey();*/
@override
Widget build(BuildContext context) {

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

@ -1,12 +1,18 @@
import 'dart:async';
import 'package:cake_wallet/src/domain/common/balance_display_mode.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import 'package:cake_wallet/src/stores/balance/balance_store.dart';
import 'package:cake_wallet/src/stores/settings/settings_store.dart';
import 'package:cake_wallet/src/stores/sync/sync_store.dart';
import 'package:cake_wallet/src/stores/wallet/wallet_store.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:cake_wallet/palette.dart';
import 'package:provider/provider.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';
class WalletCard extends StatefulWidget {
@override
@ -15,18 +21,25 @@ class WalletCard extends StatefulWidget {
class WalletCardState extends State<WalletCard> {
final _syncingObserverKey = GlobalKey();
final triangleButton = Image.asset('assets/images/triangle.png');
final _balanceObserverKey = GlobalKey();
final _addressObserverKey = GlobalKey();
final List<Color> colorsSync = [PaletteDark.walletCardTopEndSync, PaletteDark.walletCardBottomEndSync];
double cardWidth;
double cardHeight;
double screenWidth;
double opacity;
bool isDraw;
bool isFrontSide;
@override
void initState() {
cardWidth = 0;
cardHeight = 220;
screenWidth = 0;
opacity = 0;
isDraw = false;
isFrontSide = true;
super.initState();
WidgetsBinding.instance.addPostFrameCallback(afterLayout);
}
@ -37,21 +50,21 @@ class WalletCardState extends State<WalletCard> {
cardWidth = screenWidth;
opacity = 1;
});
Timer(Duration(milliseconds: 350), () =>
setState(() => isDraw = true)
);
}
@override
Widget build(BuildContext context) {
final syncStore = Provider.of<SyncStore>(context);
final walletStore = Provider.of<WalletStore>(context);
return Container(
width: double.infinity,
height: 220,
height: cardHeight,
alignment: Alignment.centerRight,
child: AnimatedContainer(
alignment: Alignment.centerLeft,
width: cardWidth,
height: 220,
height: cardHeight,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
decoration: BoxDecoration(
@ -63,98 +76,156 @@ class WalletCardState extends State<WalletCard> {
end: Alignment.bottomCenter
)
),
child: screenWidth > 0 && cardWidth == screenWidth
? InkWell(
onTap: (){print('TAP');},
child: Observer(
key: _syncingObserverKey,
builder: (_) {
final status = syncStore.status;
final statusText = status.title();
final progress = syncStore.status.progress();
//final isFialure = status is FailedSyncStatus;
child: InkWell(
onTap: () => setState(() => isFrontSide = !isFrontSide),
child: isFrontSide
? frontSide()
: backSide()
),
),
);
}
var descriptionText = '';
Widget frontSide() {
final syncStore = Provider.of<SyncStore>(context);
final walletStore = Provider.of<WalletStore>(context);
final settingsStore = Provider.of<SettingsStore>(context);
final balanceStore = Provider.of<BalanceStore>(context);
final triangleButton = Image.asset('assets/images/triangle.png');
if (status is SyncingSyncStatus) {
descriptionText = S
.of(context)
.Blocks_remaining(
syncStore.status.toString());
}
return Observer(
key: _syncingObserverKey,
builder: (_) {
final status = syncStore.status;
final statusText = status.title();
final progress = syncStore.status.progress();
if (status is FailedSyncStatus) {
descriptionText = S
.of(context)
.please_try_to_connect_to_another_node;
}
String shortAddress = walletStore.subaddress.address;
shortAddress = shortAddress.replaceRange(4, shortAddress.length - 4, '...');
return Container(
width: cardWidth,
height: 220,
child: Stack(
children: <Widget>[
Container(
height: 220,
width: progress * cardWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: colorsSync,
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
),
Positioned(
left: 20,
right: 20,
top: 30,
bottom: 30,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
var descriptionText = '';
if (status is SyncingSyncStatus) {
descriptionText = S
.of(context)
.Blocks_remaining(
syncStore.status.toString());
}
if (status is FailedSyncStatus) {
descriptionText = S
.of(context)
.please_try_to_connect_to_another_node;
}
return Container(
width: cardWidth,
height: cardHeight,
child: Stack(
children: <Widget>[
Container(
height: cardHeight,
width: progress * cardWidth,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: colorsSync,
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
),
isDraw ? Positioned(
left: 20,
right: 20,
top: 30,
bottom: 30,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
InkWell(
onTap: () {print('TAP 2');},
child: Row(
children: <Widget>[
InkWell(
onTap: (){print('TAP 2');},
child: Row(
children: <Widget>[
Text(
walletStore.name,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
),
),
SizedBox(width: 10),
triangleButton
],
),
),
SizedBox(
height: 5,
),
Text(
walletStore.account.label,
walletStore.name,
style: TextStyle(
fontSize: 12
fontSize: 20,
fontWeight: FontWeight.bold
),
)
),
SizedBox(width: 10),
triangleButton
],
),
Text(
walletStore.account.label
)
],
),
SizedBox(
height: 5,
),
Text(
walletStore.account.label,
style: TextStyle(
fontSize: 12,
color: PaletteDark.walletCardText
),
)
],
),
Container(
width: 98,
height: 32,
alignment: Alignment.center,
decoration: BoxDecoration(
color: PaletteDark.walletCardAddressField,
borderRadius: BorderRadius.all(Radius.circular(16))
),
Row(
child: Text(
shortAddress,
style: TextStyle(
fontSize: 12,
color: PaletteDark.walletCardAddressText
),
),
)
],
),
status is SyncedSyncStatus
? Observer(
key: _balanceObserverKey,
builder: (_) {
final balanceDisplayMode = settingsStore.balanceDisplayMode;
final symbol = settingsStore
.fiatCurrency
.toString();
var balance = '---';
var fiatBalance = '---';
if (balanceDisplayMode ==
BalanceDisplayMode.availableBalance) {
balance =
balanceStore.unlockedBalance ??
'0.0';
fiatBalance =
'$symbol ${balanceStore.fiatUnlockedBalance}';
}
if (balanceDisplayMode ==
BalanceDisplayMode.fullBalance) {
balance =
balanceStore.fullBalance ?? '0.0';
fiatBalance =
'$symbol ${balanceStore.fiatFullBalance}';
}
return Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
@ -162,37 +233,198 @@ class WalletCardState extends State<WalletCard> {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
statusText,
balanceDisplayMode.toString(),
style: TextStyle(
fontSize: 12
fontSize: 12,
color: PaletteDark.walletCardText
),
),
SizedBox(height: 5),
Text(
descriptionText,
balance,
style: TextStyle(
fontSize: 14
fontSize: 28
),
)
],
),
Text(
walletStore.account.label
fiatBalance,
style: TextStyle(
fontSize: 14
),
)
],
)
],
);
}
)
: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
statusText,
style: TextStyle(
fontSize: 12,
color: PaletteDark.walletCardText
),
),
SizedBox(height: 5),
Text(
descriptionText,
style: TextStyle(
fontSize: 14
),
)
],
)
],
)
],
),
)
)
: Offstage()
],
),
);
},
);
}
Widget backSide() {
final walletStore = Provider.of<WalletStore>(context);
final rightArrow = Image.asset('assets/images/right_arrow.png');
double messageBoxHeight = 0;
return Observer(
key: _addressObserverKey,
builder: (_) {
return Container(
width: cardWidth,
height: cardHeight,
alignment: Alignment.topCenter,
child: Stack(
children: <Widget>[
Container(
width: cardWidth,
height: cardHeight,
padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
gradient: LinearGradient(
colors: colorsSync,
begin: Alignment.topCenter,
end: Alignment.bottomCenter
)
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Expanded(
child: Container(
height: 72,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
S.current.card_address,
style: TextStyle(
fontSize: 12,
color: PaletteDark.walletCardText
),
),
GestureDetector(
onTap: () {
Clipboard.setData(ClipboardData(
text: walletStore.subaddress.address));
_addressObserverKey.currentState.setState(() => messageBoxHeight = 20);
Timer(Duration(milliseconds: 1000), () {
try {
_addressObserverKey.currentState.setState(() => messageBoxHeight = 0);
} catch(e) {
print('${e.toString()}');
}
});
},
child: Text(
walletStore.subaddress.address,
style: TextStyle(
fontSize: 14,
),
),
)
],
),
)
),
SizedBox(width: 20),
Container(
width: 72,
height: 72,
child: QrImage(
data: walletStore.subaddress.address,
backgroundColor: Colors.transparent,
foregroundColor: PaletteDark.walletCardText,
),
)
],
),
Container(
height: 44,
padding: EdgeInsets.only(left: 20, right: 20),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(22)),
color: PaletteDark.walletCardSubAddressField
),
child: InkWell(
onTap: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
S.current.subaddresses,
style: TextStyle(
fontSize: 14,
),
),
rightArrow
],
),
),
)
],
),
);
},
)
)
: Offstage(),
),
),
AnimatedContainer(
width: cardWidth,
height: messageBoxHeight,
alignment: Alignment.center,
duration: Duration(milliseconds: 500),
curve: Curves.fastOutSlowIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10)),
color: Colors.green
),
child: Text(
S.of(context).copied_to_clipboard,
style: TextStyle(
fontSize: 10,
color: Colors.white
),
),
)
],
),
);
}
);
}
}

4
res/values/strings_de.arb
View file

@ -349,5 +349,7 @@
"version" : "Ausführung ${currentVersion}",
"openalias_alert_title" : "XMR-Empfänger erkannt",
"openalias_alert_content" : "Sie senden Geld an\n${recipient_name}"
"openalias_alert_content" : "Sie senden Geld an\n${recipient_name}",
"card_address" : "Adresse:"
}

4
res/values/strings_en.arb
View file

@ -349,5 +349,7 @@
"version" : "Version ${currentVersion}",
"openalias_alert_title" : "XMR Recipient Detected",
"openalias_alert_content" : "You will be sending funds to\n${recipient_name}"
"openalias_alert_content" : "You will be sending funds to\n${recipient_name}",
"card_address" : "Address:"
}

4
res/values/strings_es.arb
View file

@ -349,5 +349,7 @@
"version" : "Versión ${currentVersion}",
"openalias_alert_title" : "Destinatario XMR detectado",
"openalias_alert_content" : "Enviará fondos a\n${recipient_name}"
"openalias_alert_content" : "Enviará fondos a\n${recipient_name}",
"card_address" : "Dirección:"
}

4
res/values/strings_hi.arb
View file

@ -349,5 +349,7 @@
"version" : "संस्करण ${currentVersion}",
"openalias_alert_title" : "XMR प्राप्तकर्ता का पता लगाया",
"openalias_alert_content" : "आपको धनराशि भेजी जाएगी\n${recipient_name}"
"openalias_alert_content" : "आपको धनराशि भेजी जाएगी\n${recipient_name}",
"card_address" : "पता:"
}

4
res/values/strings_ja.arb
View file

@ -349,5 +349,7 @@
"version" : "バージョン ${currentVersion}",
"openalias_alert_title" : "XMR受信者が検出されました",
"openalias_alert_content" : "に送金します\n${recipient_name}"
"openalias_alert_content" : "に送金します\n${recipient_name}",
"card_address" : "住所:"
}

4
res/values/strings_ko.arb
View file

@ -349,5 +349,7 @@
"version" : "버전 ${currentVersion}",
"openalias_alert_title" : "XMR 수신자 감지",
"openalias_alert_content" : "당신은에 자금을 보낼 것입니다\n${recipient_name}"
"openalias_alert_content" : "당신은에 자금을 보낼 것입니다\n${recipient_name}",
"card_address" : "주소:"
}

4
res/values/strings_nl.arb
View file

@ -349,5 +349,7 @@
"version" : "Versie ${currentVersion}",
"openalias_alert_title" : "XMR-ontvanger gedetecteerd",
"openalias_alert_content" : "U stuurt geld naar\n${recipient_name}"
"openalias_alert_content" : "U stuurt geld naar\n${recipient_name}",
"card_address" : "Adres:"
}

4
res/values/strings_pl.arb
View file

@ -349,5 +349,7 @@
"version" : "Wersja ${currentVersion}",
"openalias_alert_title" : "Wykryto odbiorcę XMR",
"openalias_alert_content" : "Będziesz wysyłać środki na\n${recipient_name}"
"openalias_alert_content" : "Będziesz wysyłać środki na\n${recipient_name}",
"card_address" : "Adres:"
}

4
res/values/strings_pt.arb
View file

@ -349,5 +349,7 @@
"version" : "Versão ${currentVersion}",
"openalias_alert_title" : "Destinatário XMR detectado",
"openalias_alert_content" : "Você enviará fundos para\n${recipient_name}"
"openalias_alert_content" : "Você enviará fundos para\n${recipient_name}",
"card_address" : "Endereço:"
}

4
res/values/strings_ru.arb
View file

@ -349,5 +349,7 @@
"version" : "Версия ${currentVersion}",
"openalias_alert_title" : "Получатель XMR обнаружен",
"openalias_alert_content" : "Вы будете отправлять средства\n${recipient_name}"
"openalias_alert_content" : "Вы будете отправлять средства\n${recipient_name}",
"card_address" : "Адрес:"
}

4
res/values/strings_uk.arb
View file

@ -349,5 +349,7 @@
"version" : "Версія ${currentVersion}",
"openalias_alert_title" : "Отримувача XMR виявлено",
"openalias_alert_content" : "Ви будете відправляти кошти\n${recipient_name}"
"openalias_alert_content" : "Ви будете відправляти кошти\n${recipient_name}",
"card_address" : "Адреса:"
}

4
res/values/strings_zh.arb
View file

@ -349,5 +349,7 @@
"version" : "版 ${currentVersion}",
"openalias_alert_title" : "檢測到XMR收件人",
"openalias_alert_content" : "您將匯款至\n${recipient_name}"
"openalias_alert_content" : "您將匯款至\n${recipient_name}",
"card_address" : "地址:"
}