🏗 scaffold-eth - Rarible Starter App

start building an NFT application using the Rarible Protocol! 🚀

---

🏃‍♀️ Quick Start

🖼 Minting Your Collectibles

🗂 Rarible Item Indexer

📒 Rarible Order Book

🦥 Lazy Minting

💵 Selling a lazy minted item

Built with 🏗 scaffold-eth

• 🎨 Nifty.ink (code)
• 🧑‍🎤PunkWallet.io (code)

🌉 Infrastructure

• 🛰 The Graph
• 🔬 Tenderly
• 🌐 Etherscan
• 🔶 Infura
• 🟪 Blocknative

|- 📠 Legacy Content - | - 💬 Support Chat -|

---

---

---

---

Quick Start

⚠️⚠️ This application connects to the Rarible contracts & API on Ropsten ⚠️⚠

required: Node plus Yarn and Git

git clone https://github.com/ipatka/scaffold-eth.git

cd scaffold-eth

git checkout rarible-starter-app

yarn install

yarn start

📱 Open http://localhost:3000 to see the app

🏗 scaffold-eth is a hackthon stack for quick product prototyping on Ethereum.

👩‍🔬 This scaffolding leverages state of the art tooling from the ecosystem.

🖼 This fork of scaffold-eth implements the basic features and functionality of the Rarible protocol

🧪 It is a free standing dapp so you can learn by making small changes.

After installing, your dev environment should look like this:

React dev server, Ropsten network, deploy terminal, code IDE, and frontend browser.

Mint your collectibles

Mint some NFTs that we can use to test out the Rarible protocol.

in a second terminal window:

cd scaffold-eth
yarn generate
yarn accounts

🔐 Generate a deploy account with yarn generate and view it with yarn account

💵 Fund your deployer account with some Ropsten Eth from a faucet

Deploy your contract (optional, you can also just use the default one):

yarn deploy

✏️ Edit the address in packages/react-app/src/contract/YourCollectible.address.js to your deployed contract address

💼 Edit the mint script mint.js in packages/hardhat/scripts to mint to your browser wallet address

After minting, your dev environment should look like this:

You can visit your new NFTs on the Rarible site by specifying the contract address & tokenID in the URL like this

https://ropsten.rarible.com/token/0x66f806bf40bfa98f2dac85a85d437895043f2be5:1?tab=owners

Rarible Item Indexer

Go to the Rarible Item indexer tab and enter the contract address for our YourCollectible contract.

This tab uses the metadata indexer which is documented here: https://api-reference.rarible.com/#operation/getItemMetaById

You can also use the Rarible indexer to get NFT data for an entire collection, all NFTs owned by an address, and more.

Rarible Order Book

We can create a sell order for one of these NFTs right from the item indexer.

First we need to make sure the Rarible Exchange is approved to transfer NFTs on our behalf when they are sold.

Enter the Rarible Transfer Proxy address and hit 'Approve'.

Rarible Transfer Proxy on Ropsten: 0xf8e4ecac18b65fd04569ff1f0d561f74effaa206

Example Tx

Now select 'Sell for ETH' and enter the ETH amount and use the *️⃣ button to format it in wei.

Sign the order to submit it to Rarible.

Now go over to the Rarible Order Indexer tab and find the order you just created by entering the collection address and token ID.

Fill the order, and submit the transaction to the Rarible exchange.

Example Tx

Now on the Rarible UI you can see the listing and transfer history!

Lazy Minting

With Lazy Minting you can defer the gas costs of minting the NFT to the first buyer.

For this example we will use the standard Rarible ERC721 contract deployed here: 0xB0EA149212Eb707a1E5FC1D2d3fD318a8d94cf05

All you need for lazy minting is the IPFS hash of your NFT content.

Go to the IPFS upload tab

Modify the content, or just hit upload

Copy the IPFS hash

Go to the lazy minting tab and enter the hash.

