Ethereum Boilerplate Questions

Hi! It worked… :sweat_smile:
Thanks but why?

src\components\AddressInput.jsx
Line 14:6: React Hook useEffect has missing dependencies: ‘props’ and ‘validatedAddress’. Either include them or remove the dependency array. However, ‘props’ will change when any prop changes, so the preferred fix is to destructure the ‘props’ object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

Hey @mejmerlin !

You can ignore these warnings. We will remove them in the next update. If you want to do it yourself
add

  // eslint-disable-next-line react-hooks/exhaustive-deps

into AddressInput.jsx located in src/components between line 13 and 14.

npm run devchain
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\User\OneDrive\Desktop\dapp/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\User\OneDrive\Desktop\dapp\package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-11-13T17_25_43_525Z-debug.log

What are you trying to dir sir ?

starting a local devchain and i stumble into this

npm run devchain
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path C:\Users\User\OneDrive\Desktop\dapp/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ‘C:\Users\User\OneDrive\Desktop\dapp\package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\User\AppData\Local\npm-cache_logs\2021-11-13T17_25_43_525Z-debug.log

I see people having issues with npm and the boilerplate .

Clone the repo again and use
yarn install
Then
yarn run start

Web Bundling complete 19183ms
./node_modules/@ui-kitten/components/ui/input/input.component.js 105:38
Module parse failed: Unexpected token (105:38)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| this.webEventResponder = devsupport_1.WebEventResponder.create(this);
| this.focus = () => {

        this.textInputRef.current?.focus();

| };
| this.blur = () => {
./node_modules/@ui-kitten/components/ui/tab/tabBar.component.js 137:37
Module parse failed: Unexpected token (137:37)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| scrollToIndex(params) {

    this.tabIndicatorRef.current?.scrollToIndex(params);

| }
| scrollToOffset(params) {
./node_modules/@ui-kitten/components/ui/popover/popover.component.js 148:38
Module parse failed: Unexpected token (148:38)

is there any workaround to fix this?

Thank you for the great work

Hi @mrhigh3r

It looks like a problem because of the third-party library @ui-kitten . If you share your full code repo we will be able to check it

Intro

@MoralisTeam, thanks for creating this boilerplate. I’m working on my first project as part of Chainlink hackathon, and your boilerplate has been most helpful.

Wanted to share an issue I ran into. Maybe it will help others, and wondering what’s the “right” way to address the issue.

Details

I have a simple ERC1155 contract, and wanted to replace the MetaCoin example in boilerplate -> Contracts with my own. So I created an abi (using hardhat-abi-exporter), and then replicated most of what I saw in src/contracts/contractInfo.json.

It mostly worked. However I noticed that functions with array inputs didn’t work. For example, the standard balanceOf(address, uint256) worked, but balanceOfBatch(address[], uint256[]) suffered from 2 errors related to parameters that were arrays:

  1. The uint256[] was causing an ‘param.map is not a function error’
  2. The address[] was causing an invalid argugment error

I tracked this down to node_modules/web3-eth-abi/lib/index.js the function is ABICoder.prototype.formatParam, and observed that:

  1. The code has regex to identify integer arrays, and attempts to process them. But it assumes the param IS an array, and calls param.map. The form input from Contracts UI is not an array, it’s a string. Here are code snippets:
// I'm snipping relevant code from ABICoder.prototype.formatParam
const paramTypeBytesArray = new RegExp(/^bytes([0-9]*)\[\]$/);
const paramTypeNumberArray = new RegExp(/^(u?int)([0-9]*)\[\]$/);

if (type.match(paramTypeBytesArray) || type.match(paramTypeNumberArray)) {
        return param.map(p => this.formatParam(type.replace('[]', ''), p));
    }
  1. The code had no awareness of address[], and was treating these as a string. When the call is evenutally made to the Contract, I suspect this invalid argument is triggered.

End

I temporarily confirmed / got around this issue by making some changes to web3-eth-abi code. I know this isn’t the right solution. But it did allow me to confirm the issue, and I was able to successfully call my contract functions that needed array inputs.

I’m wondering if the Contract.jsx or some other ethereum-boilerplate code changes to better support arrays in Contracts UI. Apologies, I’m new to React as well, and so don’t have an informed comment on this. Still trying to wrap my head around everything.

Thanks again team, I’m really enjoying the Moralis features as I work on my hackathon project!

2 Likes

NFTs aren’t showing anymore. It worked fine until yesterday. I started again from scratch and still doesn’t work. Logs show the array is empty, so it doesn’t get any NFTs to begin with.

Hi @lautaro

Thank you for your patience :raised_hands:
There was a bug and it is already fixed. Pull the latest version and Happy BUIDLing :man_factory_worker:

1 Like

Hi @gallilama!

Thank you for your feedback and thank you for your patience :raised_hands:

ABI generates automatically after you deploy your contract on testnet, all you need is to change the MetaContract.sol file.

We will add better parsing options in next versions. We’ll notify you about the update :raised_hands:

2 Likes
Uncaught (in promise) Error: Returned values aren't valid, did it run Out of Gas? You might also see this error if you are not using the correct ABI for the contract you are retrieving data from, requesting data from a block number that does not exist, or querying a node which is not fully synced.

I am getting this issue on console I have changed the contracts to my custom contracts and after changing required dependencies.

1 Like

Hi @utsavsingla

Make sure you are in the right chain, also make sure the contract address is correct

Are you calling it on the localdevchain?

Yes I am calling the local dev chain. I have done exactly as it is written on the quickstart page after npm run start

does it have the same name Metacoin?

Yes, even with the same boilerplate template, no changes to the contract. I am getting this error.

I’ll test it and prepare a detailed instructions of using this feature. I’ll keep in touch with you :man_factory_worker: