From 0cf3f6447c6a8bb6ebeb54981b2919e6d6737db7 Mon Sep 17 00:00:00 2001
From: Nguyen Phuoc Sang <47568867+ppupha@users.noreply.github.com>
Date: Thu, 14 Sep 2023 16:48:21 +0700
Subject: [PATCH] Sang/postcard/download postcard (#1232)

* Update Postcard Detail Pop-up

* Update Api and Auth Interceptor

* Update Asset

* Call Http post

* Add FileHelper

* Update

* Implement for stamp preview

* Add Callback

* Update Asset

* Update

* Use Image Gallery Saver

* Support iOS

* Update Permisstion and perm decs

* Update

* Update

* add HttpHelper

* Fix lint

* Update Colors

* Fix comment
---
 android/app/src/main/AndroidManifest.xml      |  39 +++--
 ios/Runner/Info.plist                         |   3 +
 .../postcard_detail_page.dart                 | 132 +++++++++-------
 .../interactive_postcard/stamp_preview.dart   | 113 ++++++++++++--
 lib/service/postcard_service.dart             |  82 ++++++++++
 lib/util/asset_token_ext.dart                 |  11 ++
 lib/util/dio_interceptors.dart                |   7 +-
 lib/util/file_helper.dart                     |  11 ++
 lib/util/http_helper.dart                     |  37 +++++
 lib/util/moma_style_color.dart                |   1 +
 lib/util/share_helper.dart                    |  38 +++++
 lib/util/ui_helper.dart                       | 142 +++++++++++++++++-
 lib/view/postcard_common_widget.dart          |  90 +++++++++++
 pubspec.lock                                  |  12 +-
 pubspec.yaml                                  |   3 +-
 15 files changed, 641 insertions(+), 80 deletions(-)
 create mode 100644 lib/util/file_helper.dart
 create mode 100644 lib/util/http_helper.dart
 create mode 100644 lib/util/share_helper.dart
 create mode 100644 lib/view/postcard_common_widget.dart

diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
index aabda1123..38c01fac0 100644
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="com.bitmark.autonomy_flutter"
-    xmlns:tools="http://schemas.android.com/tools">
+    xmlns:tools="http://schemas.android.com/tools"
+    package="com.bitmark.autonomy_flutter">
 
     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.BLUETOOTH" />
@@ -9,6 +9,7 @@
     <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
     <uses-permission android:name="android.permission.VIBRATE" />
     <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
 
     <queries>
         <intent>
@@ -18,12 +19,12 @@
     </queries>
 
     <application
-        tools:replace="android:label"
         android:name=".app.AutonomyApp"
         android:icon="${appIcon}"
         android:label="@string/app_name"
         android:roundIcon="${appIconRound}"
-        android:usesCleartextTraffic="true">
+        android:usesCleartextTraffic="true"
+        tools:replace="android:label">
         <!--
          - Enable usesCleartextTraffic only to allow make connection to localhost
          - It will be used to rendering model viewer for 3d artworks.
@@ -46,16 +47,16 @@
 
         <activity
             android:name=".AuthenticatorActivity"
-            android:theme="@style/NormalTheme"
-            android:exported="false" />
+            android:exported="false"
+            android:theme="@style/NormalTheme" />
         <activity
             android:name=".MainActivity"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:exported="true"
             android:hardwareAccelerated="true"
             android:launchMode="singleTop"
-            android:theme="@style/LaunchTheme"
             android:screenOrientation="portrait"
+            android:theme="@style/LaunchTheme"
             android:windowSoftInputMode="adjustResize">
 
             <!--
@@ -149,19 +150,33 @@
             <!-- Branch App Links -->
             <intent-filter android:autoVerify="true">
                 <action android:name="android.intent.action.VIEW" />
+
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
-                <data android:scheme="https" android:host="link.autonomy.io" />
-                <data android:scheme="https" android:host="autonomy-app.app.link" />
-                <data android:scheme="https" android:host="autonomy-app-alternate.app.link" />
+
+                <data
+                    android:host="link.autonomy.io"
+                    android:scheme="https" />
+                <data
+                    android:host="autonomy-app.app.link"
+                    android:scheme="https" />
+                <data
+                    android:host="autonomy-app-alternate.app.link"
+                    android:scheme="https" />
             </intent-filter>
 
             <intent-filter android:autoVerify="true">
                 <action android:name="android.intent.action.VIEW" />
+
                 <category android:name="android.intent.category.DEFAULT" />
                 <category android:name="android.intent.category.BROWSABLE" />
-                <data android:scheme="https" android:host="autonomy-app.test.app.link" />
-                <data android:scheme="https" android:host="autonomy-app-alternate.test.app.link" />
+
+                <data
+                    android:host="autonomy-app.test.app.link"
+                    android:scheme="https" />
+                <data
+                    android:host="autonomy-app-alternate.test.app.link"
+                    android:scheme="https" />
             </intent-filter>
         </activity>
         <!--
diff --git a/ios/Runner/Info.plist b/ios/Runner/Info.plist
index 573e07b3a..7d19cef2c 100644
--- a/ios/Runner/Info.plist
+++ b/ios/Runner/Info.plist
@@ -80,6 +80,9 @@
 	<string>This app requires access to the photo library.</string>
 	<key>UIApplicationSupportsIndirectInputEvents</key>
 	<true/>
+    <key>NSPhotoLibraryUsageDescription</key>
+    <string>Allow to give Autonomy permission to save your stamp to your photos.</string>
+    <true/>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>fetch</string>
diff --git a/lib/screen/interactive_postcard/postcard_detail_page.dart b/lib/screen/interactive_postcard/postcard_detail_page.dart
index 3372635da..a74947065 100644
--- a/lib/screen/interactive_postcard/postcard_detail_page.dart
+++ b/lib/screen/interactive_postcard/postcard_detail_page.dart
@@ -10,7 +10,6 @@ import 'dart:collection';
 import 'dart:convert';
 
 import 'package:after_layout/after_layout.dart';
-import 'package:autonomy_flutter/common/environment.dart';
 import 'package:autonomy_flutter/common/injector.dart';
 import 'package:autonomy_flutter/model/play_control_model.dart';
 import 'package:autonomy_flutter/model/shared_postcard.dart';
@@ -42,6 +41,7 @@ import 'package:autonomy_flutter/util/distance_formater.dart';
 import 'package:autonomy_flutter/util/log.dart';
 import 'package:autonomy_flutter/util/moma_style_color.dart';
 import 'package:autonomy_flutter/util/postcard_extension.dart';
+import 'package:autonomy_flutter/util/share_helper.dart';
 import 'package:autonomy_flutter/util/string_ext.dart';
 import 'package:autonomy_flutter/util/ui_helper.dart';
 import 'package:autonomy_flutter/view/artwork_common_widget.dart';
@@ -64,8 +64,6 @@ import 'package:nft_collection/models/provenance.dart';
 import 'package:nft_collection/widgets/nft_collection_bloc.dart';
 import 'package:nft_collection/widgets/nft_collection_bloc_event.dart';
 import 'package:share/share.dart';
-import 'package:social_share/social_share.dart';
-import 'package:url_launcher/url_launcher.dart';
 
 class PostcardDetailPagePayload extends ArtworkDetailPayload {
   final bool isFromLeaderboard;
@@ -143,32 +141,8 @@ class ClaimedPostcardDetailPageState extends State<ClaimedPostcardDetailPage>
     );
   }
 
