ethereum-boilerplate / ethereum-boilerplate

The ultimate NextJS Ethereum Dapp Boilerplate which gives you maximum flexibility and speed. Feel free to fork and contribute. Although this repo is called "Ethereum Boilerplate" it works with any EVM system and since it uses Moralis SDK You can even use it on Solana! Happy BUIDL!👷‍♂️

ethereum-boilerplate

Fully Typescript ready NextJS components for fast building dApps without running own backend

🚀DEMO: https://eth-boilerplate.vercel.app/

This boilerplate is built with Moralis

You need active web3 provider/wallet only for authentication. All pages in this boilerplate do not require an active web3 provider, they use Moralis Web3 API. Moralis supports the most popular blockchains and their test networks. You can find a list of all available networks in Moralis Supported Chains

Please check the official documentation of Moralis for all the functionalities of Moralis.

⭐️ Star us

If this boilerplate helps you build Ethereum dapps faster - please star this project, every star makes us very happy!

🤝 Need help?

If you need help with setting up the boilerplate or have other questions - don't hesitate to write in our community forum and we will check asap. Forum link. The best thing about this boilerplate is the super active community ready to help at any time! We help each other.

🚀 Quick Start

📄 Clone or fork ethereum-boilerplate:

git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git

💿 Install all dependencies:

cd ethereum-boilerplate
yarn install

✏ Rename .env.local.example to .env.local and provide required data. Get your Web3 Api Key from the Moralis dashboard:

🖊️ Fill the environment variables in your .env.local file in the app root:

• MORALIS_API_KEY: You can get it here.
• NEXTAUTH_URL: Your app address. In the development stage, use http://localhost:3000.
• NEXTAUTH_SECRET: Used for encrypting JWT tokens of users. You can put any value here or generate it on https://generate-secret.now.sh/32.

Example:

MORALIS_API_KEY=xxxx
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=7197b3e8dbee5ea6274cab37245eec212

🚴‍♂️ Run your App:

yarn start

🧭 Table of contents

• ethereum-boilerplate
• 🚀 Quick Start
• 🧭 Table of contents
• 🏗 Ethereum Components
  • <NFTBalances />
  • <ERC20Balances />
  • <ERC20Transfers />
  • <NFTTransfers />
  • <Transactions />
• ✨ Contributors

🏗 Ethereum Components

<NFTBalances />

location: src/component/templates/balances/NFT/NFTBalances.tsx

🎨 <NFTBalances /> : displays the user's balances. Uses Moralis Evm API (does not require an active web3 provider).

<ERC20Balances />

location: src/component/templates/balances/ERC20/ERC20Balances.tsx

💰 <ERC20Balances /> : displays the user's ERC20 balances. Uses Moralis Evm API (does not require an active web3 provider).

<ERC20Transfers />

location: src/component/templates/transfers/ERC20/ERC20Transfers.tsx

💰 <ERC20Transfers /> : displays the user's ERC20 transfers. Uses Moralis Evm API (does not require an active web3 provider).

<NFTTransfers />

location: src/component/templates/transfers/NFT/NFTTransfers.tsx

🎨 <NFTTransfers /> : displays the user's NFT transfers. Uses Moralis Evm API (does not require an active web3 provider).

<Transactions />

location: src/component/templates/transactions/Transactions.tsx

💰 <Transactions /> : displays the user's transactions. Uses Moralis Evm API (does not require an active web3 provider).

✨ Contributors

Feel free to contribute 🧙 to ethereum-boilerplate project. But first, please read the Contributing Guidelines before opening an issue or PR so you understand the branching strategy and local development environment.

Made with contrib.rocks.

ethereum-boilerplate's Issues

Access to fetch at 'https://ipfs.moralis.io:2053/ipfs/hashx000000000/1.json' from origin has been blocked by CORS

Helo. Most of the NFT images are not being displayed. This is not happening to all, just to some of them. Any way to fix?

Access to fetch at 'https://ipfs.moralis.io:2053/ipfs/hashx0x0000000000/1.json' from origin has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Make a Hardhat version please

