Ethereum Boilerplate Questions

hi, I compiled the code with the log(error) but I got no message back, or I just canā€™t find it.

  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);
    }

Where should I look?
btw the nftsā€™s in /myBalance are showing up properly

To add to this, as itā€™s all react, I went to look at the vanilla JS boilerplate link from the docs but itā€™s not the same kind of ā€œboilerplateā€ as this. In that, itā€™s not really anything at allā€¦

The boilerplate was designed to be like a LEGO, so you can easily get one of the components and use it in any place of your project. There may be some imports with dependencies, but they are easy to move as well.

I actually donā€™t know how does it work with other stacks, you need to keep in mind that itā€™s a boilerplate for React.

Please give us some more info, I actually donā€™t understand your issue :sweat_smile:

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!

Maybe this could help?


src\hooks\useNFTTokenIds.js
  Line 18:13:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Please share the error messages. Do you have NFTs in your wallet?

The nftā€™s in my wallet are loading fine on the /nftBalance page.

Just on the /nftMarket the cryptopunks wonā€™t show up.

in my browser console:

[HMR] Waiting for update signal from WDS...
Chains.jsx:85 chain null
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
react-dom.development.js:67 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: Identicon
printWarning @ react-dom.development.js:67
Chains.jsx:91 current chainId:  0x1
MoralisWeb3.js:271 Moralis.enable() is deprecated and will be removed, use Moralis.enableWeb3() instead.
(anonymous) @ MoralisWeb3.js:271
inpage.js:1 MetaMask: The event 'close' is deprecated and may be removed in the future. Please use 'disconnect' instead.
For more information, see: https://eips.ethereum.org/EIPS/eip-1193#disconnect
_warnOfDeprecation @ inpage.js:1
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
webpackHotDevClient.js:138 src\App.jsx
  Line 8:8:   'ERC20Transfers' is defined but never used  no-unused-vars
  Line 17:8:  'QuickStart' is defined but never used      no-unused-vars

src\components\NFTBalance.jsx
  Line 4:30:  'SendOutlined' is defined but never used                  no-unused-vars
  Line 55:9:  'handleTransferClick' is assigned a value but never used  no-unused-vars

src\components\NFTTokenIds.jsx
  Line 5:30:  'SendOutlined' is defined but never used                  no-unused-vars
  Line 57:9:  'handleTransferClick' is assigned a value but never used  no-unused-vars

src\hooks\useNFTTokenIds.js
  Line 18:13:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps
printWarnings @ webpackHotDevClient.js:138
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)
Chains.jsx:85 chain Object
NFTTokenIds.jsx:66 NFTTokenIds Array(0)

Hey @bogdabart, there is no /nftMarket on the ethereum boilerplate, are you referring to the NFT marketplace boilerplate?

Thanks for reply. Yes, Iā€™m doing the cloning opensea tutorial where you start with the boilerplate.

Changed these lines in the app.js

      <Menu.Item key="/nftMarket">
        <NavLink to="/nftMarket"> Marktplaats</NavLink>
      </Menu.Item>

<Route path="/nftMarket">
              <NFTTokenIds />

hi
yes it showing thank you

I cloned the eth boilerplate repo and created a new server on moralis - then linked them together using the application ID and server URL.

The eth boilerplate project is also very slow. Some UI elements are not loading as well. The fiat onramper doesnā€™t load at all. I switched to the local dev environment thinking it would make things faster, but the same issues reproduced on the local dev/test/mainnet networks.

Additional info:

I am creating this server from Beirut, Lebanon. Could it be that the region has something to do with this? Since the closest region to Beirut is Frankfurt.

Hi guys, canā€™t seem to get the DEX screen working (http://localhost:3000/1inch), the token list is blank, see image. I installed the 1-inch plugin already.

Also, how to get the Fiat on-ramp screen working? (again just blank screen currently)

Thanks.

Hey @bogdabart, I just checked the ethereum nft marketplace boilerplate and seems like you are missing these props on NFTTokenIds component

<Route path="/nftMarket">
   <NFTTokenIds inputValue={inputValue} setInputValue={setInputValue}/>
</Route>

Mysteriously started working lol. Just the Fiat on-ramp to figure out now.

Have you added your key to the plugin settings? Also please provide error message screenshots :man_mechanic:

Thanks. Where is the code for the smart contracts?

in the truffle folder

Thank you.

Now I am getting this error:

Error: A cross-origin error was thrown. React doesnā€™t have access to the actual error object in development. See https://reactjs.org/link/crossorigin-error for more information.

:arrow_forward: 13 stack frames were collapsed.

Module.

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/src/index.js:33

  30 |   }  31 | };  32 | > 33 | ReactDOM.render(  34 |   // <React.StrictMode>  35 |   <Application />,  36 |   // </React.StrictMode>,

View compiled

Moduleā€¦/src/index.js

http://localhost:3000/static/js/main.chunk.js:5728:30

webpack_require

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/webpack/bootstrap:851

  848 |   849 | __webpack_require__.$Refresh$.init();  850 | try {> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  852 | } finally {  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);  854 | }

View compiled

fn

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

View compiled

1

http://localhost:3000/static/js/main.chunk.js:6254:18

webpack_require

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/webpack/bootstrap:851

  848 |   849 | __webpack_require__.$Refresh$.init();  850 | try {> 851 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  852 | } finally {  853 | 	__webpack_require__.$Refresh$.cleanup(moduleId);  854 | }

View compiled

checkDeferredModules

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/webpack/bootstrap:45

  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 | 

View compiled

Array.webpackJsonpCallback [as push]

C:/Users/yonat/Downloads/ethereum-nft-marketplace-boilerplate-main/ethereum-nft-marketplace-boilerplate-main/webpack/bootstrap:32

  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);  30 |   31 | 	// run deferred modules when all chunks ready> 32 | 	return checkDeferredModules();     | ^  33 | };  34 | function checkDeferredModules() {  35 | 	var result;

View compiled

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:1:93

Help please, i added uniswapv3core and periphery to the boilerplate and i tried yarn start but iā€™m prompt to install typescript. should i go on?