Cloning OpenSea NFT Boilerplate Questions

Moralis General
#752

Sorry, thanks for your time and your help


#753

Read this on how to change the limit of 20.

For that NFT, check the sale status in your server under its related MarketItem object. The code says it should display a Buy option if sold is false and confirmed is true.

#754

Capture d’écran 2022-06-07 005459

For the limit i use state

#755

If you want to change the collection display limit of 20 you will need to remove slice(0, 20). in that file.

#756

I don’t know in which part of the code to see “true or false”

#757

Check your Moralis server dashboard’s MarketItem (or equivalent) for the row related to the NFT you sold, and check the “sold” column.

#758

Ok ser that is ok but dont work


#759

import React, { useState, useEffect } from “react”;

import { getNativeByChain } from “helpers/networks”;

import { getCollectionsByChain } from “helpers/collections”;

import { useMoralis, useMoralisQuery, useNewMoralisObject, } from “react-moralis”;

import { Card, Image, Tooltip, Modal, Badge, Alert, Spin } from “antd”;

import { useNFTTokenIds } from “hooks/useNFTTokenIds”;

import { FileSearchOutlined, RightCircleOutlined, ShoppingCartOutlined, } from “@ant-design/icons”;

import { useMoralisDapp } from “providers/MoralisDappProvider/MoralisDappProvider”;

import { getExplorer } from “helpers/networks”;

import { useWeb3ExecuteFunction } from “react-moralis”;

const { Meta } = Card;

const styles = {

NFTs: {

display: "flex",

flexWrap: "wrap",

WebkitBoxPack: "start",

justifyContent: "flex-start",

margin: "0 auto",

maxWidth: "1000px",

gap: "10px",

},

banner: {

display: "flex",

justifyContent: "space-evenly",

alignItems: "center",

margin: "0 auto",

width: "600px",

borderRadius: "10px",

height: "150px",

marginBottom: "40px",

paddingBottom: "20px",

borderBottom: "solid 1px #e3e3e3",

},

logo: {

height: "115px",

width: "115px",

borderRadius: "50%",

positon: "relative",

// marginTop: "-80px",

border: "solid 4px white",

},

text: {

color: "white",

fontSize: "27px",

fontWeight: "bold",

},

};

