Coder Social home page Coder Social logo

radicalize.art's Introduction

๐Ÿ— scaffold-eth - ๐ŸŽŸ Simple NFT Example

Mint and display NFTs on Ethereum with a full example app...


๐Ÿƒโ€โ™€๏ธ Quick Start

required: Node plus Yarn and Git

git clone https://github.com/austintgriffith/scaffold-eth.git simple-nft-example

cd simple-nft-example

git checkout simple-nft-example
yarn install
yarn start

in a second terminal window:

cd simple-nft-example
yarn chain

in a third terminal window:

cd simple-nft-example
yarn deploy

๐Ÿ“ฑ Open http://localhost:3000 to see the app


โœ๏ธ Edit the mint script mint.js in packages/hardhat/scripts and update the toAddress to your frontend address (wallet address in the top right or localhost:3000).

image

in a terminal window run the mint script:

yarn mint

image

๐Ÿ‘€ You should see your collectibles show up if you minted to the correct address:

image

๐Ÿ‘› Open an incognito window and navigate to http://localhost:3000 (You'll notice it has a new wallet address).

โ›ฝ๏ธ Grab some gas for each account using the faucet:

image

๐ŸŽŸ Send an NFT to the incognito window address:

image


๐Ÿ•ต๐Ÿปโ€โ™‚๏ธ Inspect the Debug Contracts tab to figure out what address is the owner of YourCollectible?

๐Ÿ’ผ Edit your deployment script deploy.js in packages/hardhat/scripts


๐Ÿ” Edit your smart contract YourCollectible.sol in packages/hardhat/contracts

๐Ÿ“ Edit your frontend App.jsx in packages/react-app/src

๐Ÿ”‘ Create wallet links to your app with yarn wallet and yarn fundedwallet

โฌ‡๏ธ Installing a new package to your frontend? You need to cd packages/react-app and then yarn add PACKAGE

๐Ÿ“ก Deploy NFT smart contract!

๐Ÿ›ฐ Ready to deploy to a testnet?

Change the defaultNetwork in packages/hardhat/hardhat.config.js

image

๐Ÿ” Generate a deploy account with yarn generate

image

๐Ÿ‘› View your deployer address using yarn account (You'll need to fund this account. Hint: use an instant wallet to fund your account via QR code)

image

๐Ÿ‘จโ€๐ŸŽค Deploy your NFT smart contract:

yarn deploy


โœ๏ธ Edit your frontend App.jsx in packages/react-app/src to change the targetNetwork to wherever you deployed your contract:

image

You should see the correct network in the frontend:

image

An instant wallet running on xDAI insired by xdai.io.

๐ŸŽซ Ready to mint a batch of NFTs for reals?

yarn mint

await tenderlyVerify( {contractName: "YourContract", contractAddress: yourContract.address })

Make sure your target network is present in the hardhat networks config, then either update the default network in `hardhat.config.js` to your network of choice or run:

yarn deploy --network NETWORK_OF_CHOICE

Once verified, they will then be available to view on Tenderly!

![image](https://user-images.githubusercontent.com/2653167/109539529-a5240000-7a7e-11eb-8d58-6dd7a14e1454.png)


## โš”๏ธ Side Quests

#### ๐ŸŸ Open Sea

> Add your contract to OpenSea ( create -> submit NFTs -> "or add an existing contract" )

(It can take a while before they show up, but here is an example:)

https://testnets.opensea.io/assets/0xc2839329166d3d004aaedb94dde4173651babccf/1

---


#### ๐Ÿ” Etherscan Contract Verification

> run `yarn flatten > flat.txt` (You will need to clean up extra junk at the top and bottom of flat.txt. Sorry, rookie stuff here.)

> copy the contents of `flat.txt` to the block explorer and select compiler `v0.6.7` and `Yes` to `Optimization` (200 runs if anyone asks)

![image](https://user-images.githubusercontent.com/2653167/109540618-f84a8280-7a7f-11eb-9a34-c239f1271247.png)

---

#### ๐Ÿ”ถ Infura

> You will need to get a key from [infura.io](https://infura.io) and paste it into `constants.js` in `packages/react-app/src`:

![image](https://user-images.githubusercontent.com/2653167/109541146-b5d57580-7a80-11eb-9f9e-04ea33f5f45a.png)

---

## ๐Ÿ›ณ Ship the app!

> โš™๏ธ build and upload your frontend and share the url with your friends...

```bash

# build it:

yarn build

# upload it:

yarn surge

Join the telegram [support chat ๐Ÿ’ฌ](https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA)  to ask questions and find others building with ๐Ÿ— scaffold-eth!

yarn s3

===================================================== [โซ back to the top โซ](https://github.com/austintgriffith/scaffold-eth#-scaffold-eth)

yarn ipfs

image

๐Ÿ‘ฉโ€โค๏ธโ€๐Ÿ‘จ Share your public url with a friend and ask them for their address to send them a collectible :)

transfernft2

radicalize.art's People

Contributors

rkalis avatar rnbrady avatar stefanvelkoski avatar

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.