Add Pinata SDK and file upload script

.github/workflows/continuousIntgration.yml

@@ -14,6 +14,9 @@ jobs:
       PUBLIC_DEPLOYMENT_CONTRACT_ID: ${{ vars.PUBLIC_DEPLOYMENT_CONTRACT_ID }}
       PUBLIC_DEPLOYMENT_NFT_TOKEN_ID: ${{ vars.PUBLIC_DEPLOYMENT_NFT_TOKEN_ID }}
       PUBLIC_IPFS_GATEWAY_BASE_URL: ${{ vars.PUBLIC_IPFS_GATEWAY_BASE_URL }}
+      PUBLIC_GATEWAY_URL: ${{ vars.PUBLIC_GATEWAY_URL }}
+      PINATA_GROUP_ID: ${{ secrets,PINATA_GROUP_ID }}
+      PINATA_JWT: ${{ secrets.PINATA_JWT }}
     steps:
       # setup
       - uses: actions/checkout@v4
@@ -40,6 +43,9 @@ jobs:
       PUBLIC_DEPLOYMENT_CONTRACT_ID: ${{ vars.PUBLIC_DEPLOYMENT_CONTRACT_ID }}
       PUBLIC_DEPLOYMENT_NFT_TOKEN_ID: ${{ vars.PUBLIC_DEPLOYMENT_NFT_TOKEN_ID }}
       PUBLIC_IPFS_GATEWAY_BASE_URL: ${{ vars.PUBLIC_IPFS_GATEWAY_BASE_URL }}
+      PUBLIC_GATEWAY_URL: ${{ vars.PUBLIC_GATEWAY_URL }}
+      PINATA_GROUP_ID: ${{ secrets,PINATA_GROUP_ID }}
+      PINATA_JWT: ${{ secrets.PINATA_JWT }}
     steps:
       # setup
       - uses: actions/checkout@v4

frontend/.env.example

@@ -1,6 +1,5 @@
 HEDERA_ACCOUNT_ID=
 HEDERA_PRIVATE_KEY=
-
 # testnet / mainnet
 HEDERA_ENVIRONMENT=
 # the reown (formerly walletconnect) project id used for hashpack
@@ -9,3 +8,7 @@ PUBLIC_HASHCONNECT_PROJECT_ID=3918c43fa2467261721ed00df472e8be
 PUBLIC_DEPLOYMENT_CONTRACT_ID=0.0.5272938
 PUBLIC_DEPLOYMENT_NFT_TOKEN_ID=0.0.5272939
 PUBLIC_IPFS_GATEWAY_BASE_URL=https://flk-ipfs.xyz/ipfs
+# pinata
+PINATA_JWT=
+PINATA_GROUP_ID=
+PUBLIC_GATEWAY_URL=

frontend/package.json

@@ -25,6 +25,7 @@
 		"eslint-plugin-svelte": "^2.46.1",
 		"globals": "^15.13.0",
 		"hashconnect": "^3.0.13",
+		"pinata-web3": "^0.5.3",
 		"prettier": "^3.4.2",
 		"prettier-plugin-css-order": "^2.1.2",
 		"prettier-plugin-organize-imports": "^4.1.0",

frontend/src/lib/pinata/pinata.server.ts

@@ -0,0 +1,8 @@
+import { PINATA_JWT } from '$env/static/private'
+import { PUBLIC_GATEWAY_URL } from '$env/static/public'
+import { PinataSDK } from 'pinata-web3'
+
+export const pinata = new PinataSDK({
+	pinataJwt: PINATA_JWT,
+	pinataGateway: PUBLIC_GATEWAY_URL,
+})

frontend/src/routes/api/pinata/upload/+server.ts

@@ -0,0 +1,49 @@
+// https://docs.pinata.cloud/web3/sdk/getting-started
+
+import { pinata } from '$lib/pinata/pinata.server'
+import { json } from '@sveltejs/kit'
+import type { RequestHandler } from './$types'
+
+import { PINATA_GROUP_ID } from '$env/static/private'
+
+export const POST: RequestHandler = async ({ request }) => {
+	try {
+		const formData = await request.formData()
+
+		// todo we wont need file uplaod in the future, as the image will be generated randomly!
+		const uploadedFile = formData.get('file') as File
+		const metadata = JSON.parse(formData.get('metadata') as string)
+
+		if (!uploadedFile?.name || uploadedFile.size === 0) {
+			return json({ error: 'You must provide a file to upload' }, { status: 400 })
+		}
+
+		// Upload image todo for some reason the group id gets ignored?
+		const imageUpload = await pinata.upload.file(uploadedFile).group(PINATA_GROUP_ID)
+
+		const imageIpfsUrl = `ipfs://${imageUpload.IpfsHash}`
+
+		// Create and upload metadata (containing IPFS image url)
+		const fullMetadata = {
+			...metadata,
+			type: 'image/jpg',
+			format: 'none',
+			image: imageIpfsUrl,
+		}
+
+		// Upload metadata to IPFS
+		const metadataUpload = await pinata.upload.json(fullMetadata)
+		const metadataUrl = `ipfs://${metadataUpload.IpfsHash}`
+
+		return json({
+			imageUrl: await pinata.gateways.convert(imageUpload.IpfsHash),
+			metadataUrl, // this is the only thing that matters id say, and we will pass this as metadata on mint process
+			imageIpfsHash: imageUpload.IpfsHash,
+			metadataIpfsHash: metadataUpload.IpfsHash,
+		})
+	} catch (throwable) {
+		console.error('Upload failed:', throwable)
+		const error = throwable instanceof Error ? throwable : new Error(String(throwable))
+		return json({ error: error.message }, { status: 500 })
+	}
+}