@samitouri / QOSAMI-cakewallet-1 / commits / 3bdfb5bc9

New design for wallet connection guide (#2706)

* new design for wallet connection guide * fix: cleanup

malik1004x committed Dec 8, 2025 at 14:52 UTC 3bdfb5bc9713eb2138ee035ea8e9cd929d4a6f8f
7 files changed +107 -62
assets/images/wallet_connect_step_icons/step1_power.svg new
+5
@@ -0,0 +1,5 @@
1 +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 + <path
3 + d="M10.0831 9.98083C9.9059 9.98083 9.7575 9.92097 9.63792 9.80125C9.51819 9.68139 9.45833 9.53292 9.45833 9.35583V2.625C9.45833 2.44792 9.51826 2.29951 9.63813 2.17979C9.75799 2.05993 9.90646 2 10.0835 2C10.2608 2 10.4092 2.05993 10.5288 2.17979C10.6485 2.29951 10.7083 2.44792 10.7083 2.625V9.35583C10.7083 9.53292 10.6484 9.68139 10.5285 9.80125C10.4087 9.92097 10.2602 9.98083 10.0831 9.98083ZM10.0837 17.0642C9.10056 17.0642 8.17951 16.8783 7.32063 16.5065C6.4616 16.1347 5.71264 15.6293 5.07375 14.9904C4.43486 14.3515 3.92951 13.6027 3.55771 12.744C3.1859 11.8852 3 10.9642 3 9.98083C3 9.14958 3.14292 8.34535 3.42875 7.56813C3.71458 6.7909 4.12403 6.085 4.65708 5.45042C4.77069 5.30403 4.91528 5.23431 5.09083 5.24125C5.26639 5.2482 5.42278 5.32028 5.56 5.4575C5.67597 5.57347 5.72701 5.7132 5.71313 5.87667C5.69924 6.04014 5.63889 6.19507 5.53208 6.34146C5.11431 6.85215 4.79618 7.42076 4.57771 8.04729C4.35924 8.67396 4.25 9.31847 4.25 9.98083C4.25 11.6058 4.81597 12.9843 5.94792 14.1163C7.07986 15.2482 8.45833 15.8142 10.0833 15.8142C11.7083 15.8142 13.0868 15.2482 14.2188 14.1163C15.3507 12.9843 15.9167 11.6058 15.9167 9.98083C15.9167 9.31236 15.8096 8.66208 15.5954 8.03C15.3811 7.39792 15.0566 6.82653 14.6219 6.31583C14.5149 6.17792 14.4545 6.02799 14.4406 5.86604C14.4267 5.70396 14.4775 5.56542 14.5929 5.45042C14.7222 5.32111 14.8742 5.25431 15.049 5.25C15.2235 5.24583 15.3685 5.31264 15.484 5.45042C16.0256 6.085 16.4415 6.78861 16.7315 7.56125C17.0216 8.33389 17.1667 9.14042 17.1667 9.98083C17.1667 10.9642 16.9808 11.8852 16.609 12.744C16.2372 13.6027 15.7318 14.3515 15.0929 14.9904C14.454 15.6293 13.7053 16.1347 12.8467 16.5065C11.9879 16.8783 11.0669 17.0642 10.0837 17.0642Z"
4 + fill="#8C9FBB" />
5 +</svg>
assets/images/wallet_connect_step_icons/step2_connect.svg new
+9
@@ -0,0 +1,9 @@
1 +<svg width="57" height="20" viewBox="0 0 57 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 + <path
3 + d="M7.83675 18.0447V11.503L3.79487 15.5447L2.91675 14.6665L7.58342 9.99987L2.91675 5.3332L3.79487 4.45508L7.83675 8.49675V1.95508H8.46154L12.9232 6.41654L9.33987 9.99987L12.9232 13.5832L8.46154 18.0447H7.83675ZM9.08654 8.49675L11.1667 6.41654L9.08654 4.36195V8.49675ZM9.08654 15.6378L11.1667 13.5832L9.08654 11.503V15.6378ZM13.8559 11.6536L12.2276 9.99987L13.8559 8.37175C13.9541 8.63452 14.0347 8.90161 14.0978 9.173C14.1608 9.44438 14.1924 9.72001 14.1924 9.99987C14.1924 10.2797 14.1622 10.5575 14.1017 10.8332C14.0415 11.1089 13.9595 11.3824 13.8559 11.6536ZM16.0097 13.7563L15.2084 12.9807C15.4541 12.5201 15.6454 12.0394 15.7822 11.5384C15.9188 11.0373 15.9872 10.5245 15.9872 9.99987C15.9872 9.47529 15.9188 8.96244 15.7822 8.46133C15.6454 7.96036 15.4541 7.47959 15.2084 7.01904L16.0097 6.21779C16.359 6.79362 16.6253 7.40022 16.8086 8.03758C16.9918 8.6748 17.0834 9.3289 17.0834 9.99987C17.0834 10.6708 16.9918 11.3228 16.8086 11.9557C16.6253 12.5888 16.359 13.189 16.0097 13.7563Z"
4 + fill="#8C9FBB" />
5 + <path d="M26.82 15H25.742L29.606 4.766H30.684L26.82 15Z" fill="#8C9FBB" />
6 + <path
7 + d="M46.9992 17.9646C46.5944 17.9646 46.25 17.8227 45.9663 17.539C45.6827 17.2554 45.5409 16.9111 45.5409 16.5063C45.5409 16.2306 45.6173 15.9771 45.77 15.7458C45.9228 15.5145 46.1242 15.3384 46.3742 15.2177V13.1248H43.8742C43.4532 13.1248 43.0969 12.979 42.8053 12.6873C42.5136 12.3956 42.3678 12.0393 42.3678 11.6184V9.78189C42.1232 9.67828 41.9232 9.51349 41.7678 9.28752C41.6122 9.06154 41.5344 8.79682 41.5344 8.49335C41.5344 8.08849 41.6763 7.74425 41.96 7.46064C42.2437 7.17689 42.5879 7.03502 42.9928 7.03502C43.3978 7.03502 43.7421 7.17689 44.0257 7.46064C44.3093 7.74425 44.4511 8.08849 44.4511 8.49335C44.4511 8.79682 44.3734 9.05724 44.218 9.2746C44.0625 9.4921 43.8625 9.6612 43.6178 9.78189V11.6184C43.6178 11.6825 43.6445 11.7413 43.698 11.7946C43.7514 11.8481 43.8102 11.8748 43.8742 11.8748H46.3742V5.1121H44.9159L46.9992 2.3396L49.0825 5.1121H47.6242V11.8748H50.1242C50.1882 11.8748 50.247 11.8481 50.3005 11.7946C50.3539 11.7413 50.3807 11.6825 50.3807 11.6184V9.95168H49.5473V7.03502H52.464V9.95168H51.6307V11.6184C51.6307 12.0393 51.4848 12.3956 51.1932 12.6873C50.9015 12.979 50.5452 13.1248 50.1242 13.1248H47.6242V15.2177C47.8827 15.3299 48.0862 15.5017 48.2348 15.7329C48.3833 15.9643 48.4575 16.2221 48.4575 16.5063C48.4575 16.9111 48.3157 17.2554 48.0321 17.539C47.7484 17.8227 47.4041 17.9646 46.9992 17.9646Z"
8 + fill="#8C9FBB" />
9 +</svg>
assets/images/wallet_connect_step_icons/step3_unlock.svg new
+8
@@ -0,0 +1,8 @@
1 +<svg width="41" height="20" viewBox="0 0 41 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 + <path
3 + d="M5.25646 7.08342H12.5V5.41675C12.5 4.7223 12.2569 4.13203 11.7708 3.64591C11.2847 3.1598 10.6944 2.91675 10 2.91675C9.30556 2.91675 8.71528 3.1598 8.22917 3.64591C7.74306 4.13203 7.5 4.7223 7.5 5.41675H6.25C6.25 4.37619 6.61486 3.49105 7.34458 2.76133C8.07431 2.03161 8.95944 1.66675 10 1.66675C11.0406 1.66675 11.9257 2.03161 12.6554 2.76133C13.3851 3.49105 13.75 4.37619 13.75 5.41675V7.08342H14.7435C15.1591 7.08342 15.5141 7.23057 15.8085 7.52487C16.1028 7.81932 16.25 8.17432 16.25 8.58987V16.4103C16.25 16.8258 16.1028 17.1808 15.8085 17.4753C15.5141 17.7696 15.1591 17.9167 14.7435 17.9167H5.25646C4.8409 17.9167 4.4859 17.7696 4.19146 17.4753C3.89715 17.1808 3.75 16.8258 3.75 16.4103V8.58987C3.75 8.17432 3.89715 7.81932 4.19146 7.52487C4.4859 7.23057 4.8409 7.08342 5.25646 7.08342ZM5.25646 16.6667H14.7435C14.8184 16.6667 14.8799 16.6427 14.9279 16.5947C14.976 16.5466 15 16.4852 15 16.4103V8.58987C15 8.51501 14.976 8.45355 14.9279 8.4055C14.8799 8.35744 14.8184 8.33342 14.7435 8.33342H5.25646C5.1816 8.33342 5.12014 8.35744 5.07208 8.4055C5.02403 8.45355 5 8.51501 5 8.58987V16.4103C5 16.4852 5.02403 16.5466 5.07208 16.5947C5.12014 16.6427 5.1816 16.6667 5.25646 16.6667ZM10 13.9584C10.4049 13.9584 10.7492 13.8166 11.0329 13.533C11.3165 13.2492 11.4583 12.9049 11.4583 12.5001C11.4583 12.0952 11.3165 11.7509 11.0329 11.4672C10.7492 11.1836 10.4049 11.0417 10 11.0417C9.59514 11.0417 9.25083 11.1836 8.96708 11.4672C8.68347 11.7509 8.54167 12.0952 8.54167 12.5001C8.54167 12.9049 8.68347 13.2492 8.96708 13.533C9.25083 13.8166 9.59514 13.9584 10 13.9584Z"
4 + fill="#8C9FBB" />
5 + <path
6 + d="M33.185 17.9166C32.764 17.9166 32.366 17.8279 31.991 17.6506C31.616 17.4732 31.3025 17.2184 31.0504 16.8862L26.8052 11.3876L27.1129 11.0593C27.3212 10.8371 27.5704 10.7035 27.8604 10.6587C28.1504 10.6137 28.422 10.6687 28.6752 10.8237L30.7058 11.9135V5.32056C30.7058 5.14347 30.7657 4.995 30.8856 4.87514C31.0053 4.75542 31.1538 4.69556 31.331 4.69556C31.5082 4.69556 31.6588 4.75542 31.7827 4.87514C31.9066 4.995 31.9685 5.14347 31.9685 5.32056V9.39097H38.1577C38.7853 9.39097 39.3188 9.61063 39.7581 10.0499C40.1975 10.4894 40.4173 11.0229 40.4173 11.6506V14.791C40.4173 15.6546 40.1105 16.3915 39.4968 17.0016C38.8834 17.6116 38.1458 17.9166 37.2841 17.9166H33.185ZM28.0873 7.19556C27.9227 6.91667 27.7971 6.61847 27.7106 6.30097C27.6241 5.98347 27.5808 5.65667 27.5808 5.32056C27.5808 4.27986 27.9457 3.39472 28.6754 2.66514C29.405 1.93542 30.2901 1.57056 31.3308 1.57056C32.3714 1.57056 33.2565 1.93542 33.9862 2.66514C34.7158 3.39472 35.0806 4.27952 35.0806 5.31951C35.0806 5.65771 35.0373 5.98521 34.9508 6.30201C34.8643 6.61882 34.7388 6.91667 34.5743 7.19556L33.4975 6.57056C33.6086 6.37611 33.6919 6.1782 33.7475 5.97681C33.803 5.77542 33.8308 5.55667 33.8308 5.32056C33.8308 4.62611 33.5877 4.03583 33.1016 3.54972C32.6155 3.06361 32.0252 2.82056 31.3308 2.82056C30.6364 2.82056 30.0461 3.06361 29.56 3.54972C29.0739 4.03583 28.8308 4.62611 28.8308 5.32056C28.8308 5.55667 28.8586 5.77542 28.9141 5.97681C28.9697 6.1782 29.053 6.37611 29.1641 6.57056L28.0873 7.19556Z"
7 + fill="#8C9FBB" />
8 +</svg>
assets/images/wallet_connect_step_icons/step4_select.svg new
+5
@@ -0,0 +1,5 @@
1 +<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2 + <path
3 + d="M8.81721 13.5447L14.4197 7.94221L13.5416 7.06409L8.81721 11.7885L6.44221 9.41346L5.56408 10.2916L8.81721 13.5447ZM10.0014 17.9166C8.90638 17.9166 7.87714 17.7088 6.91367 17.2933C5.9502 16.8777 5.11214 16.3137 4.3995 15.6014C3.68686 14.889 3.12263 14.0513 2.70679 13.0883C2.2911 12.1252 2.08325 11.0962 2.08325 10.0014C2.08325 8.90638 2.29103 7.87714 2.70659 6.91367C3.12214 5.9502 3.6861 5.11214 4.39846 4.3995C5.11082 3.68686 5.94853 3.12263 6.91159 2.70679C7.87464 2.2911 8.9036 2.08325 9.99846 2.08325C11.0935 2.08325 12.1227 2.29103 13.0862 2.70658C14.0496 3.12214 14.8877 3.6861 15.6003 4.39846C16.313 5.11082 16.8772 5.94853 17.293 6.91159C17.7087 7.87464 17.9166 8.9036 17.9166 9.99846C17.9166 11.0935 17.7088 12.1227 17.2933 13.0862C16.8777 14.0496 16.3137 14.8877 15.6014 15.6003C14.889 16.313 14.0513 16.8772 13.0883 17.293C12.1252 17.7087 11.0962 17.9166 10.0014 17.9166ZM9.99992 16.6666C11.861 16.6666 13.4374 16.0208 14.7291 14.7291C16.0208 13.4374 16.6666 11.861 16.6666 9.99992C16.6666 8.13881 16.0208 6.56242 14.7291 5.27075C13.4374 3.97909 11.861 3.33325 9.99992 3.33325C8.13881 3.33325 6.56242 3.97909 5.27075 5.27075C3.97909 6.56242 3.33325 8.13881 3.33325 9.99992C3.33325 11.861 3.97909 13.4374 5.27075 14.7291C6.56242 16.0208 8.13881 16.6666 9.99992 16.6666Z"
4 + fill="#8C9FBB" />
5 +</svg>
lib/src/screens/connect_device/connect_device_page.dart
+8 -4
@@ -319,10 +319,14 @@ class ConnectDevicePageBodyState extends State<ConnectDevicePageBody> {
319 builder: (BuildContext bottomSheetContext) => InfoStepsBottomSheet(
320 titleText: S.of(context).how_to_connect,
321 steps: [
322 - InfoStep('${S.of(context).step} 1', S.of(context).connect_hw_info_step_1),
323 - InfoStep('${S.of(context).step} 2', S.of(context).connect_hw_info_step_2),
324 - InfoStep('${S.of(context).step} 3', S.of(context).connect_hw_info_step_3),
325 - InfoStep('${S.of(context).step} 4', S.of(context).connect_hw_info_step_4),
322 + InfoStep('assets/images/wallet_connect_step_icons/step1_power.svg',
323 + S.of(context).connect_hw_info_step_1),
324 + InfoStep('assets/images/wallet_connect_step_icons/step2_connect.svg',
325 + S.of(context).connect_hw_info_step_2),
326 + InfoStep('assets/images/wallet_connect_step_icons/step3_unlock.svg',
327 + S.of(context).connect_hw_info_step_3),
328 + InfoStep('assets/images/wallet_connect_step_icons/step4_select.svg',
329 + S.of(context).connect_hw_info_step_4),
330 ],
331 ),
332 );
lib/src/widgets/bottom_sheet/info_steps_bottom_sheet_widget.dart
+71 -58
@@ -2,14 +2,15 @@ import 'package:cake_wallet/generated/i18n.dart';
2 import 'package:cake_wallet/src/widgets/primary_button.dart';
3 import 'package:cake_wallet/themes/core/theme_extension.dart';
4 import 'package:flutter/material.dart';
5 +import 'package:flutter_svg/flutter_svg.dart';
6
7 import 'base_bottom_sheet_widget.dart';
8
9 class InfoStep {
9 - final String title;
10 + final String iconPath;
11 final String description;
12
12 - const InfoStep(this.title, this.description);
13 + const InfoStep(this.iconPath, this.description);
14 }
15
16 class InfoStepsBottomSheet extends BaseBottomSheet {
@@ -26,77 +27,89 @@ class InfoStepsBottomSheet extends BaseBottomSheet {
27 maxHeight: 900);
28
29 @override
29 - Widget contentWidget(BuildContext context) => SizedBox(
30 - height: 500,
31 - child: Column(
30 + Widget contentWidget(BuildContext context) => SafeArea(
31 + child: Container(
32 + constraints: BoxConstraints(
33 + maxHeight: MediaQuery.of(context).size.height * 0.7,
34 + ),
35 + child: SingleChildScrollView(
36 + child: Column(
37 children: [
33 - Expanded(
34 - child: SingleChildScrollView(
35 - child: Column(
36 - children: steps
37 - .map((step) => Container(
38 - margin: EdgeInsets.only(bottom: 15, left: 20, right: 20),
39 - padding: EdgeInsets.all(10),
40 - alignment: Alignment.center,
41 - decoration: BoxDecoration(
42 - borderRadius: BorderRadius.circular(10),
43 - color: Theme.of(context).cardColor,
44 - ),
45 - child: Row(
46 - mainAxisSize: MainAxisSize.max,
47 - mainAxisAlignment: MainAxisAlignment.center,
48 - crossAxisAlignment: CrossAxisAlignment.start,
49 - children: <Widget>[
50 - Expanded(
51 - child: Padding(
52 - padding: EdgeInsets.only(left: 16),
53 - child: Column(
54 - mainAxisSize: MainAxisSize.max,
55 - mainAxisAlignment: MainAxisAlignment.start,
56 - crossAxisAlignment: CrossAxisAlignment.start,
57 - children: <Widget>[
58 - Text(
59 - step.title,
60 - style: Theme.of(context).textTheme.bodyMedium!.copyWith(
61 - fontSize: 20,
62 - fontWeight: FontWeight.w500,
63 - color: context.currentTheme.colorScheme.onSurface,
38 + Padding(
39 + padding: const EdgeInsets.symmetric(horizontal: 28.0),
40 + child: Column(
41 + children: steps
42 + .map((step) => Column(
43 + children: [
44 + Container(
45 + padding: EdgeInsets.all(10),
46 + alignment: Alignment.center,
47 + decoration: BoxDecoration(
48 + borderRadius: BorderRadius.circular(15),
49 + color: Theme.of(context).colorScheme.surfaceContainer,
50 + ),
51 + child: Row(
52 + mainAxisSize: MainAxisSize.max,
53 + mainAxisAlignment: MainAxisAlignment.center,
54 + crossAxisAlignment: CrossAxisAlignment.start,
55 + children: <Widget>[
56 + Expanded(
57 + child: Padding(
58 + padding: EdgeInsets.all(10),
59 + child: Column(
60 + spacing: 10.0,
61 + mainAxisSize: MainAxisSize.max,
62 + mainAxisAlignment: MainAxisAlignment.start,
63 + crossAxisAlignment: CrossAxisAlignment.start,
64 + children: <Widget>[
65 + SvgPicture.asset(
66 + step.iconPath,
67 + colorFilter: ColorFilter.mode(
68 + Theme.of(context).colorScheme.onSurfaceVariant,
69 + BlendMode.srcIn),
70 ),
65 - ),
66 - Padding(
67 - padding: EdgeInsets.only(top: 5),
68 - child: Text(
69 - step.description,
70 - style: Theme.of(context).textTheme.bodyMedium!.copyWith(
71 - color: context
72 - .currentTheme.colorScheme.onSurfaceVariant,
73 - ),
71 + Text(
72 + step.description,
73 + style: Theme.of(context)
74 + .textTheme
75 + .bodyMedium!
76 + .copyWith(
77 + color: context
78 + .currentTheme.colorScheme.onSurface,
79 + fontWeight: FontWeight.w400),
80 + )
81 + ],
82 ),
75 - )
76 - ],
77 - ),
83 + ),
84 + )
85 + ],
86 ),
79 - )
87 + ),
88 + if (step != steps.last)
89 + Container(
90 + width: 5,
91 + height: 10,
92 + decoration: BoxDecoration(
93 + color: Theme.of(context).colorScheme.surfaceContainer),
94 + )
95 ],
81 - ),
82 - ))
83 - .toList(),
84 - ),
85 - ),
96 + ))
97 + .toList(),
98 + ),
99 ),
100 Padding(
101 padding: const EdgeInsets.all(16),
102 child: PrimaryButton(
103 text: S.of(context).close,
104 color: context.currentTheme.colorScheme.primary,
92 - textColor: context.currentTheme.isDark
93 - ? context.currentTheme.colorScheme.onSurfaceVariant
94 - : context.currentTheme.colorScheme.onPrimary,
95 - onPressed: () => Navigator.of(context).pop(),
105 + textColor: context.currentTheme.colorScheme.onPrimary,
106 + onPressed: () => Navigator.of(context).pop(),
107 ),
108 )
109 ],
110 ),
111 + ),
112 + ),
113 );
114
115 @override
pubspec_base.yaml
+1
@@ -222,6 +222,7 @@ flutter:
222 - assets/images/crypto/
223 - assets/images/stocks/
224 - assets/images/main_actions/
225 + - assets/images/wallet_connect_step_icons/
226 - assets/node_list.yml
227 - assets/haven_node_list.yml
228 - assets/bitcoin_electrum_server_list.yml