- Deploy the smart contract to rinkeby using hardhat
npx hardhat run scripts/deploy.js --network rinkeby
- Check alchemy.com to see if it recevived the request.
- Check if contract has been deployed on etherscan to interact with it using the Transaction Hash
TODO - Before deploying with hardhat we would want to compile and run tests first. Would need to:
- Compile
- Deploy to localhh
- Run Tests
- Once tests are good then deploy to rinkeby
Aternatively can use Remix to deploy to to vm with quick ui elements for manual testing. Then deploy to rinkeby there.
- Copy the deployed smart contract address and paste it into CONSTANTS.js
- (If Hardhat deployed) Copy the ABI from artifacts/contracts/Contractname.json
- (If Remix) Copy the ABI from ContractName_metadata.json within artifacts folder and paste it into frontend contract-abi.json
- note abi is the array property of "abi": []
TODO - automate the hooking up of the frontend config to deployed contract
- Now our frontend is hooked up to that smartcontract and can start to read and write to the smart contract.
using a new terminal:
yarn start
https://docs.alchemy.com/alchemy/tutorials/how-to-create-an-nft
deploy the smart contract to rinkeby
npx hardhat run scripts/deploy.js --network rinkeby
- (DONE) Make sure Code 10000 NFT Mint Dapp part1 .sol code is tight and can be deployed on remix
- (DONE) Make sure that using remix can deploy on rinkeby
- Manually upload images to be on nft.storage or pinata.cloud and be able to have smartcontract NFT uri correctly point to them
- Ensure images work and can see on testnets.opensea
- Need test images and metadata
- Figure out how to programmatically using nft.storage API and node.js to post on nft.storage and get back the CID. Then pass the CID into the smartcontract. HOW? Can do this one by one passing the CID as the data when minting? This is lazy minting good right? Using IPFS as baseURI
- Premint everything? Then everything is visible on the Smart Contract.Or mint a subset and release in batches? How to ensure that images are uploaded in batches? Can get the CID before upload?
- Commented per Solidity NatSpec
- 2 or more good design patterns
- Secured - protect against at least 2 attack vectors with SWC#
this can be learned in the dApp section of bootcamp
(done) Setup cra and hardhat learn ethers or web3js(with hardhat) react query and querying the blockchain
- A frontend where users can see the images collection.
- Users can filter based on the layers and each variations.
- User can click "buy button" on the NFT and metamask opens. We load the appropriate transaction data and our smart contract address into Metamask for user to submit the transaction.
- The NFT is then assigned/transferred to user's eth account.
- Our website updates - by putting a SOLD sticker on the NFT's has been sold
Uploading Files to IPFS from a Web Application - Nader Dabit
This project contains the starter files for Alchemy's NFT Minter tutorial, in which we teach you how to connect your smart contract to your React dApp project by building an NFT Minter using Metamask and Web3.
https://docs.alchemy.com/alchemy/tutorials/nft-minter/~/settings/env https://composer.alchemyapi.io/
https://docs.alchemy.com/alchemy/tutorials/nft-minter/~/settings/env#step-5-nft-metadata-101
This is good stuff -
- Change the endpoint for NFTE to rinkeby or just build my own
- point to our own smart contract
- update this with out own smart contract
window.contract = await new web3.eth.Contract(contractABI, contractAddress)
- update this with out own smart contract
- deploy this to netlify
- Add in viewing and browsing of NFTs in the contract
- update the pinata pipeline to handle the 10000 images!!!
"It would be great to have a little web page that you could paste a token ID into and view the token asset and metadata.
This should be pretty simple to wire up using nfte.app, a react component that does some nice presentation if you give it info about an NFT. Since our contract won't be deployed on mainnet, we'll need to provide our own endpoint for the viewer to connect to, so this implies a minty serve command (or similar) that will host an endpoint to supply the data.
We'll also need a simple react app that has a text field for the token ID and updates the NFTE component on changes." https://nfte.app/
https://docs.alchemy.com/alchemy/tutorials/transfers-tutorial
https://docs.alchemy.com/alchemy/documentation/alchemy-web3/enhanced-web3-api - use this to display tokens
https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13
- Using a separate program - this is non part of the final project and will be done later by me
This project demonstrates a basic Hardhat use case. It comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts.
Try running some of the following tasks:
npx hardhat accounts
npx hardhat compile
npx hardhat clean
npx hardhat test
npx hardhat node
node scripts/sample-script.js
npx hardhat helpnpx hardhat
Hardhat is used through a local installation in your project. This way your environment will be reproducible, and you will avoid future version conflicts.
To install it, you need to create an npm project by going to an empty folder, running npm init, and following its instructions. Once your project is ready, you should run
INSTEAD of npm init this repo used:
npx create-react-app my-cra-hardhat
then
npm install --save-dev hardhat
To use your local installation of Hardhat, you need to use npx to run it (i.e. npx hardhat).
To create your Hardhat project run npx hardhat in your project folder.
npx hardhat
then install dependencies - hardhat will tell you how
TODO: look up which network starting
npx hardhat node
Compile .sol files in the contracts folder
npx hardhat compile
files are then generated in the artifacts\ folder.
note that artifacts\hardhat\console.sol was automatically compiled along with our artifacts\contracts\Greeter.sol file.
You can run your tests - files in the test folder
npx hardhat test
Next, to deploy the contract we will use a Hardhat script. Inside scripts/ you will find sample-script.js.
Run it with:
npx hardhat run scripts/sample-script.js
Hardhat will always spin up an in-memory instance of Hardhat Network on startup by default.
It's also possible to run Hardhat Network in a standalone fashion so that external clients can connect to it. This could be MetaMask, your Dapp front-end, or a script.
To run Hardhat Network in this way, run
npx hardhat node
This will expose a JSON-RPC interface to Hardhat Network. To use it connect your wallet or application to http://localhost:8545.
If you want to connect Hardhat to this node to, for example, run a deployment script against it, you simply need to run it using --network localhost.
To try this, start a node with npx hardhat node and re-run the sample script using the network option:
npx hardhat run scripts/sample-script.js --network localhost
In summary the command above deploys the Greeter to localhost instead of the default in-memory Hardhat Network
configure to default run JSON-RPC localhh instead of the inmemory hardhat network.
This means that when deploying don't have to specify --network localhost. can just use this
npx hardhat run scripts/sample-script.js
npx hardhat node //starts up JSON-RPC Hardhat Network
npx hardhat run scripts/sample-script.js // this script does a deployment of whatever .sol files is specified inside it