Can you try resetting your MetaMask account; Settings > Advanced > Reset Account.
Can you also post some of the transaction hashes or the wallet address(es) which were involved.
i reseted the accounts , should i reset all the accounts or the account from which i am triggering the list NFT function?
These are some of the transaction hashes
0xb6d99917aef837ba692bf3b6c04f3bbdb51014b32d8d0f1a269b5c881e91c658
0xf771a95fe8071bdf8ad2e62ae04e03b264b7a39f649226f34db100b81a12c0b8
0x255898fafa0bfe46c2bd2f6b3d4e353588dbd7f992ac514d6c846379dda88531
okay so i found the error and it says. Even though i can set the approval
this is the smart contract ABI i’m using , It’s the same as the tutorial.
[
{
“inputs”: [
{
“internalType”: “address”,
“name”: “nftContract”,
“type”: “address”
},
{
“internalType”: “uint256”,
“name”: “tokenId”,
“type”: “uint256”
},
{
“internalType”: “uint256”,
“name”: “price”,
“type”: “uint256”
}
],
“name”: “createMarketItem”,
“outputs”: [],
“stateMutability”: “payable”,
“type”: “function”
},
{
“inputs”: [
{
“internalType”: “address”,
“name”: “nftContract”,
“type”: “address”
},
{
“internalType”: “uint256”,
“name”: “itemId”,
“type”: “uint256”
}
],
“name”: “createMarketSale”,
“outputs”: [],
“stateMutability”: “payable”,
“type”: “function”
},
{
“inputs”: [],
“stateMutability”: “nonpayable”,
“type”: “constructor”
},
{
“anonymous”: false,
“inputs”: [
{
“indexed”: true,
“internalType”: “uint256”,
“name”: “itemId”,
“type”: “uint256”
},
{
“indexed”: true,
“internalType”: “address”,
“name”: “nftContract”,
“type”: “address”
},
{
“indexed”: true,
“internalType”: “uint256”,
“name”: “tokenId”,
“type”: “uint256”
},
{
“indexed”: false,
“internalType”: “address”,
“name”: “seller”,
“type”: “address”
},
{
“indexed”: false,
“internalType”: “address”,
“name”: “owner”,
“type”: “address”
},
{
“indexed”: false,
“internalType”: “uint256”,
“name”: “price”,
“type”: “uint256”
},
{
“indexed”: false,
“internalType”: “bool”,
“name”: “sold”,
“type”: “bool”
}
],
“name”: “MarketItemCreated”,
“type”: “event”
},
{
“anonymous”: false,
“inputs”: [
{
“indexed”: true,
“internalType”: “uint256”,
“name”: “itemId”,
“type”: “uint256”
},
{
“indexed”: false,
“internalType”: “address”,
“name”: “owner”,
“type”: “address”
}
],
“name”: “MarketItemSold”,
“type”: “event”
},
{
“inputs”: [],
“name”: “fetchMarketItems”,
“outputs”: [
{
“components”: [
{
“internalType”: “uint256”,
“name”: “itemId”,
“type”: “uint256”
},
{
“internalType”: “address”,
“name”: “nftContract”,
“type”: “address”
},
{
“internalType”: “uint256”,
“name”: “tokenId”,
“type”: “uint256”
},
{
“internalType”: “address payable”,
“name”: “seller”,
“type”: “address”
},
{
“internalType”: “address payable”,
“name”: “owner”,
“type”: “address”
},
{
“internalType”: “uint256”,
“name”: “price”,
“type”: “uint256”
},
{
“internalType”: “bool”,
“name”: “sold”,
“type”: “bool”
}
],
“internalType”: “struct marketPlaceBoilerPlate.MarketItem[]”,
“name”: “”,
“type”: “tuple[]”
}
],
“stateMutability”: “view”,
“type”: “function”
},
{
“inputs”: [],
“name”: “owner”,
“outputs”: [
{
“internalType”: “address”,
“name”: “”,
“type”: “address”
}
],
“stateMutability”: “view”,
“type”: “function”
}
]
Quick Update -:
I fixed all the error and I’m so glad that everything out. Thank you so much for all the help you all guys offered when asked, Thanks lads really appreciate it.
So I created my smart contract from the ethereum-nft-marketplace-boilerplate & deployed it to BSC. But when I went to enter in the contract ABI in string format in the MoralisDappProvider.js file with the contract address, my app suddenly switches to an all white screen. There are no errors popping up, & the Visual Studio Code is showing no errors either. What do I have to do to fix this? This is basically the final step in the app & for some reason it just stopped working & is giving me blank white screen. Anyone know how to fix it?
So it was working before you put in your own contract details?
Can we see your MoralisDappProvider.js in code.
1 Like
import React, { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import MoralisDappContext from "./context";
function MoralisDappProvider({ children }) {
const { web3, Moralis, user } = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();
const [contractABI, setContractABI] = useState('{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"uint256","name":"price","type":"uint256"}],"name":"createMarketItem","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"itemId","type":"uint256"}],"name":"createMarketSale","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":true,"internalType":"address","name":"nftContract","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"},{"indexed":false,"internalType":"address","name":"seller","type":"address"},{"indexed":false,"internalType":"address","name":"owner","type":"address"},{"indexed":false,"internalType":"uint256","name":"price","type":"uint256"},{"indexed":false,"internalType":"bool","name":"sold","type":"bool"}],"name":"MarketItemCreated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":false,"internalType":"address","name":"owner","type":"address"}],"name":"MarketItemSold","type":"event"},{"inputs":[],"name":"fetchMarketItems","outputs":[{"components":[{"internalType":"uint256","name":"itemId","type":"uint256"},{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"address payable","name":"seller","type":"address"},{"internalType":"address payable","name":"owner","type":"address"},{"internalType":"uint256","name":"price","type":"uint256"},{"internalType":"bool","name":"sold","type":"bool"}],"internalType":"struct BETTASea.MarketItem[]","name":"","type":"tuple[]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function": true}'); //Smart Contract ABI here
const [marketAddress, setMarketAddress] = useState("0x0fED9EE31e059b760B341e8596117DeCF9f216a3"); //Smart Contract Address Here
useEffect(() => {
Moralis.onChainChanged(function (chain) {
setChainId(chain);
});
Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => setChainId(web3.givenProvider?.chainId));
useEffect(
() => setWalletAddress(web3.givenProvider?.selectedAddress || user?.get("ethAddress")),
[web3, user]
);
return (
<MoralisDappContext.Provider value={{ walletAddress, chainId, marketAddress, setMarketAddress, contractABI, setContractABI }}>
{children}
</MoralisDappContext.Provider>
);
}
function useMoralisDapp() {
const context = React.useContext(MoralisDappContext);
if (context === undefined) {
throw new Error("useMoralisDapp must be used within a MoralisDappProvider");
}
return context;
}
export { MoralisDappProvider, useMoralisDapp };
Yeah it was working fine before with this code
import React, { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import MoralisDappContext from "./context";
function MoralisDappProvider({ children }) {
const { web3, Moralis, user } = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();
const [contractABI, setContractABI] = useState('{"noContractDeployed": true}'); //Smart Contract ABI here
const [marketAddress, setMarketAddress] = useState(); //Smart Contract Address Here
useEffect(() => {
Moralis.onChainChanged(function (chain) {
setChainId(chain);
});
Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => setChainId(web3.givenProvider?.chainId));
useEffect(
() => setWalletAddress(web3.givenProvider?.selectedAddress || user?.get("ethAddress")),
[web3, user]
);
return (
<MoralisDappContext.Provider value={{ walletAddress, chainId, marketAddress, setMarketAddress, contractABI, setContractABI }}>
{children}
</MoralisDappContext.Provider>
);
}
function useMoralisDapp() {
const context = React.useContext(MoralisDappContext);
if (context === undefined) {
throw new Error("useMoralisDapp must be used within a MoralisDappProvider");
}
return context;
}
export { MoralisDappProvider, useMoralisDapp };
Your code definitely results in errors, you need to check the browser console.
There is an issue with your ABI on its own, you need the full ABI JSON. You need to copy it in properly as well, there seems to be a random true at the end.
This is a working example (no errors anyway).
const [contractABI, setContractABI] = useState('[{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"uint256","name":"price","type":"uint256"}],"name":"createMarketItem","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"itemId","type":"uint256"}],"name":"createMarketSale","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":true,"internalType":"address","name":"nftContract","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"},{"indexed":false,"internalType":"address","name":"seller","type":"address"},{"indexed":false,"internalType":"address","name":"owner","type":"address"},{"indexed":false,"internalType":"uint256","name":"price","type":"uint256"},{"indexed":false,"internalType":"bool","name":"sold","type":"bool"}],"name":"MarketItemCreated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":false,"internalType":"address","name":"owner","type":"address"}],"name":"MarketItemSold","type":"event"},{"inputs":[],"name":"fetchMarketItems","outputs":[{"components":[{"internalType":"uint256","name":"itemId","type":"uint256"},{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"address payable","name":"seller","type":"address"},{"internalType":"address payable","name":"owner","type":"address"},{"internalType":"uint256","name":"price","type":"uint256"},{"internalType":"bool","name":"sold","type":"bool"}],"internalType":"struct BETTASea.MarketItem[]","name":"","type":"tuple[]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"}]');
const [marketAddress, setMarketAddress] = useState('0x0fED9EE31e059b760B341e8596117DeCF9f216a3');
1 Like
Yeah I fixed it your solution works perfect thank you!
Can I add this function to my already deployed boilerplate smart contract or do I need to make a whole new contract & add this function to it? I was unaware of the need for it until Posting an NFT on my marketplace. Also, is there any way to sort the collections by say their serial number or for sale price? When I go to each projects page, random NFTs are displayed from each collection, id like to have users be able to sort by price or serial number if possible. Other than that the project is ready to go. All the collections are rendering properly & the front end marketplace responds exactly to what is being done on the blockchain with the help of moralis.
You will need to make a new contract unless it was built as an upgradeable one.
I’m not sure what you mean by serial number, but for sorting collections in Explore Market by say token IDs, in hooks\useNFTTokenIds.jsx:
replace
const NFTs = data.result;
with
const NFTs = data.result.sort((a, b) => b.token_id - a.token_id);
For price there’s at least two options; change the data source from the API to only market item events or filter all of the results by market item token_ids, and then do a similar sort as above.
1 Like
import { ContactsOutlined } from "@ant-design/icons";
import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";
import { useEffect, useState } from "react";
import { useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis";
import { useIPFS } from "./useIPFS";
export const useNFTTokenIds = (addr) => {
const { token } = useMoralisWeb3Api();
const { chainId } = useMoralisDapp();
const { resolveLink } = useIPFS();
const [NFTTokenIds, setNFTTokenIds] = useState([]);
const [totalNFTs, setTotalNFTs] = useState();
const [fetchSuccess, setFetchSuccess] = useState(true);
const {
fetch: getNFTTokenIds,
data,
error,
isLoading,
} = useMoralisWeb3ApiCall(token.getAllTokenIds, {
chain: chainId,
address: addr,
limit: 20,
});
useEffect(async () => {
if (data?.result) {
const NFTs = data.result.sort((a, b) => b.token_id - a.token_id);
setTotalNFTs(data.total);
setFetchSuccess(true);
for (let NFT of NFTs) {
if (NFT?.metadata) {
NFT.metadata = JSON.parse(NFT.metadata);
NFT.image = resolveLink(NFT.metadata?.image);
} else if (NFT?.token_uri) {
try {
await fetch(NFT.token_uri)
.then((response) => response.json())
.then((data) => {
NFT.image = resolveLink(data.image);
});
} catch (error) {
setFetchSuccess(false);
/* !!Temporary work around to avoid CORS issues when retrieving NFT images!!
Create a proxy server as per https://dev.to/terieyenike/how-to-create-a-proxy-server-on-heroku-5b5c
Replace <your url here> with your proxy server_url below
Remove comments :)
try {
await fetch(`<your url here>/${NFT.token_uri}`)
.then(response => response.json())
.then(data => {
NFT.image = resolveLink(data.image);
});
} catch (error) {
setFetchSuccess(false);
}
*/
}
}
}
setNFTTokenIds(NFTs);
}
}, [data]);
return {
getNFTTokenIds,
NFTTokenIds,
totalNFTs,
fetchSuccess,
error,
isLoading,
};
};
I wasnt able to get them to sort this way in the useNFTTokenIDs.jsx file provided above, any suggestions? I think the second solution you proposed would be the preferred option though. Could you explain in a little more detail how I could do this?
“For price there’s at least two options; change the data source from the API to only market item events or filter all of the results by market item token_ids, and then do a similar sort as above”
It does go in numerical order, but it goes in descending order instead of ascending, and its just random numbers. No problem leaving it random, but id like to have the user be able to sort by NFTs for sale, or by price or token id. How will people be able to use the marketplace if there is no organization or filters? Like once a item is listed, how will users find what’s available & what its price is?
Good Day to all!
Was hoping someone around here may be able to help me out-I have the boilerplate that I am attempting to ‘deconstruct’.
I have the NFTBalance.jsx here and was hoping someone, anyone, would be so kind as to provide assistance.
The idea is to list their ERC721 from our collection (or encourage them to mint if they don’t have one)
Underneath split in two columns listing any ERC1155’s they have purchased from our collection Collection 1 in Column 1 and collection 2 in column 2.
I have been coding so much over the weekend my mind has turned to mush!
import React, { useState } from "react";
import { useMoralis, useNFTBalances } from "react-moralis";
import { Card, Image, Tooltip, Modal, Input, Skeleton } from "antd";
import { FileSearchOutlined, SendOutlined, ShoppingCartOutlined } from "@ant-design/icons";
import { getExplorer } from "helpers/networks";
import AddressInput from "./AddressInput";
import { useVerifyMetadata } from "hooks/useVerifyMetadata";
const { Meta } = Card;
const styles = {
NFTs: {
display: "flex",
flexWrap: "wrap",
WebkitBoxPack: "start",
justifyContent: "flex-start",
margin: "0 auto",
maxWidth: "1000px",
width: "100%",
gap: "10px",
},
};
function NFTBalance() {
const { data: NFTBalances } = useNFTBalances();
const { Moralis, chainId } = useMoralis();
const [visible, setVisibility] = useState(false);
const [receiverToSend, setReceiver] = useState(null);
const [amountToSend, setAmount] = useState(null);
const [nftToSend, setNftToSend] = useState(null);
const [isPending, setIsPending] = useState(false);
const { verifyMetadata } = useVerifyMetadata();
async function transfer(nft, amount, receiver) {
const options = {
type: nft.contract_type,
tokenId: nft.token_id,
receiver: receiver,
contractAddress: nft.token_address,
};
if (options.type === "erc1155") {
options.amount = amount;
}
setIsPending(true);
await Moralis.transfer(options)
.then((tx) => {
console.log(tx);
setIsPending(false);
})
.catch((e) => {
alert(e.message);
setIsPending(false);
});
}
const handleTransferClick = (nft) => {
setNftToSend(nft);
setVisibility(true);
};
const handleChange = (e) => {
setAmount(e.target.value);
};
console.log("NFTBalances", NFTBalances);
return (
<div style={{ padding: "15px", maxWidth: "1030px", width: "100%" }}>
<h1>🖼 NFT Balances</h1>
<div style={styles.NFTs}>
<Skeleton loading={!NFTBalances?.result}>
{NFTBalances?.result &&
NFTBalances.result.map((nft, index) => {
//Verify Metadata
nft = verifyMetadata(nft);
return (
<Card
hoverable
actions={[
<Tooltip title="View On Blockexplorer">
<FileSearchOutlined
onClick={() => window.open(`${getExplorer(chainId)}address/${nft.token_address}`, "_blank")}
/>
</Tooltip>,
<Tooltip title="Transfer NFT">
<SendOutlined onClick={() => handleTransferClick(nft)} />
</Tooltip>,
<Tooltip title="Sell On OpenSea">
<ShoppingCartOutlined onClick={() => alert("OPENSEA INTEGRATION COMING!")} />
</Tooltip>,
]}
style={{ width: 240, border: "2px solid #e7eaf3" }}
cover={
<Image
preview={false}
src={nft?.image || "error"}
fallback="data:image/png;base64,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"
alt=""
style={{ height: "240px" }}
/>
}
key={index}
>
<Meta title={nft.name} description={nft.token_address} />
</Card>
);
})}
</Skeleton>
</div>
<Modal
title={`Transfer ${nftToSend?.name || "NFT"}`}
visible={visible}
onCancel={() => setVisibility(false)}
onOk={() => transfer(nftToSend, amountToSend, receiverToSend)}
confirmLoading={isPending}
okText="Send"
>
<AddressInput autoFocus placeholder="Receiver" onChange={setReceiver} />
{nftToSend && nftToSend.contract_type === "erc1155" && (
<Input placeholder="amount to send" onChange={(e) => handleChange(e)} />
)}
</Modal>
</div>
);
}
export default NFTBalance;
Hello everyone
It’s been 3 days since I’m here and after reading all your messages, your solution didn’t work for me. My problem is that I can sell my NFT, but no purchases are possible and I don’t have the green badge and no trace of the transaction…
While I can see the transaction with the market contract and the NFT is well inside and I also see the transaction on the dashboard…
I have to tell you that I am on Cronos
Thanks.
It does go in numerical order, but it goes in descending order instead of ascending
To use ascending, just swap a and b.
const NFTs = data.result.sort((a, b) => a.token_id - b.token_id);
id like to have the user be able to sort by NFTs for sale, or by price or token id.
You can sort with these parameters using similar sort code. You would just have buttons or options that trigger it to re-render the component.
its just random numbers
By default the collection data is being pulled from the API and it doesn’t return them in order i.e. based on descending tokenIds.
If you want the entire collection available, you could try syncing all NFT metadata to your server, and then you could filter based on market item events (e.g. if it’s for sale or not).
You can provide all details for both your contracts (token and marketplace) - addresses, ABIs so a solution can be started on.
What is the error? It is not in your screenshot.
Which solution are you referring to?
Check that you are getting events synced to your server so the state is reflected in your app. Also Cronos integration is still quite new so there may be some issues.
