Upload generated meme to Pinata (#9)

Part of https://www.notion.so/Deploy-memes-markto-market-188a6b22d47280e38324efab1d3de55f
- Use pinata URL in frontend

Co-authored-by: Prathamesh Musale <prathamesh.musale0@gmail.com>
Co-authored-by: Adw8 <adwaitgharpure@gmail.com>
Reviewed-on: #9
Co-authored-by: adwait <adwait@noreply.git.vdb.to>
Co-committed-by: adwait <adwait@noreply.git.vdb.to>

src/app/api/flux/route.ts

@@ -5,6 +5,7 @@ import { fal } from "@fal-ai/client"
 import { FLUX_MODELS } from '../../../services/fluxService'
 import { initializeDataSource } from '../../../data-source'
 import { verifyPayment, markSignatureAsUsed } from '../../../utils/verifyPayment';
+import { uploadToPinata } from '../../../utils/uploadToPinata';
 
 if (!process.env.FAL_AI_KEY) {
   throw new Error('FAL_AI_KEY is not configured in environment variables')
@@ -97,7 +98,18 @@ export async function POST(req: NextRequest): Promise<NextResponse> {
       )
     }
 
-    return NextResponse.json({ imageUrl })
+    const pinataResult = await uploadToPinata(imageUrl);
+
+    if (pinataResult.error) {
+      return NextResponse.json(
+        { error: 'Failed to upload image to Pinata' },
+        { status: 500 }
+      )
+    }
+
+    const publicUrl = pinataResult.imageUrl;
+
+    return NextResponse.json({ imageUrl: publicUrl })
   } catch (error) {
     console.error('Flux generation error:', error)
     return NextResponse.json(

src/app/page.tsx

@@ -87,10 +87,10 @@ const Page: React.FC = (): React.ReactElement => {
 
         if (!transactionSignature) {
           return { error: 'Transaction signature not found' }
-        }
+        };
 
         // Generate image with specified model and transaction reference
-        return generateWithFlux(prompt, modelId, transactionSignature)
+        return generateWithFlux(prompt, modelId, transactionSignature);
       } catch (error) {
         console.error('Error in handleFluxGeneration:', error)
         return { error: error instanceof Error ? error.message : 'Unknown error' }

src/utils/uploadToPinata.ts

@@ -0,0 +1,28 @@
+import { PinataSDK } from 'pinata-web3';
+import 'dotenv/config';
+import assert from 'assert';
+
+import { FluxGenerationResult } from '../services/fluxService';
+
+assert(process.env.PINATA_JWT, "PINATA_JWT is required");
+assert(process.env.PINATA_GATEWAY, "PINATA_GATEWAY is required");
+
+const pinata = new PinataSDK({
+  pinataJwt: process.env.PINATA_JWT,
+  pinataGateway: process.env.PINATA_GATEWAY,
+});
+
+export async function uploadToPinata(imageUrl: string): Promise<FluxGenerationResult> {
+  try {
+    const upload = await pinata.upload.url(imageUrl);
+
+    const publicURL = await pinata.gateways.convert(upload.IpfsHash);
+
+    return { imageUrl: publicURL };
+  } catch (error) {
+    console.error('Error uploading to Pinata:', error)
+    return {
+      error: error instanceof Error ? error.message : 'Upload failed'
+    };
+  }
+}