-  void _manualShare(String caption, String url) async {
-    final encodeCaption = Uri.encodeQueryComponent(caption);
-    final twitterUrl =
-        "${SocialApp.twitterPrefix}?url=$url&text=$encodeCaption";
-    final twitterUri = Uri.parse(twitterUrl);
-    launchUrl(twitterUri, mode: LaunchMode.externalApplication);
-  }
-
   void _shareTwitter(AssetToken token) {
-    final prefix = Environment.tokenWebviewPrefix;
-    final url = '$prefix/token/${token.id}';
-    final caption = widget.payload.twitterCaption ?? token.twitterCaption;
-    SocialShare.checkInstalledAppsForShare().then((data) {
-      if (data?[SocialApp.twitter]) {
-        SocialShare.shareTwitter(caption, url: url);
-      } else {
-        _manualShare(caption, url);
-      }
-    });
-    _metricClient.addEvent(MixpanelEvent.share, data: {
-      "id": token.id,
-      "to": "Twitter",
-      "caption": caption,
-      "title": token.title,
-      "artistID": token.artistID,
-    });
+    shareToTwitter(token: token, twitterCaption: widget.payload.twitterCaption);
   }
 
   Future<void> _youDidIt(BuildContext context, AssetToken asset) async {
@@ -435,7 +409,8 @@ class ClaimedPostcardDetailPageState extends State<ClaimedPostcardDetailPage>
                     child: Semantics(
                       label: 'artworkDotIcon',
                       child: IconButton(
-                        onPressed: () => _showArtworkOptionsDialog(asset),
+                        onPressed: () =>
+                            _showArtworkOptionsDialog(context, asset),
                         constraints: const BoxConstraints(
                           maxWidth: 44,
                           maxHeight: 44,
@@ -809,21 +784,86 @@ class ClaimedPostcardDetailPageState extends State<ClaimedPostcardDetailPage>
     );
   }
 
-  bool _isHidden(AssetToken token) {
-    return _configurationService
-        .getTempStorageHiddenTokenIDs()
-        .contains(token.id);
-  }
-
-  Future _showArtworkOptionsDialog(AssetToken asset) async {
+  Future _showArtworkOptionsDialog(
+      BuildContext context, AssetToken asset) async {
+    final theme = Theme.of(context);
     if (!mounted) return;
-    final isHidden = _isHidden(asset);
-    UIHelper.showDrawerAction(
+    const isHidden = false;
+    UIHelper.showPostcardDrawerAction(
       context,
       options: [
         OptionItem(
-          title: isHidden ? 'unhide_aw'.tr() : 'hide_aw'.tr(),
-          icon: const Icon(AuIcon.hidden_artwork),
+          title: 'share_on_'.tr(),
+          icon: SvgPicture.asset(
+            'assets/images/globe.svg',
+            width: 24,
+            height: 24,
+          ),
+          iconOnProcessing: SvgPicture.asset(
+            'assets/images/globe.svg',
+            width: 24,
+            height: 24,
+            colorFilter: const ColorFilter.mode(
+              AppColor.disabledColor,
+              BlendMode.srcIn,
+            ),
+          ),
+          onTap: () {
+            _shareTwitter(asset);
+            Navigator.of(context).pop();
+          },
+        ),
+        if (asset.stampIndex >= 0)
+          OptionItem(
+            title: 'download_stamp'.tr(),
+            icon: SvgPicture.asset(
+              'assets/images/download.svg',
+              width: 24,
+              height: 24,
+            ),
+            iconOnProcessing: SvgPicture.asset('assets/images/download.svg',
+                width: 24,
+                height: 24,
+                colorFilter: const ColorFilter.mode(
+                    AppColor.disabledColor, BlendMode.srcIn)),
+            onTap: () async {
+              try {
+                await _postcardService.downloadStamp(
+                    tokenId: asset.tokenId!, stampIndex: asset.stampIndex);
+                if (!mounted) return;
+                Navigator.of(context).pop();
+                await UIHelper.showPostcardStampSaved(context);
+              } catch (e) {
+                log.info("Download stamp failed: error ${e.toString()}");
+                if (!mounted) return;
+                Navigator.of(context).pop();
+                switch (e.runtimeType) {
+                  case MediaPermissionException:
+                    await UIHelper.showPostcardStampPhotoAccessFailed(context);
+                    break;
+                  default:
+                    if (!mounted) return;
+                    await UIHelper.showPostcardStampSavedFailed(context);
+                }
+              }
+            },
+          ),
+        OptionItem(
+          title: 'hide'.tr(),
+          titleStyle: theme.textTheme.moMASans700Black16
+              .copyWith(fontSize: 18, color: MoMAColors.moMA3),
+          titleStyleOnPrecessing: theme.textTheme.moMASans700Black16.copyWith(
+              fontSize: 18, color: const Color.fromRGBO(245, 177, 177, 1)),
+          icon: SvgPicture.asset(
+            "assets/images/postcard_hide.svg",
+            colorFilter:
+                const ColorFilter.mode(MoMAColors.moMA3, BlendMode.srcIn),
+          ),
+          iconOnProcessing: SvgPicture.asset(
+            "assets/images/postcard_hide.svg",
+            colorFilter: const ColorFilter.mode(
+                Color.fromRGBO(245, 177, 177, 1), BlendMode.srcIn),
+          ),
           onTap: () async {
             await _configurationService
                 .updateTempStorageHiddenTokenIDs([asset.id], !isHidden);
@@ -839,18 +879,6 @@ class ClaimedPostcardDetailPageState extends State<ClaimedPostcardDetailPage>
             });
           },
         ),
-        OptionItem(
-          title: 'share_on_'.tr(),
-          icon: SvgPicture.asset(
-            'assets/images/Share.svg',
-            width: 24,
-            height: 24,
-          ),
-          onTap: () async {
-            _shareTwitter(asset);
-            Navigator.of(context).pop();
-          },
-        ),
       ],
     );
   }
diff --git a/lib/screen/interactive_postcard/stamp_preview.dart b/lib/screen/interactive_postcard/stamp_preview.dart
index ff66f783c..8524c6338 100644
--- a/lib/screen/interactive_postcard/stamp_preview.dart
+++ b/lib/screen/interactive_postcard/stamp_preview.dart
@@ -16,7 +16,10 @@ import 'package:autonomy_flutter/service/navigation_service.dart';
 import 'package:autonomy_flutter/service/postcard_service.dart';
 import 'package:autonomy_flutter/util/asset_token_ext.dart';
 import 'package:autonomy_flutter/util/log.dart';
+import 'package:autonomy_flutter/util/moma_style_color.dart';
 import 'package:autonomy_flutter/util/postcard_extension.dart';
+import 'package:autonomy_flutter/util/share_helper.dart';
+import 'package:autonomy_flutter/util/ui_helper.dart';
 import 'package:autonomy_flutter/view/back_appbar.dart';
 import 'package:autonomy_flutter/view/dot_loading_indicator.dart';
 import 'package:autonomy_flutter/view/postcard_button.dart';
@@ -27,6 +30,7 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_svg/flutter_svg.dart';
 import 'package:nft_collection/models/asset_token.dart';
 import 'package:nft_collection/services/tokens_service.dart';
 import 'package:nft_collection/widgets/nft_collection_bloc.dart';
@@ -49,7 +53,7 @@ class _StampPreviewState extends State<StampPreview> {
   int index = 0;
   bool confirming = false;
   Timer? timer;
-
+  bool alreadyShowPopup = false;
   final _configurationService = injector<ConfigurationService>();
   final _postcardService = injector<PostcardService>();
   final _tokenService = injector<TokensService>();
@@ -85,6 +89,89 @@ class _StampPreviewState extends State<StampPreview> {
     });
   }
 
+  Future<void> showOptions(BuildContext context, {Function()? callBack}) async {
+    final theme = Theme.of(context);
+    final options = [
+      OptionItem(
+        title: "stamp_minted".tr(),
+        titleStyle: theme.textTheme.moMASans700Black16
+            .copyWith(color: MoMAColors.moMA3, fontSize: 18),
+        icon: SvgPicture.asset("assets/images/moma_arrow_right.svg"),
+        onTap: () {},
+        separator: const Divider(
+          height: 1,
+          thickness: 1.0,
+          color: Color.fromRGBO(203, 203, 203, 1),
+        ),
+      ),
+      OptionItem(
+        title: 'share_on_'.tr(),
+        icon: SvgPicture.asset(
+          'assets/images/globe.svg',
+          width: 24,
+          height: 24,
+        ),
+        iconOnProcessing: SvgPicture.asset(
+          'assets/images/globe.svg',
+          width: 24,
+          height: 24,
+          colorFilter: const ColorFilter.mode(
+            AppColor.disabledColor,
+            BlendMode.srcIn,
+          ),
+        ),
+        onTap: () async {
+          shareToTwitter(token: widget.payload.asset);
+          Navigator.of(context).pop();
+          await callBack?.call();
+        },
+      ),
+      OptionItem(
+        title: 'download_stamp'.tr(),
+        icon: SvgPicture.asset(
+          'assets/images/download.svg',
+          width: 24,
+          height: 24,
+        ),
+        iconOnProcessing: SvgPicture.asset(
+          'assets/images/download.svg',
+          width: 24,
+          height: 24,
+          colorFilter: const ColorFilter.mode(
+            AppColor.disabledColor,
+            BlendMode.srcIn,
+          ),
+        ),
+        onTap: () async {
+          try {
+            final asset = widget.payload.asset;
+            await _postcardService.downloadStamp(
+                tokenId: asset.tokenId!, stampIndex: 0);
+            if (!mounted) return;
+            Navigator.of(context).pop();
+            await UIHelper.showPostcardStampSaved(context);
+            await callBack?.call();
+          } catch (e) {
+            log.info("Download stamp failed: error ${e.toString()}");
+            if (!mounted) return;
+            Navigator.of(context).pop();
+
+            switch (e.runtimeType) {
+              case MediaPermissionException:
+                await UIHelper.showPostcardStampPhotoAccessFailed(context);
+                break;
+              default:
+                if (!mounted) return;
+                await UIHelper.showPostcardStampSavedFailed(context);
+            }
+            await callBack?.call();
+          }
+        },
+      ),
+    ];
+    await UIHelper.showPostcardDrawerAction(context, options: options);
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
@@ -133,14 +220,22 @@ class _StampPreviewState extends State<StampPreview> {
               if (state.assetToken == null) {
                 return;
               }
-              _navigationService.popUntilHomeOrSettings();
-              if (!mounted) return;
-              Navigator.of(context).pushNamed(
-                AppRouter.claimedPostcardDetailsPage,
-                arguments:
-                    PostcardDetailPagePayload([state.assetToken!.identity], 0),
-              );
-              _configurationService.setAutoShowPostcard(true);
+              timer?.cancel();
+              if (alreadyShowPopup) {
+                return;
+              }
+              alreadyShowPopup = true;
+              showOptions(context, callBack: () {
+                log.info("Popup closed");
+                _navigationService.popUntilHomeOrSettings();
+                if (!mounted) return;
+                Navigator.of(context).pushNamed(
+                  AppRouter.claimedPostcardDetailsPage,
+                  arguments: PostcardDetailPagePayload(
+                      [state.assetToken!.identity], 0),
+                );
+                _configurationService.setAutoShowPostcard(true);
+              });
             }
           },
           builder: (context, state) {
diff --git a/lib/service/postcard_service.dart b/lib/service/postcard_service.dart
index 82ab1488f..2d0796482 100644
--- a/lib/service/postcard_service.dart
+++ b/lib/service/postcard_service.dart
@@ -28,6 +28,9 @@ import 'package:autonomy_flutter/service/notification_service.dart';
 import 'package:autonomy_flutter/service/tezos_service.dart';
 import 'package:autonomy_flutter/util/asset_token_ext.dart';
 import 'package:autonomy_flutter/util/constants.dart';
+import 'package:autonomy_flutter/util/file_helper.dart';
+import 'package:autonomy_flutter/util/http_helper.dart';
+import 'package:autonomy_flutter/util/log.dart';
 import 'package:autonomy_flutter/util/postcard_extension.dart';
 import 'package:autonomy_flutter/util/wallet_storage_ext.dart';
 import 'package:autonomy_flutter/util/xtz_utils.dart';
@@ -37,6 +40,8 @@ import 'package:libauk_dart/libauk_dart.dart';
 import 'package:nft_collection/graphql/model/get_list_tokens.dart';
 import 'package:nft_collection/models/asset_token.dart';
 import 'package:nft_collection/services/indexer_service.dart';
+import 'package:path_provider/path_provider.dart';
+import 'package:share/share.dart';
 
 import 'account_service.dart';
 
@@ -92,6 +97,17 @@ abstract class PostcardService {
   Future<PostcardLeaderboard> fetchPostcardLeaderboard(
       {required String unit, required int size, required int offset});
 
+  Future<File> downloadStamp({
+    required String tokenId,
+    required int stampIndex,
+  });
+
+  Future<void> shareStampToTwitter({
+    required String tokenId,
+    required int stampIndex,
+    String caption = "",
+  });
+
   String getTokenId(String id);
 }
 
@@ -399,6 +415,62 @@ class PostcardServiceImpl extends PostcardService {
         items: leaderboardResponse.items, lastUpdated: DateTime.now());
   }
 
+  Future<File> _downloadStamp({
+    required String tokenId,
+    required int stampIndex,
+  }) async {
+    final path = "/v1/postcard/$tokenId/stamp/$stampIndex";
+    final secretKey = Environment.auClaimSecretKey;
+    final response = await HttpHelper.hmacAuthenticationPost(
+        host: Environment.auClaimAPIURL, path: path, secretKey: secretKey);
+    if (response.statusCode != StatusCode.success.value) {
+      throw Exception(response.reasonPhrase);
+    }
+    final bodyByte = response.bodyBytes;
+    final timestamp =
+        (DateTime.now().millisecondsSinceEpoch ~/ 1000).toString();
+    final tempFilePath =
+        "${(await getTemporaryDirectory()).path}/Postcard/$tokenId/$stampIndex-$timestamp.png";
+    final tempFile = File(tempFilePath);
+    await tempFile.create(recursive: true);
+    log.info("Created file $tempFilePath");
+    await tempFile.writeAsBytes(bodyByte);
+    return tempFile;
+  }
+
+  @override
+  Future<File> downloadStamp({
+    required String tokenId,
+    required int stampIndex,
+    bool isOverride = false,
+  }) async {
+    final imageFile =
+        await _downloadStamp(tokenId: tokenId, stampIndex: stampIndex);
+    final timestamp =
+        (DateTime.now().millisecondsSinceEpoch ~/ 1000).toString();
+    final imageByte = await imageFile.readAsBytes();
+    final imageName = "postcard-$tokenId-$stampIndex-$timestamp";
+    final isSuccess = await FileHelper.saveImageToGallery(imageByte, imageName);
+    if (!isSuccess) {
+      throw MediaPermissionException("Permission is not granted");
+    }
+    return imageFile;
+  }
+
+  @override
+  Future<void> shareStampToTwitter({
+    required String tokenId,
+    required int stampIndex,
+    String caption = "",
+  }) async {
+    final imageFile =
+        await _downloadStamp(tokenId: tokenId, stampIndex: stampIndex);
+    Share.shareFiles(
+      [imageFile.path],
+      text: caption,
+    );
+  }
+
   @override
   String getTokenId(String id) {
     return "tez-${Environment.postcardContractAddress}-$id";
@@ -418,3 +490,13 @@ enum DistanceUnit {
     }
   }
 }
