Ecosystem/stack_wallet
1
0
Fork 0
mirror of https://github.com/cypherstack/stack_wallet.git synced 2024-12-23 11:59:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

desktop basic wallet layout ui

Browse source
This commit is contained in:
julian 2022-10-13 13:07:48 -06:00
parent 3f9111faac
commit 7e6edd4dab
4 changed files with 355 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
lib/pages_desktop_specific/home/my_stack_view/coin_wallets_table.dart
View file

@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart';
import 'package:stackwallet/utilities/constants.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/wallet_info_row/wallet_info_row.dart';
@ -37,6 +38,12 @@ class CoinWalletsTable extends ConsumerWidget {
),
WalletInfoRow(
walletId: walletIds[i],
onPressed: () async {
await Navigator.of(context).pushNamed(
DesktopWalletView.routeName,
arguments: walletIds[i],
);
},
),
],
),

294
lib/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart Normal file
View file

@ -0,0 +1,294 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/svg.dart';
import 'package:stackwallet/providers/providers.dart';
import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart';
import 'package:stackwallet/utilities/theme/stack_colors.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/custom_buttons/blue_text_button.dart';
import 'package:stackwallet/widgets/desktop/desktop_app_bar.dart';
import 'package:stackwallet/widgets/desktop/desktop_scaffold.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
class DesktopWalletView extends ConsumerStatefulWidget {
const DesktopWalletView({
Key? key,
required this.walletId,
}) : super(key: key);
static const String routeName = "/desktopWalletView";
final String walletId;
@override
ConsumerState<DesktopWalletView> createState() => _DesktopWalletViewState();
}
class _DesktopWalletViewState extends ConsumerState<DesktopWalletView> {
late final String walletId;
Future<void> onBackPressed() async {
// TODO log out and close wallet before popping back
Navigator.of(context).pop();
}
@override
void initState() {
walletId = widget.walletId;
super.initState();
}
@override
Widget build(BuildContext context) {
final manager = ref.watch(walletsChangeNotifierProvider
.select((value) => value.getManager(walletId)));
final coin = manager.coin;
return DesktopScaffold(
appBar: DesktopAppBar(
background: Theme.of(context).extension<StackColors>()!.popupBG,
leading: Row(
children: [
const SizedBox(
width: 32,
),
AppBarIconButton(
size: 32,
color: Theme.of(context)
.extension<StackColors>()!
.textFieldDefaultBG,
shadows: const [],
icon: SvgPicture.asset(
Assets.svg.arrowLeft,
width: 18,
height: 18,
color: Theme.of(context)
.extension<StackColors>()!
.topNavIconPrimary,
),
onPressed: onBackPressed,
),
const SizedBox(
width: 15,
),
SvgPicture.asset(
Assets.svg.iconFor(coin: coin),
width: 32,
height: 32,
),
const SizedBox(
width: 12,
),
Text(
manager.walletName,
style: STextStyles.desktopH3(context),
),
],
),
trailing: Row(
children: const [
NetworkInfoButton(),
SizedBox(
width: 12,
),
WalletKeysButton(),
SizedBox(
width: 32,
),
],
),
isCompactHeight: true,
),
body: Padding(
padding: const EdgeInsets.all(24),
child: Column(
children: [
RoundedWhiteContainer(
padding: const EdgeInsets.all(20),
child: Row(
children: [
SvgPicture.asset(
Assets.svg.iconFor(coin: coin),
width: 40,
height: 40,
),
const SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
"TODO: balance",
style: STextStyles.desktopH3(context),
),
const SizedBox(
width: 8,
),
Container(
color: Colors.red,
width: 20,
height: 20,
),
],
),
Text(
"todo: fiat balance",
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textSubtitle1,
),
)
],
),
const Spacer(),
SecondaryButton(
width: 180,
height: 56,
onPressed: () {
// todo: go to wallet initiated exchange
},
label: "Exchange",
icon: Container(
color: Colors.red,
width: 20,
height: 20,
),
)
],
),
),
const SizedBox(
height: 24,
),
Expanded(
child: Row(
children: const [
Expanded(
child: MyWallet(),
),
SizedBox(
width: 16,
),
Expanded(
child: RecentDesktopTransactions(),
),
],
),
),
],
),
),
);
}
}
class MyWallet extends StatefulWidget {
const MyWallet({Key? key}) : super(key: key);
@override
State<MyWallet> createState() => _MyWalletState();
}
class _MyWalletState extends State<MyWallet> {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"My wallet",
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldActiveSearchIconLeft,
),
),
const SizedBox(
height: 16,
),
Expanded(
child: RoundedWhiteContainer(
padding: const EdgeInsets.all(0),
child: Container(),
),
),
],
);
}
}
class RecentDesktopTransactions extends StatefulWidget {
const RecentDesktopTransactions({Key? key}) : super(key: key);
@override
State<RecentDesktopTransactions> createState() =>
_RecentDesktopTransactionsState();
}
class _RecentDesktopTransactionsState extends State<RecentDesktopTransactions> {
@override
Widget build(BuildContext context) {
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"Recent transactions",
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textFieldActiveSearchIconLeft,
),
),
BlueTextButton(
text: "See all",
onTap: () {
// todo: show all txns
},
),
],
),
const SizedBox(
height: 16,
),
Expanded(
child: RoundedWhiteContainer(
padding: const EdgeInsets.all(0),
child: Container(),
),
),
],
);
}
}
class NetworkInfoButton extends StatelessWidget {
const NetworkInfoButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("todo: sync status"),
);
}
}
class WalletKeysButton extends StatelessWidget {
const WalletKeysButton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Text("todo: wallet keys"),
);
}
}