This is a suggestion, not an issue.

I believe it should be made with Hardhat instead of Truffle due to the industry moving more and more towards Hardhat.

That's all. Great job! :)

Visit vuuzle.tv,

content removed

There are compile errors after converting to TypeScript.

I think it would be better if moralis published boiler plate examples in TypeScript instead of JS. JS is simply bad practice and this repo seems to be a perfect example of why.

I cloned this repo and converted it to typescript. This immediately revealed a bunch of errors.

Some of the imports for local files are not using relative file paths. Example below, should be ../helpers/networks.

ethereum-boilerplate/src/components/NFTBalance.jsx

Line 5 in 0632765

import { getExplorer } from "helpers/networks";

The useMoralis() returns the wrong type.

Trying to call transfer on typeof Moralis is wrong. I think the framework is returning the wrong type?

Is this meant to return Moralis.Web3? That's the only type I could find with the transfer function.

According to TypeScript, fontWeight: "500" is not supported.

ethereum-boilerplate/src/components/Account.jsx

Line 51 in 0632765

fontWeight: "500",

Type '"500"' is not assignable to type 'FontWeight'.ts(2322)
index.d.ts(2002, 3): The expected type comes from property 'fontWeight' which is declared here on type 'CSSProperties'

There's a comment here admitting that the second argument is missing. This is a type-error which would suggest to me that there is either a runtime error or the core FromWei function is mis-typed.

ethereum-boilerplate/src/components/NativeTransactions/NativeTransactions.jsx

Lines 37 to 38 in 0632765

	// missing second argument in FromWei, decimals
	parseFloat(Moralis.Units.FromWei(value).toFixed(6))

Looks like there are many other bugs that I won't bother to document. Point being ... there seems to be a quality problem with the Moralis types and examples. This hurts adoption and also starts off newcomers in a bad place. Please prioritize proper use of types for the framework. Types teach people how to use your framework and protect them from mis-using. Publishing JS-only boilerplate is not good in the long-run IMO.

Cannot run the ethereum-boilerplate: NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider>

There is an error:
NoMoralisContextProviderError: Make sure to only call useMoralis within a

Having alot of issues with a code and node-modules

I am having a lot of issues with the code and node_modules, i even reinstalled nodejs, node_modules, the repo and did everything you can think of:
Error: useMoralisDapp must be used within a MoralisDappProvider
useMoralisDapp
src/providers/MoralisDappProvider/MoralisDappProvider.js:41
38 | function useMoralisDapp() {
39 | const context = React.useContext(MoralisDappContext);
40 | if (context === undefined) {

41 | throw new Error("useMoralisDapp must be used within a MoralisDappProvider");
42 | }
43 | return context;
44 | }
View compiled
useNFTBalance
src/hooks/useNFTBalance.js:8
5 |
6 | export const useNFTBalance = (options) => {
7 | const { account } = useMoralisWeb3Api();
8 | const { chainId } = useMoralisDapp();
9 | const { resolveLink } = useIPFS();
10 | const [NFTBalance, setNFTBalance] = useState([]);
11 | const {
View compiled
NFTBalance
src/components/NFTBalance.jsx:24
21 | };
22 |
23 | function NFTBalance() {
24 | const { NFTBalance } = useNFTBalance();
25 | const { chainId, marketAddress, contractABI } = useMoralisDapp();
26 | const { Moralis } = useMoralis();
27 | const [visible, setVisibility] = useState(false);
View compiled
▶ 17 stack frames were collapsed.
Module.
src/index.js:30
27 | }
28 | };
29 |
30 | ReactDOM.render(
31 | // <React.StrictMode>
32 | ,
33 | // </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3001/ethereum-boilerplate/static/js/main.chunk.js:3947:30
webpack_require
/home/godslayer436/Documents/GitHub/ethereum-boilerplate/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
/home/godslayer436/Documents/GitHub/ethereum-boilerplate/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:3001/ethereum-boilerplate/static/js/main.chunk.js:4331:18
webpack_require
/home/godslayer436/Documents/GitHub/ethereum-boilerplate/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
/home/godslayer436/Documents/GitHub/ethereum-boilerplate/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]
/home/godslayer436/Documents/GitHub/ethereum-boilerplate/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:3001/ethereum-boilerplate/static/js/main.chunk.js:1:93
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