+
+class PostcardException implements Exception {
+  final String message;
+
+  PostcardException(this.message);
+}
+
+class MediaPermissionException extends PostcardException {
+  MediaPermissionException(String message) : super(message);
+}
diff --git a/lib/util/asset_token_ext.dart b/lib/util/asset_token_ext.dart
index be4093ad7..d0a29775b 100644
--- a/lib/util/asset_token_ext.dart
+++ b/lib/util/asset_token_ext.dart
@@ -619,3 +619,14 @@ extension AssetExt on Asset {
     );
   }
 }
+
+extension PostcardExtension on AssetToken {
+  int get stampIndex {
+    final listArtists = getArtists;
+    if (listArtists.isEmpty) {
+      return -1;
+    }
+    final owner = this.owner;
+    return listArtists.indexWhere((element) => owner == element.id);
+  }
+}
diff --git a/lib/util/dio_interceptors.dart b/lib/util/dio_interceptors.dart
index 7562f6ab9..201cd0feb 100644
--- a/lib/util/dio_interceptors.dart
+++ b/lib/util/dio_interceptors.dart
@@ -210,8 +210,11 @@ class HmacAuthInterceptor extends Interceptor {
       if (options.data is FormData || options.method.toUpperCase() == "GET") {
         body = "";
       } else {
-        body = bytesToHex(
-            sha256.convert(utf8.encode(json.encode(options.data))).bytes);
+        body = bytesToHex(sha256
+            .convert(options.data != null
+                ? utf8.encode(json.encode(options.data))
+                : [])
+            .bytes);
       }
       final canonicalString = List<String>.of([
         options.path.split("?").first,
diff --git a/lib/util/file_helper.dart b/lib/util/file_helper.dart
new file mode 100644
index 000000000..99e21323a
--- /dev/null
+++ b/lib/util/file_helper.dart
@@ -0,0 +1,11 @@
+import 'dart:typed_data';
+
+import 'package:image_gallery_saver/image_gallery_saver.dart';
+
+class FileHelper {
+  static Future<bool> saveImageToGallery(Uint8List data, String name) async {
+    final response = await ImageGallerySaver.saveImage(data,
+        name: name, isReturnImagePathOfIOS: true);
+    return response['isSuccess'];
+  }
+}
diff --git a/lib/util/http_helper.dart b/lib/util/http_helper.dart
new file mode 100644
index 000000000..386fc770e
--- /dev/null
+++ b/lib/util/http_helper.dart
@@ -0,0 +1,37 @@
+import 'dart:convert';
+
+import 'package:crypto/crypto.dart';
+import 'package:eth_sig_util/util/utils.dart';
+import 'package:http/http.dart' as http;
+
+class HttpHelper {
+  static Future<http.Response> hmacAuthenticationPost(
+      {required String host,
+      required String path,
+      Map<String, dynamic>? body,
+      Map<String, String>? header,
+      required String secretKey}) async {
+    final url = Uri.parse("$host$path");
+    final headers = header ?? {};
+    final timestamp =
+        (DateTime.now().millisecondsSinceEpoch ~/ 1000).toString();
+    final hexBody = bytesToHex(sha256
+        .convert(body == null ? [] : utf8.encode(json.encode(body)))
+        .bytes);
+    final canonicalString = List<String>.of([
+      path.split("?").first,
+      hexBody,
+      timestamp,
+    ]).join("|");
+    final hmacSha256 = Hmac(sha256, utf8.encode(secretKey));
+    final digest = hmacSha256.convert(utf8.encode(canonicalString));
+    final sig = bytesToHex(digest.bytes);
+    headers.addAll({
+      "X-Api-Signature": sig,
+      "X-Api-Timestamp": timestamp,
+    });
+
+    final response = await http.post(url, headers: headers);
+    return response;
+  }
+}
diff --git a/lib/util/moma_style_color.dart b/lib/util/moma_style_color.dart
index dadb6aaf4..1a7575237 100644
--- a/lib/util/moma_style_color.dart
+++ b/lib/util/moma_style_color.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 class MoMAColors {
+  static const moMA3 = Color.fromRGBO(236, 100, 99, 1);
   static const moMA5 = Color.fromRGBO(240, 148, 62, 1);
   static const moMA12 = Color.fromRGBO(131, 79, 196, 1);
 }
diff --git a/lib/util/share_helper.dart b/lib/util/share_helper.dart
new file mode 100644
index 000000000..0f9d12959
--- /dev/null
+++ b/lib/util/share_helper.dart
@@ -0,0 +1,38 @@
+import 'package:autonomy_flutter/common/environment.dart';
+import 'package:autonomy_flutter/common/injector.dart';
+import 'package:autonomy_flutter/service/metric_client_service.dart';
+import 'package:autonomy_flutter/util/asset_token_ext.dart';
+import 'package:autonomy_flutter/util/constants.dart';
+import 'package:nft_collection/models/asset_token.dart';
+import 'package:social_share/social_share.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+void manualShare(String caption, String url) async {
+  final encodeCaption = Uri.encodeQueryComponent(caption);
+  final twitterUrl = "${SocialApp.twitterPrefix}?url=$url&text=$encodeCaption";
+  final twitterUri = Uri.parse(twitterUrl);
+  launchUrl(twitterUri, mode: LaunchMode.externalApplication);
+}
+
+void shareToTwitter({required AssetToken token, String? twitterCaption}) {
+  final metricClientService = injector<MetricClientService>();
+  final prefix = Environment.tokenWebviewPrefix;
+  final url = '$prefix/token/${token.id}';
+  final caption = twitterCaption ?? token.twitterCaption;
+  SocialShare.checkInstalledAppsForShare().then(
+    (data) {
+      if (data?[SocialApp.twitter]) {
+        SocialShare.shareTwitter(caption, url: url);
+      } else {
+        manualShare(caption, url);
+      }
+    },
+  );
+  metricClientService.addEvent(MixpanelEvent.share, data: {
+    "id": token.id,
+    "to": "Twitter",
+    "caption": caption,
+    "title": token.title,
+    "artistID": token.artistID,
+  });
+}
diff --git a/lib/util/ui_helper.dart b/lib/util/ui_helper.dart
index 19d8e135b..a56d147e4 100644
--- a/lib/util/ui_helper.dart
+++ b/lib/util/ui_helper.dart
@@ -25,9 +25,11 @@ import 'package:autonomy_flutter/util/distance_formater.dart';
 import 'package:autonomy_flutter/util/error_handler.dart';
 import 'package:autonomy_flutter/util/feralfile_extension.dart';
 import 'package:autonomy_flutter/util/log.dart';
+import 'package:autonomy_flutter/util/moma_style_color.dart';
 import 'package:autonomy_flutter/view/au_button_clipper.dart';
 import 'package:autonomy_flutter/view/au_buttons.dart';
 import 'package:autonomy_flutter/view/confetti.dart';
+import 'package:autonomy_flutter/view/postcard_common_widget.dart';
 import 'package:autonomy_flutter/view/primary_button.dart';
 import 'package:autonomy_flutter/view/responsive.dart';
 import 'package:autonomy_flutter/view/transparent_router.dart';
@@ -1115,7 +1117,9 @@ class UIHelper {
                       ),
                     );
                     if (options?[index].builder != null) {
-                      return options?[index].builder!.call(context, child);
+                      return options?[index]
+                          .builder!
+                          .call(context, options[index]);
                     }
                     return GestureDetector(
                       onTap: options?[index].onTap,
@@ -1135,6 +1139,83 @@ class UIHelper {
         });
   }
 
