Improve balance card UI (#1259)

* Improve balance card UI * Disable normal USDC polygon for ChangeNow * UI enhancements * Add Kaspa Minor UI fix * Add kaspa icon [skip ci]

Omar Hatem committed Jan 8, 2024 at 16:05 UTC b3c8be4ba847d8ef1fb05799516421e414dd234a
6 files changed +60 -15
assets/images/kaspa_icon.png
Binary files /dev/null and b/assets/images/kaspa_icon.png differ
cw_core/lib/crypto_currency.dart
+2
@@ -95,6 +95,7 @@ class CryptoCurrency extends EnumerableItem<int> with Serializable<int> implemen
95 CryptoCurrency.banano,
96 CryptoCurrency.usdtPoly,
97 CryptoCurrency.usdcEPoly,
98 + CryptoCurrency.kaspa,
99 ];
100
101 static const havenCurrencies = [
@@ -206,6 +207,7 @@ class CryptoCurrency extends EnumerableItem<int> with Serializable<int> implemen
207 static const banano = CryptoCurrency(title: 'BAN', fullName: 'Banano', raw: 86, name: 'banano', iconPath: 'assets/images/nano_icon.png', decimals: 29);
208 static const usdtPoly = CryptoCurrency(title: 'USDT', tag: 'POLY', fullName: 'Tether USD (PoS)', raw: 87, name: 'usdtpoly', iconPath: 'assets/images/usdt_icon.png', decimals: 6);
209 static const usdcEPoly = CryptoCurrency(title: 'USDC.E', tag: 'POLY', fullName: 'USD Coin (PoS)', raw: 88, name: 'usdcepoly', iconPath: 'assets/images/usdc_icon.png', decimals: 6);
210 + static const kaspa = CryptoCurrency(title: 'KAS', fullName: 'Kaspa', raw: 89, name: 'kaspa', iconPath: 'assets/images/kaspa_icon.png', decimals: 8);
211
212
213 static final Map<int, CryptoCurrency> _rawCurrencyMap =
lib/exchange/provider/changenow_exchange_provider.dart
+3
@@ -265,6 +265,9 @@ class ChangeNowExchangeProvider extends ExchangeProvider {
265 }
266
267 String _normalizeCurrency(CryptoCurrency currency) {
268 + if (currency.title == "USDC" && currency.tag == "POLY") {
269 + throw "Only Bridged USDC (USDC.e) is allowed in ChangeNow";
270 + }
271 switch (currency) {
272 case CryptoCurrency.zec:
273 return 'zec';
lib/src/screens/dashboard/pages/balance_page.dart
+53 -13
@@ -1,3 +1,5 @@
1 +import 'dart:math';
2 +
3 import 'package:auto_size_text/auto_size_text.dart';
4 import 'package:cake_wallet/generated/i18n.dart';
5 import 'package:cake_wallet/reactions/wallet_connect.dart';
@@ -14,6 +16,7 @@ import 'package:cake_wallet/utils/feature_flag.dart';
16 import 'package:cake_wallet/utils/show_pop_up.dart';
17 import 'package:cake_wallet/view_model/dashboard/dashboard_view_model.dart';
18 import 'package:cake_wallet/view_model/dashboard/nft_view_model.dart';
19 +import 'package:cw_core/crypto_currency.dart';
20 import 'package:flutter/material.dart';
21 import 'package:flutter_mobx/flutter_mobx.dart';
22
@@ -200,7 +203,7 @@ class CryptoBalanceWidget extends StatelessWidget {
203 additionalFiatBalance: balance.fiatAdditionalBalance,
204 frozenBalance: balance.frozenBalance,
205 frozenFiatBalance: balance.fiatFrozenBalance,
203 - currency: balance.formattedAssetTitle,
206 + currency: balance.asset,
207 hasAdditionalBalance:
208 dashboardViewModel.balanceViewModel.hasAdditionalBalance,
209 );
@@ -216,7 +219,7 @@ class CryptoBalanceWidget extends StatelessWidget {
219 }
220
221 class BalanceRowWidget extends StatelessWidget {
219 - const BalanceRowWidget({
222 + BalanceRowWidget({
223 required this.availableBalanceLabel,
224 required this.availableBalance,
225 required this.availableFiatBalance,
@@ -238,7 +241,7 @@ class BalanceRowWidget extends StatelessWidget {
241 final String additionalFiatBalance;
242 final String frozenBalance;
243 final String frozenFiatBalance;
241 - final String currency;
244 + final CryptoCurrency currency;
245 final bool hasAdditionalBalance;
246
247 // void _showBalanceDescription(BuildContext context) {
@@ -268,7 +271,7 @@ class BalanceRowWidget extends StatelessWidget {
271 children: [
272 Row(
273 mainAxisAlignment: MainAxisAlignment.spaceBetween,
271 - crossAxisAlignment: CrossAxisAlignment.start,
274 + crossAxisAlignment: CrossAxisAlignment.center,
275 children: [
276 GestureDetector(
277 behavior: HitTestBehavior.opaque,
@@ -325,13 +328,48 @@ class BalanceRowWidget extends StatelessWidget {
328 ],
329 ),
330 ),
328 - Text(currency,
329 - style: TextStyle(
330 - fontSize: 28,
331 - fontFamily: 'Lato',
332 - fontWeight: FontWeight.w800,
333 - color: Theme.of(context).extension<BalancePageTheme>()!.assetTitleColor,
334 - height: 1)),
331 + SizedBox(
332 + width: MediaQuery.of(context).size.width * 0.18,
333 + child: Center(
334 + child: Column(
335 + children: [
336 + currency.iconPath != null
337 + ? Container(
338 + child: Image.asset(
339 + currency.iconPath!,
340 + height: 30.0,
341 + width: 30.0,
342 + ),
343 + )
344 + : Container(
345 + height: 30.0,
346 + width: 30.0,
347 + child: Center(
348 + child: Text(
349 + currency.title.substring(0, min(currency.title.length, 2)),
350 + style: TextStyle(fontSize: 11),
351 + ),
352 + ),
353 + decoration: BoxDecoration(
354 + shape: BoxShape.circle,
355 + color: Colors.grey.shade400,
356 + ),
357 + ),
358 + const SizedBox(height: 10),
359 + Text(
360 + currency.title,
361 + style: TextStyle(
362 + fontSize: 18,
363 + fontFamily: 'Lato',
364 + fontWeight: FontWeight.w800,
365 + color: Theme.of(context).extension<BalancePageTheme>()!.assetTitleColor,
366 + height: 1,
367 + ),
368 + ),
369 + ],
370 + ),
371 + ),
372 + ),
373 ],
374 ),
375 if (frozenBalance.isNotEmpty)
@@ -374,7 +412,9 @@ class BalanceRowWidget extends StatelessWidget {
412 fontSize: 20,
413 fontFamily: 'Lato',
414 fontWeight: FontWeight.w400,
377 - color: Theme.of(context).extension<DashboardPageTheme>()!.textColor,
415 + color: Theme.of(context)
416 + .extension<BalancePageTheme>()!
417 + .balanceAmountColor,
418 height: 1,
419 ),
420 maxLines: 1,
@@ -388,7 +428,7 @@ class BalanceRowWidget extends StatelessWidget {
428 fontSize: 12,
429 fontFamily: 'Lato',
430 fontWeight: FontWeight.w400,
391 - color: Theme.of(context).extension<DashboardPageTheme>()!.textColor,
431 + color: Theme.of(context).extension<BalancePageTheme>()!.textColor,
432 height: 1,
433 ),
434 ),
lib/src/screens/exchange_trade/exchange_trade_page.dart
+1 -1
@@ -261,7 +261,7 @@ class ExchangeTradeState extends State<ExchangeTradeForm> {
261 fee: S.of(popupContext).send_fee,
262 feeValue: widget.exchangeTradeViewModel.sendViewModel
263 .pendingTransaction!.feeFormatted,
264 - rightButtonText: S.of(popupContext).ok,
264 + rightButtonText: S.of(popupContext).send,
265 leftButtonText: S.of(popupContext).cancel,
266 actionRightButton: () async {
267 Navigator.of(popupContext).pop();
lib/src/screens/send/send_page.dart
+1 -1
@@ -423,7 +423,7 @@ class SendPage extends BasePage {
423 feeValue: sendViewModel.pendingTransaction!.feeFormatted,
424 feeFiatAmount: sendViewModel.pendingTransactionFeeFiatAmountFormatted,
425 outputs: sendViewModel.outputs,
426 - rightButtonText: S.of(_dialogContext).ok,
426 + rightButtonText: S.of(_dialogContext).send,
427 leftButtonText: S.of(_dialogContext).cancel,
428 actionRightButton: () {
429 Navigator.of(_dialogContext).pop();