The Nft market boiler plate is broken, I think. I do it as it is in the video and when I do yarn start it says the page Error: A cross-origina error was thrown. React doesn’t have access to the actual error object in development…
Hi i have exactly same problem
Actually, it’s not broken. You haven’t provided ABI and contract address. Please follow all steps in https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate#-quick-start
1 Like
I added the ABI and contract address and still have the same error messages as the others. Did anyone get this working?
Please share your useMoralisDapp code
import React, { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import MoralisDappContext from "./context";
function MoralisDappProvider({ children }) {
const abiFull = [
{
inputs: [
{
internalType: "string",
name: "name_",
type: "string",
},
{
internalType: "string",
name: "symbol_",
type: "string",
},
],
stateMutability: "nonpayable",
type: "constructor",
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: "address",
name: "owner",
type: "address",
},
{
indexed: true,
internalType: "address",
name: "approved",
type: "address",
},
{
indexed: true,
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "Approval",
type: "event",
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: "address",
name: "owner",
type: "address",
},
{
indexed: true,
internalType: "address",
name: "operator",
type: "address",
},
{
indexed: false,
internalType: "bool",
name: "approved",
type: "bool",
},
],
name: "ApprovalForAll",
type: "event",
},
{
anonymous: false,
inputs: [
{
indexed: true,
internalType: "address",
name: "from",
type: "address",
},
{
indexed: true,
internalType: "address",
name: "to",
type: "address",
},
{
indexed: true,
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "Transfer",
type: "event",
},
{
inputs: [
{
internalType: "address",
name: "to",
type: "address",
},
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "approve",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "owner",
type: "address",
},
],
name: "balanceOf",
outputs: [
{
internalType: "uint256",
name: "",
type: "uint256",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "getApproved",
outputs: [
{
internalType: "address",
name: "",
type: "address",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "owner",
type: "address",
},
{
internalType: "address",
name: "operator",
type: "address",
},
],
name: "isApprovedForAll",
outputs: [
{
internalType: "bool",
name: "",
type: "bool",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [],
name: "name",
outputs: [
{
internalType: "string",
name: "",
type: "string",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "ownerOf",
outputs: [
{
internalType: "address",
name: "",
type: "address",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "from",
type: "address",
},
{
internalType: "address",
name: "to",
type: "address",
},
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "safeTransferFrom",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "from",
type: "address",
},
{
internalType: "address",
name: "to",
type: "address",
},
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
{
internalType: "bytes",
name: "_data",
type: "bytes",
},
],
name: "safeTransferFrom",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "operator",
type: "address",
},
{
internalType: "bool",
name: "approved",
type: "bool",
},
],
name: "setApprovalForAll",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
{
inputs: [
{
internalType: "bytes4",
name: "interfaceId",
type: "bytes4",
},
],
name: "supportsInterface",
outputs: [
{
internalType: "bool",
name: "",
type: "bool",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [],
name: "symbol",
outputs: [
{
internalType: "string",
name: "",
type: "string",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "tokenURI",
outputs: [
{
internalType: "string",
name: "",
type: "string",
},
],
stateMutability: "view",
type: "function",
},
{
inputs: [
{
internalType: "address",
name: "from",
type: "address",
},
{
internalType: "address",
name: "to",
type: "address",
},
{
internalType: "uint256",
name: "tokenId",
type: "uint256",
},
],
name: "transferFrom",
outputs: [],
stateMutability: "nonpayable",
type: "function",
},
];
const { web3, Moralis, user } = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();
const [contractABI, setContractABI] = useState(abiFull); //Smart Contract ABI here
const [marketAddress, setMarketAddress] = useState(
"0x884B411f254b32BBC298A158a9e204c406703376"
); //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 };
I put the entire ABI object in the contractABI initial state and the contract address as a string
Sorry about that. Fixed in the edit.
I was able to install and build the other boilerplates, but this one always breaks for me: https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate
update:
It now compiles. Looks like you need to strip all the extra characters out of the ABI before pasting it in the useState initialization. The way the ABI comes from straight from copy-to-clipboard from remix will not work. Now it runs but gets a lot of other errors reported in the developer tools…
Screenshot to show that the app us up and running, but there are console errors trying to fetch the usemoralis.com functions.
In my case, after npm run deploy the smart contracts, I resolved this by modifying MoralisDappProvider.js like:
import abi from "../../contracts/contractInfo.json";
...
const [contractABI, setContractABI] = useState(JSON.stringify(abi.abi));
const [marketAddress, setMarketAddress] = useState("0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF"); //Smart Contract Address Here
Are you using the dafault contractInfo.json
I still couldnt fugure out how the abi has to be used.
Any pointers please ?
I am following the ethereum-boilerplate-NFT-Marketplace ReadMe.
Have obtained the address and ABI (json) and tested with sync in the server Instance details.
How to enter the ABI and Addesss in the moralisDappprovider.js
const [contractABI, setContractABI] = useState();
const [marketAddress, setMarketAddress] = useState();
Hey @RolNFT the ABI don’t need to be stored in state as it will never change
and for marketAddress for starter you can hardcode it (without any state as well)
and with those you can use them to call smart contract with Moralis.executeFunction
However, I don’t think moralisDappProvider will be the best place to call them, rather the page/component where it is needed will be better 
Hey Yomoo
I’m actually having trouble at this step.
How do I proceed to do this and deploy the contract?