+  static Future<void> showAutoDismissDialog(BuildContext context,
+      {required Function() showDialog,
+      required Duration autoDismissAfter}) async {
+    Future.delayed(autoDismissAfter, () => hideInfoDialog(context));
+    await showDialog();
+  }
+
+  static Future<void> showPostcardDrawerAction(BuildContext context,
+      {required List<OptionItem> options}) async {
+    const backgroundColor = AppColor.white;
+    await showModalBottomSheet<dynamic>(
+        context: context,
+        backgroundColor: Colors.transparent,
+        enableDrag: false,
+        constraints: BoxConstraints(
+            maxWidth: ResponsiveLayout.isMobile
+                ? double.infinity
+                : Constants.maxWidthModalTablet),
+        barrierColor: Colors.black.withOpacity(0.5),
+        isScrollControlled: true,
+        builder: (context) {
+          return Container(
+            decoration: const BoxDecoration(
+              borderRadius: BorderRadius.only(
+                topLeft: Radius.circular(20),
+                topRight: Radius.circular(20),
+              ),
+              color: backgroundColor,
+            ),
+            child: Padding(
+              padding: const EdgeInsets.only(left: 15, right: 15, bottom: 50),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  ListView.builder(
+                    shrinkWrap: true,
+                    physics: const NeverScrollableScrollPhysics(),
+                    itemBuilder: (BuildContext context, int index) {
+                      final item = options[index];
+                      const defaultSeparator = Divider(
+                        height: 1,
+                        thickness: 1.0,
+                        color: Color.fromRGBO(227, 227, 227, 1),
+                      );
+                      return Column(
+                        children: [
+                          Builder(builder: (context) {
+                            if (item.builder != null) {
+                              final child = Container(
+                                color: Colors.transparent,
+                                width: MediaQuery.of(context).size.width,
+                                child: Padding(
+                                    padding: const EdgeInsets.symmetric(
+                                      vertical: 20,
+                                    ),
+                                    child: item.builder!.call(context, item)),
+                              );
+                              return GestureDetector(
+                                onTap: options[index].onTap,
+                                child: child,
+                              );
+                            }
+                            return PostcardDrawerItem(item: item);
+                          }),
+                          item.separator ?? defaultSeparator,
+                        ],
+                      );
+                    },
+                    itemCount: options.length,
+                  ),
+                ],
+              ),
+            ),
+          );
+        });
+  }
+
   static Future showAlreadyDelivered(BuildContext context) async {
     final title = "already_delivered".tr();
     final description = "it_seems_that".tr();
@@ -1392,6 +1473,55 @@ class UIHelper {
       isDismissible: true,
     );
   }