[node >= v17] ERR_OSSL_EVP_UNSUPPORTED

As of v17 node have deprecated a few openssl algorithms which causes issues with webpack.

It can be resolved by adding the --openssl-legacy-provider flag in yarn start or the environment variable.

Alternatively, consider using output: { hashFunction: 'xxhash64' } if you've got plans on upgrading webpack (or react-scripts) as current react-scripts/config/webpack.config.js will throw Digest method not supported

WalletConnect - Unable to Login and Laggy

Hello,

While using WalletConnect to connect an external wallet (from mobile MM or TW and from desktop Wallet3), I'm unable to login. The Wallet Address that is returned is NULL. Also, while scanning the QR Code, 7 out of 10 tries, it fails to connect.

Thanks

cant work with nft.storage

Hello,

I found this issue in the repo that it can't be used with nft.storage.
Cant resolve ipfs-car/blockstore/memory when importing nft.storage

also nftstorage/nft.storage#1086

Please help.

Can't connect to local dev chain (Failed running cloud function getTokenBalances for user undefined)

Hi, we're unable to connect Moralis to a local dev chain. We posted a question here and were told "web3api calls don’t work with local dev chain".

Full post below

Thanks :-)

---

We are using the Etherium boilerplate project here https://github.com/ethereum-boilerplate/ethereum-boilerplate (lets call this EBP)
We are running Ganash locally and have set up the frp reverse proxy. When we look in the moralis dashboard “devchain proxy server”, we show as “connected”.

In metamask we have imported an account using a private key from Ganash. Metamask is showing that we have 100 Eth in the account. We then use this account to authenticate with EBP.

The issue occurs when we navigate to the “Wallet” tab in EBP. We see a 400 error from the getTokenBalanes endpoint.

The curl genreated by Chrome is:

curl ‘https://42sf9cpyfott.usemoralis.com:2053/server/functions/getTokenBalances’
-H ‘Connection: keep-alive’
-H ‘Pragma: no-cache’
-H ‘Cache-Control: no-cache’
-H ‘sec-ch-ua: “Google Chrome”;v=“95”, “Chromium”;v=“95”, “;Not A Brand”;v=“99”’
-H ‘Accept: application/json’
-H ‘DNT: 1’
-H ‘Content-Type: application/json’
-H ‘sec-ch-ua-mobile: ?0’
-H ‘User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36’
-H ‘sec-ch-ua-platform: “Windows”’
-H ‘Origin: http://localhost:3000/’
-H ‘Sec-Fetch-Site: cross-site’
-H ‘Sec-Fetch-Mode: cors’
-H ‘Sec-Fetch-Dest: empty’
-H ‘Referer: http://localhost:3000/’
-H ‘Accept-Language: en-AU,en;q=0.9,en-US;q=0.8’
–data-raw ‘{“address”:“0xce24fa85beea429ef601534151db39f0597c81cd”,“chain”:“0x539”}’
–compressed

When we look in the Moralis dashboard we see the following error.

Error received
2021-11-02T01:29:12.296Z - Failed running cloud function getTokenBalances for user undefined with:
Input: {“address”:“0xce24fa85beea429ef601534151db39f0597c81cd”,“chain”:“0x539”}
Error: {“message”:"[object Object]",“code”:141}

missing hook "useNFTBalance"

in src/components/hooks useNFTBalances is like missing totally. its imprtted from react-Moralis so it works out the box but in the tutorial he modifies it. I think I can solve it but come on bruh what is this like a test or something? surely you know its missing.

alex-ma-1

suggestion: change repo type

maybe set repo as template repo

Error when switching chains before authenticating

I get an error when trying to switch chains before I log in with Metamask.

The issue seems to be in App.jsx hook isAuthenticated. After I changed to !isAuthenticated, it seems to have solve the issue.

