mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-27 06:18:50 +01:00
Seth For PrivacyandGitHub
26a16a4eef
* Give ModernButton and CoinActionButton one labeled a11y node ModernButton, CoinActionButton and the ModalTopBar chrome buttons were icon-only IconButtons with no tooltip and a detached caption sibling, so screen readers announced an unnamed "button" plus unrelated static text. - Add optional semanticLabel to ModernButton; wrap the control in MergeSemantics + Semantics(button: true, label: semanticLabel ?? label) and exclude both the icon and the visible caption so exactly one node is exposed. No visual or pointer change. - Give CoinActionButton the same treatment, reusing the label callers already pass (dashboard Send / Receive / Swap / Scan). - Add leadingSemanticLabel / trailingSemanticLabel to ModalTopBar, defaulting the leading button to "Close", and mark a non-empty title as a semantics header. - Migrate every ModernButton / ModalTopBar call site to pass a localized label, and drop the now-redundant external Semantics wrapper in base_page.dart so the back button is not labeled twice. - Localize the hard-coded "Settings" modal title in settings_page.dart. New English keys: rotate_address, swap_reverse_direction, switch_camera, switch_input_currency, test_node_speeds, turn_flash_off, turn_flash_on. * Require explicit accessible names on ModalTopBar and ModernButton icons ModalTopBar defaulted every leading icon's accessible name to "Close", so the ~40 callers that pass a back arrow announced the wrong action, and trailingSemanticLabel was optional, leaving the trailing icon controls unnamed. - Drop the "?? close" fallback in ModalTopBar: the leading ModernButton now gets exactly leadingSemanticLabel, and constructor asserts require a non-empty label whenever leadingIcon / trailingIcon is supplied. Callers that pass leadingWidget / trailingWidget instead are unaffected, and a null icon still builds no button at all. - Assert in both ModernButton constructors that the control has a name: either semanticLabel or a non-empty visible label. - Pass the matching localized label at every ModalTopBar call site: "Go back" for back arrows, "Close" for close icons, and the action name for trailing icons (History, Configure, Export CSV, Save, Scan, Close). - Label the last unnamed ModernButton (wallet accounts, wallet_info.dart). No new localization keys; all labels reuse existing strings_en.arb keys. * fix(a11y): put ModalTopBar header flag on the title Text node On-device audit (CW-1574, defect D2) found zero [heading] nodes in the Android accessibility tree on the Receive page: Semantics(header:) wrapped the AnimatedSwitcher rather than the Text inside it, so the flag never landed on the node that carries the title label. Move the header semantics inside the AnimatedSwitcher, directly around the Text. The ValueKey(title) moves with it onto the Semantics wrapper, since AnimatedSwitcher switches on its direct child's key -- keying the Semantics by title preserves the existing switch/animation behavior exactly. No test or robot resolves the title ValueKey through a Text-typed finder, so the key relocation is not observable from the test suites on this branch. * Set headingLevel so Android surfaces modal titles as headings The Flutter 3.41 engine drives AccessibilityNodeInfo.setHeading from headingLevel, not the IS_HEADER flag (which 3.35 used). Proven by an on-device probe: header:-only headings print on a 3.35-engine build and vanish on the 3.41-engine CI build.
355 lines
20 KiB
Dart
355 lines
20 KiB
Dart
import 'dart:async';
|
|
import 'dart:math';
|
|
|
|
import 'package:cake_wallet/generated/i18n.dart';
|
|
import 'package:cake_wallet/new-ui/viewmodels/card_customizer/card_customizer_bloc.dart';
|
|
import 'package:cake_wallet/new-ui/widgets/coins_page/cards/balance_card.dart';
|
|
import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
|
|
import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
|
|
import 'package:cw_core/card_design.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
|
|
|
class CardCustomizer extends StatefulWidget {
|
|
const CardCustomizer({super.key, required this.cryptoTitle, required this.cryptoName});
|
|
|
|
final String cryptoTitle;
|
|
final String cryptoName;
|
|
|
|
@override
|
|
State<CardCustomizer> createState() => _CardCustomizerState();
|
|
}
|
|
|
|
class _CardCustomizerState extends State<CardCustomizer> {
|
|
final accountNameController = TextEditingController();
|
|
bool editEnabled = false;
|
|
late final CardCustomizerBloc bloc;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
bloc = context.read<CardCustomizerBloc>();
|
|
|
|
if (bloc.state is! CardCustomizerNotLoaded) {
|
|
editEnabled = bloc.state.accountName.isNotEmpty;
|
|
accountNameController.text = bloc.state.accountName;
|
|
} else {
|
|
late final StreamSubscription sub;
|
|
sub = bloc.stream.listen((state) {
|
|
if (state is! CardCustomizerNotLoaded) {
|
|
setState(() {
|
|
editEnabled = state.accountName.isNotEmpty;
|
|
});
|
|
sub.cancel();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
bool _showIconStylePanel(CardCustomizerState state) {
|
|
final design = state.availableDesigns[state.selectedDesignIndex];
|
|
return design.backgroundType == CardDesignBackgroundTypes.svgIcon &&
|
|
state.availableIconPaths.isNotEmpty;
|
|
}
|
|
|
|
CardDesign _cardStylePreviewDesign(CardCustomizerState state, int index) {
|
|
var design = state.availableDesigns[index].withGradient(state.selectedColor);
|
|
if (design.backgroundType == CardDesignBackgroundTypes.svgIcon &&
|
|
state.availableIconPaths.isNotEmpty) {
|
|
design = design.withIcon(state.availableIconPaths[state.selectedIconIndex]);
|
|
}
|
|
return design;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return BlocListener<CardCustomizerBloc, CardCustomizerState>(
|
|
listenWhen: (previous, current) => previous.accountName != current.accountName,
|
|
listener: (context, state) {
|
|
if (accountNameController.text != state.accountName) {
|
|
accountNameController.text = state.accountName;
|
|
}
|
|
},
|
|
child: BlocBuilder<CardCustomizerBloc, CardCustomizerState>(
|
|
builder: (context, state) {
|
|
if (state is CardCustomizerNotLoaded) return SizedBox.shrink();
|
|
return PopScope(
|
|
child: SingleChildScrollView(
|
|
child: SafeArea(
|
|
child: Column(
|
|
spacing: 25.0,
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
ModalTopBar(
|
|
title: editEnabled ? S.of(context).edit_account : S.of(context).edit_card,
|
|
leadingIcon: Icon(Icons.close),
|
|
leadingSemanticLabel: S.of(context).close,
|
|
// trailingIcon: editEnabled ? Icon(Icons.delete_forever) : null,
|
|
onLeadingPressed: () => Navigator.of(context).maybePop(),
|
|
// onTrailingPressed: () {},
|
|
),
|
|
if (editEnabled)
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 18.0),
|
|
child: Column(
|
|
spacing: 8.0,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(S.of(context).account_name),
|
|
TextField(
|
|
maxLength: 32,
|
|
decoration: InputDecoration(counterText: ""),
|
|
onChanged: (value) {
|
|
context.read<CardCustomizerBloc>().add(AccountNameChanged(value));
|
|
},
|
|
controller: accountNameController,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
BalanceCard(
|
|
width: min(MediaQuery.of(context).size.width * 0.87, 768),
|
|
selected: true,
|
|
designSwitchDuration: Duration(milliseconds: 300),
|
|
accountName: editEnabled ? state.accountName : "",
|
|
balance: "0.00",
|
|
assetName: state.displaySats ? "sats" : widget.cryptoName,
|
|
capitalizeAssetName: !state.displaySats,
|
|
design: state.selectedDesign,
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 18.0),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surfaceContainer,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.all(12.0),
|
|
child: Column(
|
|
spacing: 8.0,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(S.of(context).card_style),
|
|
Container(
|
|
height: 63,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: state.availableDesigns.length,
|
|
separatorBuilder: (context, index) {
|
|
return SizedBox(width: 8.0);
|
|
},
|
|
itemBuilder: (context, index) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
context
|
|
.read<CardCustomizerBloc>()
|
|
.add(CardDesignSelected(index));
|
|
},
|
|
child: AnimatedContainer(
|
|
duration: Duration(milliseconds: 300),
|
|
decoration: ShapeDecoration(
|
|
shape: RoundedSuperellipseBorder(
|
|
side: BorderSide(
|
|
color:
|
|
((index == state.selectedDesignIndex)
|
|
? Theme.of(context)
|
|
.colorScheme
|
|
.onSurface
|
|
: Colors.transparent),
|
|
width: 1),
|
|
borderRadius:
|
|
BorderRadiusGeometry.circular(12),
|
|
),
|
|
),
|
|
child: AnimatedScale(
|
|
duration: Duration(milliseconds: 200),
|
|
scale: index == state.selectedDesignIndex
|
|
? 0.94
|
|
: 1,
|
|
child: BalanceCard(
|
|
width: 96,
|
|
borderRadius: 10,
|
|
selected: false,
|
|
designSwitchDuration:
|
|
Duration(milliseconds: 300),
|
|
design: _cardStylePreviewDesign(state, index),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
],
|
|
)),
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 350),
|
|
switchInCurve: Curves.easeOut,
|
|
switchOutCurve: Curves.easeIn,
|
|
transitionBuilder: (Widget child, Animation<double> animation) {
|
|
return FadeTransition(
|
|
opacity: animation,
|
|
child: SizeTransition(
|
|
sizeFactor: animation,
|
|
axisAlignment: -1,
|
|
child: child,
|
|
),
|
|
);
|
|
},
|
|
child: _showIconStylePanel(state)
|
|
? Column(
|
|
key: const ValueKey('icon_style_panel'),
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const SizedBox(height: 8),
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12.0),
|
|
child: Column(
|
|
spacing: 8.0,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(S.of(context).icon_style),
|
|
SizedBox(
|
|
height: 48,
|
|
child: ListView.separated(
|
|
scrollDirection: Axis.horizontal,
|
|
itemCount: state.availableIconPaths.length,
|
|
separatorBuilder: (context, _) =>
|
|
const SizedBox(width: 8.0),
|
|
itemBuilder: (context, index) {
|
|
final icon = state.availableIconPaths[index];
|
|
final isSelected =
|
|
index == state.selectedIconIndex;
|
|
return GestureDetector(
|
|
onTap: () {
|
|
context
|
|
.read<CardCustomizerBloc>()
|
|
.add(IconStyleSelected(index));
|
|
},
|
|
child: AnimatedContainer(
|
|
duration:
|
|
const Duration(milliseconds: 200),
|
|
width: 48,
|
|
height: 48,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(18),
|
|
color: Theme.of(context)
|
|
.colorScheme
|
|
.surfaceContainerHigh,
|
|
border: Border.all(
|
|
color: isSelected
|
|
? Theme.of(context)
|
|
.colorScheme
|
|
.onSurface
|
|
: Colors.transparent,
|
|
width: 2,
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(10.0),
|
|
child: CakeImageWidget(
|
|
imageUrl: icon.path),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: const SizedBox.shrink(key: ValueKey('icon_style_hidden')),
|
|
),
|
|
SizedBox(height: 8),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surfaceContainerHigh,
|
|
borderRadius: BorderRadius.circular(16)),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(12.0),
|
|
child: Column(
|
|
spacing: 8.0,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(S.of(context).color),
|
|
Container(
|
|
width: double.infinity,
|
|
child: Wrap(
|
|
direction: Axis.horizontal,
|
|
spacing: 4, // space between items in a row
|
|
runSpacing: 8,
|
|
children: List.generate(state.availableColors.length,
|
|
(index) {
|
|
return Material(
|
|
borderRadius: BorderRadius.circular(999999999),
|
|
child: InkWell(
|
|
borderRadius: BorderRadius.circular(999999999),
|
|
onTap: () {
|
|
context
|
|
.read<CardCustomizerBloc>()
|
|
.add(ColorSelected(index));
|
|
},
|
|
child: Stack(
|
|
children: [
|
|
AnimatedOpacity(
|
|
duration: Duration(milliseconds: 200),
|
|
opacity: index == state.selectedColorIndex
|
|
? 1
|
|
: 0,
|
|
child: Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
BorderRadius.circular(99999999),
|
|
border: Border.all(
|
|
color: Theme.of(context)
|
|
.colorScheme
|
|
.onSurface))),
|
|
),
|
|
AnimatedScale(
|
|
duration: Duration(milliseconds: 200),
|
|
scale: index == state.selectedColorIndex
|
|
? 0.8
|
|
: 1,
|
|
child: Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
borderRadius:
|
|
BorderRadius.circular(99999999),
|
|
gradient:
|
|
state.availableColors[index]),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|