mirror of
https://github.com/cake-tech/cake_wallet.git
synced 2025-01-23 03:05:11 +00:00
CWA-223 | added possibility to switch balance mode in the wallet card (long press on balance value); applied switch to back side of wallet card to short address field
This commit is contained in:
Oleksandr Sobol
parent
0b53971051
commit
00ef34ee80
1 changed files with 262 additions and 200 deletions
|
|
@ -22,8 +22,10 @@ class WalletCard extends StatefulWidget {
|
||||||
|
|
||||||
class WalletCardState extends State<WalletCard> {
|
class WalletCardState extends State<WalletCard> {
|
||||||
final _syncingObserverKey = GlobalKey();
|
final _syncingObserverKey = GlobalKey();
|
||||||
final _balanceObserverKey = GlobalKey();
|
|
||||||
final _addressObserverKey = GlobalKey();
|
final _addressObserverKey = GlobalKey();
|
||||||
|
final _connectionStatusObserverKey = GlobalKey();
|
||||||
|
final _balanceObserverKey = GlobalKey();
|
||||||
|
final _balanceTitleObserverKey = GlobalKey();
|
||||||
|
|
||||||
double cardWidth;
|
double cardWidth;
|
||||||
double cardHeight;
|
double cardHeight;
|
||||||
|
|
@ -55,6 +57,8 @@ class WalletCardState extends State<WalletCard> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void rollCard() => setState(() => isFrontSide = !isFrontSide);
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
final List<Color> colorsSync = [
|
final List<Color> colorsSync = [
|
||||||
|
|
@ -93,12 +97,9 @@ class WalletCardState extends State<WalletCard> {
|
||||||
width: cardWidth,
|
width: cardWidth,
|
||||||
height: cardHeight,
|
height: cardHeight,
|
||||||
color: Theme.of(context).cardColor,
|
color: Theme.of(context).cardColor,
|
||||||
child: InkWell(
|
child: isFrontSide
|
||||||
onTap: () => setState(() => isFrontSide = !isFrontSide),
|
? frontSide(colorsSync)
|
||||||
child: isFrontSide
|
: backSide(colorsSync),
|
||||||
? frontSide(colorsSync)
|
|
||||||
: backSide(colorsSync)
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
),
|
),
|
||||||
|
|
@ -214,88 +215,146 @@ class WalletCardState extends State<WalletCard> {
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
Container(
|
GestureDetector(
|
||||||
width: 98,
|
onTap: () => rollCard(),
|
||||||
height: 32,
|
child: Container(
|
||||||
alignment: Alignment.center,
|
width: 98,
|
||||||
decoration: BoxDecoration(
|
height: 32,
|
||||||
color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
|
alignment: Alignment.center,
|
||||||
borderRadius: BorderRadius.all(Radius.circular(16))
|
decoration: BoxDecoration(
|
||||||
),
|
color: Theme.of(context).accentTextTheme.subtitle.backgroundColor,
|
||||||
child: Text(
|
borderRadius: BorderRadius.all(Radius.circular(16))
|
||||||
shortAddress,
|
),
|
||||||
style: TextStyle(
|
child: Text(
|
||||||
fontSize: 12,
|
shortAddress,
|
||||||
color: Theme.of(context).primaryTextTheme.caption.color
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: Theme.of(context).primaryTextTheme.caption.color
|
||||||
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
status is SyncedSyncStatus
|
status is SyncedSyncStatus
|
||||||
? Observer(
|
? GestureDetector(
|
||||||
key: _balanceObserverKey,
|
onTapUp: (_) => balanceStore.isReversing = false,
|
||||||
builder: (_) {
|
onTapDown: (_) => balanceStore.isReversing = true,
|
||||||
final balanceDisplayMode = settingsStore.balanceDisplayMode;
|
child: Row(
|
||||||
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,
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Column(
|
Column(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Text(
|
Observer(
|
||||||
balanceDisplayMode.toString(),
|
key: _balanceTitleObserverKey,
|
||||||
style: TextStyle(
|
builder: (_) {
|
||||||
fontSize: 12,
|
final savedDisplayMode =
|
||||||
color: Theme.of(context).primaryTextTheme.caption.color
|
settingsStore.balanceDisplayMode;
|
||||||
),
|
final displayMode = balanceStore
|
||||||
),
|
.isReversing
|
||||||
|
? (savedDisplayMode ==
|
||||||
|
BalanceDisplayMode
|
||||||
|
.availableBalance
|
||||||
|
? BalanceDisplayMode.fullBalance
|
||||||
|
: BalanceDisplayMode
|
||||||
|
.availableBalance)
|
||||||
|
: savedDisplayMode;
|
||||||
|
|
||||||
|
return Text(
|
||||||
|
displayMode.toString(),
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: Theme.of(context).primaryTextTheme.caption.color
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
SizedBox(height: 5),
|
SizedBox(height: 5),
|
||||||
Text(
|
Observer(
|
||||||
balance,
|
key: _connectionStatusObserverKey,
|
||||||
style: TextStyle(
|
builder: (_) {
|
||||||
fontSize: 28,
|
final savedDisplayMode =
|
||||||
height: 1,
|
settingsStore.balanceDisplayMode;
|
||||||
color: Theme.of(context).primaryTextTheme.title.color
|
var balance = '---';
|
||||||
),
|
final displayMode = balanceStore
|
||||||
)
|
.isReversing
|
||||||
|
? (savedDisplayMode ==
|
||||||
|
BalanceDisplayMode
|
||||||
|
.availableBalance
|
||||||
|
? BalanceDisplayMode.fullBalance
|
||||||
|
: BalanceDisplayMode
|
||||||
|
.availableBalance)
|
||||||
|
: savedDisplayMode;
|
||||||
|
|
||||||
|
if (displayMode ==
|
||||||
|
BalanceDisplayMode.availableBalance) {
|
||||||
|
balance =
|
||||||
|
balanceStore.unlockedBalance ??
|
||||||
|
'0.0';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (displayMode ==
|
||||||
|
BalanceDisplayMode.fullBalance) {
|
||||||
|
balance =
|
||||||
|
balanceStore.fullBalance ?? '0.0';
|
||||||
|
}
|
||||||
|
|
||||||
|
return Text(
|
||||||
|
balance,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 28,
|
||||||
|
height: 1,
|
||||||
|
color: Theme.of(context).primaryTextTheme.title.color
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
Text(
|
Observer(
|
||||||
fiatBalance,
|
key: _balanceObserverKey,
|
||||||
style: TextStyle(
|
builder: (_) {
|
||||||
fontSize: 14,
|
final savedDisplayMode =
|
||||||
height: 2,
|
settingsStore.balanceDisplayMode;
|
||||||
color: Theme.of(context).primaryTextTheme.title.color
|
final displayMode =
|
||||||
),
|
balanceStore.isReversing
|
||||||
)
|
? (savedDisplayMode ==
|
||||||
|
BalanceDisplayMode
|
||||||
|
.availableBalance
|
||||||
|
? BalanceDisplayMode
|
||||||
|
.fullBalance
|
||||||
|
: BalanceDisplayMode
|
||||||
|
.availableBalance)
|
||||||
|
: savedDisplayMode;
|
||||||
|
final symbol = settingsStore
|
||||||
|
.fiatCurrency
|
||||||
|
.toString();
|
||||||
|
var balance = '---';
|
||||||
|
|
||||||
|
if (displayMode ==
|
||||||
|
BalanceDisplayMode
|
||||||
|
.availableBalance) {
|
||||||
|
balance =
|
||||||
|
'$symbol ${balanceStore.fiatUnlockedBalance}';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (displayMode ==
|
||||||
|
BalanceDisplayMode.fullBalance) {
|
||||||
|
balance =
|
||||||
|
'$symbol ${balanceStore.fiatFullBalance}';
|
||||||
|
}
|
||||||
|
|
||||||
|
return Text(
|
||||||
|
balance,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
height: 2,
|
||||||
|
color: Theme.of(context).primaryTextTheme.title.color
|
||||||
|
),
|
||||||
|
);
|
||||||
|
})
|
||||||
],
|
],
|
||||||
);
|
)
|
||||||
}
|
|
||||||
)
|
)
|
||||||
: Row(
|
: Row(
|
||||||
crossAxisAlignment: CrossAxisAlignment.end,
|
crossAxisAlignment: CrossAxisAlignment.end,
|
||||||
|
|
@ -343,144 +402,147 @@ class WalletCardState extends State<WalletCard> {
|
||||||
double messageBoxHeight = 0;
|
double messageBoxHeight = 0;
|
||||||
double messageBoxWidth = cardWidth - 10;
|
double messageBoxWidth = cardWidth - 10;
|
||||||
|
|
||||||
return Observer(
|
return GestureDetector(
|
||||||
key: _addressObserverKey,
|
onTap: () => rollCard(),
|
||||||
builder: (_) {
|
child: Observer(
|
||||||
return Container(
|
key: _addressObserverKey,
|
||||||
width: cardWidth,
|
builder: (_) {
|
||||||
height: cardHeight,
|
return Container(
|
||||||
alignment: Alignment.topCenter,
|
width: cardWidth,
|
||||||
child: Stack(
|
height: cardHeight,
|
||||||
alignment: Alignment.topRight,
|
alignment: Alignment.topCenter,
|
||||||
children: <Widget>[
|
child: Stack(
|
||||||
Container(
|
alignment: Alignment.topRight,
|
||||||
width: cardWidth,
|
children: <Widget>[
|
||||||
height: cardHeight,
|
Container(
|
||||||
padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
|
width: cardWidth,
|
||||||
decoration: BoxDecoration(
|
height: cardHeight,
|
||||||
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
|
padding: EdgeInsets.only(left: 20, right: 20, top: 30, bottom: 30),
|
||||||
gradient: LinearGradient(
|
decoration: BoxDecoration(
|
||||||
colors: colorsSync,
|
borderRadius: BorderRadius.only(topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
|
||||||
begin: Alignment.topCenter,
|
gradient: LinearGradient(
|
||||||
end: Alignment.bottomCenter
|
colors: colorsSync,
|
||||||
)
|
begin: Alignment.topCenter,
|
||||||
),
|
end: Alignment.bottomCenter
|
||||||
child: Column(
|
)
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
),
|
||||||
children: <Widget>[
|
child: Column(
|
||||||
Row(
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
children: <Widget>[
|
children: <Widget>[
|
||||||
Expanded(
|
Row(
|
||||||
child: Container(
|
children: <Widget>[
|
||||||
height: 90,
|
Expanded(
|
||||||
child: Column(
|
child: Container(
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
height: 90,
|
||||||
children: <Widget>[
|
child: Column(
|
||||||
Text(
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
S.current.card_address,
|
children: <Widget>[
|
||||||
style: TextStyle(
|
Text(
|
||||||
fontSize: 12,
|
S.current.card_address,
|
||||||
color: Theme.of(context).primaryTextTheme.caption.color
|
style: TextStyle(
|
||||||
),
|
fontSize: 12,
|
||||||
),
|
color: Theme.of(context).primaryTextTheme.caption.color
|
||||||
GestureDetector(
|
),
|
||||||
onTap: () {
|
|
||||||
Clipboard.setData(ClipboardData(
|
|
||||||
text: walletStore.subaddress.address));
|
|
||||||
_addressObserverKey.currentState.setState(() {
|
|
||||||
messageBoxHeight = 20;
|
|
||||||
messageBoxWidth = cardWidth;
|
|
||||||
});
|
|
||||||
Timer(Duration(milliseconds: 1000), () {
|
|
||||||
try {
|
|
||||||
_addressObserverKey.currentState.setState(() {
|
|
||||||
messageBoxHeight = 0;
|
|
||||||
messageBoxWidth = cardWidth;
|
|
||||||
});
|
|
||||||
} catch(e) {
|
|
||||||
print('${e.toString()}');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
child: Padding(
|
|
||||||
padding: EdgeInsets.only(top: 5),
|
|
||||||
child: Text(
|
|
||||||
walletStore.subaddress.address,
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 12,
|
|
||||||
color: Theme.of(context).primaryTextTheme.title.color
|
|
||||||
),
|
),
|
||||||
),
|
GestureDetector(
|
||||||
|
onTap: () {
|
||||||
|
Clipboard.setData(ClipboardData(
|
||||||
|
text: walletStore.subaddress.address));
|
||||||
|
_addressObserverKey.currentState.setState(() {
|
||||||
|
messageBoxHeight = 20;
|
||||||
|
messageBoxWidth = cardWidth;
|
||||||
|
});
|
||||||
|
Timer(Duration(milliseconds: 1000), () {
|
||||||
|
try {
|
||||||
|
_addressObserverKey.currentState.setState(() {
|
||||||
|
messageBoxHeight = 0;
|
||||||
|
messageBoxWidth = cardWidth;
|
||||||
|
});
|
||||||
|
} catch(e) {
|
||||||
|
print('${e.toString()}');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
child: Padding(
|
||||||
|
padding: EdgeInsets.only(top: 5),
|
||||||
|
child: Text(
|
||||||
|
walletStore.subaddress.address,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 12,
|
||||||
|
color: Theme.of(context).primaryTextTheme.title.color
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
),
|
||||||
|
SizedBox(width: 10),
|
||||||
|
Container(
|
||||||
|
width: 90,
|
||||||
|
height: 90,
|
||||||
|
child: QrImage(
|
||||||
|
data: walletStore.subaddress.address,
|
||||||
|
backgroundColor: Colors.transparent,
|
||||||
|
foregroundColor: Theme.of(context).primaryTextTheme.caption.color
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
height: 44,
|
||||||
|
padding: EdgeInsets.only(left: 20, right: 20),
|
||||||
|
alignment: Alignment.center,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
borderRadius: BorderRadius.all(Radius.circular(22)),
|
||||||
|
color: Theme.of(context).primaryTextTheme.overline.color
|
||||||
|
),
|
||||||
|
child: InkWell(
|
||||||
|
onTap: () => Navigator.of(context,
|
||||||
|
rootNavigator: true)
|
||||||
|
.pushNamed(Routes.receive),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: <Widget>[
|
||||||
|
Text(
|
||||||
|
S.of(context).accounts_subaddresses,
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14,
|
||||||
|
color: Theme.of(context).primaryTextTheme.title.color
|
||||||
|
),
|
||||||
|
),
|
||||||
|
rightArrow
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
)
|
|
||||||
),
|
|
||||||
SizedBox(width: 10),
|
|
||||||
Container(
|
|
||||||
width: 90,
|
|
||||||
height: 90,
|
|
||||||
child: QrImage(
|
|
||||||
data: walletStore.subaddress.address,
|
|
||||||
backgroundColor: Colors.transparent,
|
|
||||||
foregroundColor: Theme.of(context).primaryTextTheme.caption.color
|
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
Container(
|
|
||||||
height: 44,
|
|
||||||
padding: EdgeInsets.only(left: 20, right: 20),
|
|
||||||
alignment: Alignment.center,
|
|
||||||
decoration: BoxDecoration(
|
|
||||||
borderRadius: BorderRadius.all(Radius.circular(22)),
|
|
||||||
color: Theme.of(context).primaryTextTheme.overline.color
|
|
||||||
),
|
|
||||||
child: InkWell(
|
|
||||||
onTap: () => Navigator.of(context,
|
|
||||||
rootNavigator: true)
|
|
||||||
.pushNamed(Routes.receive),
|
|
||||||
child: Row(
|
|
||||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
||||||
children: <Widget>[
|
|
||||||
Text(
|
|
||||||
S.of(context).accounts_subaddresses,
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 14,
|
|
||||||
color: Theme.of(context).primaryTextTheme.title.color
|
|
||||||
),
|
|
||||||
),
|
|
||||||
rightArrow
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
)
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
AnimatedContainer(
|
|
||||||
width: messageBoxWidth,
|
|
||||||
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
|
|
||||||
),
|
),
|
||||||
),
|
AnimatedContainer(
|
||||||
)
|
width: messageBoxWidth,
|
||||||
],
|
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
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
],
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Loading…
Reference in a new issue