← Watch feed
Improve token image display with mask and background (#3231)
Public commit record
81/100 · Strong
What the developer wrote
Authored by David Adegoke
Improve token image display with mask and background (#3231)
* Improve token image display with mask and background
* Enhance token image bg and remove wierd halo effect that was showing, also add token bg to disclaimer and picker
* Add token bg to more locations and give another shot at halo
* fix: halo around token images
* add token background to non-transparent images only
* another shot at bg based on transparency
* refactor: enhance token image widget shape handling and add filter quality option to cake image widget
* fix: another shot
✓ Specific, descriptive subject✓ Names a concrete action or component✓ Provides detailed explanatory context✓ Links an issue, advisory, or supporting reference
What changed, and why it matters
This commit is a user-interface polish change. It introduces a new reusable widget for displaying cryptocurrency token icons with circular clipping and automatic background detection, and replaces older image widgets across many screens. There is no security-relevant behavior change.
Recommended action
No security action needed; treat as routine UI refactoring.
Security signals we found
No strong security signals were identified.
Evidence from the diff
The diff adds TokenImageWidget, which analyzes an icon’s alpha transparency to decide whether to clip it to a circle, leave it as-is, or add a white circular backdrop. It then swaps existing CakeImageWidget/Image.asset usages for TokenImageWidget in swap, receive, send, asset details, transaction details, settings, and picker screens. CakeImageWidget gains an optional filterQuality parameter defaulting to medium. No network, crypto, storage, or permission logic is modified.
Changed components
lib/new-ui/widgets/coins_page/token_image_widget.dartlib/src/widgets/cake_image_widget.dartlib/new-ui/pages/swap_page.dartlib/new-ui/widgets/coins_page/assets_history/asset_details_modal.dartlib/new-ui/widgets/coins_page/assets_history/asset_tile.dartlib/new-ui/widgets/coins_page/assets_history/history_tile.dartlib/new-ui/widgets/coins_page/assets_history/transaction_details_modal.dartlib/new-ui/widgets/receive_page/receive_amount_modal.dartlib/new-ui/widgets/receive_page/receive_info_box.dartlib/new-ui/widgets/send_page/send_amount_input.dartlib/src/screens/dashboard/edit_token_page.dartlib/src/screens/dashboard/home_settings_page.dartlib/src/screens/receive/widgets/qr_image.dartlib/src/widgets/picker.dartInspect captured patch +257 / −116
diff --git a/lib/new-ui/pages/swap_page.dart b/lib/new-ui/pages/swap_page.dart
index 30f0d155..d6077803 100644
--- a/lib/new-ui/pages/swap_page.dart
+++ b/lib/new-ui/pages/swap_page.dart
@@ -8,6 +8,7 @@ import 'package:cake_wallet/exchange/exchange_trade_state.dart';
import 'package:cake_wallet/exchange/provider/chainflip_exchange_provider.dart';
import 'package:cake_wallet/exchange/provider/thorchain_exchange.provider.dart';
import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/new-ui/widgets/keyboard_hide_overlay.dart';
import 'package:cake_wallet/new-ui/widgets/modern_button.dart';
import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
@@ -969,8 +970,10 @@ class SwapAmountBoxState extends State<SwapAmountBox> {
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
- CakeImageWidget(imageUrl: _selectedCurrency.iconPath ?? "",
- width: 28, height: 28),
+ TokenImageWidget(
+ imageUrl: _selectedCurrency.iconPath ?? "",
+ size: 28,
+ ),
SizedBox(width: 10),
Text(
currencyToShow,
diff --git a/lib/new-ui/widgets/coins_page/assets_history/asset_details_modal.dart b/lib/new-ui/widgets/coins_page/assets_history/asset_details_modal.dart
index 154d574e..3bb7084a 100644
--- a/lib/new-ui/widgets/coins_page/assets_history/asset_details_modal.dart
+++ b/lib/new-ui/widgets/coins_page/assets_history/asset_details_modal.dart
@@ -6,6 +6,7 @@ import 'package:cake_wallet/new-ui/pages/bridge/bridge_amount_page.dart';
import 'package:cake_wallet/new-ui/pages/receive_page.dart';
import 'package:cake_wallet/new-ui/pages/send_page.dart';
import 'package:cake_wallet/new-ui/pages/swap_page.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/new-ui/widgets/modern_button.dart';
import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
@@ -77,7 +78,10 @@ class AssetDetailsModal extends StatelessWidget {
child: Stack(
children: [
if (iconPath.isNotEmpty)
- CakeImageWidget(imageUrl: iconPath, width: 75, height: 75)
+ TokenImageWidget(
+ imageUrl: iconPath,
+ size: 75,
+ )
else
Container(
width: 75,
diff --git a/lib/new-ui/widgets/coins_page/assets_history/asset_tile.dart b/lib/new-ui/widgets/coins_page/assets_history/asset_tile.dart
index 0582bf02..618fa5af 100644
--- a/lib/new-ui/widgets/coins_page/assets_history/asset_tile.dart
+++ b/lib/new-ui/widgets/coins_page/assets_history/asset_tile.dart
@@ -1,8 +1,8 @@
import 'dart:math' show min;
import 'package:cake_wallet/new-ui/widgets/coins_page/assets_history/asset_details_modal.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/src/screens/wallet_connect/utils/string_parsing.dart';
-import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
import 'package:cake_wallet/view_model/dashboard/balance_view_model.dart';
import 'package:cw_core/crypto_currency.dart';
import 'package:cw_core/wallet_base.dart';
@@ -83,47 +83,29 @@ class AssetTile extends StatelessWidget {
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
- Container(
- width: 36,
- height: 36,
- child: Stack(
- children: [
- if((iconPath).isNotEmpty)
- CakeImageWidget(imageUrl: iconPath)
- else
- Container(
- width: 36,
- height: 36,
- decoration: BoxDecoration(
- color: Theme.of(context).colorScheme.primary,
- borderRadius: BorderRadius.circular(99999)),
- child: Center(
- child: Text(
- balance.asset.name.substring(0, min(2, balance.asset.name.length)),
- style: TextStyle(
- fontSize: 20, color: Theme.of(context).colorScheme.onPrimary),
- )),
+ iconPath.isNotEmpty
+ ? TokenImageWidget(
+ imageUrl: iconPath,
+ size: 36,
+ )
+ : Container(
+ width: 36,
+ height: 36,
+ decoration: BoxDecoration(
+ color: Theme.of(context).colorScheme.primary,
+ shape: BoxShape.circle,
+ ),
+ child: Center(
+ child: Text(
+ balance.asset.name
+ .substring(0, min(2, balance.asset.name.length)),
+ style: TextStyle(
+ fontSize: 20,
+ color: Theme.of(context).colorScheme.onPrimary,
+ ),
),
- // if (chainIconPath.isNotEmpty)
- // Align(
- // alignment: Alignment.bottomRight,
- // child: Container(
- // decoration: ShapeDecoration(
- // shape: RoundedSuperellipseBorder(
- // borderRadius: BorderRadius.circular(5),side: BorderSide(color: Colors.black)),
- // color: Colors.white),
- // child: Padding(
- // padding: const EdgeInsets.all(2.0),
- // child: CakeImageWidget(
- // imageUrl: chainIconPath,
- // width: 12,
- // height: 12,
- // colorFilter:
- // ColorFilter.mode(Colors.black, BlendMode.srcIn),
- // ),
- // )))
- ],
- )),
+ ),
+ ),
SizedBox(width: 12.0),
Expanded(
child: Column(
diff --git a/lib/new-ui/widgets/coins_page/assets_history/history_tile.dart b/lib/new-ui/widgets/coins_page/assets_history/history_tile.dart
index c836afc4..5614e2ca 100644
--- a/lib/new-ui/widgets/coins_page/assets_history/history_tile.dart
+++ b/lib/new-ui/widgets/coins_page/assets_history/history_tile.dart
@@ -1,4 +1,5 @@
import 'package:cake_wallet/new-ui/widgets/coins_page/assets_history/history_tile_base.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
import 'package:cw_core/crypto_currency.dart';
import 'package:cw_core/transaction_direction.dart';
@@ -77,22 +78,20 @@ class HistoryTile extends StatelessWidget {
child: Container(
width: 16,
height: 16,
- decoration: BoxDecoration(color: Theme.of(context).colorScheme.onInverseSurface, shape: BoxShape.circle),
- child: CakeImageWidget(imageUrl:
- _getDirectionIconToken(),
+ decoration: BoxDecoration(
+ color: Theme.of(context).colorScheme.onInverseSurface, shape: BoxShape.circle),
+ child: CakeImageWidget(
+ imageUrl: _getDirectionIconToken(),
+ height: 14,
+ width: 14,
colorFilter: ColorFilter.mode(
direction == TransactionDirection.outgoing
- ? Theme
- .of(context)
- .colorScheme
- .inverseSurface.withAlpha(175)
+ ? Theme.of(context).colorScheme.inverseSurface.withAlpha(175)
: Colors.green,
BlendMode.srcIn),
- width: 14,
- height: 14,
- ),
+ ),
),
- )
+ )
],
);
}
@@ -101,8 +100,10 @@ class HistoryTile extends StatelessWidget {
return Stack(children: [
Opacity(
opacity: pending ? 0.5 : 1,
- child: CakeImageWidget(imageUrl: asset?.iconPath ??"", width: 34,
- height: 34,),
+ child: CakeImageWidget(
+ imageUrl: asset?.iconPath ?? "",
+ width: 34,
+ ),
),
Align(
alignment: Alignment.bottomRight,
diff --git a/lib/new-ui/widgets/coins_page/assets_history/transaction_details_modal.dart b/lib/new-ui/widgets/coins_page/assets_history/transaction_details_modal.dart
index d81db4ac..6c959c20 100644
--- a/lib/new-ui/widgets/coins_page/assets_history/transaction_details_modal.dart
+++ b/lib/new-ui/widgets/coins_page/assets_history/transaction_details_modal.dart
@@ -1,13 +1,13 @@
import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item.dart';
import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_regular_row.dart';
import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/new-ui/widgets/copy_wrapper.dart';
import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/transaction_details/confirmations_list_item.dart';
import 'package:cake_wallet/src/screens/transaction_details/transaction_details_list_item.dart';
import 'package:cake_wallet/src/screens/transaction_details/address_list_item.dart';
-import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
import 'package:cake_wallet/src/widgets/new_list_row/new_list_section.dart';
import 'package:cake_wallet/utils/address_formatter.dart';
import 'package:cake_wallet/view_model/transaction_details_view_model.dart';
@@ -71,11 +71,12 @@ class _TransactionDetailsModalState extends State<TransactionDetailsModal> {
controller: controller,
child: Column(
children: [
- CakeImageWidget(
- imageUrl: widget.transactionDetailsViewModel.transactionAsset.iconPath ??
- "",
- width: 64,
- height: 64),
+ TokenImageWidget(
+ imageUrl: widget
+ .transactionDetailsViewModel.transactionAsset.iconPath ??
+ "",
+ size: 64,
+ ),
SizedBox(height: 10),
Text(
widget.transactionDetailsViewModel.formattedTitle +
diff --git a/lib/new-ui/widgets/coins_page/token_image_widget.dart b/lib/new-ui/widgets/coins_page/token_image_widget.dart
new file mode 100644
index 00000000..50e89411
--- /dev/null
+++ b/lib/new-ui/widgets/coins_page/token_image_widget.dart
@@ -0,0 +1,156 @@
+import 'dart:async';
+import 'dart:ui' as ui;
+
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
+import 'package:cw_core/utils/print_verbose.dart';
+import 'package:flutter/material.dart';
+
+enum _IconShape {
+ alreadyCircular,
+ clipOnly,
+ hollowNeedsBackdrop,
+}
+
+class TokenImageWidget extends StatefulWidget {
+ const TokenImageWidget({
+ super.key,
+ required this.imageUrl,
+ required this.size,
+ this.errorWidget,
+ });
+
+ final String imageUrl;
+ final double size;
+ final Widget? errorWidget;
+
+ @override
+ State<TokenImageWidget> createState() => _TokenImageWidgetState();
+}
+
+class _TokenImageWidgetState extends State<TokenImageWidget> {
+ static final Map<String, _IconShape> _shapeCache = {};
+
+ _IconShape _shape = _IconShape.clipOnly;
+
+ @override
+ void initState() {
+ super.initState();
+ _resolveShape();
+ }
+
+ @override
+ void didUpdateWidget(TokenImageWidget oldWidget) {
+ super.didUpdateWidget(oldWidget);
+ if (oldWidget.imageUrl != widget.imageUrl) {
+ _resolveShape();
+ }
+ }
+
+ Future<void> _resolveShape() async {
+ final url = widget.imageUrl;
+
+ final cached = _shapeCache[url];
+ if (cached != null) {
+ if (mounted && _shape != cached) {
+ setState(() => _shape = cached);
+ }
+ return;
+ }
+
+ final shape = await _analyzeShape(url);
+ _shapeCache[url] = shape;
+ if (mounted) {
+ setState(() => _shape = shape);
+ }
+ }
+
+ Future<_IconShape> _analyzeShape(String url) async {
+ if (url.toLowerCase().endsWith('.svg')) return _IconShape.clipOnly;
+
+ final ImageProvider provider;
+ if (url.startsWith('assets/')) {
+ provider = AssetImage(url);
+ } else if (url.startsWith('http')) {
+ provider = NetworkImage(url);
+ } else {
+ return _IconShape.clipOnly;
+ }
+
+ try {
+ final completer = Completer<ui.Image>();
+ final stream = provider.resolve(ImageConfiguration.empty);
+ late final ImageStreamListener listener;
+ listener = ImageStreamListener(
+ (info, _) {
+ if (!completer.isCompleted) completer.complete(info.image);
+ },
+ onError: (error, _) {
+ if (!completer.isCompleted) completer.completeError(error);
+ },
+ );
+ stream.addListener(listener);
+
+ final image = await completer.future;
+ stream.removeListener(listener);
+
+ final byteData = await image.toByteData(format: ui.ImageByteFormat.rawRgba);
+ if (byteData == null) return _IconShape.clipOnly;
+
+ final totalPixels = image.width * image.height;
+ var transparentPixels = 0;
+ for (var i = 0; i < totalPixels; i++) {
+ final alpha = byteData.getUint8(i * 4 + 3);
+ if (alpha < 128) transparentPixels++;
+ }
+
+ final ratio = transparentPixels / totalPixels;
+
+ if (ratio > 0.15 && ratio < 0.30) {
+ return _IconShape.alreadyCircular;
+ }
+
+ if (ratio >= 0.30) {
+ return _IconShape.hollowNeedsBackdrop;
+ }
+
+ return _IconShape.clipOnly;
+ } catch (e) {
+ printV('TokenImageWidget: failed to analyze $url: $e');
+ return _IconShape.clipOnly;
+ }
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ final image = SizedBox(
+ width: widget.size,
+ height: widget.size,
+ child: CakeImageWidget(
+ imageUrl: widget.imageUrl,
+ width: widget.size,
+ height: widget.size,
+ fit: BoxFit.cover,
+ filterQuality: FilterQuality.high,
+ errorWidget: widget.errorWidget,
+ ),
+ );
+
+ switch (_shape) {
+ case _IconShape.alreadyCircular:
+ return image;
+ case _IconShape.clipOnly:
+ return ClipOval(child: image);
+ case _IconShape.hollowNeedsBackdrop:
+ return Container(
+ width: widget.size,
+ height: widget.size,
+ clipBehavior: Clip.antiAlias,
+ decoration: const BoxDecoration(
+ shape: BoxShape.circle,
+ color: Colors.white,
+ ),
+ child: image,
+ );
+ }
+ }
+}
diff --git a/lib/new-ui/widgets/receive_page/receive_amount_modal.dart b/lib/new-ui/widgets/receive_page/receive_amount_modal.dart
index ce2b0d35..8c6291d3 100644
--- a/lib/new-ui/widgets/receive_page/receive_amount_modal.dart
+++ b/lib/new-ui/widgets/receive_page/receive_amount_modal.dart
@@ -1,5 +1,6 @@
import 'package:cake_wallet/entities/fiat_currency.dart';
import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/new-ui/widgets/new_primary_button.dart';
import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
import 'package:cake_wallet/src/screens/exchange/widgets/currency_picker.dart';
@@ -84,14 +85,14 @@ class _ReceiveAmountModalState extends State<ReceiveAmountModal> {
Row(
spacing: 8,
children: [
- Image.asset(
- widget.walletAddressListViewModel.tokenCurrency
- ?.iconPath ??
- widget.walletAddressListViewModel.currencies.first
- .iconPath ??
- "",
- width: 32,
- height: 32),
+ TokenImageWidget(
+ imageUrl: widget.walletAddressListViewModel.tokenCurrency
+ ?.iconPath ??
+ widget.walletAddressListViewModel.currencies.first
+ .iconPath ??
+ "",
+ size: 32,
+ ),
Text((widget.walletAddressListViewModel.tokenCurrency ??
widget.walletAddressListViewModel.currencies.first
as CryptoCurrency)
diff --git a/lib/new-ui/widgets/receive_page/receive_info_box.dart b/lib/new-ui/widgets/receive_page/receive_info_box.dart
index 0b9bc695..b3a0e9d1 100644
--- a/lib/new-ui/widgets/receive_page/receive_info_box.dart
+++ b/lib/new-ui/widgets/receive_page/receive_info_box.dart
@@ -2,6 +2,7 @@ import 'dart:math';
import 'package:cake_wallet/entities/auto_generate_subaddress_status.dart';
import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
import 'package:cw_core/crypto_currency.dart';
import 'package:cw_core/wallet_type.dart';
@@ -177,10 +178,9 @@ class InfoboxCurrencyRow extends StatelessWidget {
color: Theme.of(context).colorScheme.surfaceContainer,
width: iconBorder),
borderRadius: BorderRadius.circular(9999999)),
- child: CakeImageWidget(
- imageUrl: entry.value.iconPath,
- width: 24,
- height: 24,
+ child: TokenImageWidget(
+ imageUrl: entry.value.iconPath ?? '',
+ size: 24,
),
),
))
diff --git a/lib/new-ui/widgets/send_page/send_amount_input.dart b/lib/new-ui/widgets/send_page/send_amount_input.dart
index 2edcf9c8..5d51baba 100644
--- a/lib/new-ui/widgets/send_page/send_amount_input.dart
+++ b/lib/new-ui/widgets/send_page/send_amount_input.dart
@@ -1,3 +1,4 @@
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/new-ui/widgets/send_page/floating_icon_button.dart';
import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
import 'package:flutter/material.dart';
@@ -109,7 +110,7 @@ class _NewSendAmountInputState extends State<NewSendAmountInput> {
spacing: 8,
children: [
if (widget.hasPicker && widget.currencyIconPath.isNotEmpty)
- CakeImageWidget(imageUrl: widget.currencyIconPath, width: 24, height: 24),
+ TokenImageWidget(imageUrl: widget.currencyIconPath, size: 24),
Text(widget.currency),
if (widget.hasPicker)
CakeImageWidget(imageUrl:
diff --git a/lib/src/screens/dashboard/edit_token_page.dart b/lib/src/screens/dashboard/edit_token_page.dart
index dca3b2fa..97e43411 100644
--- a/lib/src/screens/dashboard/edit_token_page.dart
+++ b/lib/src/screens/dashboard/edit_token_page.dart
@@ -1,5 +1,6 @@
import 'package:cake_wallet/core/address_validator.dart';
import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/widgets/address_text_field.dart';
import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
@@ -396,10 +397,9 @@ class _EditTokenPageBodyState extends State<EditTokenPageBody> {
alignment: Alignment.center,
children: [
ClipOval(
- child: CakeImageWidget(
+ child: TokenImageWidget(
imageUrl: _tokenIconPathController.text,
- width: 75,
- height: 75,
+ size: 75,
),
),
if (_isTokenVerified)
diff --git a/lib/src/screens/dashboard/home_settings_page.dart b/lib/src/screens/dashboard/home_settings_page.dart
index 767423f4..839ecbb5 100644
--- a/lib/src/screens/dashboard/home_settings_page.dart
+++ b/lib/src/screens/dashboard/home_settings_page.dart
@@ -5,14 +5,11 @@ import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_regular
import 'package:cake_wallet/entities/new_ui_entities/list_item/list_item_toggle.dart';
import 'package:cake_wallet/entities/sort_balance_types.dart';
import 'package:cake_wallet/generated/i18n.dart';
-import 'package:cake_wallet/new-ui/pages/settings_page.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/routes.dart';
import 'package:cake_wallet/src/screens/base_page.dart';
import 'package:cake_wallet/src/screens/dashboard/favorite_token_modal.dart';
-import 'package:cake_wallet/src/screens/settings/widgets/settings_cell_with_arrow.dart';
import 'package:cake_wallet/src/widgets/base_text_form_field.dart';
-import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
-import 'package:cake_wallet/src/screens/settings/widgets/settings_picker_cell.dart';
import 'package:cake_wallet/src/screens/settings/widgets/settings_switcher_cell.dart';
import 'package:cake_wallet/src/widgets/new_list_row/new_list_section.dart';
import 'package:cake_wallet/src/widgets/picker.dart';
@@ -186,30 +183,25 @@ class HomeSettingsPage extends BasePage {
'token': token,
});
},
- leading: Container(
- clipBehavior: Clip.hardEdge,
- decoration: BoxDecoration(shape: BoxShape.circle),
- child: CakeImageWidget(
- imageUrl: token.iconPath,
- height: 40,
- width: 40,
- errorWidget: Container(
- height: 30.0,
- width: 30.0,
- child: Center(
- child: Text(
- token.title.substring(0, min(token.title.length, 2)),
- style: Theme.of(context).textTheme.bodySmall?.copyWith(
- fontSize: 11,
- color: Theme.of(context).colorScheme.onSurfaceVariant,
- ),
- ),
- ),
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: Theme.of(context).colorScheme.surfaceContainerHighest,
+ leading: TokenImageWidget(
+ imageUrl: token.iconPath ?? '',
+ size: 40,
+ errorWidget: Container(
+ height: 30.0,
+ width: 30.0,
+ child: Center(
+ child: Text(
+ token.title.substring(0, min(token.title.length, 2)),
+ style: Theme.of(context).textTheme.bodySmall?.copyWith(
+ fontSize: 11,
+ color: Theme.of(context).colorScheme.onSurfaceVariant,
+ ),
),
),
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Theme.of(context).colorScheme.surfaceContainerHighest,
+ ),
),
),
decoration: BoxDecoration(
diff --git a/lib/src/screens/receive/widgets/qr_image.dart b/lib/src/screens/receive/widgets/qr_image.dart
index 250f7072..bb8c4160 100644
--- a/lib/src/screens/receive/widgets/qr_image.dart
+++ b/lib/src/screens/receive/widgets/qr_image.dart
@@ -1,7 +1,5 @@
-import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
-import 'package:cw_core/utils/print_verbose.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
import 'package:qr_flutter/qr_flutter.dart' as qr;
class QrImage extends StatelessWidget {
@@ -44,10 +42,9 @@ class QrImage extends StatelessWidget {
backgroundColor: backgroundColor,
padding: const EdgeInsets.all(12.0),
),
- CakeImageWidget(imageUrl:
- imagePath,
- width: logoSize * 0.8,
- height: logoSize * 0.8,
+ TokenImageWidget(
+ imageUrl: imagePath,
+ size: logoSize * 0.8,
),
],
);
diff --git a/lib/src/widgets/cake_image_widget.dart b/lib/src/widgets/cake_image_widget.dart
index fcfbe64c..f714bcd0 100644
--- a/lib/src/widgets/cake_image_widget.dart
+++ b/lib/src/widgets/cake_image_widget.dart
@@ -16,6 +16,7 @@ class CakeImageWidget extends StatelessWidget {
this.borderRadius = 24.0,
this.alignment,
this.allowDrawingOutsideViewBox,
+ this.filterQuality,
});
final String? imageUrl;
@@ -29,6 +30,7 @@ class CakeImageWidget extends StatelessWidget {
final AlignmentGeometry? alignment;
final bool? allowDrawingOutsideViewBox;
final double borderRadius;
+ final FilterQuality? filterQuality;
@override
Widget build(BuildContext context) {
@@ -69,6 +71,7 @@ class CakeImageWidget extends StatelessWidget {
width: width,
fit: fit,
color: color,
+ filterQuality: filterQuality ?? FilterQuality.medium,
errorBuilder: (_, __, ___) => _buildErrorWidget(context),
);
}
@@ -93,6 +96,7 @@ class CakeImageWidget extends StatelessWidget {
width: width,
fit: fit ?? BoxFit.cover,
color: color,
+ filterQuality: filterQuality ?? FilterQuality.medium,
loadingBuilder: (_, Widget child, ImageChunkEvent? progress) {
if (progress == null) return child;
return loadingWidget ?? const Center(child: CircularProgressIndicator());
diff --git a/lib/src/widgets/picker.dart b/lib/src/widgets/picker.dart
index 9b9e534a..4934010c 100644
--- a/lib/src/widgets/picker.dart
+++ b/lib/src/widgets/picker.dart
@@ -3,7 +3,7 @@
import 'dart:math';
import 'package:cake_wallet/entities/seed_type.dart';
-import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
+import 'package:cake_wallet/new-ui/widgets/coins_page/token_image_widget.dart';
import 'package:cake_wallet/src/widgets/search_bar_widget.dart';
import 'package:cake_wallet/themes/core/theme_extension.dart';
import 'package:cake_wallet/utils/responsive_layout_util.dart';
@@ -498,10 +498,9 @@ class _PickerState<Item> extends State<Picker<Item>> {
Widget? _getItemIcon(Item item) {
if (item is Currency) {
if (item.iconPath != null) {
- return CakeImageWidget(
+ return TokenImageWidget(
imageUrl: item.iconPath!,
- height: 20.0,
- width: 20.0,
+ size: 20.0,
);
} else {
return Container(
Risk score
Our methodology →Why this scored 15/100
Human-validated context
Community notes
Notes can correct, qualify, or add evidence to the AI analysis. Every note shown here has been validated by a human moderator.
No validated notes yet.
The AI analysis stands alone for now. Submit a note if you can add evidence or important context.