feat: send asset improvements (#131)

chore: add an actions button on the transaction details screen for both
NFT and coin send flows (view on explorer and share)
chore: add support for NFT on transaction status modal (the design right
now doesn't fit the figma because we use the old design that we made for
send coin flow, the final decision for it hasn't been made so as is)

<img width="486" alt="Screenshot 2024-07-31 at 19 50 17"
src="https://github.com/user-attachments/assets/69e0945b-3dc4-4bb1-8159-0d957eacf126">

<img width="486" alt="Screenshot 2024-07-31 at 19 50 06"
src="https://github.com/user-attachments/assets/3a031fec-64a3-4fbb-9c05-2ed419869bb1">

<img width="486" alt="Screenshot 2024-07-31 at 19 48 05"
src="https://github.com/user-attachments/assets/9cc68d69-9a66-4393-8978-b1e9a89ade8f">

lib/app/features/wallet/components/nft_item/nft_item.dart

@@ -34,7 +34,7 @@ class NftItem extends StatelessWidget {
             children: [
               Padding(
                 padding: EdgeInsets.only(right: 5.0.s),
-                child: Assets.images.wallet.walletEth.icon(size: 16.0.s),
+                child: Assets.images.wallet.walletEth.icon(size: 12.0.s),
               ),
               Padding(
                 padding: EdgeInsets.only(right: 4.0.s),

lib/app/features/wallet/views/pages/coins_flow/send_coins/components/confirmation/confirmation_sheet.dart

@@ -107,7 +107,8 @@ class ConfirmationSheet extends ConsumerWidget {
                   Button(
                     label: Text('${locale.button_confirm} - \$351.35'),
                     mainAxisSize: MainAxisSize.max,
-                    onPressed: () => TransactionResultRoute().go(context),
+                    onPressed: () =>
+                        CoinTransactionResultRoute($extra: CryptoAssetType.coin).go(context),
                   ),
                   SizedBox(height: 16.0.s),
                 ],

lib/app/features/wallet/views/pages/coins_flow/send_coins/components/confirmation/transaction_result_sheet.dart

@@ -3,6 +3,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:ice/app/components/button/button.dart';
 import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
 import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/features/wallet/components/nft_item/nft_item.dart';
 import 'package:ice/app/features/wallet/model/network_type.dart';
 import 'package:ice/app/features/wallet/providers/mock_data/wallet_assets_mock_data.dart';
 import 'package:ice/app/features/wallet/views/pages/coins_flow/providers/send_asset_form_provider.dart';
@@ -12,19 +13,22 @@ import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
 import 'package:ice/generated/assets.gen.dart';
 
 class TransactionResultSheet extends ConsumerWidget {
-  const TransactionResultSheet({super.key});
+  const TransactionResultSheet({super.key, required this.type});
+
+  final CryptoAssetType type;
 
   static const networkTypeValues = NetworkType.values;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final controller = ref.watch(sendAssetFormControllerProvider(type: type).notifier);
+    final formData = ref.watch(sendAssetFormControllerProvider(type: type));
+
     final colors = context.theme.appColors;
     final textTheme = context.theme.appTextThemes;
     final locale = context.i18n;
     final icons = Assets.images.icons;
 
-    final formData = ref.watch(sendAssetFormControllerProvider());
-
     return SheetContent(
       body: ScreenSideOffset.small(
         child: Column(
@@ -43,10 +47,20 @@ class TransactionResultSheet extends ConsumerWidget {
               ),
             ),
             SizedBox(height: 36.0.s),
-            if (formData.usdtAmount != null)
+            if (type == CryptoAssetType.nft)
+              Padding(
+                padding: EdgeInsets.symmetric(
+                  horizontal: 52.0.s,
+                ),
+                child: NftItem(
+                  nftData: formData.selectedNft!,
+                  backgroundColor: Colors.transparent,
+                ),
+              ),
+            if (type == CryptoAssetType.coin)
               TransactionAmountSummary(
-                usdtAmount: formData.usdtAmount!,
-                usdAmount: formData.usdtAmount! * 0.999,
+                usdtAmount: controller.getUsdtAmount(),
+                usdAmount: controller.getUsdtAmount() * 0.999,
                 icon: mockedCoinsDataArray[3].iconUrl.icon(),
               ),
             SizedBox(height: 31.0.s),
@@ -55,7 +69,7 @@ class TransactionResultSheet extends ConsumerWidget {
               leadingIcon: icons.iconButtonDetails.icon(),
               mainAxisSize: MainAxisSize.max,
               onPressed: () {
-                CoinTransactionDetailsRoute($extra: CryptoAssetType.coin).push<void>(context);
+                CoinTransactionDetailsRoute($extra: type).push<void>(context);
               },
             ),
             SizedBox(height: 12.0.s),

lib/app/features/wallet/views/pages/send_nft_confirm/send_nft_confirm.dart

@@ -104,7 +104,7 @@ class SendNftConfirmPage extends ConsumerWidget {
                         context.i18n.button_confirm,
                       ),
                       onPressed: () {
-                        NftTransactionDetailsRoute($extra: CryptoAssetType.nft).push<void>(context);
+                        CoinTransactionResultRoute($extra: CryptoAssetType.nft).go(context);
                       },
                     ),
                   ],

lib/app/features/wallet/views/pages/transaction_details/transaction_details.dart

@@ -9,6 +9,7 @@ import 'package:ice/app/features/wallet/components/timeline/timeline.dart';
 import 'package:ice/app/features/wallet/providers/mock_data/wallet_assets_mock_data.dart';
 import 'package:ice/app/features/wallet/views/pages/coins_flow/providers/send_asset_form_provider.dart';
 import 'package:ice/app/features/wallet/views/pages/coins_flow/send_coins/components/confirmation/transaction_amount_summary.dart';
+import 'package:ice/app/features/wallet/views/pages/transaction_details/transaction_details_actions.dart';
 import 'package:ice/app/router/components/navigation_app_bar/navigation_app_bar.dart';
 import 'package:ice/app/router/components/navigation_app_bar/navigation_close_button.dart';
 import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
@@ -25,7 +26,6 @@ class TransactionDetailsPage extends ConsumerWidget {
 
     final controller = ref.watch(sendAssetFormControllerProvider(type: type).notifier);
     final formData = ref.watch(sendAssetFormControllerProvider(type: type));
-    final isNft = type == CryptoAssetType.nft;
 
     return SheetContent(
       body: Column(
@@ -41,7 +41,7 @@ class TransactionDetailsPage extends ConsumerWidget {
               padding: EdgeInsets.only(top: 10.0.s),
               child: Column(
                 children: [
-                  if (isNft && formData.selectedNft != null)
+                  if (type == CryptoAssetType.nft)
                     Padding(
                       padding: EdgeInsets.symmetric(
                         horizontal: 52.0.s,
@@ -51,7 +51,7 @@ class TransactionDetailsPage extends ConsumerWidget {
                         backgroundColor: Colors.transparent,
                       ),
                     ),
-                  if (!isNft && formData.selectedCoin != null)
+                  if (type == CryptoAssetType.coin)
                     TransactionAmountSummary(
                       usdtAmount: controller.getUsdtAmount(),
                       usdAmount: controller.getUsdtAmount() * 0.999,
@@ -123,7 +123,12 @@ class TransactionDetailsPage extends ConsumerWidget {
                       size: 16.0.s,
                     ),
                   ),
-                  SizedBox(height: 12.0.s),
+                  SizedBox(height: 15.0.s),
+                  TransactionDetailsActions(
+                    onViewOnExplorer: () {},
+                    onShare: () {},
+                  ),
+                  SizedBox(height: 8.0.s),
                 ],
               ),
             ),

lib/app/features/wallet/views/pages/transaction_details/transaction_details_actions.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class TransactionDetailsActions extends StatelessWidget {
+  const TransactionDetailsActions({
+    required this.onViewOnExplorer,
+    required this.onShare,
+    super.key,
+  });
+
+  final VoidCallback onViewOnExplorer;
+  final VoidCallback onShare;
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: Button(
+            type: ButtonType.outlined,
+            label: Text(
+              context.i18n.transaction_details_view_on_explorer,
+            ),
+            mainAxisSize: MainAxisSize.max,
+            leadingIcon: Assets.images.icons.iconButtonInternet.icon(),
+            onPressed: onViewOnExplorer,
+            backgroundColor: context.theme.appColors.tertararyBackground,
+            borderColor: context.theme.appColors.onTerararyFill,
+          ),
+        ),
+        SizedBox(
+          width: 12.0.s,
+        ),
+        Button.icon(
+          icon: Assets.images.icons.iconButtonShare.icon(),
+          type: ButtonType.outlined,
+          onPressed: onShare,
+          backgroundColor: context.theme.appColors.tertararyBackground,
+          borderColor: context.theme.appColors.onTerararyFill,
+        ),
+      ],
+    );
+  }
+}

lib/app/router/wallet_routes.dart

@@ -55,6 +55,7 @@ class WalletRoutes {
         TypedGoRoute<NftsSortingRoute>(path: 'nfts-sorting'),
         TypedGoRoute<NftSendFormRoute>(path: 'nft-send'),
         TypedGoRoute<SendNftConfirmRoute>(path: 'nft-confirm'),
+        TypedGoRoute<NftTransactionResultRoute>(path: 'nft-transaction-result'),
         TypedGoRoute<NftTransactionDetailsRoute>(path: 'nft-transaction-details'),
       ],
     ),
@@ -76,7 +77,7 @@ class WalletRoutes {
         ),
       ],
     ),
-    TypedGoRoute<TransactionResultRoute>(path: 'transaction-result'),
+    TypedGoRoute<CoinTransactionResultRoute>(path: 'coin-transaction-result'),
     TypedGoRoute<CoinTransactionDetailsRoute>(path: 'coin-transaction-details'),
   ];
 
@@ -209,12 +210,24 @@ class CoinsSendFormConfirmationRoute extends BaseRouteData {
         );
 }
 
-class TransactionResultRoute extends BaseRouteData {
-  TransactionResultRoute()
+class CoinTransactionResultRoute extends BaseRouteData {
+  CoinTransactionResultRoute({required this.$extra})
       : super(
-          child: const TransactionResultSheet(),
+          child: TransactionResultSheet(type: $extra),
           type: IceRouteType.bottomSheet,
         );
+
+  final CryptoAssetType $extra;
+}
+
+class NftTransactionResultRoute extends BaseRouteData {
+  NftTransactionResultRoute({required this.$extra})
+      : super(
+          child: TransactionResultSheet(type: $extra),
+          type: IceRouteType.bottomSheet,
+        );
+
+  final CryptoAssetType $extra;
 }
 
 class CoinsDetailsRoute extends BaseRouteData {

lib/l10n/app_en.arb

@@ -234,5 +234,6 @@
   "send_nft_confirm_network": "Network",
   "send_nft_confirm_arrival_time": "Arrival time",
   "send_nft_confirm_network_fee": "Network fee",
-  "transaction_details_title": "Transaction details"
+  "transaction_details_title": "Transaction details",
+  "transaction_details_view_on_explorer": "View on explorer"
 }