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

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)

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(

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,
           ),
         ],
       );

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());

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(