15
lib/route_generator.dart
View file

@ -86,6 +86,7 @@ import 'package:stackwallet/pages_desktop_specific/create_password/create_passwo
import 'package:stackwallet/pages_desktop_specific/home/desktop_home_view.dart';
import 'package:stackwallet/pages_desktop_specific/home/desktop_settings_view.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/my_stack_view.dart';
import 'package:stackwallet/pages_desktop_specific/home/my_stack_view/wallet_view/desktop_wallet_view.dart';
import 'package:stackwallet/pages_desktop_specific/home/settings_menu/settings_menu.dart';
import 'package:stackwallet/services/coins/manager.dart';
import 'package:stackwallet/services/event_bus/events/global/node_connection_status_changed_event.dart';
@ -969,6 +970,20 @@ class RouteGenerator {
builder: (_) => const MyStackView(),
settings: RouteSettings(name: settings.name));
case DesktopWalletView.routeName:
if (args is String) {
return getRoute(
shouldUseMaterialRoute: useMaterialPageRoute,
builder: (_) => DesktopWalletView(
walletId: args,
),
settings: RouteSettings(
name: settings.name,
),
);
}
return _routeError("${settings.name} invalid args: ${args.toString()}");
case SettingsMenu.routeName:
return getRoute(
shouldUseMaterialRoute: useMaterialPageRoute,

70
lib/widgets/wallet_info_row/wallet_info_row.dart
View file

@ -25,9 +25,13 @@ class WalletInfoRow extends ConsumerWidget {
.watch(walletsChangeNotifierProvider.notifier)
.getManagerProvider(walletId));
return Row(
children: Util.isDesktop
? [
if (Util.isDesktop) {
return GestureDetector(
onTap: onPressed,
child: Container(
color: Colors.transparent,
child: Row(
children: [
Expanded(
flex: 4,
child: Row(
@ -38,11 +42,9 @@ class WalletInfoRow extends ConsumerWidget {
),
Text(
manager.walletName,
style:
STextStyles.desktopTextExtraSmall(context).copyWith(
color: Theme.of(context)
.extension<StackColors>()!
.textDark,
style: STextStyles.desktopTextExtraSmall(context).copyWith(
color:
Theme.of(context).extension<StackColors>()!.textDark,
),
),
],
@ -70,29 +72,35 @@ class WalletInfoRow extends ConsumerWidget {
],
),
)
]
: [
WalletInfoCoinIcon(coin: manager.coin),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
manager.walletName,
style: STextStyles.titleBold12(context),
),
const SizedBox(
height: 2,
),
WalletInfoRowBalanceFuture(walletId: walletId),
],
),
),
],
);
),
),
);
} else {
return Row(
children: [
WalletInfoCoinIcon(coin: manager.coin),
const SizedBox(
width: 12,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
manager.walletName,
style: STextStyles.titleBold12(context),
),
const SizedBox(
height: 2,
),
WalletInfoRowBalanceFuture(walletId: walletId),
],
),
),
],
);
}
}
}