Modify

The following steps will guide you through a modification of the Kitty Items project. You will add a new NFT kind, representing an exclusive collection of rare NFTs of sunglasses:

Video Walkthrough

Start in emulator

In the last step, you started the project on the testnet. For local development, however, it is recommended to emulate the blockchain network locally using the Flow Emulator. Once changes are implemented and tested locally, you will deploy the updates to the testnet.

Let's start the project in the emulator by running the command below in the root project folder.

Important: You will notice that the previous script execution finished once all services successfully started. You do not need to stop the previous process. By running the next command, existing services will be configured to communicate with the emulator instead of the testnet.

npm run dev:emulator

You should see similar logs as in the last step:

✔ Emulator started
ℹ Flow Emulator is running at: http://localhost:8080
ℹ View log output: npx pm2 logs emulator

✔ Developer Wallet started
ℹ FCL Dev Wallet running at: http://localhost:8701
ℹ View log output: npx pm2 logs dev-wallet

✔ Contracts deployed
ℹ Contracts were deployed to: 0xf8d6e0586b0a20c7 (emulator)

✔ Admin account initialized
ℹ ./cadence/transactions/nftStorefront/setup_account.cdc was executed successfully.
ℹ ./cadence/transactions/kittyItems/setup_account.cdc was executed successfully.

✔ API server started
ℹ Kitty Items API is running at: http://localhost:3000
ℹ View log output: npx pm2 logs api

✔ Storefront web app started
ℹ Kitty Items Web App is running at: http://localhost:3001
ℹ View log output: npx pm2 logs web

KITTY ITEMS HAS STARTED


Visit: http://localhost:3001

? Would you like to view the logs for all processes? (Y/n)

Once again, you will be asked if you want to show all logs. You can enter n for now.

You may notice that you were not prompted for an account. This is because the local setup includes a developer wallet that simulates user accounts.

Add new NFT collection

To add the new NFT collection, we will have to make changes to several components of the project:

• Backend API: Add the new collection to the list of available collections
• Web application: Define the new collection name and add it to the map of available collections
• Cadence: Define the new collection name, add it to the map of available collections, set the content hash for the images (stored on IPFS)

To start making your changes, it is recommended to open the project in a code editor like Visual Studio Code.

Recommended: Install the VSCode extension for Cadence to get syntax highlighting, type checking, and code completion support. If you have VSCode in your $PATH, you can use the CLI to install the extension: flow cadence install-vscode-extension.

Update the backend API

Open the file /api/src/services/kitty-items.ts and add new element (Shades) at the bottom of the Kind enum:

enum Kind {
  Fishbowl = 0,
  Fishhat,
  Milkshake,
  TukTuk,
  Skateboard,
  Shades
}

Update the web application

Open the file /web/src/global/constants.js and add a new item (Shades) to the ITEM_KIND_MAP constant:

export const ITEM_KIND_MAP = {
  0: "Fishbowl",
  1: "Fish Hat",
  2: "Milkshake",
  3: "TukTuk",
  4: "Skateboard",
  5: "Shades",
};

Note: To simplify this tutorial, we already added the images for the NFT collection to the project folder. If you were to add new NFTs on your own, you would also need to add images to the web/public/images/kitty-items folder.

Update the Cadence smart contract

Open the /cadence/contracts/KittyItems.cdc file and make the following changes.

Add a new kind

Locate the enum Kind object and add a new case (shades) to the bottom of the list:

pub enum Kind: UInt8 {
    pub case fishbowl
    pub case fishhat
    pub case milkshake
    pub case tuktuk
    pub case skateboard
    pub case shades
}

Update the kindToString method

This method is used to set the name and description of a specified NFT. Locate the the kindToString method and add a new case (Kind.shades) to the bottom of the switch statement:

pub fun kindToString(_ kind: Kind): String {
    switch kind {
        case Kind.fishbowl:
            return "Fishbowl"
        case Kind.fishhat:
            return "Fish Hat"
        case Kind.milkshake:
            return "Milkshake"
        case Kind.tuktuk:
            return "Tuk-Tuk"
        case Kind.skateboard:
            return "Skateboard"
        case Kind.shades:
            return "Shades"
    }

    return ""
}

Create a transaction to update the list of images for your new kind

Next, you need to create a transaction to update the contract with new links to the images for the new NFT kind.

Note: You can't modify the list of images in the init() function directly because this function only runs the first time your contract is deployed - not on subsequent updates. You can read more about here.

In the root directory of the project, run the following commands to create a new file for the transaction:

touch cadence/transactions/kittyItems/add_nft_images_for_new_kind.cdc

Navigate to the new file, open it, and paste the following code:

import KittyItems from "../../contracts/KittyItems.cdc"

