Skip to main content

The NFT Scaffold Project

Scaffold Details
ComplexityAdvanced
Automated TestsNo
Installed PluginsLIGO, Taquito, Flextesa, Contract Types, IPFS-Pinata
Frontend DappYes
Wallet IntegrationYes
Repositoryhttps://github.com/ecadlabs/taqueria-scaffold-nft
danger

The NFT-Scaffold project is currently in alpha. It is not ready for production use and will be undergoing frequent updates as we work to implement Taqueria State and other features that have not yet been released

Quickstart​

In a rush? You can follow the steps below to get up and running immediatley:

Scaffold and Initialize the Project​

  1. taq scaffold https://github.com/ecadlabs/taqueria-scaffold-nft nft-scaffold
  2. cd nft-scaffold
  3. npm run setup
  4. cd taqueria
  5. touch .env
  6. Get your Pinata JWT token from your Pinata account
  7. Insert the JWT from Pinata into the .env file echo "pinataJwtToken=eyJhbGc..." >> .env
  8. cd ..
  9. npm run start:taqueria:local
  10. npm run apply
  11. npm run start:app

Overview​

The NFT scaffold provides a minimal contract and react Dapp for publishing and viewing unique NFTs. This would be a good beginning point for an artist who wants to sell unique artpieces on their own website.

Requirements​

  • Taqueria v0.26.0 or later
  • Docker v20.10.12 or later
  • Node.js v16.16 or later. (v17.x.x or later is not supported)
  • Temple Wallet (can be found here)

Using the Project​

Adding Artwork Assets​

To add artwork and minting it's token:

  1. Add the artwork asset file (image, video, etc) to the assets directory
    • /taqueria/assets
    • Make sure to name the asset file with the next token id:
    • i.e. 0042.jpg
  2. Add a thumbnail image for the nft to the same assets directory
    • use the filename with the same token id with .thumb
    • the thumbnail image does not need to be the same file type as the main asset
    • i.e. 0042.thumb.png
  3. Publish the artwork asset to ipfs and mint the nft to the contract by running the provisioner
    • npm run apply
  4. Run the Dapp and the new nft should now be visible in the NFT List

Project Overview​

Scaffold the Project​

This project is available as a Taqueria scaffold. To create a new project from this scaffold, run the following command:

taq scaffold https://github.com/ecadlabs/taqueria-scaffold-nft nft-scaffold

This will clone the NFT scaffold project into a directory called nft-scaffold

Project Setup​

  1. Change into the /taqueria directory inside the newly created project directory:
cd nft-scaffold/taqueria
  1. Create the file .env inside the /taqueria directory
touch .env

  1. Get your Pinata JWT token from your Pinata account

  2. Add the token to the .env file you created:

echo "pinataJwtToken=eyJhbGc..." >> .env
  1. Go up a directory to start the local Taqueria project
cd ..
  1. Start the Taqueria project by running the start script:
npm run start:taqueria:local
note

Taqueria's provisioning system is work-in-progress. However, the provisioning system prototype will closely resemble the version that will be shipped with Taqueria later this year

  1. Apply the Provisions
npm run apply
  1. Start the dApp:
npm run start:app

Use the Dapp (served in your browser at http://localhost:3000) by connecting a wallet and using the web UI

Project Structure​

  • app

    • Minimal create react app
    • Call contract methods
    • Access contract storage

  • taqueria

    • Everything related to the contract
    • taqueria/.taq
      • Taqueria config folder, including setup for all required plugins
    • taqueria/contracts
      • The contract .ligo code
    • taqueria/artifacts
      • The compiled contract (*.tz file)
    • taqueria/types
      • The contract typescript typing
    • taqueria/assets
      • The NFT assets to upload

React Dapp​

The react Dapp allows browsing the NFTs that have been minted to the contract. This is a minimal react project and needs to be extended to support marketplace features like selling or browsing owned NFTs.

Build and Start the React Dapp​

Change into the /app directory:

cd app

Build the React dApp:

npm run build

Start and serve the dApp:

npm run start

You should now be able to access the NFT scaffold dApp at http://localhost:3000

Connect to Temple Wallet​

Open a browser and navigate to http://localhost:3000

Click on the Connect wallet button in the top right corner of the page and select Temple Wallet

Provide your credentials for the wallet, select a funded account, and click connect