useEffect(() => {
if (isAuthenticated && !isWeb3Enabled && !isWeb3EnableLoading) enableWeb3();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isAuthenticated, isWeb3Enabled]);

Can you confirm if this is correct way to resolve in code?

localhost is white!!!

I followed the steps to start working with Moralis but It doesn't work

/src/helpers/networks.js blockExplorerUrl incorrect

swap urls

"0x4": {
currencySymbol: "ETH",
blockExplorerUrl: "https://rinkeby.etherscan.io/",
},
"0x2a": {
currencySymbol: "ETH",
blockExplorerUrl: "https://kovan.etherscan.io/",
},

[Ubuntu] ENOSPC

This project will exceed available inotify nodes available which chokadir uses to monitor the file system. Consider adding CHOKIDAR_USEPOLLING=1 to env to support non-root environments.

Alternatively add $ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p to the docs.

[Ubuntu]: Fix for source map paths

in node_modules/react-scripts/config/webpack.config.js change sourceMaps: shouldUseSourceMap to sourceMaps: false to allow proper paths for debugging

One can use customize-cra to override the config without ejecting the project.

From:

To:

Wallet Connect authentication does not update components

When downloading the boilerplate code and changing the authenticate function by adding provider: "walletconnect it does log in but the components do not recognise the authentication and do not show that the user is authenticated

Change Menu Icon

How would I go about changing the menu icon? Thanks!

Throws an error while simply initiating the boilerplate

Migrating to `web3uikit`

This issue might be resolved in several PRs, possibly best to make 1 PR for each component migrated such that PR review will be easier to do. These are just rough plans of the components to be refactored:

• Account
• Address
• Chains
• Contract
• DEX
• ERC20Transfers
• NativeTransactions
• Wallet
• AddressInput.jsx
• Blockie.jsx
• ERC20Balance.jsx
• MenuItems.jsx
• NFTBalance.jsx
• NativeBalance.jsx
• Quickstart.jsx
• Ramper.jsx
• TokenPrice.jsx

Other than that, the layout of the page in App.jsx might also need to be migrated accordingly to web3uikit

Token not set in transfer.jsx when using wallet.

Hi,

We're trying to get our heads around using the wallet.

We've connected our project to Rinkby in Metamask and, on the wallet screen, can see that we have a test ether balance.

When we try to transfer though we get nothing. On debugging we notice that the Transfer button is enabled because the token state is not set.

If we make this change:
const [token, setToken] = useState("eth");
... we see an Eth symbol appear and the button becomes clickable. On clicking though, more errors are seen.

Can someone please explain how we're supposed to be using this? I'm wondering if there is another step we're missing which would have set the token hook.

Thanks for your help :-)

latest update makes app stay as blank page

I downloaded the latest version of the code and when I deploy via netlify, the page stays white

Only Binance Smart Chain Balance is loading

ETHEREUM, Avalanche, Polygon balances are not loading and also NFT integration is failing

Authentication doesn't work

1. When you click Authenticate and choose MetaMask and then click "Sign" in MetaMask, nothing happens, unlike the GIF where you can see your address instead of the Authenticate button after you login.
   I tested multiple times, disabled ad blocker, on the demo version at: https://ethereum-boilerplate.github.io/ethereum-boilerplate
   

2. Unable to switch back to Kovan Testnet, tried to refresh, tried multiple times, you simply can't click Kovan Testnet, although the default setting was Kovan and I switched it to Ethereum and now it seems stuck on it (will be glad for a fix)
   

3. Console errors:
   

4. More console errors as soon as you authenticate:
   

5. Refreshing inner pages leads to 404.
   Example 404 link: https://ethereum-boilerplate.github.io/quickstart
   

Unable to deploy via netlify

Hey, I pulled the latest repo and when I tried to test deploy it via netlify I get this error message
Message from deploy log of netlify

