sorry, iām kind of a beginner with this.
So I used the last boillerplate and updated all the dependencies. Then Iām following the tutorial (filled in the .env) and got stuck at the part where the cryptopunk nfts have to show up in the browser. In the console I got only some warnings back. The nftās in my wallet are showing up properly on the /NFTBalance page.
This is my code:
import { useMoralis } from "react-moralis";
import { useEffect, useState } from "react";
import { useMoralisWeb3Api, useMoralisWeb3ApiCall } from "react-moralis";
import { useIPFS } from "./useIPFS";
export const useNFTTokenIds = () => {
const { token } = useMoralisWeb3Api();
const { chainId } = useMoralis();
const { resolveLink } = useIPFS();
const [NFTTokenIds, setNFTTokenIds] = useState([]);
const [totalNFTs, setTotalNFTs] = useState()
const {
fetch: getNFTTokenIds,
data,
error,
isLoading,
} = useMoralisWeb3ApiCall(token.getAllTokenIds, { chain: chainId, address: "0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb" });
useEffect(() => {
if (data?.result) {
const NFTs = data.result;
setTotalNFTs(data.total);
for (let NFT of NFTs) {
if (NFT?.metadata) {
NFT.metadata = JSON.parse(NFT.metadata);
// metadata is a string type
NFT.image = resolveLink(NFT.metadata?.image);
console.log(error);
}
}
setNFTTokenIds(NFTs);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data]);
return { getNFTTokenIds, NFTTokenIds, totalNFTs, error, isLoading };
};
import React, { useState } from "react";
import { getNativeByChain } from "helpers/networks";
import { getCollectionsByChain } from "helpers/collections";
import { useMoralis } from "react-moralis";
import { useNFTTokenIds } from "hooks/useNFTTokenIds";
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";
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 NFTTokenIds() {
const { NFTTokenIds} = useNFTTokenIds();
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);
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("NFTTokenIds", NFTTokenIds);
return (
<>
<div style={styles.NFTs}>
<Skeleton loading={!NFTTokenIds?.result}>
{NFTTokenIds?.result &&
NFTTokenIds.result.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="List NFT">
<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: "300px" }}
/>
}
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>
</>
);
}
export default NFTTokenIds;
thanks!
13 stack frames were collapsed.