eth token summary layout and style

This commit is contained in:
julian 2023-02-27 10:37:41 -06:00
parent fcd8f01d93
commit 8dbefd87fe
5 changed files with 165 additions and 34 deletions

11
assets/svg/cc.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7503_4777)">
<path d="M24.5 10.5H0.5V6H24.5V10.5Z" fill="#424A97"/>
<path opacity="0.4" d="M21.8333 1.5C23.3042 1.5 24.5 2.84297 24.5 4.5V6H0.5V4.5C0.5 2.84297 1.69375 1.5 3.16667 1.5H21.8333ZM24.5 19.5C24.5 21.1547 23.3042 22.5 21.8333 22.5H3.16667C1.69375 22.5 0.5 21.1547 0.5 19.5V10.5H24.5V19.5ZM5.16667 16.5C4.8 16.5 4.5 16.8375 4.5 17.25C4.5 17.6625 4.8 18 5.16667 18H7.83333C8.2 18 8.5 17.6625 8.5 17.25C8.5 16.8375 8.2 16.5 7.83333 16.5H5.16667ZM10.5 18H15.8333C16.2 18 16.5 17.6625 16.5 17.25C16.5 16.8375 16.2 16.5 15.8333 16.5H10.5C10.1333 16.5 9.83333 16.8375 9.83333 17.25C9.83333 17.6625 10.1333 18 10.5 18Z" fill="#424A97"/>
</g>
<defs>
<clipPath id="clip0_7503_4777">
<rect width="24" height="24" fill="white" transform="translate(0.5)"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 903 B

View file

@ -1,8 +1,12 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/token_view/token_view.dart';
import 'package:stackwallet/providers/global/wallets_provider.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/rounded_container.dart';
class TokenSummary extends ConsumerWidget {
@ -15,26 +19,28 @@ class TokenSummary extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final token =
ref.watch(tokenServiceProvider.select((value) => value!.token));
final balance =
ref.watch(tokenServiceProvider.select((value) => value!.balance));
return RoundedContainer(
color: const Color(0xFFE9EAFF), // todo: fix color
// color: Theme.of(context).extension<StackColors>()!.,
padding: const EdgeInsets.all(24),
child: Column(
children: [
Text(
ref.watch(
walletsChangeNotifierProvider.select(
(value) => value.getManager(walletId).walletName,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SvgPicture.asset(
Assets.svg.walletDesktop,
color: const Color(0xFF8488AB), // todo: fix color
width: 12,
height: 12,
),
),
style: STextStyles.label(context),
),
Text(
ref.watch(tokenServiceProvider.select((value) => value!.balance
.getTotal()
.toStringAsFixed(ref.watch(tokenServiceProvider
.select((value) => value!.token.decimals))))),
style: STextStyles.label(context),
const SizedBox(
width: 6,
),
Text(
ref.watch(
@ -42,10 +48,128 @@ class TokenSummary extends ConsumerWidget {
(value) => value.getManager(walletId).walletName,
),
),
style: STextStyles.label(context),
style: STextStyles.w500_12(context).copyWith(
color: const Color(0xFF8488AB), // todo: fix color
),
),
],
),
const SizedBox(
height: 6,
),
Text(
"${balance.getTotal()}"
" ${token.symbol}",
style: STextStyles.pageTitleH1(context),
),
const SizedBox(
height: 6,
),
Text(
"FIXME: price",
style: STextStyles.subtitle500(context),
),
const SizedBox(
height: 20,
),
const TokenWalletOptions(),
],
),
);
}
}
class TokenWalletOptions extends StatelessWidget {
const TokenWalletOptions({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TokenOptionsButton(
onPressed: () {},
subLabel: "Receive",
iconAssetSVG: Assets.svg.receive(context),
),
const SizedBox(
width: 16,
),
TokenOptionsButton(
onPressed: () {},
subLabel: "Receive",
iconAssetSVG: Assets.svg.send(context),
),
const SizedBox(
width: 16,
),
TokenOptionsButton(
onPressed: () {},
subLabel: "Exchange",
iconAssetSVG: Assets.svg.exchange(context),
),
const SizedBox(
width: 16,
),
TokenOptionsButton(
onPressed: () {},
subLabel: "Buy",
iconAssetSVG: Assets.svg.creditCard,
),
],
);
}
}
class TokenOptionsButton extends StatelessWidget {
const TokenOptionsButton({
Key? key,
required this.onPressed,
required this.subLabel,
required this.iconAssetSVG,
}) : super(key: key);
final VoidCallback onPressed;
final String subLabel;
final String iconAssetSVG;
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
RawMaterialButton(
fillColor: Theme.of(context).extension<StackColors>()!.popupBG,
elevation: 0,
focusElevation: 0,
hoverElevation: 0,
highlightElevation: 0,
constraints: const BoxConstraints(),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(
Constants.size.circularBorderRadius,
),
),
onPressed: onPressed,
child: Padding(
padding: const EdgeInsets.all(10),
child: SvgPicture.asset(
iconAssetSVG,
color: const Color(0xFF424A97), // todo: fix color
width: 24,
height: 24,
),
),
),
const SizedBox(
height: 6,
),
Text(
subLabel,
style: STextStyles.w500_12(context),
)
],
);
}
}

View file

@ -2,6 +2,7 @@ import 'package:event_bus/event_bus.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/pages/token_view/sub_widgets/token_summary.dart';
import 'package:stackwallet/pages/token_view/sub_widgets/token_transaction_list_widget.dart';
import 'package:stackwallet/pages/wallet_view/transaction_views/all_transactions_view.dart';
import 'package:stackwallet/services/ethereum/ethereum_token_service.dart';
@ -98,19 +99,12 @@ class _TokenViewState extends ConsumerState<TokenView> {
const SizedBox(
height: 10,
),
// Center(
// child: Padding(
// padding: const EdgeInsets.symmetric(horizontal: 16),
// child: TokenSummary(
// walletId: widget.walletId,
// managerProvider: managerProvider,
// initialSyncStatus: ref.watch(managerProvider
// .select((value) => value.isRefreshing))
// ? WalletSyncStatus.syncing
// : WalletSyncStatus.synced,
// ),
// ),
// ),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: TokenSummary(
walletId: widget.walletId,
),
),
const SizedBox(
height: 20,
),

View file

@ -210,6 +210,7 @@ class _SVG {
String get faceId => "assets/svg/faceid.svg";
String get tokens => "assets/svg/tokens.svg";
String get circlePlusDark => "assets/svg/circle-plus.svg";
String get creditCard => "assets/svg/cc.svg";
String get ellipse1 => "assets/svg/Ellipse-43.svg";
String get ellipse2 => "assets/svg/Ellipse-42.svg";

View file

@ -310,6 +310,7 @@ flutter:
- assets/svg/whirlpool.svg
- assets/svg/fingerprint.svg
- assets/svg/faceid.svg
- assets/svg/cc.svg
# light theme coin
- assets/images/light/