Upload to Pinata from flux API

.env.example

@@ -8,5 +8,5 @@ NEXT_PUBLIC_SOLANA_WEBSOCKET_URL=wss://young-radial-orb.solana-mainnet.quiknode.
 NEXT_PUBLIC_USDC_MINT=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
 
 # Get keys from https://app.pinata.cloud/developers/api-keys
-NEXT_PUBLIC_PINATA_JWT=
+PINATA_JWT=
-NEXT_PUBLIC_PINATA_GATEWAY=
+PINATA_GATEWAY=

README.md

@@ -35,8 +35,8 @@ This project is a Solana-based meme generator that allows users to connect their
 - Setup a project on <https://app.pinata.cloud> then add the following to `.env.example`:
     ```env
     # Get keys from https://app.pinata.cloud/developers/api-keys
-    NEXT_PUBLIC_PINATA_JWT=
+    PINATA_JWT=
-    NEXT_PUBLIC_PINATA_GATEWAY=
+    PINATA_GATEWAY=
     ```
 
 - Run the development server:

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

@@ -9,7 +9,6 @@ import { generateWithFlux, FluxGenerationResult, FLUX_MODELS } from '../services
 import { processMTMPayment } from '../services/paymentService'
 import { connectWallet, disconnectWallet, WalletState } from '../services/walletService'
 import { WalletType } from '../services/types'
-import { uploadToPinata } from '../utils/uploadToPinata';
 
 const Page: React.FC = (): React.ReactElement => {
   const [walletState, setWalletState] = useState<WalletState>({
@@ -91,13 +90,7 @@ const Page: React.FC = (): React.ReactElement => {
         };
 
         // Generate image with specified model and transaction reference
-        const fluxResult = await generateWithFlux(prompt, modelId, transactionSignature);
+        return generateWithFlux(prompt, modelId, transactionSignature);
-
-        if (fluxResult.error) {
-          return { error: fluxResult.error }
-        }
-
-        return uploadToPinata(fluxResult.imageUrl!);
       } catch (error) {
         console.error('Error in handleFluxGeneration:', error)
         return { error: error instanceof Error ? error.message : 'Unknown error' }

src/utils/uploadToPinata.ts

@@ -4,12 +4,12 @@ import assert from 'assert';
 
 import { FluxGenerationResult } from '../services/fluxService';
 
-assert(process.env.NEXT_PUBLIC_PINATA_JWT, "PINATA_JWT is required");
+assert(process.env.PINATA_JWT, "PINATA_JWT is required");
-assert(process.env.NEXT_PUBLIC_PINATA_GATEWAY, "PINATA_GATEWAY is required");
+assert(process.env.PINATA_GATEWAY, "PINATA_GATEWAY is required");
 
 const pinata = new PinataSDK({
-  pinataJwt: process.env.NEXT_PUBLIC_PINATA_JWT,
+  pinataJwt: process.env.PINATA_JWT,
-  pinataGateway: process.env.NEXT_PUBLIC_PINATA_GATEWAY,
+  pinataGateway: process.env.PINATA_GATEWAY,
 });
 
 export async function uploadToPinata(imageUrl: string): Promise<FluxGenerationResult> {