From 70d7f4a679eed5a9e149a468df5e6e1fc77003aa Mon Sep 17 00:00:00 2001
From: n0izn0iz <n0izn0iz@users.noreply.github.com>
Date: Thu, 28 Nov 2024 02:55:54 +0100
Subject: [PATCH] feat: tns update proposal preview (#1413)

Signed-off-by: Norman Meier <norman@samourai.coop>
---
 .../teritoriNameService/MediaPreview.tsx      | 27 +++++++++----
 .../teritoriNameService/NameDataForm.tsx      |  2 +-
 packages/components/tx/getTxInfo.tsx          | 40 +++++++++++++++++++
 .../components/user/forms/EditProfileForm.tsx |  2 +-
 4 files changed, 61 insertions(+), 10 deletions(-)

diff --git a/packages/components/teritoriNameService/MediaPreview.tsx b/packages/components/teritoriNameService/MediaPreview.tsx
index 3149c51fec..9dddc5662b 100644
--- a/packages/components/teritoriNameService/MediaPreview.tsx
+++ b/packages/components/teritoriNameService/MediaPreview.tsx
@@ -1,7 +1,7 @@
 import * as DocumentPicker from "expo-document-picker";
 import { DocumentPickerResult } from "expo-document-picker";
 import React, { Dispatch, SetStateAction, useState } from "react";
-import { ActivityIndicator, View, ViewStyle } from "react-native";
+import { ActivityIndicator, StyleProp, View, ViewStyle } from "react-native";
 import { useSelector } from "react-redux";
 
 import tnsProfileAvatar from "../../../assets/default-images/default-name-nft.png";
@@ -26,15 +26,17 @@ import { SVG } from "../SVG";
 import { TextInputCustom } from "../inputs/TextInputCustom";
 
 export const MediaPreview: React.FC<{
-  style: ViewStyle;
+  style?: StyleProp<ViewStyle>;
+  textInputsStyle?: StyleProp<ViewStyle>;
   avatarImageUrl: string;
-  setAvatarImageUrl: Dispatch<SetStateAction<string>>;
+  setAvatarImageUrl?: Dispatch<SetStateAction<string>>;
   bannerImageUrl: string;
-  setBannerImageUrl: Dispatch<SetStateAction<string>>;
+  setBannerImageUrl?: Dispatch<SetStateAction<string>>;
   variant?: "regular" | "labelOutside" | "noStyle";
   hasPadding?: boolean;
 }> = ({
   style,
+  textInputsStyle,
   avatarImageUrl,
   setAvatarImageUrl,
   bannerImageUrl,
@@ -77,6 +79,9 @@ export const MediaPreview: React.FC<{
   };
 
   const onPressUploadAvatar = async () => {
+    if (!setAvatarImageUrl) {
+      return;
+    }
     const documentPickerResult = await DocumentPicker.getDocumentAsync({
       multiple: false,
     });
@@ -86,6 +91,9 @@ export const MediaPreview: React.FC<{
   };
 
   const onPressUploadBanner = async () => {
+    if (!setBannerImageUrl) {
+      return;
+    }
     const documentPickerResult = await DocumentPicker.getDocumentAsync({
       multiple: false,
     });
@@ -104,16 +112,18 @@ export const MediaPreview: React.FC<{
           marginBottom: layout.spacing_x1,
           padding: layout.spacing_x1_5,
         },
+        style,
       ]}
     >
       <TextInputCustom<Metadata>
         name="image"
-        style={style}
+        style={textInputsStyle}
         label="Avatar URL"
         noBrokenCorners
         variant={variant}
         placeHolder="https://website.com/avatar.jpg"
         onPressChildren={onPressUploadAvatar}
+        disabled={!onPressUploadAvatar}
         value={avatarImageUrl}
         onChangeText={setAvatarImageUrl}
         squaresBackgroundColor={neutral17}
@@ -127,10 +137,11 @@ export const MediaPreview: React.FC<{
 
       <TextInputCustom<Metadata>
         name="public_profile_header"
-        style={style}
+        style={textInputsStyle}
         label="Cover Image URL"
         noBrokenCorners
         onPressChildren={onPressUploadBanner}
+        disabled={!onPressUploadBanner}
         variant={variant}
         placeHolder="https://website.com/coverimage.jpg"
         value={bannerImageUrl}
@@ -152,8 +163,8 @@ export const MediaPreview: React.FC<{
       >
         <OptimizedImage
           sourceURI={bannerImageUrl || tnsProfileCover}
-          width={410}
-          height={120}
+          width={820}
+          height={240}
           style={{
             width: "100%",
             height: 120,
diff --git a/packages/components/teritoriNameService/NameDataForm.tsx b/packages/components/teritoriNameService/NameDataForm.tsx
index f83c0f31f5..f320bedcac 100644
--- a/packages/components/teritoriNameService/NameDataForm.tsx
+++ b/packages/components/teritoriNameService/NameDataForm.tsx
@@ -139,7 +139,7 @@ export const NameDataForm: React.FC<{
         squaresBackgroundColor={neutral17}
       />
       <MediaPreview
-        style={inputStyle}
+        textInputsStyle={inputStyle}
         avatarImageUrl={avatarImageUrl}
         bannerImageUrl={bannerImageUrl}
         setAvatarImageUrl={setAvatarImageUrl}
diff --git a/packages/components/tx/getTxInfo.tsx b/packages/components/tx/getTxInfo.tsx
index 2dec912daf..2a2bc83333 100644
--- a/packages/components/tx/getTxInfo.tsx
+++ b/packages/components/tx/getTxInfo.tsx
@@ -26,6 +26,7 @@ import { tinyAddress } from "../../utils/text";
 import { BrandText } from "../BrandText";
 import { SocialMessageContent } from "../socialFeed/SocialCard/SocialMessageContent";
 import { SpacerColumn } from "../spacer";
+import { MediaPreview } from "../teritoriNameService/MediaPreview";
 import { Username } from "../user/Username";
 
 import { cosmosTypesRegistry } from "@/networks/cosmos-types";
@@ -396,6 +397,45 @@ export const getTxInfo = (
               </View>
             );
           };
+        } else if (
+          network?.kind === NetworkKind.Cosmos &&
+          contractAddress === network.nameServiceContractAddress &&
+          method === "update_metadata"
+        ) {
+          icon = feedWhiteSVG;
+          name = "Update profile";
+          preview = () => {
+            return (
+              <View>
+                <BrandText>Update {execMsg[method].token_id}</BrandText>
+                <SpacerColumn size={2.5} />
+                <BrandText style={brandTextNormalStyle}>
+                  Display name:{" "}
+                  <Text style={{ color: "white" }}>
+                    {execMsg[method].metadata.public_name}
+                  </Text>
+                </BrandText>
+                <SpacerColumn size={1} />
+                <BrandText style={brandTextNormalStyle}>
+                  Bio:{" "}
+                  <Text style={{ color: "white" }}>
+                    {execMsg[method].metadata.public_bio}
+                  </Text>
+                </BrandText>
+                <SpacerColumn size={1} />
+                <MediaPreview
+                  hasPadding={false}
+                  textInputsStyle={{ marginBottom: 12 }}
+                  style={{ width: 410, backgroundColor: "black" }}
+                  variant="regular"
+                  avatarImageUrl={execMsg[method].metadata.image}
+                  bannerImageUrl={
+                    execMsg[method].metadata.public_profile_header
+                  }
+                />
+              </View>
+            );
+          };
         }
         if (!preview) {
           preview = () => {
diff --git a/packages/components/user/forms/EditProfileForm.tsx b/packages/components/user/forms/EditProfileForm.tsx
index 6551c1d37c..60e22f449b 100644
--- a/packages/components/user/forms/EditProfileForm.tsx
+++ b/packages/components/user/forms/EditProfileForm.tsx
@@ -217,7 +217,7 @@ export const EditProfileForm: React.FC<{
         render={({ field: { onChange } }) => (
           <MediaPreview
             hasPadding={false}
-            style={{ marginBottom: 12, width: "100%" }}
+            textInputsStyle={{ marginBottom: 12, width: "100%" }}
             variant="regular"
             avatarImageUrl={getValues("avatarURL") || ""}
             bannerImageUrl={getValues("bannerURL") || ""}