// This transction uses the NFTMinter resource to add new image URIs for a new Kind of KittyItems NFT.

transaction {

  let minter: &KittyItems.NFTMinter

  prepare(signer: AuthAccount) {

    self.minter = signer.borrow<&KittyItems.NFTMinter>(from: KittyItems.MinterStoragePath)
            ?? panic("Only authorized KittyItems NFT Minter can update KittyItems NFT...")

    let NewImages: { KittyItems.Kind: {KittyItems.Rarity: String}} = {

      // The image URIs are hardcoded here for demonstration,
      // but could also be passed in to the transaction as arguments.

      KittyItems.Kind.shades: {
        KittyItems.Rarity.blue: "bafybeibtxvitlnvksnzwrwmsqdgnoznosknr3fx5jxjazjcerpa2qo4jy4",
        KittyItems.Rarity.green: "bafybeicp5bagsziwkyarey76m5jkr6i3a5yrgr7r435qyuutbtlqxcdbwu",
        KittyItems.Rarity.purple: "bafybeidjigkvt67dtuwrgrpdt2z4dojq2efpbw66ndnffkb6eyr4baml2i",
        KittyItems.Rarity.gold: "bafybeibtxvitlnvksnzwrwmsqdgnoznosknr3fx5jxjazjcerpa2qo4jy4"
      }
    }

    self.minter.addNewImagesForKind(from: signer, newImages: NewImages);

  }

  // the FLOAT NFT secret code is: witty-kitty
  execute {}
}

This transaction borrows the minter Resource from the signing account and calls the addNewImagesForKind method on the minter Resource. It passes a struct containing the links to the new images for the shades kind.

Note: If the signing account does not have the minter Resource, this transaction will fail. This is good, because we only want the account that mints NFTs to be able to modify the contract. Also keep in mind, that if you were to add your own NFT, you would have to upload images to IPFS and store the new hashes instead.

Make sure you saved the file before proceeding to the next step.

Update contract on the emulator

Because you changed the smart contract for Kitty Items, you have to redeploy it to the emulator. Run the following command in your terminal, inside the root folder.

Note: You will notice that the previous script execution finished once all services successfully started. You do not need to stop the previous process. You can run the next command in the same terminal without impact on the services running in the background.

npm run update:emulator

The script will update all contracts included in the project. The last one is the one you changed.

Deploying 4 contracts for accounts: emulator-account

NonFungibleToken -> 0xf8d6e0586b0a20c7 (3346...6218)
NFTStorefront -> 0xf8d6e0586b0a20c7 (c0e6...662b)
MetadataViews -> 0xf8d6e0586b0a20c7 (e6c2...ef11)
KittyItems -> 0xf8d6e0586b0a20c7 (3612...dcdb)

✨ All contracts deployed successfully

Run the new transaction to update the KittyItems contract

Run the following command to send the transaction to update the contract with the new shades images.

flow transactions send ./cadence/transactions/kittyItems/add_nft_images_for_new_kind.cdc -n emulator

You should see the following response. Take note of the Status - it should be ✅ SEALED.

Transaction ID: af76f20581a3923375fd52428cef078670673295c9d786a8ac9e616661a7f88e

Status          ✅ SEALED
ID              af76f20581a3923375fd52428cef078670673295c9d786a8ac9e616661a7f88e
Payer           f8d6e0586b0a20c7
Authorizers     [f8d6e0586b0a20c7]

Proposal Key:
    Address     f8d6e0586b0a20c7
    Index       0
    Sequence    15

No Payload Signatures

Envelope Signature 0: f8d6e0586b0a20c7
Signatures (minimized, use --include signatures)

Events:
    Index       0
    Type        A.f8d6e0586b0a20c7.KittyItems.ImagesAddedForNewKind
    Tx ID       af76f20581a3923375fd52428cef078670673295c9d786a8ac9e616661a7f88e
    Values
                - kind (UInt8): 5

As indicated, the transaction was sealed and you are ready to mint your new KittyItems NFT.

Congratulations! You have completed all changes and your project now includes a new NFT collection for sunglasses.

Mint new sunglasses NFT

To mint one of the new NFTs in your local environment, you have to repeat the minting steps from the last page.

First, open the Kitty Items admin dashboard. Keep in mind that the password is KittyItems.

Now, hit the "Mint Item" button and see a new NFT being generated. The generation of new NFTs is randomized, so you will have to mint a few new NFTs until you will see an NFT from your new sunglasses collection.

During the minting process, you should see the sunglasses flash in the preview pane on the left side of the screen.

Note: It is best to hit the back button in your browser to get back to the "Mint a New Item" screen. You can jump to this screen by opening the admin dashboard directly.