Cloning OpenSea NFT Boilerplate Questions

IAmJaysWay · January 29, 2022, 9:32pm

This seems to be working fine for me, Importing the Button from ant-design :

          {inputValue !== "explore" && (
            <>
              {NFTTokenIds.slice(0, 20).map((nft, index) => (
                <Card
                  hoverable
                  actions={[
                    <Tooltip title="View On Blockexplorer">
                      <FileSearchOutlined
                        onClick={() =>
                          window.open(
                            `${getExplorer(chainId)}address/${
                              nft.token_address
                            }`,
                            "_blank"
                          )
                        }
                      />
                    </Tooltip>,
                    <Tooltip title="Buy NFT">
                      <ShoppingCartOutlined
                        onClick={() => handleBuyClick(nft)}
                      />
                    </Tooltip>,
                  ]}
                  style={{ width: 240, border: "2px solid #e7eaf3" }}
                  cover={
                    <Image
                      preview={false}
                      src={nft.image || "error"}
                      fallback={fallbackImg}
                      alt=""
                      style={{ height: "240px" }}
                    />
                  }
                  key={index}
                >
                  {getMarketItem(nft) && (
                    <Badge.Ribbon text="Buy Now" color="green"></Badge.Ribbon>
                  )}
                  <Meta title={nft.name} description={`#${nft.token_id}`} />
                </Card>
              ))}
              <Button> hi </Button>
            </>
          )}

IAmJaysWay · January 29, 2022, 9:45pm

Hey @Cipher,

Hope we can get you going. Yeah, it doesn’t seem ideal that you are getting those errors when running yarn install not 100% sure whats up with that, but the warnings although don’t look great shouldn’t prevent from running the app, just seems mostly like there are variables that are assigned from the ethereum-boilerplate that are not used in the marketplace

Could you try and get the ethereum-boilerplate (from the time of recording the tutorial) running, as per this post:

If that works at least then you could possibly follow along the tutorial?

IAmJaysWay · January 29, 2022, 9:55pm

Hey @victorfcm,

So your marketplace smart contract is emitting MarketItemCreated events, but you are not able to sync this into your Moralis server DB?

Can you send your marketplace contract address and what chain you deployed it on and if you made any changes to the contract send them over as well

Cipher · January 30, 2022, 6:56am

this is where i have the code from already
https://github.com/ethereum-boilerplate/ethereum-nft-marketplace-boilerplate.

and no it will not work

ennng · January 30, 2022, 7:32am

IAmJaysWay:

{inputValue !== "explore" && (
            <>
              {NFTTokenIds.slice(0, 20).map((nft, index) => (
                <Card
                  hoverable
                  actions={[
                    <Tooltip title="View On Blockexplorer">
                      <FileSearchOutlined
                        onClick={() =>
                          window.open(
                            `${getExplorer(chainId)}address/${
                              nft.token_address
                            }`,
                            "_blank"
                          )
                        }
                      />
                    </Tooltip>,
                    <Tooltip title="Buy NFT">
                      <ShoppingCartOutlined
                        onClick={() => handleBuyClick(nft)}
                      />
                    </Tooltip>,
                  ]}
                  style={{ width: 240, border: "2px solid #e7eaf3" }}
                  cover={
                    <Image
                      preview={false}
                      src={nft.image || "error"}
                      fallback={fallbackImg}
                      alt=""
                      style={{ height: "240px" }}
                    />
                  }
                  key={index}
                >
                  {getMarketItem(nft) && (
                    <Badge.Ribbon text="Buy Now" color="green"></Badge.Ribbon>
                  )}
                  <Meta title={nft.name} description={`#${nft.token_id}`} />
                </Card>
              ))}
              <Button> hi </Button>
            </>
          )}

Thank you for your help, I really appreciate it, if Capital (B) Button it does not work for me? only gave blank page, even though I import Button from react? but when I change it to small letter it works for me. As long as work for me I am happy and to be honest I’ve done a lot modifications in the code and all works fine but only remain this things (loading button) I tried different scenarios but still does not work? what I am assuming that we don’t need a shift parameter, we only require when press button (load more) and call the NFT address it will fetch a new set of NFT (different from that already on the page) lets say at first when click View Collection button, it will load 20 NFT and our load more button it will appear in the end of page, then when press the load more button it should load more 20 NFT that not already on the page, I guess we don’t need to shift parameter as the collection size: on the top of the page shows the right number of collection lets say 100.
What I include now under the load button is:
onPress={() => setInputValue(nft?.addrs)}
// onClick={() => setInputValue(nft?.addrs)}
but both said nft is not defined?
Any idea please. and sorry for long

victorfcm · January 30, 2022, 1:33pm

Hey @IAmJaysWay , my contract is 0x586cB8D1B748d8159496681E9A8F2871Dd099E7a on the Mumbai network.

latok · January 30, 2022, 3:21pm

Is your repository NFT marketplace different to the one on this forum? It seems to run differently and with more options. Does it let anyone create, buy and sell NFT? For example, your instructions don’t say to sync ‘MarketItems’. Thanks

