Giter Club home page Giter Club logo

web3-nft-dapp-tutorial's Introduction

Web3 - Full Tutorial

The demo contains a basic web3 app and smart contract for minting NFTs.

Usage

git clone <this-repo>
npm install

# terminal 1
npx hardhat node

# terminal 2
npx hardhat compile
npx hardhat run scripts/sample-script.js --network localhost

# terminal 3 
npm run dev

Update the deployed contract address in compoonents/Home.js

web3-nft-dapp-tutorial's People

Contributors

codediodeio avatar gregckrause avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

web3-nft-dapp-tutorial's Issues

Edit IPFS Address on JSON file

If the folder already uploaded, how do you edit the ipfs CID on json file, because you get the CID AFTER you upload it to Pinata

{
  "name": "sloppy-steve",
  "description": "A drawing of sloppy steve",
  "image": "ipfs://YOUR_ASSET_CID", //This One
  "attributes": [
    {
      "beard": "",
      "rarity": 0.5
    }
  ]
}

Image not showing

Why does it not show the image before it is minted? Is it going to display the image before they are minted if I upload my collection to the opensea mainnet?

hardhat-waffle needs to be imported on hardhat.config.js

At hardhat.config.js step of the web tutorial, it's missing the hardhat-waffler import:

require("@nomiclabs/hardhat-waffle");

Without that line, it will through an error:

TypeError: Cannot read property 'getContractFactory' of undefined

error when loading page

when i try to load the page i get this error: index.ts:225 Uncaught (in promise) Error: call revert exception (method="count()", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0) and this one
Uncaught (in promise) Error: call revert exception (method="isContentOwned(string)", errorArgs=null, errorName=null, errorSignature=null, reason=null, code=CALL_EXCEPTION, version=abi/5.5.0)

i dont know how to fix this and also dont know what the causes the problem

Speaking about mobile devices

I know that it is possible to open the metamask app directly from the button without copying and pasting the link into the metamask browser because other collections do this. do you know how to do it?

[Error] The expected chainId is 31337

Hello,

First of all thanks for this amazing introduction to web3 and the work you've put in !

I tried do recreate what you did but encountered an error, and so I decided to clone your repo to try it out and I have the same issue.

When I want to mint a token, Metamask opens but the transaction failed with this error in my Hardhat node server:
Trying to send a raw transaction with an invalid chainId. The expected chainId is 31337

And this error on the front part:

{
  code: -32603,
  message: `"[ethjs-query] while formatting outputs from RPC '{"value":{"code":-32603,"data":{"code":-32602,"message":"Trying to send a raw transaction with an invalid chainId. The expected chainId is 31337"}}}'"`
}

In the code, I've only changed the CID to point to my Piñata file and removed the matic network configuration in the Hardhat config because I want to test locally.

Do you know why it does this ?

Thanks in advance,

Félix

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.