diff --git a/apps/web/.env.example b/apps/web/.env.example index 5435ba1..636a4eb 100644 --- a/apps/web/.env.example +++ b/apps/web/.env.example @@ -5,4 +5,7 @@ NODE_ENV="development" NEXT_PUBLIC_STARKNETKIT_PROJECT_ID=abc123 NEXTAUTH_SECRET=secret NEXT_PUBLIC_BASE_URL=/ -NEXT_PUBLIC_SIGNER_ADDRESS=0x123 \ No newline at end of file +NEXT_PUBLIC_SIGNER_ADDRESS=0x123 + +PINATA_JWT= +NEXT_PUBLIC_GATEWAY_URL= \ No newline at end of file diff --git a/apps/web/package.json b/apps/web/package.json index 712966c..77d993a 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -37,6 +37,7 @@ "i18next": "^23.15.1", "next": "^14.2.4", "next-auth": "^4.24.7", + "pinata-web3": "^0.5.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-i18next": "^15.0.2", diff --git a/apps/web/src/app/api/files/route.ts b/apps/web/src/app/api/files/route.ts new file mode 100644 index 0000000..f933d5c --- /dev/null +++ b/apps/web/src/app/api/files/route.ts @@ -0,0 +1,18 @@ +import { NextResponse, type NextRequest } from "next/server"; +import { pinata } from '../../../utils/pinata' + +export async function POST(request: NextRequest) { + try { + const data = await request.formData(); + const file: File | null = data.get("file") as unknown as File; + const uploadData = await pinata.upload.file(file) + const url = await pinata.gateways.convert(uploadData.IpfsHash) + return NextResponse.json(url, { status: 200 }); + } catch (e) { + console.log(e); + return NextResponse.json( + { error: "Internal Server Error" }, + { status: 500 } + ); + } +} diff --git a/apps/web/src/utils/pinata.ts b/apps/web/src/utils/pinata.ts new file mode 100644 index 0000000..91dd38f --- /dev/null +++ b/apps/web/src/utils/pinata.ts @@ -0,0 +1,15 @@ +"server only" + +import { PinataSDK } from 'pinata-web3' + +export const pinata = new PinataSDK({ + pinataJwt: `${process.env.PINATA_JWT}`, + pinataGateway: `${process.env.NEXT_PUBLIC_GATEWAY_URL}` +}) + +// To get the client side form implementation of file uploads to pinata: +// Visit the url: https://docs.pinata.cloud/frameworks/next-js-ipfs#create-client-side-form + +// If file size limitation is crossed consistently and there is need to upload more than the limit +// then this implementation can be changed to follow the guide: +// https://www.pinata.cloud/blog/how-to-upload-to-ipfs-from-the-frontend-with-signed-jwts/ diff --git a/bun.lockb b/bun.lockb index 87450c3..2bacc1d 100755 Binary files a/bun.lockb and b/bun.lockb differ