+
+  static Future<void> showPostcardStampSaved(BuildContext context) async {
+    final options = [
+      OptionItem(
+        title: "stamp_saved".tr(),
+        icon: SvgPicture.asset("assets/images/download.svg"),
+        onTap: () {},
+      ),
+    ];
+    await showAutoDismissDialog(context, showDialog: () async {
+      return showPostcardDrawerAction(context, options: options);
+    }, autoDismissAfter: const Duration(seconds: 2));
+  }
+
+  static Future<void> showPostcardStampPhotoAccessFailed(
+      BuildContext context) async {
+    final options = [
+      OptionItem(
+        title: "stamp_could_not_be_saved".tr(),
+        titleStyle: Theme.of(context)
+            .textTheme
+            .moMASans700Black16
+            .copyWith(fontSize: 18, color: MoMAColors.moMA3),
+        icon: SvgPicture.asset("assets/images/postcard_hide.svg"),
+        onTap: () {
+          Navigator.pop(context);
+        },
+      ),
+    ];
+    await showAutoDismissDialog(context, showDialog: () async {
+      return showPostcardDrawerAction(context, options: options);
+    }, autoDismissAfter: const Duration(seconds: 2));
+  }
+
+  static Future<void> showPostcardStampSavedFailed(BuildContext context) async {
+    final theme = Theme.of(context);
+    final options = [
+      OptionItem(
+        title: "stamp_save_failed".tr(),
+        titleStyle: theme.textTheme.moMASans700Black16
+            .copyWith(fontSize: 18, color: MoMAColors.moMA3),
+        icon: SvgPicture.asset("assets/images/exit.svg"),
+        onTap: () {},
+      ),
+    ];
+    await showAutoDismissDialog(context, showDialog: () async {
+      return showPostcardDrawerAction(context, options: options);
+    }, autoDismissAfter: const Duration(seconds: 2));
+  }
 }
 
 Widget loadingScreen(ThemeData theme, String text) {
@@ -1423,14 +1553,22 @@ String getDateTimeRepresentation(DateTime dateTime) {
 
 class OptionItem {
   String? title;
+  TextStyle? titleStyle;
+  TextStyle? titleStyleOnPrecessing;
   Function()? onTap;
   Widget? icon;
-  Widget Function(BuildContext context, Widget child)? builder;
+  Widget? iconOnProcessing;
+  Widget Function(BuildContext context, OptionItem item)? builder;
+  Widget? separator;
 
   OptionItem({
     this.title,
+    this.titleStyle,
+    this.titleStyleOnPrecessing,
     this.onTap,
     this.icon,
+    this.iconOnProcessing,
     this.builder,
+    this.separator,
   });
 }
diff --git a/lib/view/postcard_common_widget.dart b/lib/view/postcard_common_widget.dart
new file mode 100644
index 000000000..6349961d8
--- /dev/null
+++ b/lib/view/postcard_common_widget.dart
@@ -0,0 +1,90 @@
+import 'package:autonomy_flutter/util/ui_helper.dart';
+import 'package:autonomy_theme/autonomy_theme.dart';
+import 'package:autonomy_theme/extensions/theme_extension/moma_sans.dart';
+import 'package:flutter/material.dart';
+
+class PostcardDrawerItem extends StatefulWidget {
+  final OptionItem item;
+
+  const PostcardDrawerItem({
+    Key? key,
+    required this.item,
+  }) : super(key: key);
+
+  @override
+  State<PostcardDrawerItem> createState() => _PostcardDrawerItemState();
+}
+
+class _PostcardDrawerItemState extends State<PostcardDrawerItem> {
+  late bool isProcessing;
+
+  @override
+  void initState() {
+    isProcessing = false;
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final item = widget.item;
+    final defaultTextStyle =
+        theme.textTheme.moMASans700Black16.copyWith(fontSize: 18);
+    final defaultProcessingTextStyle =
+        defaultTextStyle.copyWith(color: AppColor.disabledColor);
+    final child = Container(
+      color: Colors.transparent,
+      width: MediaQuery.of(context).size.width,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: 20,
+        ),
+        child: Column(
+          children: [
+            Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const SizedBox(
+                  width: 15,
+                ),
+                SizedBox(
+                    width: 30,
+                    child: isProcessing
+                        ? (item.iconOnProcessing ?? item.icon)
+                        : item.icon),
+                const SizedBox(
+                  width: 18,
+                ),
+                Expanded(
+                  child: Text(
+                    item.title ?? '',
+                    maxLines: 3,
+                    style: isProcessing
+                        ? item.titleStyleOnPrecessing ??
+                            defaultProcessingTextStyle
+                        : item.titleStyle ?? defaultTextStyle,
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+    return GestureDetector(
+      onTap: () async {
+        if (isProcessing) return;
+        setState(() {
+          isProcessing = true;
+        });
+        await item.onTap?.call();
+        if (mounted) {
+          setState(() {
+            isProcessing = false;
+          });
+        }
+      },
+      child: child,
+    );
+  }
+}
diff --git a/pubspec.lock b/pubspec.lock
index ff23d34fe..ca6085e64 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -1317,6 +1317,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.17"
+  image_gallery_saver:
+    dependency: "direct main"
+    description:
+      name: image_gallery_saver
+      sha256: "0aba74216a4d9b0561510cb968015d56b701ba1bd94aace26aacdd8ae5761816"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.3"
   image_picker:
     dependency: "direct main"
     description:
@@ -1841,10 +1849,10 @@ packages:
     dependency: "direct main"
     description:
       name: path_provider
-      sha256: "3087813781ab814e4157b172f1a11c46be20179fcc9bea043e0fba36bc0acaa2"
+      sha256: a1aa8aaa2542a6bc57e381f132af822420216c80d4781f7aa085ca3229208aaa
       url: "https://pub.dev"
     source: hosted
-    version: "2.0.15"
+    version: "2.1.1"
   path_provider_android:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 78ce3356c..606c9697f 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -89,7 +89,7 @@ dependencies:
   overlay_support: ^2.0.0
   package_info_plus: ^4.0.2
   page_transition: ^2.0.5
-  path_provider: ^2.0.9
+  path_provider: ^2.1.1
   permission_handler: ^10.0.0
   qr_code_scanner: ^1.0.0
   qr_flutter: ^4.0.0
@@ -166,6 +166,7 @@ dependencies:
   shimmer: ^3.0.0
   graphql_flutter: ^5.1.2
   card_swiper: ^3.0.1
+  image_gallery_saver: ^2.0.3
 dependency_overrides:
   intl: 0.18.0