Building a web3 frontend with React

[Mohmmadanas]

I'm trying to download ethers using (npm install ethers)

but I got this error

npm ERR! code E404
npm ERR! 404 Not Found - GET http://registry.npmjs.org/@nomiclabs%2fhardhat-ethers/
npm ERR! 404
npm ERR! 404 '@nomiclabs/hardhat-ethers@*' is not in this registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR! ### C:\Users\anasm\AppData\Local\npm-cache_logs\2022-01-16T12_22_48_988Z-debug.log``

and this is my code :

import { useEffect, useState } from 'react';
import './App.css';
import contract from './contracts/NFTCollectible.json';

const contractAddress = "0x5a8bdcbf5d18d3b95df6647a6bc1e9ccff2b0cb4";
const abi = contract.abi;

function App() {

  const [currentAccount, setCurrentAccount] = useState(null);

  const checkWalletIsConnected = async () => {
    const { ethereum } = window;

    if (!ethereum) {
      console.log("Make sure you have Metamask installed!");
      return;
    } else {
      console.log("Wallet exists! We're ready to go!")
    }

    const accounts = await ethereum.request({ method: 'eth_accounts' });

    if (accounts.length !== 0) {
      const account = accounts[0];
      console.log("Found an authorized account: ", account);
      setCurrentAccount(account);
    } else {
      console.log("No authorized account found");
    }
  }

  const connectWalletHandler = async () => {
    const { ethereum } = window;

    if (!ethereum) {
      alert("Please install Metamask!");
    }

    try {
      const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
      console.log("Found an account! Address: ", accounts[0]);
      setCurrentAccount(accounts[0]);
    } catch (err) {
      console.log(err)
    }
  }
  const mintNftHandler = async () => {
    try {
      const { ethereum } = window;

      if (ethereum) {
        const provider = new ethers.providers.Web3Provider(ethereum);
        const signer = provider.getSigner();
        const nftContract = new ethers.Contract(contractAddress, abi, signer);

        console.log("Initialize payment");
        let nftTxn = await nftContract.mintNFTs(1, { value: ethers.utils.parseEther("0.01") });

        console.log("Mining... please wait");
        await nftTxn.wait();

        console.log(`Mined, see transaction: https://rinkeby.etherscan.io/tx/${nftTxn.hash}`);

      } else {
        console.log("Ethereum object does not exist");
      }

    } catch (err) {
      console.log(err);
    }
  }
  

  const connectWalletButton = () => {
    return (
      <button onClick={connectWalletHandler} className='cta-button connect-wallet-button'>
        Connect Wallet
      </button>
    )
  }

  const mintNftButton = () => {
    return (
      <button onClick={mintNftHandler} className='cta-button mint-nft-button'>
        Mint NFT
      </button>
    )
  }

  useEffect(() => {
    checkWalletIsConnected();
  }, [])

  return (
    <div className='main-app'>
      <h1>Scrappy Squirrels Tutorial</h1>
      <div>
        {currentAccount ? mintNftButton() : connectWalletButton()}
      </div>
    </div>
  )
}

export default App;

[ricmoo]

Have you configured a custom registry in your .npmrc? That is not a dependency of ethers, so it doesn’t make sense it would attempt to download it.

[Mohmmadanas]

What is the .npmrc ?
I don't know about that !

[yuetloo]

The error was complaining about @nomiclabs/hardhat-ethers, which is a hardhat plugin for ethers.js.

See hardhat's documentation for more information: https://hardhat.org/plugins/nomiclabs-hardhat-ethers.html

You might be able to fix the error by removing the trailing @* from @nomiclabs/hardhat-ethers@* in your package.json file and regenerate package-lock.json file.