chore: apps list screen UI

lib/app/constants/ui.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 
 const double kDefaultPadding = 44.0;
 const double kDefaultIconButtonSide = 44.0;
+const double kDefaultNavHeaderTopPadding = 50.0;
 
 const TextStyle shadowStyle = TextStyle(
   shadows: <Shadow>[

lib/app/features/dapps/views/pages/dapps.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:ice/app/extensions/build_context.dart';
 import 'package:ice/app/extensions/theme_data.dart';
@@ -14,6 +15,8 @@ class DAppsPage extends HookConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final GoRouter router = GoRouter.of(context);
+
     return SingleChildScrollView(
       child: Container(
         decoration:
@@ -23,8 +26,20 @@ class DAppsPage extends HookConsumerWidget {
             const WalletHeader(),
             const Featured(),
             const Categories(),
-            Apps(title: 'Highest ranked', items: featured, onPress: () {}),
-            Apps(title: 'Recently added', items: featured, onPress: () {}),
+            Apps(
+              title: 'Highest ranked',
+              items: featured,
+              onPress: () {
+                router.go('/dapps/appsList');
+              },
+            ),
+            Apps(
+              title: 'Recently added',
+              items: featured,
+              onPress: () {
+                router.go('/dapps/appsList');
+              },
+            ),
             const Favourites(),
           ],
         ),

lib/app/features/dapps/views/pages/dapps_list/dapps_list.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:ice/app/constants/ui.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/theme_data.dart';
+import 'package:ice/app/features/dapps/views/pages/mocks/mocked_apps.dart';
+import 'package:ice/app/features/dapps/views/pages/widgets/apps_collection.dart';
+import 'package:ice/app/shared/widgets/navigation_header/navigation_header.dart';
+import 'package:ice/app/shared/widgets/search/search.dart';
+
+class DAppsList extends HookConsumerWidget {
+  const DAppsList({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final ValueNotifier<String> searchText = useState('');
+
+    final List<DAppItem> filteredApps = searchText.value.isEmpty
+        ? featured
+        : featured.where((DAppItem app) {
+            final String searchLower = searchText.value.toLowerCase().trim();
+            final String titleLower = app.title.toLowerCase();
+
+            return titleLower.contains(searchLower);
+          }).toList();
+
+    return Scaffold(
+      body: Container(
+        margin: const EdgeInsets.only(top: kDefaultNavHeaderTopPadding),
+        width: double.infinity,
+        color: context.theme.appColors.secondaryBackground,
+        child: Stack(
+          children: <Widget>[
+            const NavigationHeader(
+              title: 'DeFi',
+            ),
+            Padding(
+              padding: const EdgeInsets.only(top: navigationHeaderHeight),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: <Widget>[
+                  Search(
+                    onTextChanged: (String value) => searchText.value = value,
+                    onClearText: () => searchText.value = '',
+                  ),
+                  Expanded(
+                    child: ListView.builder(
+                      itemCount: filteredApps.length,
+                      itemBuilder: (BuildContext context, int index) {
+                        final DAppItem app = filteredApps[index];
+                        return DAppGridItem(item: app, showIsFavourite: true);
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/app/features/dapps/views/pages/mocks/mocked_apps.dart

@@ -4,16 +4,20 @@ class DAppItem {
   DAppItem({
     required this.iconImage,
     required this.title,
+    this.isFavourite = false,
     this.description = '',
     this.value = 0.0,
     this.isVerified = false,
+    this.backgroundImage,
   });
 
   final String iconImage;
   final String title;
+  final bool isFavourite;
   final String? description;
   final double? value;
   final bool? isVerified;
+  final String? backgroundImage;
 }
 
 List<DAppItem> featured = <DAppItem>[
@@ -23,36 +27,42 @@ List<DAppItem> featured = <DAppItem>[
     description: 'Swap ERC-20 tokens',
     value: 4190.77,
     isVerified: true,
+    isFavourite: true,
   ),
   DAppItem(
     iconImage: Assets.images.walletOpensea.path,
     title: 'Opensea',
     description: 'NFT marketplace',
     value: 3938.25,
     isVerified: true,
+    isFavourite: true,
   ),
   DAppItem(
     iconImage: Assets.images.wallet1inch.path,
     title: '1inch',
     description: 'DEX price optimizer',
     value: 2681.49,
+    isFavourite: true,
   ),
   DAppItem(
     iconImage: Assets.images.walletPanecakeswap.path,
     title: 'Pancakeswap',
     description: 'BSC decentralized exchange',
     value: 1348.52,
+    isFavourite: true,
   ),
   DAppItem(
     iconImage: Assets.images.walletStargate.path,
     title: 'Stargate',
     description: 'Cross-chain transaction facilitator',
     value: 938.25,
+    isFavourite: true,
   ),
   DAppItem(
     iconImage: Assets.images.walletLido.path,
     title: 'Lido',
     description: 'Decentralized ETH 2.0 staking',
     value: 497.08,
+    isFavourite: true,
   ),
 ];

lib/app/features/dapps/views/pages/mocks/mocked_featured.dart

@@ -1,27 +1,14 @@
+import 'package:ice/app/features/dapps/views/pages/mocks/mocked_apps.dart';
 import 'package:ice/generated/assets.gen.dart';
 
-class FeaturedItem {
-  FeaturedItem({
-    required this.backgroundImage,
-    required this.iconImage,
-    required this.title,
-    required this.description,
-  });
-
-  final String backgroundImage;
-  final String iconImage;
-  final String title;
-  final String description;
-}
-
-List<FeaturedItem> featured = <FeaturedItem>[
-  FeaturedItem(
+List<DAppItem> featured = <DAppItem>[
+  DAppItem(
     backgroundImage: Assets.images.uniswapBg.path,
     iconImage: Assets.images.featuredUniswap.path,
     title: 'Uniswap wallet',
     description: 'Buy & trade top tokens',
   ),
-  FeaturedItem(
+  DAppItem(
     backgroundImage: Assets.images.oneInchBg.path,
     iconImage: Assets.images.featured1inch.path,
     title: '1inch',

lib/app/features/dapps/views/pages/widgets/apps_collection.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:ice/app/extensions/build_context.dart';
 import 'package:ice/app/extensions/theme_data.dart';
 import 'package:ice/app/features/dapps/views/pages/mocks/mocked_apps.dart';
+import 'package:ice/app/shared/widgets/favourite_icon/favorite_icon.dart';
 import 'package:ice/app/utils/extensions.dart';
 import 'package:ice/app/values/constants.dart';
 
@@ -51,8 +52,13 @@ class AppsCollection extends StatelessWidget {
 }
 
 class DAppGridItem extends StatelessWidget {
-  const DAppGridItem({super.key, required this.item});
+  const DAppGridItem({
+    super.key,
+    required this.item,
+    this.showIsFavourite = false,
+  });
   final DAppItem item;
+  final bool showIsFavourite;
 
   @override
   Widget build(BuildContext context) {
@@ -63,45 +69,54 @@ class DAppGridItem extends StatelessWidget {
       ),
       width: double.infinity,
       child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: <Widget>[
-          Container(
-            width: 48,
-            height: 48,
-            decoration: BoxDecoration(
-              color: Colors.white,
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: Image.asset(
-              item.iconImage,
-              width: 48,
-              fit: BoxFit.contain,
-            ),
-          ),
-          const SizedBox(width: 8),
-          Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.center,
+          Row(
             children: <Widget>[
-              Text(
-                item.title,
-                style: context.theme.appTextThemes.body.copyWith(
-                  color: context.theme.appColors.primaryText,
+              Container(
+                width: 48,
+                height: 48,
+                decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.circular(8),
                 ),
-              ),
-              Text(
-                item.description ?? '',
-                style: context.theme.appTextThemes.caption3.copyWith(
-                  color: context.theme.appColors.secondaryText,
+                child: Image.asset(
+                  item.iconImage,
+                  width: 48,
+                  fit: BoxFit.contain,
                 ),
               ),
-              Text(
-                item.value != null ? formatDouble(item.value!) : '',
-                style: context.theme.appTextThemes.caption3.copyWith(
-                  color: context.theme.appColors.tertararyText,
-                ),
+              const SizedBox(width: 8),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: <Widget>[
+                  Text(
+                    item.title,
+                    style: context.theme.appTextThemes.body.copyWith(
+                      color: context.theme.appColors.primaryText,
+                    ),
+                  ),
+                  Text(
+                    item.description ?? '',
+                    style: context.theme.appTextThemes.caption3.copyWith(
+                      color: context.theme.appColors.secondaryText,
+                    ),
+                  ),
+                  Text(
+                    item.value != null ? formatDouble(item.value!) : '',
+                    style: context.theme.appTextThemes.caption3.copyWith(
+                      color: context.theme.appColors.tertararyText,
+                    ),
+                  ),
+                ],
               ),
             ],
           ),
+          if (showIsFavourite)
+            FavouriteIcon(
+              isFavourite: item.isFavourite,
+            ),
         ],
       ),
     );

lib/app/features/dapps/views/pages/widgets/featured_collection.dart

@@ -2,12 +2,12 @@ import 'package:flutter/material.dart';
 import 'package:ice/app/constants/ui.dart';
 import 'package:ice/app/extensions/build_context.dart';
 import 'package:ice/app/extensions/theme_data.dart';
-import 'package:ice/app/features/dapps/views/pages/mocks/mocked_featured.dart';
+import 'package:ice/app/features/dapps/views/pages/mocks/mocked_apps.dart';
 
 class FeaturedCollection extends StatelessWidget {
   const FeaturedCollection({super.key, required this.items});
 
-  final List<FeaturedItem> items;
+  final List<DAppItem> items;
 
   @override
   Widget build(BuildContext context) {
@@ -23,14 +23,15 @@ class FeaturedCollection extends StatelessWidget {
         itemBuilder: (BuildContext context, int index) {
           final double leftOffset = index == 0 ? 16.0 : 8.0;
           final double rightOffset = index == items.length - 1 ? 16.0 : 8.0;
+          final String assetBg = items[index].backgroundImage ?? '';
           return Container(
             width: itemWidth,
             margin: EdgeInsets.only(right: rightOffset, left: leftOffset),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(12),
               image: DecorationImage(
                 image: AssetImage(
-                  items[index].backgroundImage,
+                  assetBg,
                 ),
                 fit: BoxFit.cover,
               ),
@@ -71,7 +72,7 @@ class FeaturedCollection extends StatelessWidget {
                                   .merge(shadowStyle),
                             ),
                             Text(
-                              items[index].description,
+                              items[index].description ?? '',
                               style: context.theme.appTextThemes.caption3
                                   .copyWith(
                                     color: context

lib/app/router/app_routes.dart

@@ -9,6 +9,7 @@ import 'package:ice/app/features/core/views/pages/error_page.dart';
 import 'package:ice/app/features/core/views/pages/modal_page.dart';
 import 'package:ice/app/features/core/views/pages/splash_page.dart';
 import 'package:ice/app/features/dapps/views/pages/dapps.dart';
+import 'package:ice/app/features/dapps/views/pages/dapps_list/dapps_list.dart';
 import 'package:ice/app/features/wallet/views/pages/inner_wallet_page.dart';
 import 'package:ice/app/features/wallet/views/pages/wallet_page.dart';
 import 'package:ice/app/router/views/scaffold_with_nested_navigation.dart';
@@ -96,6 +97,11 @@ class FillProfileRoute extends GoRouteData {
       routes: <TypedRoute<RouteData>>[
         TypedGoRoute<DAppsRoute>(
           path: '/dapps',
+          routes: <TypedRoute<RouteData>>[
+            TypedGoRoute<DAppsListRoute>(
+              path: 'appsList',
+            ),
+          ],
         ),
       ],
     ),
@@ -171,6 +177,12 @@ class DAppsBranch extends StatefulShellBranchData {
   static final GlobalKey<NavigatorState> $navigatorKey = shellNavigatorDAppsKey;
 }
 
+class DAppsListRoute extends GoRouteData {
+  const DAppsListRoute();
+  @override
+  Widget build(BuildContext context, GoRouterState state) => const DAppsList();
+}
+
 class DAppsRoute extends GoRouteData {
   const DAppsRoute();
   @override