@chris.paterson
Hello, after I added the space in 'Basic ā like how you mentioned it above, I got a the same 401 unauthorized error as before and
Uncaught (in promise) HTTPError: basic auth failure: invalid project id or project secret
Now I have an invalid project id or project secret. I searched that something similar to this happened before and followed the advice to use ādotenvā from Please help with 'Invalid project id' - #55 by SaifulJnU
and came up with the following code. I also created another IPFS project to use a different project id and project secret. I have a new dedicated gateway name as well.
I now have it showing:
error - ./node_modules/dotenv/lib/main.js:1:0
Module not found: Canāt resolve āfsā
Import trace for requested module:
./pages/create-nft.js
https://nextjs.org/docs/messages/module-not-foun
require('dotenv').config()
console.log(process.env)
const ipfsClient = require('ipfs-http-client');
const projectId = '2HvMYj05gO22Mz5aWh7B8dsizbx';
const projectSecret = process.env.REACT_APP_SECRET_KEY;
const auth = 'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64');
const client = ipfsClient.create({
host: 'ipfs.infura.io',
port: 5001,
protocol: 'https',
headers: {
authorization: auth,
},
});
client.pin.add('QmXQVD875CkTjNoziNfY68G3iz6EbNpmU9eBRC91XDaxaA').then((res) => {
console.log(res);
});
export default function CreateItem() {
const [fileUrl, setFileUrl] = useState(null);//allow ipfs file to upload
const [formInput, updateFormInput] = useState({price: '', name: '', description: ''});
const router = useRouter();//reference to router
//monitor unchanged events
async function onChange(e) {
const file = e.target.files[0]//event to envoke
try{ //try uploading the file
const added = await client.add(//add item source file
file,//pass in file
{
progress: (prog) => console.log(`received: ${prog}`)
}
)
//where file saved to
const url = `https://vivi-project.infura-ipfs.io/ipfs/${added.path}`
setFileUrl(url)//to save it
}catch(e){
console.log('Error uploading the file: ', e)
}
}
//1.function to create item and upload to ipfs
async function createItem(){
const {name, description, price} = formInput; //value from the form input
//form validation
//if no name, description, price, or fileurl, then return const data report
if(!name || !description || !price || !fileUrl) {
return
}
const data = JSON.stringify({
name, description, image: fileUrl
});
try{
const added = await client.add(data)
const url = `https://vivi-project.infura-ipfs.io/ipfs/${added.path}`
//pass the url to save it on Polygon after IPFS upload
createNFTSale(url)
}catch(error){//catch possible errors
console.log(`Error uploading file: `, error)
}
}
//2.Listing item to sell
async function createNFTSale(url){
const web3Modal = new Web3Modal();//connect to user wallet
const connection = await web3Modal.connect();
const provider = new ethers.providers.Web3Provider(connection);
//signing the transaction
const signer = provider.getSigner();
//interact with nft contract
let contract = new ethers.Contract(nftaddress, NFT.abi, signer);
let transaction = await contract.createToken(url);
let tx = await transaction.wait()
/*get the tokenId from above transaction,
events array is returned, the first item from that event
is the event*/
console.log('Transaction: ',tx)
console.log('Transaction events: ',tx.events[0])
let event = tx.events[0]//reference to that array
let value = event.args[2]//third value token id
let tokenId = value.toNumber() //convert value to number
//reference to the price entered in the form
const price = ethers.utils.parseUnits(formInput.price, 'ether')
//connected to nftmarket contract
contract = new ethers.Contract(nftmarketaddress, Market.abi, signer);
//get listing price
let listingPrice = await contract.getListingPrice()
listingPrice = listingPrice.toString()//to send value to contract
//contract to create market item
transaction = await contract.createMarketItem(
nftaddress, tokenId, price, { value: listingPrice }
)
await transaction.wait()
//redirect user to home
router.push('/')
}
!
.