function NFTTokenIds({ inputValue, setInputValue }) {

const fallbackImg =

"data:image/png;base64,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";

const { NFTTokenIds, totalNFTs, fetchSuccess } = useNFTTokenIds(inputValue);

const [visible, setVisibility] = useState(false);

const [nftToBuy, setNftToBuy] = useState(null);

const [loading, setLoading] = useState(false);

const contractProcessor = useWeb3ExecuteFunction();

const { chainId, marketAddress, contractABI, walletAddress } =

useMoralisDapp();

const nativeName = getNativeByChain(chainId);

const contractABIJson = JSON.parse(contractABI);

const { Moralis } = useMoralis();

const queryMarketItems = useMoralisQuery(“MarketItems”);

const fetchMarketItems = JSON.parse(

JSON.stringify(queryMarketItems.data, [

  "objectId",

  "createdAt",

  "price",

  "nftContract",

  "itemId",

  "sold",

  "tokenId",

  "seller",

  "owner",

  "confirmed",

])

);

const purchaseItemFunction = “createMarketSale”;

const NFTCollections = getCollectionsByChain(chainId);

async function purchase() {

setLoading(true);

const tokenDetails = getMarketItem(nftToBuy);

const itemID = tokenDetails.itemId;

const tokenPrice = tokenDetails.price;

const ops = {

  contractAddress: marketAddress,

  functionName: purchaseItemFunction,

  abi: contractABIJson,

  params: {

    nftContract: nftToBuy.token_address,

    itemId: itemID,

  },

  msgValue: tokenPrice,

};

await contractProcessor.fetch({

  params: ops,

  onSuccess: () => {

    console.log("success");

    setLoading(false);

    setVisibility(false);

    updateSoldMarketItem();

    succPurchase();

  },

  onError: (error) => {

    setLoading(false);

    failPurchase();

  },

});

}

const handleBuyClick = (nft) => {

setNftToBuy(nft);

console.log(nft.image);

setVisibility(true);

};

function succPurchase() {

let secondsToGo = 5;

const modal = Modal.success({

  title: "Success!",

  content: `You have purchased this NFT`,

});

setTimeout(() => {

  modal.destroy();

}, secondsToGo * 1000);

}

function failPurchase() {

let secondsToGo = 5;

const modal = Modal.error({

  title: "Error!",

  content: `There was a problem when purchasing this NFT`,

});

setTimeout(() => {

  modal.destroy();

}, secondsToGo * 1000);

}

async function updateSoldMarketItem() {

const id = getMarketItem(nftToBuy).objectId;

const marketList = Moralis.Object.extend("MarketItems");

const query = new Moralis.Query(marketList);

await query.get(id).then((obj) => {

  obj.set("sold", true);

  obj.set("owner", walletAddress);

  obj.save();

});

}

const getMarketItem = (nft) => {

const result = fetchMarketItems?.find(

  (e) =>

    e.nftContract === nft?.token_address &&

    e.tokenId === nft?.token_id &&

    e.sold === false &&

    e.confirmed === true

);

return result;

};

return (

<>

  <div>

    {contractABIJson.noContractDeployed && (

      <>

        <Alert

          message="No Smart Contract Details Provided. Please deploy smart contract and provide address + ABI in the MoralisDappProvider.js file"

          type="error"

        />

        <div style={{ marginBottom: "10px" }}></div>

      </>

    )}

    {inputValue !== "explore" && totalNFTs !== undefined && (

      <>

        {!fetchSuccess && (

          <>

            <Alert

              message="Unable to fetch all NFT metadata... We are searching for a solution, please try again later!"

              type="warning"

            />

            <div style={{ marginBottom: "10px" }}></div>

          </>

        )}

        <div style={styles.banner}>

          <Image

            preview={false}

            src={NFTTokenIds[0]?.image || "error"}

            fallback={fallbackImg}

            alt=""

            style={styles.logo}

          />

          <div style={styles.text}>

            <>

              <div>{`${NFTTokenIds[0]?.name}`}</div>

              <div

                style={{

                  fontSize: "15px",

                  color: "#9c9c9c",

                  fontWeight: "normal",

                }}

              >

                Collection Size: {`${totalNFTs}`}

              </div>

            </>

          </div>

        </div>

      </>

    )}

    <div style={styles.NFTs}>

      {inputValue === "explore" &&

        NFTCollections?.map((nft, index) => (

          <Card

            hoverable

            actions={[

              <Tooltip title="View Collection">

                <RightCircleOutlined

                  onClick={() => setInputValue(nft?.addrs)}

                />

              </Tooltip>,

            ]}

            style={{ width: 240, border: "2px solid #e7eaf3" }}

            cover={

              <Image

                preview={false}

                src={nft?.image || "error"}

                fallback={fallbackImg}

                alt=""

                style={{ height: "240px" }}

              />

            }

            key={index}

          >

            <Meta title={nft.name} />

          </Card>

        ))}

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

        ))}

    </div>

    {getMarketItem(nftToBuy) ? (

      <Modal

        title={`Buy ${nftToBuy?.name} #${nftToBuy?.token_id}`}

        visible={visible}

        onCancel={() => setVisibility(false)}

        onOk={() => purchase()}

        okText="Buy"

      >

        <Spin spinning={loading}>

          <div

            style={{

              width: "250px",

              margin: "auto",

            }}

          >

            <Badge.Ribbon

              color="green"

              text={`${

                getMarketItem(nftToBuy).price / ("1e" + 18)

              } ${nativeName}`}

            >

              <img

                src={nftToBuy?.image}

                style={{

                  width: "250px",

                  borderRadius: "10px",

                  marginBottom: "15px",

                }}

              />

            </Badge.Ribbon>

          </div>

        </Spin>

      </Modal>

    ) : (

      <Modal

        title={`Buy ${nftToBuy?.name} #${nftToBuy?.token_id}`}

        visible={visible}

        onCancel={() => setVisibility(false)}

        onOk={() => setVisibility(false)}

      >

        <img

          src={nftToBuy?.image}

          style={{

            width: "250px",

            margin: "auto",

            borderRadius: "10px",

            marginBottom: "15px",

          }}

        />

        <Alert

          message="This NFT is currently not for sale"

          type="warning"

        />

      </Modal>

    )}

  </div>

</>

);

}

export default NFTTokenIds;

#760

I dont have this in the code

#761

Can you please read this on how to post code and edit your post.

READ BEFORE POSTING - How to post code in the forum - FAQ & How to get technical help - Moralis Web3 Forum - Largest Web3 Dev Community :chart_with_upwards_trend:

2 Likes
#762

image

Change line 183 ?

#763

i’ts ok for that ser
 but i cant buy

#764

Capture d’écran 2022-06-07 012633
Capture d’écran 2022-06-07 012633994×216 4.59 KB

any transaction its normal ?

#765

Can you post screenshots of the NFT that doesn’t have the buy option (e.g. tokenId 65 as in your screenshot) as well as the relevant MarketItem object in your server.

any transaction its normal ?

There will be transactions there if your connected wallet is either the NFT’s seller or owner for any of the listed NFTs. Again, this is based on the MarketItems table. You need to double check these details.

#766

Capture d’écran 2022-06-07 014218
Capture d’écran 2022-06-07 0142181610×76 9.9 KB
Capture d’écran 2022-06-07 014239
Capture d’écran 2022-06-07 0142391612×68 8.38 KB
Capture d’écran 2022-06-07 014254 Capture d’écran 2022-06-07 014415

#767

Like this
?

Sorry for my English which is so bad lol

#768

That token object is saying sold is true, so this means it won’t have the buy option. It should have only been set to true if you purchased the NFT.

You can try again with another sale. Check the sale exists with the connected wallet that is selling the NFT on the “Transactions” page.

#769

So I just have to try to sell an nft again without changing anything?

#770

Yes you need to verify things from an earlier stage, check the Transactions page once you list an NFT as well as your MarketItems table in your server.

The NFT (65) you are checking is sold according to your server - you can verify it by checking your contract events. You probably purchased it from your other account. So you can try reselling that or testing with another NFT.

#771

I didn’t buy it though, it’s still in the market contract