WIP ordinal details view

This commit is contained in:
julian 2023-07-18 11:03:57 -06:00
parent 58c97de86c
commit 79670c5d47
9 changed files with 158 additions and 6 deletions

5
assets/svg/send.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="send">
<path id="Vector" d="M9.16537 4.9832C9.16537 5.1919 9.04104 5.3807 8.84889 5.46272L1.55925 8.60772C1.49302 8.63625 1.4232 8.65001 1.35397 8.65001C1.21334 8.65001 1.07532 8.59295 0.974398 8.48615C0.824086 8.32692 0.789503 8.09076 0.887266 7.89478L2.08827 5.49311L6.03562 4.99794L2.08801 4.50221L0.887005 2.10053C0.789292 1.90488 0.823936 1.66862 0.974235 1.50949C1.12505 1.35026 1.35837 1.30161 1.55908 1.38797L8.86373 4.51851C9.05612 4.60004 9.16537 4.78917 9.16537 4.9832Z" fill="white"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 612 B

View file

@ -1,6 +1,10 @@
import 'dart:async';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import 'package:stackwallet/models/ordinal.dart'; import 'package:stackwallet/models/ordinal.dart';
import 'package:stackwallet/notifications/show_flush_bar.dart';
import 'package:stackwallet/themes/stack_colors.dart'; import 'package:stackwallet/themes/stack_colors.dart';
import 'package:stackwallet/utilities/assets.dart'; import 'package:stackwallet/utilities/assets.dart';
import 'package:stackwallet/utilities/text_styles.dart'; import 'package:stackwallet/utilities/text_styles.dart';
@ -8,6 +12,7 @@ import 'package:stackwallet/widgets/background.dart';
import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart'; import 'package:stackwallet/widgets/custom_buttons/app_bar_icon_button.dart';
import 'package:stackwallet/widgets/desktop/primary_button.dart'; import 'package:stackwallet/widgets/desktop/primary_button.dart';
import 'package:stackwallet/widgets/desktop/secondary_button.dart'; import 'package:stackwallet/widgets/desktop/secondary_button.dart';
import 'package:stackwallet/widgets/rounded_white_container.dart';
class OrdinalDetailsView extends StatefulWidget { class OrdinalDetailsView extends StatefulWidget {
const OrdinalDetailsView({ const OrdinalDetailsView({
@ -26,6 +31,8 @@ class OrdinalDetailsView extends StatefulWidget {
} }
class _OrdinalDetailsViewState extends State<OrdinalDetailsView> { class _OrdinalDetailsViewState extends State<OrdinalDetailsView> {
static const _spacing = 12.0;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Background( return Background(
@ -42,8 +49,123 @@ class _OrdinalDetailsViewState extends State<OrdinalDetailsView> {
style: STextStyles.navBarTitle(context), style: STextStyles.navBarTitle(context),
), ),
), ),
body: Column(), body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(
vertical: 12,
horizontal: 39,
), ),
child: _OrdinalImageGroup(
ordinal: widget.ordinal,
walletId: widget.walletId,
),
),
_DetailsItemWCopy(
title: "Inscription number",
data: widget.ordinal.inscription,
),
const SizedBox(
height: _spacing,
),
_DetailsItemWCopy(
title: "Rank",
data: widget.ordinal.rank,
),
const SizedBox(
height: _spacing,
),
// todo: add utxo status
const SizedBox(
height: _spacing,
),
_DetailsItemWCopy(
title: "Amount",
data: "FIXME",
),
const SizedBox(
height: _spacing,
),
_DetailsItemWCopy(
title: "Owner address",
data: "FIXME",
),
const SizedBox(
height: _spacing,
),
_DetailsItemWCopy(
title: "Transaction ID",
data: "FIXME",
),
const SizedBox(
height: _spacing,
),
],
),
),
),
),
),
);
}
}
class _DetailsItemWCopy extends StatelessWidget {
const _DetailsItemWCopy({
super.key,
required this.title,
required this.data,
});
final String title;
final String data;
@override
Widget build(BuildContext context) {
return RoundedWhiteContainer(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: STextStyles.itemSubtitle(context),
),
GestureDetector(
onTap: () async {
await Clipboard.setData(ClipboardData(text: data));
if (context.mounted) {
unawaited(
showFloatingFlushBar(
type: FlushBarType.info,
message: "Copied to clipboard",
context: context,
),
);
}
},
child: SvgPicture.asset(
Assets.svg.copy,
color:
Theme.of(context).extension<StackColors>()!.infoItemIcons,
width: 12,
),
),
],
),
const SizedBox(
height: 4,
),
SelectableText(
data,
style: STextStyles.itemSubtitle12(context),
),
],
), ),
); );
} }
@ -52,9 +174,11 @@ class _OrdinalDetailsViewState extends State<OrdinalDetailsView> {
class _OrdinalImageGroup extends StatelessWidget { class _OrdinalImageGroup extends StatelessWidget {
const _OrdinalImageGroup({ const _OrdinalImageGroup({
super.key, super.key,
required this.walletId,
required this.ordinal, required this.ordinal,
}); });
final String walletId;
final Ordinal ordinal; final Ordinal ordinal;
static const _spacing = 12.0; static const _spacing = 12.0;
@ -86,8 +210,16 @@ class _OrdinalImageGroup extends StatelessWidget {
Expanded( Expanded(
child: SecondaryButton( child: SecondaryButton(
label: "Download", label: "Download",
icon: SvgPicture.asset(Assets.svg.arrowDown), icon: SvgPicture.asset(
buttonHeight: ButtonHeight.s, Assets.svg.arrowDown,
width: 10,
height: 12,
color: Theme.of(context)
.extension<StackColors>()!
.buttonTextSecondary,
),
buttonHeight: ButtonHeight.l,
iconSpacing: 4,
onPressed: () { onPressed: () {
// TODO: save and download image to device // TODO: save and download image to device
}, },
@ -100,9 +232,15 @@ class _OrdinalImageGroup extends StatelessWidget {
child: PrimaryButton( child: PrimaryButton(
label: "Send", label: "Send",
icon: SvgPicture.asset( icon: SvgPicture.asset(
Assets.svg.star, Assets.svg.send,
width: 10,
height: 10,
color: Theme.of(context)
.extension<StackColors>()!
.buttonTextPrimary,
), ),
buttonHeight: ButtonHeight.s, buttonHeight: ButtonHeight.l,
iconSpacing: 4,
onPressed: () { onPressed: () {
// TODO: try send // TODO: try send
}, },

View file

@ -5,9 +5,11 @@ import 'package:stackwallet/pages/ordinals/widgets/ordinal_card.dart';
class OrdinalsList extends StatefulWidget { class OrdinalsList extends StatefulWidget {
const OrdinalsList({ const OrdinalsList({
super.key, super.key,
required this.walletId,
required this.ordinals, required this.ordinals,
}); });
final String walletId;
final List<Ordinal> ordinals; final List<Ordinal> ordinals;
@override @override
@ -29,6 +31,7 @@ class _OrdinalsListState extends State<OrdinalsList> {
childAspectRatio: 3 / 4, childAspectRatio: 3 / 4,
), ),
itemBuilder: (_, i) => OrdinalCard( itemBuilder: (_, i) => OrdinalCard(
walletId: widget.walletId,
ordinal: widget.ordinals[i], ordinal: widget.ordinals[i],
), ),
); );

View file

@ -177,6 +177,7 @@ class _OrdinalsViewState extends ConsumerState<OrdinalsView> {
), ),
Expanded( Expanded(
child: OrdinalsList( child: OrdinalsList(
walletId: widget.walletId,
ordinals: [ ordinals: [
for (int i = 0; i < 13; i++) for (int i = 0; i < 13; i++)
Ordinal( Ordinal(

View file

@ -21,7 +21,7 @@ class OrdinalCard extends StatelessWidget {
onPressed: () { onPressed: () {
Navigator.of(context).pushNamed( Navigator.of(context).pushNamed(
OrdinalDetailsView.routeName, OrdinalDetailsView.routeName,
arguments: widget.walletId, arguments: (walletId: walletId, ordinal: ordinal),
); );
}, },
child: Column( child: Column(

View file

@ -422,6 +422,9 @@ class RouteGenerator {
return _routeError("${settings.name} invalid args: ${args.toString()}"); return _routeError("${settings.name} invalid args: ${args.toString()}");
case OrdinalDetailsView.routeName: case OrdinalDetailsView.routeName:
print(args.runtimeType);
if (args is ({Ordinal ordinal, String walletId})) { if (args is ({Ordinal ordinal, String walletId})) {
return getRoute( return getRoute(
shouldUseMaterialRoute: useMaterialPageRoute, shouldUseMaterialRoute: useMaterialPageRoute,

View file

@ -205,6 +205,7 @@ class _SVG {
String get messageQuestion => "assets/svg/message-question-1.svg"; String get messageQuestion => "assets/svg/message-question-1.svg";
String get list => "assets/svg/list-ul.svg"; String get list => "assets/svg/list-ul.svg";
String get unclaimedPaynym => "assets/svg/unclaimed.svg"; String get unclaimedPaynym => "assets/svg/unclaimed.svg";
String get send => "assets/svg/send.svg";
String get trocadorRatingA => "assets/svg/trocador_rating_a.svg"; String get trocadorRatingA => "assets/svg/trocador_rating_a.svg";
String get trocadorRatingB => "assets/svg/trocador_rating_b.svg"; String get trocadorRatingB => "assets/svg/trocador_rating_b.svg";

View file

@ -335,6 +335,7 @@ flutter:
- assets/svg/trocador_rating_b.svg - assets/svg/trocador_rating_b.svg
- assets/svg/trocador_rating_c.svg - assets/svg/trocador_rating_c.svg
- assets/svg/trocador_rating_d.svg - assets/svg/trocador_rating_d.svg
- assets/svg/send.svg
# coin control icons # coin control icons
- assets/svg/coin_control/ - assets/svg/coin_control/