chore: a lot of ui/ux improvements (#88)

* unwrap logic improvement change chain signature status timeout handling * improve sign message flow * create and go on transaction timeout screen * improve like and bookmark flow go to eReader after unwrapping comic
d-reader-organization · Apr 26, 2024 · a996e2e · a996e2e
1 parent 7f6be0e
commit a996e2e
Show file tree

Hide file tree

Showing 35 changed files with 622 additions and 358 deletions.
diff --git a/lib/constants/routes.dart b/lib/constants/routes.dart
@@ -26,6 +26,7 @@ class RoutePath {
   static const walletInfo = 'wallet-info';
   static const whatIsAWallet = 'what-is-wallet';
   static const securityAndPrivacy = 'security-and-privacy';
+  static const transactionStatusTimeout = 'status-timeout';
 
   static const doneMinting = 'animation/done-minting';
   static const openNftAnimation = 'animation/open-nft';

diff --git a/lib/features/authentication/presentation/providers/sign_in/sign_in_notifier.g.dart b/lib/features/authentication/presentation/providers/sign_in/sign_in_notifier.g.dart
diff --git a/lib/features/authentication/presentation/providers/sign_up/sign_up_data_notifier.g.dart b/lib/features/authentication/presentation/providers/sign_up/sign_up_data_notifier.g.dart
diff --git a/lib/features/authentication/presentation/providers/sign_up/sign_up_notifier.g.dart b/lib/features/authentication/presentation/providers/sign_up/sign_up_notifier.g.dart
diff --git a/lib/features/comic/presentation/widgets/icons/bookmark_icon.dart b/lib/features/comic/presentation/widgets/icons/bookmark_icon.dart
@@ -1,5 +1,4 @@
 import 'package:d_reader_flutter/features/comic/domain/providers/comic_provider.dart';
-import 'package:d_reader_flutter/features/comic/presentation/providers/comic_providers.dart';
 import 'package:d_reader_flutter/features/library/presentation/providers/favorites/favorites_providers.dart';
 import 'package:d_reader_flutter/shared/presentations/providers/global/global_providers.dart';
 import 'package:d_reader_flutter/shared/theme/app_colors.dart';
@@ -18,38 +17,42 @@ class BookmarkIcon extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final bookmarkNotifier =
+        ref.watch(bookmarkSelectedProvider(isBookmarked).notifier);
     return GestureDetector(
       onTap: ref.watch(bookmarkLoadingProvider)
           ? null
           : () async {
               final loadingNotifier =
                   ref.read(bookmarkLoadingProvider.notifier);
               loadingNotifier.update((state) => true);
+              bookmarkNotifier.update((state) => !state);
               await ref.read(comicRepositoryProvider).bookmarkComic(slug);
               loadingNotifier.update((state) => false);
-              ref.invalidate(comicSlugProvider);
+
               ref.invalidate(favoriteComicsProvider);
             },
       child: Container(
         constraints: const BoxConstraints(minHeight: 42),
         padding: const EdgeInsets.all(8),
         decoration: BoxDecoration(
-          color: isBookmarked
+          color: ref.watch(bookmarkSelectedProvider(isBookmarked))
               ? ColorPalette.dReaderGreen.withOpacity(.4)
               : Colors.transparent,
           border: Border.all(
-            color:
-                isBookmarked ? Colors.transparent : ColorPalette.greyscale300,
+            color: ref.watch(bookmarkSelectedProvider(isBookmarked))
+                ? Colors.transparent
+                : ColorPalette.greyscale300,
           ),
           borderRadius: BorderRadius.circular(4),
         ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.center,
           children: [
             SvgPicture.asset(
-              'assets/icons/bookmark_${isBookmarked ? 'saved' : 'unsaved'}.svg',
+              'assets/icons/bookmark_${ref.watch(bookmarkSelectedProvider(isBookmarked)) ? 'saved' : 'unsaved'}.svg',
               colorFilter: ColorFilter.mode(
-                isBookmarked
+                ref.watch(bookmarkSelectedProvider(isBookmarked))
                     ? ColorPalette.dReaderGreen
                     : ColorPalette.greyscale100,
                 BlendMode.srcIn,

diff --git a/lib/features/comic_issue/presentation/screens/comic_issue_details.dart b/lib/features/comic_issue/presentation/screens/comic_issue_details.dart
@@ -7,6 +7,7 @@ import 'package:d_reader_flutter/features/candy_machine/presentations/providers/
 import 'package:d_reader_flutter/features/comic_issue/domain/models/comic_issue.dart';
 import 'package:d_reader_flutter/features/comic_issue/presentation/providers/comic_issue_providers.dart';
 import 'package:d_reader_flutter/features/comic_issue/presentation/providers/controller/comic_issue_controller.dart';
+import 'package:d_reader_flutter/features/comic_issue/presentation/widgets/tabs/about/mint_info_container.dart';
 import 'package:d_reader_flutter/shared/domain/providers/solana/solana_providers.dart';
 import 'package:d_reader_flutter/shared/exceptions/exceptions.dart';
 import 'package:d_reader_flutter/features/wallet/presentation/providers/wallet_providers.dart';
@@ -460,6 +461,12 @@ class BottomNavigation extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final candyMachineGroup = ref.watch(selectedCandyMachineGroup);
+    final (isMintActive, isEnded) = candyMachineGroup != null
+        ? getMintStatuses(candyMachineGroup)
+        : (null, null);
+    final shouldDisableMintButton =
+        isMintActive != null && !isMintActive && isEnded != null && !isEnded;
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
@@ -472,6 +479,7 @@ class BottomNavigation extends ConsumerWidget {
             ? Expanded(
                 child: TransactionButton(
                   isLoading: ref.watch(globalNotifierProvider).isLoading,
+                  isDisabled: shouldDisableMintButton,
                   onPressed: ref.watch(isOpeningSessionProvider)
                       ? null
                       : () async {
@@ -568,8 +576,8 @@ class BottomNavigation extends ConsumerWidget {
   }
 }
 
-class TransactionButton extends StatelessWidget {
-  final bool isListing, isLoading, isMultiGroup;
+class TransactionButton extends ConsumerWidget {
+  final bool isListing, isLoading, isMultiGroup, isDisabled;
   final Function()? onPressed;
   final String text;
   final int? price;
@@ -581,14 +589,16 @@ class TransactionButton extends StatelessWidget {
     this.price,
     this.isListing = false,
     this.isMultiGroup = false,
+    this.isDisabled = false,
   });
 
   @override
-  Widget build(BuildContext context) {
+  Widget build(BuildContext context, ref) {
     return CustomTextButton(
       size: const Size(150, 50),
       isLoading: isLoading,
       fontSize: 16,
+      isDisabled: isDisabled,
       borderRadius: const BorderRadius.all(
         Radius.circular(
           8,
@@ -619,7 +629,9 @@ class TransactionButton extends StatelessWidget {
                     )
                   : SolanaPrice(
                       price: price != null && price! > 0
-                          ? Formatter.formatPriceWithSignificant(price!)
+                          ? Formatter.formatPriceByCurrency(
+                              mintPrice: price!,
+                              splToken: ref.watch(activeSplToken))
                           : null,
                       textColor: Colors.black,
                     ),

diff --git a/lib/features/comic_issue/presentation/widgets/tabs/about/mint_info_container.dart b/lib/features/comic_issue/presentation/widgets/tabs/about/mint_info_container.dart
@@ -161,8 +161,9 @@ class MintInfoContainer extends ConsumerWidget {
                       ),
                       SolanaPrice(
                         price: candyMachineGroup.mintPrice > 0
-                            ? Formatter.formatPriceWithSignificant(
-                                candyMachineGroup.mintPrice.round(),
+                            ? Formatter.formatPriceByCurrency(
+                                mintPrice: candyMachineGroup.mintPrice,
+                                splToken: ref.watch(activeSplToken),
                               )
                             : null,
                       )
@@ -228,29 +229,53 @@ class _ComicVaultContainer extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final textTheme = Theme.of(context).textTheme;
-    return Container(
-      padding: const EdgeInsets.all(8),
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(8),
-        color: ColorPalette.greyscale400,
+    return Theme(
+      data: Theme.of(context).copyWith(
+        dividerColor: Colors.transparent,
       ),
-      child: Column(
-        children: [
-          Row(
-            children: [
-              SvgPicture.asset(
-                'assets/icons/lock.svg',
-              ),
-              const SizedBox(
-                width: 8,
-              ),
-              Text(
-                'Comic Vault',
-                style: textTheme.bodySmall?.copyWith(
-                  color: ColorPalette.greyscale100,
-                ),
+      child: ExpansionTile(
+        tilePadding: const EdgeInsets.symmetric(horizontal: 8),
+        trailing: const SizedBox(),
+        backgroundColor: ColorPalette.greyscale400,
+        collapsedBackgroundColor: ColorPalette.greyscale400,
+        collapsedShape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(
+            8,
+          ),
+        ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(
+            8,
+          ),
+        ),
+        childrenPadding: const EdgeInsets.only(
+          left: 8,
+          right: 8,
+          bottom: 8,
+          top: 0,
+        ),
+        title: Row(
+          children: [
+            SvgPicture.asset(
+              'assets/icons/lock.svg',
+            ),
+            const SizedBox(
+              width: 8,
+            ),
+            Text(
+              'Comic Vault',
+              style: textTheme.bodySmall?.copyWith(
+                color: ColorPalette.greyscale100,
               ),
-            ],
+            ),
+          ],
+        ),
+        children: [
+          Text(
+            'Comic Vault stores portion of the supply of each issue to later use in giveaways & other activities where we reward loyal users',
+            style: textTheme.bodySmall?.copyWith(
+              color: ColorPalette.greyscale100,
+            ),
           ),
         ],
       ),

diff --git a/lib/features/library/presentation/widgets/cards/library_card.dart b/lib/features/library/presentation/widgets/cards/library_card.dart
@@ -28,27 +28,23 @@ class LibraryCard extends ConsumerWidget {
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Expanded(
-              flex: 9,
-              child: AspectRatio(
-                aspectRatio: comicAspectRatio,
-                child: CachedImageBgPlaceholder(
-                  imageUrl: comic.cover,
-                  opacity: .4,
-                  overrideBorderRadius: const BorderRadius.only(
-                    topLeft: Radius.circular(8),
-                    topRight: Radius.circular(8),
-                  ),
-                  child: comic.logo.isNotEmpty
-                      ? CachedNetworkImage(
-                          imageUrl: comic.logo,
-                        )
-                      : null,
+            AspectRatio(
+              aspectRatio: comicAspectRatio,
+              child: CachedImageBgPlaceholder(
+                imageUrl: comic.cover,
+                opacity: .4,
+                overrideBorderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(8),
+                  topRight: Radius.circular(8),
                 ),
+                child: comic.logo.isNotEmpty
+                    ? CachedNetworkImage(
+                        imageUrl: comic.logo,
+                      )
+                    : null,
               ),
             ),
             Expanded(
-              flex: 4,
               child: Padding(
                 padding: const EdgeInsets.all(8),
                 child: Column(

diff --git a/lib/features/library/presentation/widgets/cards/owned_issue_card.dart b/lib/features/library/presentation/widgets/cards/owned_issue_card.dart
@@ -40,21 +40,17 @@ class OwnedIssueCard extends ConsumerWidget {
         ),
         child: Row(
           children: [
-            Expanded(
-              flex: 3,
-              child: AspectRatio(
-                aspectRatio: comicIssueAspectRatio,
-                child: CachedImageBgPlaceholder(
-                  imageUrl: issue.cover,
-                  bgImageFit: BoxFit.cover,
-                ),
+            AspectRatio(
+              aspectRatio: comicIssueAspectRatio,
+              child: CachedImageBgPlaceholder(
+                imageUrl: issue.cover,
+                bgImageFit: BoxFit.cover,
               ),
             ),
             const SizedBox(
               width: 16,
             ),
             Expanded(
-              flex: 7,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,

diff --git a/lib/features/library/presentation/widgets/cards/owned_nft_card.dart b/lib/features/library/presentation/widgets/cards/owned_nft_card.dart
@@ -1,3 +1,4 @@
+import 'package:d_reader_flutter/constants/constants.dart';
 import 'package:d_reader_flutter/constants/routes.dart';
 import 'package:d_reader_flutter/features/library/presentation/providers/owned/owned_providers.dart';
 import 'package:d_reader_flutter/features/nft/domain/models/nft.dart';
@@ -9,6 +10,7 @@ import 'package:d_reader_flutter/shared/widgets/image_widgets/cached_image_bg_pl
 import 'package:d_reader_flutter/shared/widgets/unsorted/rarity.dart';
 import 'package:d_reader_flutter/shared/widgets/unsorted/royalty.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 class OwnedNftCard extends ConsumerWidget {
@@ -37,8 +39,8 @@ class OwnedNftCard extends ConsumerWidget {
         ),
         child: Row(
           children: [
-            Expanded(
-              flex: 3,
+            AspectRatio(
+              aspectRatio: comicIssueAspectRatio,
               child: CachedImageBgPlaceholder(
                 imageUrl: nft.image,
               ),
@@ -47,7 +49,6 @@ class OwnedNftCard extends ConsumerWidget {
               width: 16,
             ),
             Expanded(
-              flex: 7,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -77,7 +78,8 @@ class OwnedNftCard extends ConsumerWidget {
                       ),
                     ],
                   ),
-                  Row(
+                  Wrap(
+                    runSpacing: 8,
                     children: [
                       nft.isUsed
                           ? const RoyaltyWidget(

diff --git a/lib/features/library/presentation/widgets/modals/owned_nfts_bottom_sheet.dart b/lib/features/library/presentation/widgets/modals/owned_nfts_bottom_sheet.dart
@@ -37,7 +37,7 @@ class OwnedNftsBottomSheet extends StatelessWidget {
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
               Text(
-                'Choose to open',
+                'Choose to unwrap',
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 18,
@@ -48,7 +48,7 @@ class OwnedNftsBottomSheet extends StatelessWidget {
                 height: 8,
               ),
               Text(
-                'In order to read comic issue you need to open it from its package.',
+                'By unwrapping the comic, you will be able to read it. This action is irreversible and will make the comic lose the mint condition.', //By unwrapping the comic, you will be able to read it. This action is irreversible and will make the comic lose the mint condition.
                 textAlign: TextAlign.center,
                 style: TextStyle(
                   fontSize: 16,
@@ -98,7 +98,7 @@ class OwnedNftsBottomSheet extends StatelessWidget {
                             crossAxisAlignment: WrapCrossAlignment.center,
                             alignment: WrapAlignment.start,
                             direction: Axis.horizontal,
-                            runSpacing: 4,
+                            runSpacing: 8,
                             children: [
                               RoyaltyWidget(
                                 iconPath: ownedNft.isUsed