Add util for uploading image to Pinata

.env.example

@@ -5,3 +5,6 @@ NEXT_PUBLIC_PAYMENT_RECEIVER_ADDRESS=FFDx3SdAEeXrp6BTmStB4BDHpctGsaasZq4FFcowRob
 NEXT_PUBLIC_SOLANA_RPC_URL=https://young-radial-orb.solana-mainnet.quiknode.pro/67612b364664616c29514e551bf5de38447ca3d4
 NEXT_PUBLIC_SOLANA_WEBSOCKET_URL=wss://young-radial-orb.solana-mainnet.quiknode.pro/67612b364664616c29514e551bf5de38447ca3d4
 NEXT_PUBLIC_USDC_MINT=EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v
+
+NEXT_PUBLIC_PINATA_JWT=
+NEXT_PUBLIC_PINATA_GATEWAY=

src/app/page.tsx

@@ -9,6 +9,7 @@ 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>({
@@ -90,7 +91,13 @@ const Page: React.FC = (): React.ReactElement => {
         }
 
         // Generate image with specified model and transaction reference
-        return generateWithFlux(prompt, modelId, transactionSignature)
+        const fluxResult = await 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

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

tsconfig.server.json

@@ -9,5 +9,5 @@
     "isolatedModules": false,
     "noEmit": false
   },
-  "include": ["server.ts", "upload-image-to-pinata.ts"]
+  "include": ["server.ts"]
 }

upload-image-to-pinata.ts

@@ -1,34 +0,0 @@
-// import { PinataSDK } from "pinata";
-import { PinataSDK } from "pinata-web3";
-import fs from 'fs';
-
-async function main (): Promise<void> {
-  const pinata = new PinataSDK({
-    pinataJwt: "<pinata-jwt>",
-    pinataGateway: "pinata-gateway",
-  });
-
-  try {
-    // const file = new File(["hello world"], "Testing.txt", { type: "text/plain" });
-
-    // const imageBuffer = fs.readFileSync('meme.png');
-    // const file = new File([imageBuffer], "meme.png", { type: "image/png" });
-
-    const imageUrl = 'https://fal.media/files/elephant/U5kmZoEsQdBx8r7oyBo8C.png';
-    const upload = await pinata.upload.url(imageUrl);
-    console.log(upload);
-
-    console.log("Files on account:", await pinata.listFiles())
-
-    const publicURL = await pinata.gateways.convert(upload.IpfsHash);
-    console.log('publicURL', publicURL)
-  } catch (error) {
-    console.log(error);
-  }
-
-  console.log("Files on account:", await pinata.listFiles())
-}
-
-main().catch(err => {
-  console.error(err);
-});