DEV Community

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

Collapse
 
arealclimber profile image
Lumii • Edited

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=".....
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
    },
})
Enter fullscreen mode Exit fullscreen mode

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)
        }
    }

Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
kingjulien profile image
Abusomwan Santos

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

Thread Thread
 
joninsley profile image
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.

Thread Thread
 
akumthek profile image
akumthek

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

Thread Thread
 
joninsley profile image
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.

Thread Thread
 
hmtri1011 profile image
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!