Press mint

Now let's go to the item indexer and see the lazy minted NFT

Copy your contract address and token ID from the lazy minting tab

Enter them on the item indexer

We can also view the lazy minted item on the Rarible UI!

https://ropsten.rarible.com/token/0xB0EA149212Eb707a1E5FC1D2d3fD318a8d94cf05:52585140568026265337503508601622814624376142828352682734444878603886713110535?tab=history

Selling a lazy minted item

Same process as the normal minted item. Enter your contract address & token ID on the order indexer, and click 'fill order'.

Built with scaffold-eth

This starter app was built using Austin Griffith's Scaffold-Eth framework. For more starter apps and inspiration check out the BuidlGuidl

👩‍🎨 Nifty Ink

Paintings come to life as you "ink" new creations and trade them on Ethereum. A deep dive into 🖼 NFTs, 🐳 OpenSea, 🖍 react-canvas-draw, 🎨 react-color, and 🛬 onboarding user experience.

🏃‍♂️ SpeedRun 📹 (TODO)

💾 Source Code

🧙‍♂️ Instant Wallet

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

💾 Source Code

🗳 Personal Token Voting

Poll your holders! Build an example emoji voting system with 🏗 scaffold-eth. 🔏 Cryptographically signed votes but tracked off-chain with 📡 Zapier and 📑 Google Sheets.

🏃‍♂️ SpeedRun 📹

💾 Source Code

^^^ ⛏ PLEASE PR your 🏗 scaffold-eth project in above!!! 🙏🙏🙏 ^^^

---

===================================================== ⏫ back to the top ⏫

---

---

📟 Infrastructure

---

🛰 Using The Graph

🎥 here is another Graph speed run tutorial video

---

🔬 Using Tenderly

Tenderly is a platform for monitoring, alerting and trouble-shooting smart contracts. They also have a hardhat plugin and CLI tool that can be helpful for local development!

Hardhat Tenderly announcement blog for reference.

Verifying contracts on Tenderly

scaffold-eth includes the hardhat-tenderly plugin. When deploying to any of the following networks:

["kovan","goerli","mainnet","rinkeby","ropsten","matic","mumbai","xDai","POA"]

You can verify contracts as part of the deploy.js script. We have created a tenderlyVerify() helper function, which takes your contract name and its deployed address:

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!

Exporting local Transactions

One of Tenderly's best features for builders is the ability to upload local transactions so that you can use all of Tenderly's tools for analysis and debugging. You will need to create a tenderly account if you haven't already.

Exporting local transactions can be done using the Tenderly CLI. Installing the Tenderly CLI:

brew tap tenderly/tenderly
brew install tenderly

See alternative installation steps here

You need to log in and configure for your local chain (including any forking information) - this can be done from any directory, but it probably makes sense to do under /packages/hardhat to ensure that local contracts are also uploaded with the local transaction (see more below!)

cd packages/hardhat
tenderly login
tenderly export init

You can then take transaction hashes from your local chain and run the following from the packages/hardhat directory:

tenderly export <transactionHash>

Which will upload them to tenderly.co/dashboard!

Tenderly also allows users to debug smart contracts deployed to a local fork of some network (see yarn fork). To let Tenderly know that we are dealing with a fork, run the following command:

tenderly export init

CLI will ask you for your network's name and whether you are forking a public network. After choosing the right fork, your exporting will look something like this:

tenderly export <transactionHash> --export-network <networkName>

Note that tenderly.yaml file stores information about all networks that you initialized for exporting transactions. There can be multiple of them in a single file. You only need the --export-network if you have more than one network in your tenderly.yaml config!

A quick note on local contracts: if your local contracts are persisted in a place that Tenderly can find them, then they will also be uploaded as part of the local transaction export, which is one of the freshest features! We have added a call to tenderly.persistArtifacts() as part of the scaffold-eth deploy() script, which stores the contracts & meta-information in a deployments folder, so this should work out of the box.

