Ok ser, now i have a little problem with transaction dashboard, no img and no nameā¦
function getImage(addrs, id) {
const img = fetchItemImages.find(
(element) =>
element.nftContract === addrs &&
element.tokenId === id
);
return img?.image;
}
function getName(addrs, id) {
const nme = fetchItemImages.find(
(element) =>
element.nftContract === addrs &&
element.tokenId === id
);
return nme?.name;
}
Looks like it pulls data from the āItemImagesā or equivalent Class for the Transactions page.
If you donāt have it, the tutorial covers this at 1:32:00 - I Cloned OpenSea in 2 Hours
you couldāve just left it as is and uploaded your logo to the public folder?
In src\App.jsx in the Logo component at the bottom, change it here like this:
export const Logo = () => (
<div style={{ display: 'flex' }}>
<img src="./logo.png" />
</div>
);
This is for an image at public\logo.png.
If you want to use SVG, just replace the existing default SVG.
For the moment doesnāt work for meā¦ yes I would like to put in SVG but you have seen the size of the fileā¦ nothing is separated lolā¦
Post your existing SVG code here if you still have issues.
Not possible ser, the code is very longā¦
There is an issue with your SVG where some of the properties need to be changed for React (camelCase e.g. xlink-href to xlinkHref).
This one will work: https://www.codepile.net/pile/OG2MQxjV
Check that you have correct data in your ItemImages or equivalent class in your server. If it is named differently, change it in const queryItemImages = useMoralisQuery("...");.
Doublecheck you have done everything as instructed in the tutorial for this part. And then try another listing.
I solved the issue, I uploaded the files in folders instead of individually, which was causing the error. Can you answer how I could add the full collection of NFTs instead of just displaying a few? How could I sync all the NFT metadata & images of each collection to my server & filter it based on the event of for sale? The link has my marketplace contract & ABI https://forum.moralis.io/t/cloning-opensea-nft-boilerplate-questions/5107/786?u=abettameta
You have missed out a part then as you donāt have another Class saved. Start earlier with the tutorial at 1:23:00 to go through the whole Transactions page just to get a clearer idea of how it works.
I donāt understand where my mistake isā¦ after having redone 4 times lolā¦
His file is Transaction.jsx and mine must be NFTMarketTransactions.jsxā¦?
import React, { useState } from "react";
import { useMoralis, useMoralisQuery } from "react-moralis";
import { useMoralisDapp } from "providers/MoralisDappProvider/MoralisDappProvider";
import { Table, Tag, Space } from "antd";
import { PolygonCurrency} from "./Chains/Logos";
import moment from "moment";
const styles = {
table: {
margin: "0 auto",
width: "1000px",
},
};
function NFTMarketTransactions() {
const { walletAddress } = useMoralisDapp();
const { Moralis } = useMoralis();
const queryItemImages = useMoralisQuery("ItemImages");
const fetchItemImages = JSON.parse(
JSON.stringify(queryItemImages.data, [
"nftContract",
"tokenId",
"name",
"image",
])
);
const queryMarketItems = useMoralisQuery("MarketItems");
const fetchMarketItems = JSON.parse(
JSON.stringify(queryMarketItems.data, [
"updatedAt",
"price",
"nftContract",
"itemId",
"sold",
"tokenId",
"seller",
"owner",
])
)
.filter(
(item) => item.seller === walletAddress || item.owner === walletAddress
)
.sort((a, b) =>
a.updatedAt < b.updatedAt ? 1 : b.updatedAt < a.updatedAt ? -1 : 0
);
function getImage(addrs, id) {
const img = fetchItemImages.find(
(element) =>
element.nftContract === addrs &&
element.tokenId === id
);
return img?.image;
}
function getName(addrs, id) {
const nme = fetchItemImages.find(
(element) =>
element.nftContract === addrs &&
element.tokenId === id
);
return nme?.name;
}
const columns = [
{
title: "Date",
dataIndex: "date",
key: "date",
},
{
title: "Item",
key: "item",
render: (text, record) => (
<Space size="middle">
<img src={getImage(record.collection, record.item)} style={{ width: "40px", borderRadius:"4px"}} />
<span>#{record.item}</span>
</Space>
),
},
{
title: "Collection",
key: "collection",
render: (text, record) => (
<Space size="middle">
<span>{getName(record.collection, record.item)}</span>
</Space>
),
},
{
title: "Transaction Status",
key: "tags",
dataIndex: "tags",
render: (tags) => (
<>
{tags.map((tag) => {
let color = "geekblue";
let status = "BUY";
if (tag === false) {
color = "volcano";
status = "waiting";
} else if (tag === true) {
color = "pink";
status = "confirmed";
}
if (tag === walletAddress) {
status = "SELL";
}
return (
<Tag color={color} key={tag}>
{status.toUpperCase()}
</Tag>
);
})}
</>
),
},
{
title: "Price",
key: "price",
dataIndex: "price",
render: (e) => (
<Space size="middle">
<PolygonCurrency/>
<span>{e}</span>
</Space>
),
}
];
const data = fetchMarketItems?.map((item, index) => ({
key: index,
date: moment(item.updatedAt).format("DD-MM-YYYY HH:mm"),
collection: item.nftContract,
item: item.tokenId,
tags: [item.seller, item.sold],
price: item.price / ("1e" + 18)
}));
return (
<>
<div>
<div style={styles.table}>
<Table columns={columns} dataSource={data} />
</div>
</div>
</>
);
}
export default NFTMarketTransactions;
const columns = [
{
title: "Date",
dataIndex: "date",
key: "date",
},
{
title: "Item",
key: "item",
dataIndex: "item",
},
{
title: "Collection",
key: "collection",
dataIndex: "collection",
},
{
title: "Transaction Status",
key: "tags",
dataIndex: "tags",
},
{
title: "Price",
key: "price",
dataIndex: "price",
}
];
He just renamed it to NFTMarketTransactions.jsx to match the component name. Have you gotten an ItemImages class created in your server? Did you do another listing to test?
Can you post a screenshot of your ItemImages class? Make sure the Class exists, has data for your tokenId 65 and that youāre querying the right one (useMoralisQuery("...");) - can you verify each of these.
I canāt find this folderā¦ do I need to create it with the metadata?
What folder are you referring to? Do you still not have the ItemImages class when you list an NFT? Also I was mistaken earlier, the boilerplate already has all of the code necessary for this so it should be working by default.
No I still donāt have itā¦ sorry I thought maybe I should create a specific file