Abmrocha · January 30, 2022, 4:54pm

Hi Team, I follow step by step the video " I Cloned OpenSea in 2 Hours - Building a Cross-Chain NFT Marketplace FULL COURSE" until get this error “Error: This contract object doesn’t have address set yet, please set an address first.” when I am trying to createMarketItem, I debug the contractObject and everything look fine.
My contract is deployed and verified in the Polygon Main Network
0x67CB3e9e5d0EEB7f94DA13D9196A341b65e1d661

My contract is sync with the moralis server AppIDQwk7CMs19oYKaQ25MPJtnnjziI6VxtLfTvnFb4mv

somebody can help me with this issue ? thanks

Thank
Best regard

IAmJaysWay · January 30, 2022, 5:05pm

The Capital letter Button is imported from ant design

As for your onClick event you could try something like this:

//Additions and Modifications in NFTTokenIds.jsx

  const [ limit, setLimit ] = useState(3)    
  const { NFTTokenIds, totalNFTs, fetchSuccess } = useNFTTokenIds(inputValue, limit);

  function moreNFTs() {
    setLimit(limit + 1)
  }.    //make sure you call this function onClick of button

//Modifications in useNFTTokenIds.js

export const useNFTTokenIds = (addr, limit) => { //pass limit param to the hook
 .
 .
 .
  } = useMoralisWeb3ApiCall(token.getAllTokenIds, {
    chain: chainId,
    address: addr,
    limit: limit,     // use limit param here
  });

Hopefully this puts you on the right path I’d also suggest dabbling with the offset param and concatenating fetched NFTs to already fetched NFTs so you dont have to fetch already fetched ones multiple times… just a thought for you

IAmJaysWay · January 30, 2022, 5:09pm

I mean, try starting off with just the base ethereum-boilerplate (https://github.com/ethereum-boilerplate/ethereum-boilerplate) and see if that even works for you and then we can work from there. The instructions in the previous post are to clone the base ethereum-boilerplate used at the time of making the tutorial

IAmJaysWay · January 30, 2022, 5:50pm

Hey @victorfcm,

I was able to sync all your smartcontracts MarketItemCreated() events into Moralis DB like so:

Topic

MarketItemCreated(uint256, address, uint256, address, address, uint256, bool)

ABI

{
  "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"
}

Address

0x586cB8D1B748d8159496681E9A8F2871Dd099E7a

This should work for you as well

@Abmrocha
Could you show what your your list() function looks like in the NFTBalance.jsx file.

Abmrocha · January 30, 2022, 9:32pm

Hi @IAmJaysWay Thanks,
Yes this is my list function.

  async function list(nft, currentPrice){
    const p = currentPrice * ("1e" + 18);
    const ops = {
      contractAdress: marketAddress,
      functionName: listItemFunction,
      abi: contractABIJson,
      params : {
        nftContract: nft.token_address,
        tokenId: nft.token_id,  
        price: String(p)

      }
    };
    await contractProcessor.fetch({

      params: ops,
      onSuccess: () => {
        alert("Item Bougth");
      },
      onError: (error) => {
        alert(error);
        
      }

    })
  }

Cipher · January 30, 2022, 8:22pm

NO it does not work. i am getting the same issues right from the start https://youtu.be/zEmaEjZhSmM
i also tried with version 1.22.17 and get same errors. i have also tried with different node version and still the same.
only way i can make it get past this issue is to do yarn install --ignore-engines

63MoneyT · January 30, 2022, 9:08pm

its exactly the same the react components are re ordered but it works just fine

Abmrocha · January 30, 2022, 9:47pm

Hi @IAmJaysWay

Dont worry about this, now is solved, typo issue in "contractAddress ".

Thanks
Best

Abmrocha · January 30, 2022, 10:38pm

Hi Team

I have a new issue.
Fail with error ‘ERC721: transfer caller is not owner nor approved’

Do you have any idea about what could be the problem ?

My Markertplace Contract address : 0x67CB3e9e5d0EEB7f94DA13D9196A341b65e1d661
I am trying to List an NFT from this collection =>
NFT collection address: 0xe82953BBd215c67ee51D0497dE7B07b2596D7d2F

ennng · January 31, 2022, 8:38am

Thank you
I modified both NFTTokenIds.jsx and useNFTTokenIds.js as above and assign the function to the button but noting happen! for alert is working fine but when call moreNFTs function and press the button noting happen!

<Button
style={{height: ‘70px’, width : ‘200px’,color: “#000”,fontSize:‘18px’}}
title=‘Load more NFT…’
//onClick={()=>{ alert(‘Load more NFT’); }}>Load More
onClick={moreNFTs}>Load More

IAmJaysWay · January 31, 2022, 11:11am

@ennng Try,

onClick={() => moreNFTs()}

IAmJaysWay · January 31, 2022, 11:17am

@Abmrocha,

Make sure you actually have the NFT in you wallet, that you are listing with. Also you may need to manually setApprocalForAll for the smart contract address. A button to approve an NFT, before listing is updated in the final boilerplate.

ennng · January 31, 2022, 11:25am

I tried but still nothing! when pressed the button