Another pitfall when dealing with a local network (fork or not) is that you will not see the transaction hash if it fails. This happens because the hardhat detects an error while eth_estimateGas is executed. To prevent such behaviour, you can skip this estimation by passing a gasLimit override when making a call - an example of this is demonstrated in the FunctionForm.jsx file of the Contract component:

let overrides = {}
// Uncomment the next line if you want to skip the gas estimation for each transaction
// overrides.gasLimit = hexlify(1200000);
const returned = await tx(contractFunction(...args, overrides));

One gotcha - Tenderly does not (currently) support yarn workspaces, so any imported solidity contracts need to be local to packages/hardhat for your contracts to be exported. You can achieve this by using nohoist - this has been done for hardhat so that we can export console.sol - see the top-level package.json to see how!

"workspaces": {
  "packages": [
    "packages/*"
  ],
  "nohoist": [
    "**/hardhat",
    "**/hardhat/**"
  ]
}

---

🌐 Etherscan

Hardhat has a truly wonderful hardhat-etherscan plugin that takes care of contract verification after deployment. You need to add the following to your hardhat.config.js imports:

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

Then add your etherscan API key to the module.exports:

etherscan: {
  // Your API key for Etherscan
  // Obtain one at https://etherscan.io/
  apiKey: "YOUR-API-KEY-HERE"
}

Verifying is simple, assuming you are verifying a contract that you have just deployed from your hardhat setup - you just need to run the verify script, passing constructor arguments as an array if necessary (there is an example commented out in the deploy.js):

await run("verify:verify", {
  address: yourContract.address,
  // constructorArguments: args // If your contract has constructor arguments, you can pass them as an array
})

You only have to pass the contract because the plugin figures out which of the locally compiled contracts is the right one to verify. Pretty cool stuff!

---

🔶 Using Infura

You will need to update the constants.js in packages/react-app/src with your own Infura ID.

---

🟪 Blocknative

update the BLOCKNATIVE_DAPPID in packages/react-app/src/constants.js with your own Blocknative DappID

---

===================================================== ⏫ back to the top ⏫

---

---

📠 Legacy Content

🧫 Building on Ethereum in 2020 (research for this repo)

---

Tutorial 1: 🛠 Programming Decentralized Money

Learn the basics of 🏗 scaffold-eth and building on Ethereum. 👷‍♂️ HardHat, 📦 create-eth-app, 🔥 hot reloading smart contracts, 🛰 providers, 🔗 hooks, 🎛 components, and building a decentralized application. 🎥 Guided Tutorial

---

Tutorial 2: 🏵 The Token

Learn about tokens. [coming soon] What is a token? Why is it cool? How can I deploy one? Exotic mechanisms? (todo)

---

Tutorial 3: ⚖️ Minimum Viable Decentralized Exchange

Learn the basics of Automated Market Makers like 🦄 Uniswap. Learn how 💰Reserves affect the 📉 price, ⚖️ trading, and 💦 slippage from low liquidity.

🏃‍♀️ SpeedRun 📹

---

Tutorial 4: 🚀 Connecting ETH to IPFS

Build a simple IPFS application in 🏗 scaffold-eth to learn more about distributed file storage and content addressing. 🎥 Live Tutorial

---

Tutorial 5: ⛽️GSN and Meta Transactions

Learn about to provide your users with better UX by abstracting away gas fees and blockchain mechanics. (todo)

---

Tutorial 6: 🛰 Decentralized Deployment

Learn how to deploy your smart contract to a production blockchain. Then deploy your applicaton to Surge, S3, and IPFS. Finally, register an ENS and point it at the decentralized content! 🎥 Live Tutorial

---

💬 Support Chat

Join the telegram support chat 💬 to ask questions and find others building with 🏗 scaffold-eth!

---

===================================================== ⏫ back to the top ⏫

---