fix: organize code : upload to ipfs using pinata (#650)

packages/candymachine/pinata-upload.ts

@@ -1,6 +1,6 @@
 import axios from "axios";
 
-import { LocalFileData } from "../utils/types/feed";
+import { LocalFileData } from "../utils/types/files";
 
 interface PinataFileProps {
   file: LocalFileData;

packages/components/FilePreview/AudioView.tsx

@@ -4,11 +4,11 @@ import { View, Image, TouchableOpacity } from "react-native";
 import { ActivityIndicator } from "react-native-paper";
 
 import { AudioWaveform } from "./AudioWaveform";
-import { ipfsURLToHTTPURL } from "./ipfs";
 import pauseSVG from "../../../assets/icons/pause.svg";
 import playSVG from "../../../assets/icons/play.svg";
 import { useMaxResolution } from "../../hooks/useMaxResolution";
 import { getAudioDuration } from "../../utils/audio";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import {
   errorColor,
   neutral00,
@@ -17,7 +17,7 @@ import {
 } from "../../utils/style/colors";
 import { fontSemibold13, fontSemibold14 } from "../../utils/style/fonts";
 import { layout, screenContentMaxWidth } from "../../utils/style/layout";
-import { RemoteFileData } from "../../utils/types/feed";
+import { RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { THUMBNAIL_WIDTH } from "../socialFeed/SocialThread/SocialMessageContent";

packages/components/FilePreview/EditableAudioPreview.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../utils/style/colors";
 import { fontMedium32, fontSemibold12 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
-import { LocalFileData } from "../../utils/types/feed";
+import { LocalFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 import { SVG } from "../SVG";
 import { FileUploader } from "../fileUploader";

packages/components/FilePreview/FilesPreviewsContainer.tsx

@@ -8,7 +8,7 @@ import { VideoView } from "./VideoView";
 import { GIF_MIME_TYPE } from "../../utils/mime";
 import { convertGIFToLocalFileType } from "../../utils/social-feed";
 import { layout } from "../../utils/style/layout";
-import { LocalFileData, RemoteFileData } from "../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 
 interface FilePreviewContainerProps {
   files?: LocalFileData[];

packages/components/FilePreview/ImagesFullViewModal.tsx

@@ -7,9 +7,9 @@ import {
 } from "react-native";
 import { SvgProps } from "react-native-svg";
 
-import { ipfsURLToHTTPURL } from "./ipfs";
 import chevronLeft from "../../../assets/icons/chevron-left.svg";
 import chevronRight from "../../../assets/icons/chevron-right.svg";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { neutral22, neutral33 } from "../../utils/style/colors";
 import { SVG } from "../SVG";
 import ModalBase from "../modals/ModalBase";

packages/components/FilePreview/ImagesViews.tsx

@@ -3,11 +3,11 @@ import { Image, TouchableOpacity, View } from "react-native";
 
 import { DeleteButton } from "./DeleteButton";
 import { ImagesFullViewModal } from "./ImagesFullViewModal";
-import { ipfsURLToHTTPURL } from "./ipfs";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { errorColor } from "../../utils/style/colors";
 import { fontSemibold13 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
-import { LocalFileData, RemoteFileData } from "../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 
 interface ImagePreviewProps {

packages/components/FilePreview/VideoView.tsx

@@ -3,11 +3,11 @@ import React from "react";
 import { View } from "react-native";
 
 import { DeleteButton } from "./DeleteButton";
-import { ipfsURLToHTTPURL } from "./ipfs";
+import { ipfsURLToHTTPURL } from "../../utils/ipfs";
 import { errorColor } from "../../utils/style/colors";
 import { fontSemibold13 } from "../../utils/style/fonts";
 import { layout } from "../../utils/style/layout";
-import { LocalFileData, RemoteFileData } from "../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../utils/types/files";
 import { BrandText } from "../BrandText";
 
 interface VideoPreviewProps {

packages/components/fileUploader/FileUploader.type.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { StyleProp, ViewStyle } from "react-native";
 
-import { LocalFileData } from "../../utils/types/feed";
+import { LocalFileData } from "../../utils/types/files";
 
 export interface FileUploaderProps {
   onUpload: (files: LocalFileData[]) => void;

packages/components/fileUploader/formatFile.ts

@@ -3,7 +3,7 @@ import {
   IMAGE_MIME_TYPES,
   VIDEO_MIME_TYPES,
 } from "./../../utils/mime";
-import { FileType, LocalFileData } from "../../utils/types/feed";
+import { FileType, LocalFileData } from "../../utils/types/files";
 import { getAudioData } from "../../utils/waveform";
 
 export const formatFile = async (file: File): Promise<LocalFileData> => {

packages/components/socialFeed/NewsFeed/NewsFeed.type.ts

@@ -1,6 +1,6 @@
 import { Post } from "../../../api/feed/v1/feed";
 import { PostResult } from "../../../contracts-clients/teritori-social-feed/TeritoriSocialFeed.types";
-import { LocalFileData, RemoteFileData } from "../../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../../utils/types/files";
 
 export enum PostCategory {
   Reaction,

packages/components/socialFeed/NewsFeed/NewsFeedInput.tsx

@@ -9,6 +9,7 @@ import {
   useWindowDimensions,
 } from "react-native";
 import Animated, { useSharedValue } from "react-native-reanimated";
+import { useSelector } from "react-redux";
 import { v4 as uuidv4 } from "uuid";
 
 import {
@@ -17,11 +18,7 @@ import {
   ReplyToType,
   SocialFeedMetadata,
 } from "./NewsFeed.type";
-import {
-  generatePostMetadata,
-  getPostCategory,
-  uploadPostFilesToPinata,
-} from "./NewsFeedQueries";
+import { generatePostMetadata, getPostCategory } from "./NewsFeedQueries";
 import { NotEnoughFundModal } from "./NotEnoughFundModal";
 import audioSVG from "../../../../assets/icons/audio.svg";
 import cameraSVG from "../../../../assets/icons/camera.svg";
@@ -41,8 +38,10 @@ import { useMaxResolution } from "../../../hooks/useMaxResolution";
 import { useSelectedNetworkId } from "../../../hooks/useSelectedNetwork";
 import useSelectedWallet from "../../../hooks/useSelectedWallet";
 import { getUserId, mustGetCosmosNetwork } from "../../../networks";
+import { selectNFTStorageAPI } from "../../../store/slices/settings";
 import { prettyPrice } from "../../../utils/coins";
 import { defaultSocialFeedFee } from "../../../utils/fee";
+import { generateIpfsKey, uploadFilesToPinata } from "../../../utils/ipfs";
 import {
   AUDIO_MIME_TYPES,
   IMAGE_MIME_TYPES,
@@ -52,7 +51,6 @@ import {
   SOCIAL_FEED_ARTICLE_MIN_CHARS_LIMIT,
   hashtagMatch,
   mentionMatch,
-  generateIpfsKey,
   replaceFileInArray,
   removeFileFromArray,
 } from "../../../utils/social-feed";
@@ -77,7 +75,7 @@ import {
   SOCIAL_FEED_BREAKPOINT_M,
 } from "../../../utils/style/layout";
 import { replaceBetweenString } from "../../../utils/text";
-import { LocalFileData, RemoteFileData } from "../../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../../utils/types/files";
 import { BrandText } from "../../BrandText";
 import { FilesPreviewsContainer } from "../../FilePreview/FilesPreviewsContainer";
 import FlexRow from "../../FlexRow";
@@ -189,7 +187,7 @@ export const NewsFeedInput = React.forwardRef<
       }
     );
     const formValues = watch();
-
+    const userIPFSKey = useSelector(selectNFTStorageAPI);
     const { postFee } = useUpdatePostFee(
       selectedNetworkId,
       getPostCategory(formValues)
@@ -239,9 +237,10 @@ export const NewsFeedInput = React.forwardRef<
         let files: RemoteFileData[] = [];
 
         if (formValues.files?.length) {
-          const pinataJWTKey = await generateIpfsKey(selectedNetworkId, userId);
+          const pinataJWTKey =
+            userIPFSKey || (await generateIpfsKey(selectedNetworkId, userId));
           if (pinataJWTKey) {
-            files = await uploadPostFilesToPinata({
+            files = await uploadFilesToPinata({
               files: formValues.files,
               pinataJWTKey,
             });

packages/components/socialFeed/NewsFeed/NewsFeedQueries.ts

@@ -1,21 +1,19 @@
 import { coin } from "@cosmjs/amino";
-import { omit } from "lodash";
 import { v4 as uuidv4 } from "uuid";
 
 import {
   PostCategory,
   NewPostFormValues,
   SocialFeedMetadata,
 } from "./NewsFeed.type";
-import { pinataPinFileToIPFS } from "../../../candymachine/pinata-upload";
 import {
   nonSigningSocialFeedClient,
   signingSocialFeedClient,
 } from "../../../client-creators/socialFeedClient";
 import { Wallet } from "../../../context/WalletsProvider";
 import { defaultSocialFeedFee } from "../../../utils/fee";
-import { ipfsURLToHTTPURL } from "../../../utils/ipfs";
-import { LocalFileData, RemoteFileData } from "../../../utils/types/feed";
+import { ipfsURLToHTTPURL, uploadFilesToPinata } from "../../../utils/ipfs";
+import { RemoteFileData } from "../../../utils/types/files";
 interface GetAvailableFreePostParams {
   networkId: string;
   wallet?: Wallet;
@@ -132,7 +130,7 @@ export const createPost = async ({
   let files: RemoteFileData[] = [];
 
   if (formValues.files?.length && pinataJWTKey) {
-    files = await uploadPostFilesToPinata({
+    files = await uploadFilesToPinata({
       files: formValues.files,
       pinataJWTKey,
     });
@@ -177,50 +175,6 @@ export const createPost = async ({
   return true;
 };
 
-interface UploadPostFilesToPinataParams {
-  files: LocalFileData[];
-  pinataJWTKey: string;
-}
-
-export const uploadPostFilesToPinata = async ({
-  files,
-  pinataJWTKey,
-}: UploadPostFilesToPinataParams): Promise<RemoteFileData[]> => {
-  const storedFile = async (file: LocalFileData): Promise<RemoteFileData> => {
-    const fileData = await pinataPinFileToIPFS({
-      file,
-      pinataJWTKey,
-    });
-    if (file.thumbnailFileData) {
-      const thumbnailData = await pinataPinFileToIPFS({
-        file: file.thumbnailFileData,
-        pinataJWTKey,
-      });
-
-      return {
-        ...omit(file, "file"),
-        url: fileData?.IpfsHash || "",
-        thumbnailFileData: {
-          ...omit(file.thumbnailFileData, "file"),
-          url: thumbnailData?.IpfsHash || "",
-        },
-      };
-    } else {
-      return {
-        ...omit(file, "file"),
-        url: fileData?.IpfsHash || "",
-      };
-    }
-  };
-
-  const queries = [];
-  for (const file of files) {
-    const storedFileQuery = storedFile(file);
-    queries.push(storedFileQuery);
-  }
-  return await Promise.all(queries);
-};
-
 interface GeneratePostMetadataParams {
   title: string;
   message: string;

packages/components/socialFeed/RichText/RichText.type.ts

@@ -1,6 +1,6 @@
 import { EntityInstance } from "draft-js";
 
-import { LocalFileData, RemoteFileData } from "../../../utils/types/feed";
+import { LocalFileData, RemoteFileData } from "../../../utils/types/files";
 
 export type PublishValues = {
   hashtags: string[];

packages/components/socialFeed/RichText/RichText.web.tsx

@@ -81,7 +81,7 @@ import {
 import { neutral77 } from "../../../utils/style/colors";
 import { fontSemibold14 } from "../../../utils/style/fonts";
 import { layout, SOCIAL_FEED_BREAKPOINT_M } from "../../../utils/style/layout";
-import { LocalFileData } from "../../../utils/types/feed";
+import { LocalFileData } from "../../../utils/types/files";
 import { BrandText } from "../../BrandText";
 import { AudioView } from "../../FilePreview/AudioView";
 import { EditableAudioPreview } from "../../FilePreview/EditableAudioPreview";

packages/components/socialFeed/SocialThread/ArticleRenderer.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import { Image } from "react-native";
 
+import { ipfsURLToHTTPURL } from "../../../utils/ipfs";
 import { ARTICLE_COVER_IMAGE_HEIGHT } from "../../../utils/social-feed";
 import { layout } from "../../../utils/style/layout";
-import { RemoteFileData } from "../../../utils/types/feed";
+import { RemoteFileData } from "../../../utils/types/files";
 import { BrandText } from "../../BrandText";
-import { ipfsURLToHTTPURL } from "../../FilePreview/ipfs";
 import { SocialFeedMetadata } from "../NewsFeed/NewsFeed.type";
 import { RichText } from "../RichText";
 

packages/screens/FeedNewArticle/FeedNewArticleScreen.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { View } from "react-native";
+import { useSelector } from "react-redux";
 
 import priceSVG from "../../../assets/icons/price.svg";
 import { BrandText } from "../../components/BrandText";
@@ -30,13 +31,12 @@ import { useIsMobile } from "../../hooks/useIsMobile";
 import { useSelectedNetworkId } from "../../hooks/useSelectedNetwork";
 import useSelectedWallet from "../../hooks/useSelectedWallet";
 import { getUserId, NetworkKind } from "../../networks";
+import { selectNFTStorageAPI } from "../../store/slices/settings";
 import { prettyPrice } from "../../utils/coins";
+import { generateIpfsKey } from "../../utils/ipfs";
 import { IMAGE_MIME_TYPES } from "../../utils/mime";
 import { ScreenFC, useAppNavigation } from "../../utils/navigation";
-import {
-  ARTICLE_COVER_IMAGE_HEIGHT,
-  generateIpfsKey,
-} from "../../utils/social-feed";
+import { ARTICLE_COVER_IMAGE_HEIGHT } from "../../utils/social-feed";
 import {
   neutral00,
   neutral11,
@@ -61,6 +61,7 @@ export const FeedNewArticleScreen: ScreenFC<"FeedNewArticle"> = () => {
   );
   const [isNotEnoughFundModal, setNotEnoughFundModal] = useState(false);
   const [loading, setLoading] = useState(false);
+  const userIPFSKey = useSelector(selectNFTStorageAPI);
 
   const { setToastSuccess, setToastError } = useFeedbacks();
   const navigation = useAppNavigation();
@@ -113,7 +114,8 @@ export const FeedNewArticleScreen: ScreenFC<"FeedNewArticle"> = () => {
     }
     let pinataJWTKey = undefined;
     if (files?.length) {
-      pinataJWTKey = await generateIpfsKey(selectedNetworkId, userId);
+      pinataJWTKey =
+        userIPFSKey || (await generateIpfsKey(selectedNetworkId, userId));
     }
 
     const result = await createPost({

packages/screens/Settings/SettingsScreen.tsx

@@ -25,7 +25,7 @@ import { neutralA3, primaryColor } from "../../utils/style/colors";
 import { fontSemibold14 } from "../../utils/style/fonts";
 
 const NFTAPIKeyInput: React.FC = () => {
-  const NFTApiKey = useSelector(selectNFTStorageAPI);
+  const userIPFSKey = useSelector(selectNFTStorageAPI);
   const dispatch = useAppDispatch();
   const commonStyles = useCommonStyles();
 
@@ -40,11 +40,12 @@ const NFTAPIKeyInput: React.FC = () => {
             },
           ]}
         >
-          NFT.Storage/Pinata.cloud API key (for Social Feed)
+          app.pinata.cloud JWT key (For file upload)
         </BrandText>
         <Pressable
           onPress={() =>
-            dispatch(setNFTStorageAPI(process.env.NFT_STORAGE_API || ""))
+            // We ask key at each upload for now (Don't have Teritori's key for now)
+            dispatch(setNFTStorageAPI(""))
           }
         >
           <Text style={[fontSemibold14, { color: primaryColor }]}>
@@ -55,7 +56,7 @@ const NFTAPIKeyInput: React.FC = () => {
       <SpacerColumn size={1.5} />
       <TextInput
         style={[commonStyles.apiInput]}
-        value={NFTApiKey}
+        value={userIPFSKey}
         onChangeText={(value) => dispatch(setNFTStorageAPI(value))}
       />
     </View>