WIP ordinal details view

assets/svg/send.svg

@@ -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>

lib/pages/ordinals/ordinal_details_view.dart

@@ -1,6 +1,10 @@
+import 'dart:async';
+
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.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/utilities/assets.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/desktop/primary_button.dart';
 import 'package:stackwallet/widgets/desktop/secondary_button.dart';
+import 'package:stackwallet/widgets/rounded_white_container.dart';
 
 class OrdinalDetailsView extends StatefulWidget {
   const OrdinalDetailsView({
@@ -26,6 +31,8 @@ class OrdinalDetailsView extends StatefulWidget {
 }
 
 class _OrdinalDetailsViewState extends State<OrdinalDetailsView> {
+  static const _spacing = 12.0;
+
   @override
   Widget build(BuildContext context) {
     return Background(
@@ -42,19 +49,136 @@ class _OrdinalDetailsViewState extends State<OrdinalDetailsView> {
               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),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 class _OrdinalImageGroup extends StatelessWidget {
   const _OrdinalImageGroup({
     super.key,
+    required this.walletId,
     required this.ordinal,
   });
 
+  final String walletId;
   final Ordinal ordinal;
 
   static const _spacing = 12.0;
@@ -86,8 +210,16 @@ class _OrdinalImageGroup extends StatelessWidget {
             Expanded(
               child: SecondaryButton(
                 label: "Download",
-                icon: SvgPicture.asset(Assets.svg.arrowDown),
-                buttonHeight: ButtonHeight.s,
+                icon: SvgPicture.asset(
+                  Assets.svg.arrowDown,
+                  width: 10,
+                  height: 12,
+                  color: Theme.of(context)
+                      .extension<StackColors>()!
+                      .buttonTextSecondary,
+                ),
+                buttonHeight: ButtonHeight.l,
+                iconSpacing: 4,
                 onPressed: () {
                   // TODO: save and download image to device
                 },
@@ -100,9 +232,15 @@ class _OrdinalImageGroup extends StatelessWidget {
               child: PrimaryButton(
                 label: "Send",
                 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: () {
                   // TODO: try send
                 },

lib/pages/ordinals/ordinals_list.dart

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

lib/pages/ordinals/ordinals_view.dart

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

lib/pages/ordinals/widgets/ordinal_card.dart

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

lib/route_generator.dart

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

lib/utilities/assets.dart

@@ -205,6 +205,7 @@ class _SVG {
   String get messageQuestion => "assets/svg/message-question-1.svg";
   String get list => "assets/svg/list-ul.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 trocadorRatingB => "assets/svg/trocador_rating_b.svg";

pubspec.yaml

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