From 3bdfb5bc9713eb2138ee035ea8e9cd929d4a6f8f Mon Sep 17 00:00:00 2001 From: malik1004x Date: Mon, 8 Dec 2025 14:52:31 +0100 Subject: [PATCH] New design for wallet connection guide (#2706) * new design for wallet connection guide * fix: cleanup --- .../wallet_connect_step_icons/step1_power.svg | 5 + .../step2_connect.svg | 9 ++ .../step3_unlock.svg | 8 ++ .../step4_select.svg | 5 + .../connect_device/connect_device_page.dart | 12 +- .../info_steps_bottom_sheet_widget.dart | 133 ++++++++++-------- pubspec_base.yaml | 1 + 7 files changed, 109 insertions(+), 64 deletions(-) create mode 100644 assets/images/wallet_connect_step_icons/step1_power.svg create mode 100644 assets/images/wallet_connect_step_icons/step2_connect.svg create mode 100644 assets/images/wallet_connect_step_icons/step3_unlock.svg create mode 100644 assets/images/wallet_connect_step_icons/step4_select.svg diff --git a/assets/images/wallet_connect_step_icons/step1_power.svg b/assets/images/wallet_connect_step_icons/step1_power.svg new file mode 100644 index 000000000..52e733d89 --- /dev/null +++ b/assets/images/wallet_connect_step_icons/step1_power.svg @@ -0,0 +1,5 @@ + + + diff --git a/assets/images/wallet_connect_step_icons/step2_connect.svg b/assets/images/wallet_connect_step_icons/step2_connect.svg new file mode 100644 index 000000000..cd81e9db0 --- /dev/null +++ b/assets/images/wallet_connect_step_icons/step2_connect.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/assets/images/wallet_connect_step_icons/step3_unlock.svg b/assets/images/wallet_connect_step_icons/step3_unlock.svg new file mode 100644 index 000000000..fe63f32af --- /dev/null +++ b/assets/images/wallet_connect_step_icons/step3_unlock.svg @@ -0,0 +1,8 @@ + + + + diff --git a/assets/images/wallet_connect_step_icons/step4_select.svg b/assets/images/wallet_connect_step_icons/step4_select.svg new file mode 100644 index 000000000..66e505317 --- /dev/null +++ b/assets/images/wallet_connect_step_icons/step4_select.svg @@ -0,0 +1,5 @@ + + + diff --git a/lib/src/screens/connect_device/connect_device_page.dart b/lib/src/screens/connect_device/connect_device_page.dart index 00b5356be..2122db44a 100644 --- a/lib/src/screens/connect_device/connect_device_page.dart +++ b/lib/src/screens/connect_device/connect_device_page.dart @@ -319,10 +319,14 @@ class ConnectDevicePageBodyState extends State { builder: (BuildContext bottomSheetContext) => InfoStepsBottomSheet( titleText: S.of(context).how_to_connect, steps: [ - InfoStep('${S.of(context).step} 1', S.of(context).connect_hw_info_step_1), - InfoStep('${S.of(context).step} 2', S.of(context).connect_hw_info_step_2), - InfoStep('${S.of(context).step} 3', S.of(context).connect_hw_info_step_3), - InfoStep('${S.of(context).step} 4', S.of(context).connect_hw_info_step_4), + InfoStep('assets/images/wallet_connect_step_icons/step1_power.svg', + S.of(context).connect_hw_info_step_1), + InfoStep('assets/images/wallet_connect_step_icons/step2_connect.svg', + S.of(context).connect_hw_info_step_2), + InfoStep('assets/images/wallet_connect_step_icons/step3_unlock.svg', + S.of(context).connect_hw_info_step_3), + InfoStep('assets/images/wallet_connect_step_icons/step4_select.svg', + S.of(context).connect_hw_info_step_4), ], ), ); diff --git a/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart b/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart index 6dbc3ee5a..1e78e4170 100644 --- a/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart +++ b/lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart @@ -2,14 +2,15 @@ import 'package:cake_wallet/generated/i18n.dart'; import 'package:cake_wallet/src/widgets/primary_button.dart'; import 'package:cake_wallet/themes/core/theme_extension.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; import 'base_bottom_sheet_widget.dart'; class InfoStep { - final String title; + final String iconPath; final String description; - const InfoStep(this.title, this.description); + const InfoStep(this.iconPath, this.description); } class InfoStepsBottomSheet extends BaseBottomSheet { @@ -26,77 +27,89 @@ class InfoStepsBottomSheet extends BaseBottomSheet { maxHeight: 900); @override - Widget contentWidget(BuildContext context) => SizedBox( - height: 500, - child: Column( + Widget contentWidget(BuildContext context) => SafeArea( + child: Container( + constraints: BoxConstraints( + maxHeight: MediaQuery.of(context).size.height * 0.7, + ), + child: SingleChildScrollView( + child: Column( children: [ - Expanded( - child: SingleChildScrollView( - child: Column( - children: steps - .map((step) => Container( - margin: EdgeInsets.only(bottom: 15, left: 20, right: 20), - padding: EdgeInsets.all(10), - alignment: Alignment.center, - decoration: BoxDecoration( - borderRadius: BorderRadius.circular(10), - color: Theme.of(context).cardColor, - ), - child: Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Expanded( - child: Padding( - padding: EdgeInsets.only(left: 16), - child: Column( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - step.title, - style: Theme.of(context).textTheme.bodyMedium!.copyWith( - fontSize: 20, - fontWeight: FontWeight.w500, - color: context.currentTheme.colorScheme.onSurface, - ), - ), - Padding( - padding: EdgeInsets.only(top: 5), - child: Text( - step.description, - style: Theme.of(context).textTheme.bodyMedium!.copyWith( - color: context - .currentTheme.colorScheme.onSurfaceVariant, - ), - ), - ) - ], - ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: 28.0), + child: Column( + children: steps + .map((step) => Column( + children: [ + Container( + padding: EdgeInsets.all(10), + alignment: Alignment.center, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(15), + color: Theme.of(context).colorScheme.surfaceContainer, ), - ) + child: Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Expanded( + child: Padding( + padding: EdgeInsets.all(10), + child: Column( + spacing: 10.0, + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SvgPicture.asset( + step.iconPath, + colorFilter: ColorFilter.mode( + Theme.of(context).colorScheme.onSurfaceVariant, + BlendMode.srcIn), + ), + Text( + step.description, + style: Theme.of(context) + .textTheme + .bodyMedium! + .copyWith( + color: context + .currentTheme.colorScheme.onSurface, + fontWeight: FontWeight.w400), + ) + ], + ), + ), + ) + ], + ), + ), + if (step != steps.last) + Container( + width: 5, + height: 10, + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.surfaceContainer), + ) ], - ), - )) - .toList(), - ), - ), + )) + .toList(), + ), ), Padding( padding: const EdgeInsets.all(16), child: PrimaryButton( text: S.of(context).close, color: context.currentTheme.colorScheme.primary, - textColor: context.currentTheme.isDark - ? context.currentTheme.colorScheme.onSurfaceVariant - : context.currentTheme.colorScheme.onPrimary, - onPressed: () => Navigator.of(context).pop(), + textColor: context.currentTheme.colorScheme.onPrimary, + onPressed: () => Navigator.of(context).pop(), ), ) ], ), + ), + ), ); @override diff --git a/pubspec_base.yaml b/pubspec_base.yaml index 274a97201..46bc79a4b 100644 --- a/pubspec_base.yaml +++ b/pubspec_base.yaml @@ -222,6 +222,7 @@ flutter: - assets/images/crypto/ - assets/images/stocks/ - assets/images/main_actions/ + - assets/images/wallet_connect_step_icons/ - assets/node_list.yml - assets/haven_node_list.yml - assets/bitcoin_electrum_server_list.yml