mirror of
https://github.com/Such-Software/hash-wallet.git
synced 2026-10-27 06:18:50 +01:00
361 lines
20 KiB
Dart
361 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).brightness ==
|
|
Brightness.light
|
|
? Theme.of(context)
|
|
.colorScheme
|
|
.onSurfaceVariant
|
|
.withAlpha(64)
|
|
: 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]),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|