6:24:51 PM: Build ready to start
6:24:53 PM: build-image version: 8925038cf853b22d6397cdcb9904ac88b66bb383 (focal)
6:24:53 PM: build-image tag: v4.5.0
6:24:53 PM: buildbot version: c0e8ffa453e19757f422ac0b6b14bc1b57e53b59
6:24:53 PM: Fetching cached dependencies
6:24:53 PM: Starting to download cache of 211.6MB
6:24:54 PM: Finished downloading cache in 1.254844074s
6:24:54 PM: Starting to extract cache
6:25:07 PM: Finished extracting cache in 12.531234217s
6:25:07 PM: Finished fetching cache in 13.840983084s
6:25:07 PM: Starting to prepare the repo for build
6:25:07 PM: Preparing Git Reference pull/3/head
6:25:12 PM: Parsing package.json dependencies
6:25:13 PM: Starting build script
6:25:13 PM: Installing dependencies
6:25:13 PM: Python version set to 2.7
6:25:13 PM: Started restoring cached node version
6:25:15 PM: Finished restoring cached node version
6:25:16 PM: v16.13.0 is already installed.
6:25:17 PM: Now using node v16.13.0 (npm v8.1.0)
6:25:17 PM: Started restoring cached build plugins
6:25:17 PM: Finished restoring cached build plugins
6:25:17 PM: Attempting ruby version 2.7.2, read from environment
6:25:18 PM: Using ruby version 2.7.2
6:25:19 PM: Using PHP version 8.0
6:25:19 PM: Started restoring cached node modules
6:25:19 PM: Finished restoring cached node modules
6:25:19 PM: Installing NPM modules using NPM version 8.1.0
6:25:38 PM: added 36 packages, removed 3 packages, and audited 2471 packages in 18s
6:25:38 PM: 196 packages are looking for funding
6:25:38 PM:   run `npm fund` for details
6:25:38 PM: 42 vulnerabilities (31 moderate, 9 high, 2 critical)
6:25:38 PM: To address all issues (including breaking changes), run:
6:25:38 PM:   npm audit fix --force
6:25:38 PM: Run `npm audit` for details.
6:25:38 PM: NPM modules installed
6:25:39 PM: Started restoring cached go cache
6:25:39 PM: Finished restoring cached go cache
6:25:39 PM: go version go1.16.5 linux/amd64
6:25:39 PM: go version go1.16.5 linux/amd64
6:25:39 PM: Installing missing commands
6:25:39 PM: Verify run directory
6:25:41 PM: ​
6:25:41 PM: ────────────────────────────────────────────────────────────────
6:25:41 PM:   Netlify Build                                                 
6:25:41 PM: ────────────────────────────────────────────────────────────────
6:25:41 PM: ​
6:25:41 PM: ❯ Version
6:25:41 PM:   @netlify/build 19.0.6
6:25:41 PM: ​
6:25:41 PM: ❯ Flags
6:25:41 PM:   baseRelDir: true
6:25:41 PM:   buildId: 61a3c97319fc690008ec4b7c
6:25:41 PM:   deployId: 61a3c97319fc690008ec4b7e
6:25:41 PM: ​
6:25:41 PM: ❯ Current directory
6:25:41 PM:   /opt/build/repo
6:25:41 PM: ​
6:25:41 PM: ❯ Config file
6:25:41 PM:   No config file was defined: using default values.
6:25:41 PM: ​
6:25:41 PM: ❯ Context
6:25:41 PM:   deploy-preview
6:25:41 PM: ​
6:25:41 PM: ────────────────────────────────────────────────────────────────
6:25:41 PM:   1. Build command from Netlify app                             
6:25:41 PM: ────────────────────────────────────────────────────────────────
6:25:41 PM: ​
6:25:41 PM: $ yarn build
6:25:42 PM: yarn run v1.22.17
6:25:42 PM: warning package.json: No license field
6:25:42 PM: $ react-scripts build
6:25:47 PM: Creating an optimized production build...
6:27:45 PM: 
6:27:45 PM: Treating warnings as errors because process.env.CI = true.
6:27:45 PM: Most CI servers set it automatically.
6:27:45 PM: 
6:27:45 PM: Failed to compile.
6:27:45 PM: 
6:27:45 PM: src/hooks/useInchDex.js
6:27:45 PM:   Line 11:6:  React Hook useEffect has a missing dependency: 'Moralis'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
6:27:45 PM: error Command failed with exit code 1.
6:27:45 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
6:27:45 PM: ​
6:27:45 PM: ────────────────────────────────────────────────────────────────
6:27:45 PM:   "build.command" failed                                        
6:27:45 PM: ────────────────────────────────────────────────────────────────
6:27:45 PM: ​
6:27:45 PM:   Error message
6:27:45 PM:   Command failed with exit code 1: yarn build
6:27:45 PM: ​
6:27:45 PM:   Error location
6:27:45 PM:   In Build command from Netlify app:
6:27:45 PM:   yarn build
6:27:45 PM: ​
6:27:45 PM:   Resolved config
6:27:45 PM:   build:
6:27:45 PM:     command: yarn build
6:27:45 PM:     commandOrigin: ui
6:27:45 PM:     environment:
6:27:45 PM:       - REVIEW_ID
6:27:45 PM:     publish: /opt/build/repo/build
6:27:45 PM:     publishOrigin: ui
6:27:45 PM: Caching artifacts
6:27:45 PM: Started saving node modules
6:27:45 PM: Finished saving node modules
6:27:45 PM: Started saving build plugins
6:27:45 PM: Finished saving build plugins
6:27:45 PM: Started saving pip cache
6:27:45 PM: Finished saving pip cache
6:27:45 PM: Started saving emacs cask dependencies
6:27:45 PM: Finished saving emacs cask dependencies
6:27:45 PM: Started saving maven dependencies
6:27:45 PM: Finished saving maven dependencies
6:27:45 PM: Started saving boot dependencies
6:27:45 PM: Finished saving boot dependencies
6:27:45 PM: Started saving rust rustup cache
6:27:45 PM: Finished saving rust rustup cache
6:27:45 PM: Started saving go dependencies
6:27:45 PM: Finished saving go dependencies
6:27:45 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:27:45 PM: Creating deploy upload records
6:27:45 PM: Failing build: Failed to build site
6:27:45 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
6:27:46 PM: Finished processing build request in 2m52.411383294s

