Discussion on: How to Build a Full Stack NFT Marketplace - V2 (2022)

[arielbk]

I ran into issues with Infura, and with ipfs http server.

Infura requires you to create a billable account to use Polygon now, and you'll need to make another project on there for the IPFS part to get a project id and key specifically for IPFS.

After reading docs, I ended up going with the latest version of ipfs http server (^55.0.0 at time of writing) and doing the following:

import { create } from 'ipfs-http-client'

const projectId = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_ID
const projectSecret = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET
const projectIdAndSecret = `${projectId}:${projectSecret}`

const client = create({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: `Basic ${Buffer.from(projectIdAndSecret).toString(
      'base64'
    )}`,
  },
})

I guess things are changing quickly! 😄

[Bas]

Could you please show an example text on how to get this in the code? I don´t really understand it. I think I´m having the IPFS problems as well.

[Lumii]

Thank you @arielbk! Really helpful!

I'll supplement some details.

First, put the infura personal project id and project secret to .env and make sure to add .env to .gitignore:

INFURA_IPFS_PROJECT_ID="....."
INFURA_IPFS_PROJECT_SECRET=".....

Second, set env in next.config.js:

const nextConfig = {
    reactStrictMode: true,
    env: {
        INFURA_IPFS_PROJECT_ID: process.env.INFURA_IPFS_PROJECT_ID,
        INFURA_IPFS_PROJECT_SECRET: process.env.INFURA_IPFS_PROJECT_SECRET,
    },
}

module.exports = nextConfig

Third, change the code in create-item.js

The import and const:

import { create } from 'ipfs-http-client'

const projectId = process.env.INFURA_IPFS_PROJECT_ID
const projectSecret = process.env.INFURA_IPFS_PROJECT_SECRET
const projectIdAndSecret = `${projectId}:${projectSecret}`
const auth = `Basic ${Buffer.from(projectIdAndSecret).toString('base64')}`

const client = create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
        authorization: auth,
    },
})

And in the function CreateItem():

    async function onChange(e) {

        const file = e.target.files[0]
        try {
            const added = await client.add(file, {
                progress: (prog) => console.log(`received: ${prog}`),
            })

            const url = `https://ipfs.infura.io/ipfs/${added.path}`

            client.pin.add(added.path).then((res) => {
                console.log(res)
                setFileUrl(url)
            })
        } catch (error) {
            console.log('Error uploading file: ', error)
        }
    }

    async function createItem() {
        const { name, description, price } = formInput
        if (!name || !description || !price || !fileUrl) return
        /* first, upload to IPFS */
        const data = JSON.stringify({
            name,
            description,
            image: fileUrl,
        })

        try {
            const added = await client.add(data)

            const url = `https://ipfs.infura.io/ipfs/${added.path}`
            // after file is uploaded to IPFS, pass the URL to save it on Polygon
            createSale(url)
        } catch (error) {
            console.log('Error uploading file: ', error)
        }
    }

[Abusomwan Santos]

Hey, I tried everything here but I get message: "Request failed with status code 400"

[J.Ins]

Do the suggestion above with the Auth header and also...

In your Infura IPFS Project, enable the dedicated gateway then replace:

const url = https://ipfs.infura.io/ipfs/${added.path}

const url = https://DEDICATED_GATEWAY_URL/ipfs/${added.path}

This requires a credit card on file on Infura.

[akumthek]

Does this solution take care of creating an IPFS project (giving credit card info) ??? i dont see how.

[J.Ins]

Yes because it allows you to use the dedicated gateway which gives you a URL like - nftmarketplace.infura-ipfs.io. Otherwise the old way in the tutorial no longer works on Infura.

[Tri Hoang]

Hi @arealclimber and @joninsley appreciated, able to run the flow, but may I know what is the differences between client.add and client.pin.add.

Thanks so much!

[Jan Z]

I ended up signing up for an account at maticvigil.com which doesn't need a credit card

[akumthek]

and so how do the IPFS API url s change? do they also use Projet ID and secret KEY stuff? This will be immensely useful.............thanks in advance

[Samreen Kazi]

Hey, can you please show an example on how you did that ?

[Legendary Phoenix]

Thanks @arielbk, The public IPFS gateway was deprecated by INFURA in August 10 2022.

Please read the details here.

I've created the PR for uploading Files on IPFS using Pinata Gateway.
It's absolutely free to create your own project on Pinata and you can get the key pairs for your project.