Wallet Connect is not working.

In this example (https://ethereum-boilerplate.github.io/ethereum-boilerplate/quickstart), I cannot connect, for example, with Trust Wallet

I scan the QR on my phone, do all the necessary confirmations, but there is no authorization on the site.

I have the same problem on my local server.

Livestreaming

I am sorry I know this is not an issue.
But I was thinking of developing a live streaming chat room dapp. Is there anything on this boiler plate that can help.😁😁

Missing Dependencies/ Compile Issue

"Yarn" has been loaded with terminal. Issue Happens when Running "npm start"

NPM Start: Missing Dependencies/ Compilation with Warning.

---

Compiled with warnings.

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.

---

Add PWA Support

In order to improve the UX and performance of Ethereum Boilerplate, adding PWA functionality will be a great feature to be added. This will in turn make Ethereum Boilerplate-based Web dApps to be available offline (frontend cached service worker, but still can't connect to backend functionality) and feel more closer to native mobile apps.

DEX-decimals issue

If you try to SWAP from (doesn't matter the coin/token) with the value 0.0012/0.0013, it crashes with:

Error: [number-to-bn] while converting number "0x0.004189374bc6a7f" to BN.js instance, error: invalid number value. Value must be an integer, hex string, BN or BigNumber instance. Note, decimals are not supported. Given value: "0x0.004189374bc6a7f"

Authentication doesn't work with safepal app, trust wallet app and switch network doesn't work with Math wallet and Coin98 wallet chrome extensions.

I try to build a demo for my team using Moralis. I'm using the demo version at: https://ethereum-boilerplate.github.io/ethereum-boilerplate and also localhost, but I have some issues please help to resolve them.

1. Authentication doesn't work with Safepal app, Trust wallet app ( Using android mobile and Safapal app, trust wallet app from CH play)
Trust wallet app:

Safepal app:

2. Switch network doesn't work with Math wallet and Coin98 wallet chrome extensions.
Step 1: I successfully connected to the BSC network using Math Wallet

Step 2: When I try to switch the network to Polygon or Etherium network, nothing happens.
console.log

Error response from API:

I think these features are necessary for our team to start using Moralis as the main SDK

Set custom gas for active web3 used (ie: useWeb3Contract())

Is there a way to set user defined gas (for example to provide the user with slow, average, fast) gas options? If so, what would be the best way to do so!

Hope I am not missing something on my end that should be straightforward.

Display BSC Transfers & Balance

in : ERC20Balance + ERC20 Transfers
I want to display other blockchain ( BSC, Polygon & ... ). What should I do?

The NFTBalance page does not display anything.

Fix name of file build/contracts/Metacoin.json in Truffle/scripts/contractInfo.js

Some components are not rendering

Some components are not rendering partially (such as the wallet section) and some don't render entirely (such as the fiat section)

Console log: https://media.discordapp.net/attachments/691025042343198740/921350541509029888/unknown.png?width=1202&height=676

I'm not very technical but based on some basic researching I think this has something to do with ReactDOM

.

(Bug) Closing and reopening the browser leads to inability to login with any wallet - Replicable

Issue description

After I login with my wallet and then close the browser and reopen it -> I become logged out and when trying to login again with one of the wallets nothing happens and the console says chain null

Steps to reproduce the issue

1. Run the project locally (I also deployed it to moralis and tested locally, on chrome)
2. Login with Metamask
3. Refresh
4. Stay logged in
5. Close browser/Restart PC - Make sure in task manager chrome is fully closed since running PWA's or chrome in the background will prevent this bug from happening
6. Open the browser
7. Navigate to the server address (Same bug if you leave the tab open or close it before you shutdown the browser\pc)
8. You will now need to reauthenticate (and the console is filled with chain null console logs coming from Chains.jsx, unlike normal runs)
9. Try to login with Metamask - Nothing happens
10. Open DevTools - Whenever you click on a wallet login button it will log -> chain null

What's the expected result?

When I reopen the browser I expect it to remain logged in, or notify me of the lost connection and ask to reconnect my wallet, without refreshing the browser a few times to get login to work again

What's the actual result?

I login, close the browser, reopen it, and I can't login unless I refresh a few times, and then I need to relogin - all within the same minute

Additional details / screenshot

1. Login with Metamask: (I did some CSS but this is happening before I did any changes)
   

2. Close browser and reopen it:
   
   Console at that state:
   

3. Click Authenticate:
   
   Console didn't change

4. Select Metamask - Nothing happens - But the console changes:
   
   Let's click again:
   
   Let's click other wallets now:
   
   Reminds me, My friend tried to connect with WalletConnect and the connection said Connected but it never got the address and showed that he logged in
   Let's actually click more working wallets now:
   
   As you can see my problem seems to be comming from Chains.jsx, as indicated by line 91 of that file where the chain is being reported as null for some reason only when the browser is closed and reopened.
   I assumed the problem comes from the localStorage but never actually was able to resolve it myself and so I will be super grateful for any help on that topic :)

Also changed BrowserRouter to HashBrowser allowing routes to be accessed when you refresh.. but the issue was there before it.

Failed to compile

Ran the following commands

git clone https://github.com/ethereum-boilerplate/ethereum-boilerplate.git
cd ethereum-boilerplate
yarn install
yarn start

Got the following error:

./src/components/NFTBalance.jsx
Attempted import error: 'getExplorer' is not exported from 'helpers/networks'.

Misleading home page instruction

yarn connect isn't running properly. No servers are found.
I dug into the source code and found it requires a Ganache server, which is a local dev chain server.
The instructions point to https://docs.moralis.io/moralis-server/getting-started/create-a-moralis-server
Which tells you to create a main net server.

Connecting your Local Chain to the Moralis DB
I would suggest updating the boilerplate step to include creating a local dev chain server.

The experience I have had is that I tried to add the main net server's details into the .env file

Gif Issue

Minor issue with trasnfer. Should be transfer in the gif.

Failed to compile.

I want to clone it. but When running "yarn start". This error is displayed to me in the terminal:

Line 0: Parsing error: ImportDeclaration should appear when the mode is ES6 and in the module context

Adding ESLINT + Prettier Support

In order to increase the readibility of the code, linting and formatting must be incorporated within the development process. The most popular linter in JS is ESLINT and similarly for formatter it is Prettier. To enforce this within the code:

1. Add eslint and prettier to package.json
2. Add a default eslintconfig and prettierconfig file. Additionally, add local .vscode configuration if needed
3. Add all these linting and formatting process in git hooks so that it would be forced when making a new commit

In addition, this will also make PR codes more consistent and easier to review.

Error when accessing Localhost:3000

Error when accessing localhost for development, Saying no Context provider.
This is a fresh download and instance of VS and the Boilerplate being ran on the local host.

Last issue gave a Compile error and missing Dependencies error: https://github.com/ethereum-boilerplate/ethereum-boilerplate/issues/24

---

---

Below is what I copied from the Photo
_

NoMoralisContextProviderError: Make sure to only call useMoralis within a
NoMoralisContextProviderError.ReactMoralisError [as constructor]
C:/Users/Owner/Desktop/src/Errors.ts:4
1 | export class ReactMoralisError extends Error {
2 | static isReactMoraliserrpr = true;
3 |
4 | constructor(message: string) {
5 | super([react-moralis]: ${message});
6 | this.name = "ReactMoralisError";
7 | this.message = message;
View compiled
new NoMoralisContextProviderError
C:/Users/Owner/Desktop/src/Errors.ts:12
9 | }
10 |
11 | export class NoMoralisContextProviderError extends ReactMoralisError {
12 | constructor(message: string) {
13 | super(message);
14 | this.name = "NoMoralisContextProviderError";
15 | }
View compiled
useMoralis
C:/Users/Owner/Desktop/src/hooks/useMoralis/useMoralis.ts:9
6 | const moralisContext = useContext(MoralisContext);
7 |
8 | if (!moralisContext) {
9 | throw new NoMoralisContextProviderError(
| ^ 10 | "Make sure to only call useMoralis within a ",
11 | );
12 | }
View compiled
QuickStart
C:/Users/Owner/Desktop/ethereum-boilerplate-main/src/components/QuickStart.jsx:26
23 | };
24 |
25 | export default function QuickStart({ isServerInfo }) {
26 | const { Moralis } = useMoralis();
27 |
28 | const isInchDex = useMemo(
29 | () => (Moralis.Plugins?.oneInch ? true : false),
View compiled
▶ 17 stack frames were collapsed.
Module.
C:/Users/Owner/Desktop/ethereum-boilerplate-main/src/index.js:32
29 | };
30 |
31 | /** Get your free Moralis Account https://moralis.io/ */
32 | ReactDOM.render(
33 | // <React.StrictMode>
34 | ,
35 | // </React.StrictMode>,
View compiled
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:8158:30
webpack_require
C:/Users/Owner/Desktop/ethereum-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/Owner/Desktop/ethereum-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:8536:18
webpack_require
C:/Users/Owner/Desktop/ethereum-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/Owner/Desktop/ethereum-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/Owner/Desktop/ethereum-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

---

Able to transfer native assets

Native

I wish there would be a way to transfer native assets such as eth to someone I know it can be done easily but just had a suggestion

Add CONTRIBUTING.md

just a suggestion that we have a dedicated CONTRIBUTING.md page in the repo to succinctly guide people who would like to contribute to the project.

can't interact with ui on windows 11. MacOS is fine.

I can't click any button at all. Quickstart page opens default and stays at that page forever:) Any help?

Replacing Truffle with Hardhat Framework

As the whole world, along with Moralis SDK and infrastructure is moving towards using ethers.js, it is important to adapt the ethereum boilerplate accordingly. Using Hardhat, which uses ether.js as default will be aligned towards that trend.

Returned values aren't valid, did it run Out of Gas?

When I change the preloaded solidity contract and change the required files I cannot run the functions on the contract tab. It rather generates the error on console

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.